/* Sections A: shared helpers, Topbar, Hero (HITL mock), Demo, Stats */
const {useState,useEffect,useRef,useCallback} = React;
const ReactDOM = window.ReactDOM;
const DS = window.BoraADSDesignSystem_ed15fe;
const {Button,Badge,Chip} = DS;
const APP = "https://app.boraads.com.br";
const LOGO_DARK = "/lp/assets/boraads-logo-dark.svg";
const LOGO_LIGHT = "/lp/assets/boraads-logo-light.svg";
const DEMO_VIDEO = "/boraadsintroducao-FINAL-web.mp4";
const DEMO_POSTER = "/boraads-demo-poster.jpg?v=2";

const LI = (d,s=14)=><svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d={d}/></svg>;
const P = {
  check:"M20 6 9 17l-5-5", arrow:"M5 12h14M12 5l7 7-7 7", play:"M6 4l14 8-14 8z",
  shield:"M12 22s8-3 8-10V5l-8-3-8 3v7c0 7 8 10 8 10z", zap:"M13 2 3 14h9l-1 8 10-12h-9l1-8",
  clock:"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM12 6v6l4 2", ban:"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM4.9 4.9l14.2 14.2",
  bar:"M3 3v18h18M7 16v-5M12 16V8M17 16v-9", file:"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M9 13h6M9 17h4",
  search:"M11 11m-8 0a8 8 0 1 0 16 0a8 8 0 1 0-16 0M21 21l-4.3-4.3", panel:"M3 9h18M9 21V9M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z",
  swords:"M14.5 17.5 3 6V3h3l11.5 11.5M13 19l6-6M16 16l4 4M19 21l2-2",
  target:"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM12 6a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM12 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4z",
  cart:"M8 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM19 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM2 3h2l2.4 12.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H5",
  cal:"M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z",
  lock:"M5 11h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2zM7 11V7a5 5 0 0 1 10 0v4",
  eye:"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7zM12 12m-3 0a3 3 0 1 0 6 0 3 3 0 1 0-6 0",
  layers:"M12 2 2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5",
  db:"M12 2C7.6 2 4 3.3 4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5c0-1.7-3.6-3-8-3zM4 5c0 1.7 3.6 3 8 3s8-1.3 8-3M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3",
  users:"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75",
  user:"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8z",
  home:"M3 9.5 12 3l9 6.5V21a1 1 0 0 1-1 1h-5v-7h-6v7H4a1 1 0 0 1-1-1V9.5",
  store:"M2 7l2-4h16l2 4M2 7v2a3 3 0 0 0 6 0V7m0 0v2a3 3 0 0 0 6 0V7m0 0v2a3 3 0 0 0 6 0V7M4 12v9h16v-9",
  msg:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",
  key:"M21 2l-2 2m-7.6 7.6a5.5 5.5 0 1 1-7.8 7.8 5.5 5.5 0 0 1 7.8-7.8zm0 0L19 4m-3.5 3.5L18 10",
  spark:"M9.94 14.06 3 21M14.06 9.94 21 3M12 3v2M12 19v2M9.5 9.5 12 12l2.5-2.5",
  plus:"M12 5v14M5 12h14",
  moon:"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z",
  sun:"M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z",
  scale:"M12 3v18M8 21h8M7 7l-4 6a4 4 0 0 0 8 0L7 7zM17 7l-4 6a4 4 0 0 0 8 0l-4-6M4 7h16",
  menu:"M4 7h16M4 12h16M4 17h16",
  x:"M18 6 6 18M6 6l12 12"
};

/* reveal-on-scroll — `in` lives in React state so re-renders (FAQ open,
   step activation) don't wipe an imperatively-added class */
function Reveal({as:Tag="div",cls="",d=0,dir="",children,...rest}){
  const ref=useRef(null);
  const [shown,setShown]=useState(false);
  useEffect(()=>{
    if(shown)return;
    const el=ref.current;if(!el)return;
    const io=new IntersectionObserver(([e])=>{if(e.isIntersecting){setShown(true);io.disconnect();}},{threshold:.15,rootMargin:"0px 0px -40px 0px"});
    io.observe(el);return()=>io.disconnect();
  },[shown]);
  return <Tag ref={ref} className={`rv ${dir?`rv-${dir}`:""} ${cls} ${shown?"in":""}`} style={{"--d":d+"ms"}} {...rest}>{children}</Tag>;
}

/* animated counter */
function CountUp({to,prefix="",suffix="",dur=1400,dec=0}){
  const ref=useRef(null);const [v,setV]=useState(0);const started=useRef(false);
  useEffect(()=>{
    const el=ref.current;if(!el)return;
    const io=new IntersectionObserver(([e])=>{
      if(e.isIntersecting&&!started.current){started.current=true;io.disconnect();
        const t0=performance.now();
        const tick=(t)=>{const p=Math.min(1,(t-t0)/dur);const ease=1-Math.pow(1-p,3);setV(to*ease);if(p<1)requestAnimationFrame(tick);};
        requestAnimationFrame(tick);}
    },{threshold:.4});
    io.observe(el);return()=>io.disconnect();
  },[to,dur]);
  return <span ref={ref}>{prefix}{v.toLocaleString("pt-BR",{minimumFractionDigits:dec,maximumFractionDigits:dec})}{suffix}</span>;
}

/* Magic UI Animated Shiny Text — https://magicui.design/docs/components/animated-shiny-text */
function AnimatedShinyText({children,className="",shimmerWidth=100,...rest}){
  return <span
    className={`shiny-text ${className}`}
    style={{"--shiny-width":`${shimmerWidth}px`}}
    {...rest}
  >{children}</span>;
}

function SectionHead({eyebrow,title,children,center}){
  return <div className={`sec-head${center?" sec-head--center":""}`}>
    {eyebrow&&<Reveal as="p" cls="eyebrow"><AnimatedShinyText>{eyebrow}</AnimatedShinyText></Reveal>}
    <Reveal as="h2" cls="h2" d={60}>{title}</Reveal>
    {children&&<Reveal as="p" cls="lead" d={120}>{children}</Reveal>}
  </div>;
}

/* Magic UI Aurora Text — https://magicui.design/docs/components/aurora-text */
function AuroraText({
  children,
  className="",
  colors=["#4D8DFF","#38bdf8","#0070F3","#7dd3fc"],
  speed=1,
}){
  const gradientStyle={
    backgroundImage:`linear-gradient(135deg, ${colors.join(", ")}, ${colors[0]})`,
    WebkitBackgroundClip:"text",
    WebkitTextFillColor:"transparent",
    animationDuration:`${10/speed}s`,
  };
  return <span className={`aurora-text ${className}`}>
    <span className="sr-only">{children}</span>
    <span className="aurora-text-fx" style={gradientStyle} aria-hidden="true">{children}</span>
  </span>;
}

/* Magic UI Shimmer Button — https://magicui.design/docs/components/shimmer-button */
function ShimmerButton({
  children,href,className="",size="lg",variant="primary",
  shimmerColor,shimmerSize="0.05em",shimmerDuration="3s",
  borderRadius="10px",background,icon,iconRight,...rest
}){
  const Tag=href?"a":"button";
  const isSec=variant==="secondary";
  return <Tag
    href={href}
    className={`shimmer-btn shimmer-btn-${size} ${isSec?"shimmer-btn-secondary":""} ${className}`}
    style={{
      "--spread":"90deg",
      "--shimmer-color":shimmerColor||(isSec?"var(--acc)":"#ffffff"),
      "--radius":borderRadius,
      "--speed":shimmerDuration,
      "--cut":shimmerSize,
      "--bg":background||(isSec?"var(--bg-2)":"var(--acc)"),
    }}
    {...rest}
  >
    <span className="shimmer-btn-spark" aria-hidden="true">
      <span className="shimmer-btn-slide"><span className="shimmer-btn-spin"/></span>
    </span>
    <span className="shimmer-btn-content">{icon}{children}{iconRight}</span>
    <span className="shimmer-btn-highlight" aria-hidden="true"/>
    <span className="shimmer-btn-backdrop" aria-hidden="true"/>
  </Tag>;
}

/* Magic UI Animated Theme Toggler — https://magicui.design/docs/components/animated-theme-toggler
   Adaptado pra data-theme (boraADS). Default: dark. */
function polygonCollapsed(point,vertexCount){
  return `polygon(${Array.from({length:vertexCount},()=>point).join(", ")})`;
}
function getThemeTransitionClipPaths(variant,cx,cy,maxRadius,vw,vh){
  const toX=(x)=>`${(x/vw)*100}%`;
  const toY=(y)=>`${(y/vh)*100}%`;
  const point=(x,y)=>`${toX(x)} ${toY(y)}`;
  const toRadius=(r)=>`${(r/(Math.hypot(vw,vh)/Math.SQRT2))*100}%`;
  if(variant==="circle"){
    return [`circle(0% at ${point(cx,cy)})`,`circle(${toRadius(maxRadius)} at ${point(cx,cy)})`];
  }
  if(variant==="diamond"){
    const R=maxRadius*Math.SQRT2;
    const end=[point(cx,cy-R),point(cx+R,cy),point(cx,cy+R),point(cx-R,cy)].join(", ");
    return [polygonCollapsed(point(cx,cy),4),`polygon(${end})`];
  }
  if(variant==="star"){
    const R=maxRadius*Math.SQRT2*1.03;
    const inner=0.42;
    const star=(radius)=>{
      const verts=[];
      for(let i=0;i<5;i++){
        const oa=-Math.PI/2+(i*2*Math.PI)/5;
        verts.push(point(cx+radius*Math.cos(oa),cy+radius*Math.sin(oa)));
        const ia=oa+Math.PI/5;
        verts.push(point(cx+radius*inner*Math.cos(ia),cy+radius*inner*Math.sin(ia)));
      }
      return `polygon(${verts.join(", ")})`;
    };
    return [star(Math.max(2,R*0.025)),star(R)];
  }
  // default circle
  return [`circle(0% at ${point(cx,cy)})`,`circle(${toRadius(maxRadius)} at ${point(cx,cy)})`];
}
function AnimatedThemeToggler({
  className="",duration=450,variant="circle",fromCenter=false,
  theme,onThemeChange,...props
}){
  const isControlled=theme!==undefined;
  const [internalDark,setInternalDark]=useState(()=>(document.documentElement.dataset.theme||"dark")!=="light");
  const isDark=isControlled?theme==="dark":internalDark;
  const buttonRef=useRef(null);
  const busy=useRef(false);

  useEffect(()=>{
    if(isControlled)return;
    const sync=()=>setInternalDark((document.documentElement.dataset.theme||"dark")!=="light");
    sync();
    const mo=new MutationObserver(sync);
    mo.observe(document.documentElement,{attributes:true,attributeFilter:["data-theme"]});
    return()=>mo.disconnect();
  },[isControlled]);

  const toggleTheme=useCallback(()=>{
    const button=buttonRef.current;
    if(!button||busy.current||document.documentElement.dataset.magicuiThemeVt==="active")return;
    const vw=window.innerWidth,vh=window.innerHeight;
    let x,y;
    if(fromCenter){x=vw/2;y=vh/2;}
    else{
      const r=button.getBoundingClientRect();
      x=r.left+r.width/2;y=r.top+r.height/2;
    }
    const maxRadius=Math.hypot(Math.max(x,vw-x),Math.max(y,vh-y));
    const applyTheme=()=>{
      const next=isDark?"light":"dark";
      document.documentElement.dataset.theme=next;
      if(isControlled) onThemeChange?.(next);
      else{
        setInternalDark(next==="dark");
        try{localStorage.setItem("boraads-theme",next);}catch(e){}
      }
    };
    if(typeof document.startViewTransition!=="function"){
      applyTheme();
      return;
    }
    const clipPath=getThemeTransitionClipPaths(variant,x,y,maxRadius,vw,vh);
    const root=document.documentElement;
    root.dataset.magicuiThemeVt="active";
    root.style.setProperty("--magicui-theme-toggle-vt-duration",`${duration}ms`);
    root.style.setProperty("--magicui-theme-vt-clip-from",clipPath[0]);
    const cleanup=()=>{
      busy.current=false;
      delete root.dataset.magicuiThemeVt;
      root.style.removeProperty("--magicui-theme-toggle-vt-duration");
      root.style.removeProperty("--magicui-theme-vt-clip-from");
    };
    busy.current=true;
    const flush=ReactDOM.flushSync||((fn)=>fn());
    const transition=document.startViewTransition(()=>{flush(applyTheme);});
    if(transition?.finished?.finally) transition.finished.finally(cleanup).catch(()=>{});
    else cleanup();
    transition?.ready?.then?.(()=>{
      document.documentElement.animate(
        {clipPath},
        {
          duration,
          easing:variant==="star"?"linear":"ease-in-out",
          fill:"forwards",
          pseudoElement:"::view-transition-new(root)",
        }
      );
    }).catch?.(()=>{});
  },[variant,fromCenter,duration,isDark,isControlled,onThemeChange]);

  return (
    <button
      type="button"
      ref={buttonRef}
      className={`lp-theme ${className}`.trim()}
      onClick={toggleTheme}
      title="Alternar tema"
      aria-label="Alternar tema"
      {...props}
    >
      {isDark?LI(P.sun,15):LI(P.moon,15)}
    </button>
  );
}

/* ---- Topbar ---- */
function LpTopbar(){
  const [sc,setSc]=useState(false);
  const [menuOpen,setMenuOpen]=useState(false);
  const [theme,setTheme]=useState(()=>document.documentElement.dataset.theme||"dark");
  useEffect(()=>{
    const f=()=>setSc(window.scrollY>8);
    f();
    window.addEventListener("scroll",f,{passive:true});
    return()=>window.removeEventListener("scroll",f);
  },[]);
  useEffect(()=>{
    document.body.classList.toggle("lp-menu-open",menuOpen);
    return()=>document.body.classList.remove("lp-menu-open");
  },[menuOpen]);
  useEffect(()=>{
    const onKey=(e)=>{if(e.key==="Escape") setMenuOpen(false);};
    window.addEventListener("keydown",onKey);
    return()=>window.removeEventListener("keydown",onKey);
  },[]);
  const onThemeChange=(next)=>{
    document.documentElement.dataset.theme=next;
    setTheme(next);
    try{localStorage.setItem("boraads-theme",next);}catch(e){}
  };
  const nav=[["Agentes","#agentes"],["Campaign Builder","#builder"],["MCP","#mcp"],["Como funciona","#como-funciona"],["Segurança","#seguranca"],["Planos","#planos"],["FAQ","#faq"]];
  const go=(h)=>{setMenuOpen(false);};
  return <header className={`lp-top ${sc||menuOpen?"scrolled":""} ${menuOpen?"menu-open":""}`}>
    <div className="lp-top-in">
      <a href="/" className="lp-logo" onClick={()=>setMenuOpen(false)}><img src={theme==="light"?LOGO_LIGHT:LOGO_DARK} alt="boraADS"/></a>
      <nav className="lp-nav" aria-label="Principal">{nav.map(([l,h])=><a key={h} href={h}>{l}</a>)}</nav>
      <div className="lp-top-cta">
        <AnimatedThemeToggler theme={theme} onThemeChange={onThemeChange} duration={480} variant="circle"/>
        <a className="btn btn-ghost lp-login" href={`${APP}/login`}>Entrar</a>
        <ShimmerButton size="md" href={`${APP}/signup`} className="lp-signup"><span className="lp-signup-full">Testar 7 dias grátis</span><span className="lp-signup-short">Testar grátis</span></ShimmerButton>
        <button type="button" className="lp-burger" aria-label={menuOpen?"Fechar menu":"Abrir menu"} aria-expanded={menuOpen} aria-controls="lp-mobile-nav" onClick={()=>setMenuOpen(v=>!v)}>
          {LI(menuOpen?P.x:P.menu,18)}
        </button>
      </div>
    </div>
    <div id="lp-mobile-nav" className={`lp-drawer ${menuOpen?"open":""}`} aria-hidden={!menuOpen}>
      <nav className="lp-drawer-nav" aria-label="Mobile">
        {nav.map(([l,h])=><a key={h} href={h} onClick={()=>go(h)}>{l}</a>)}
      </nav>
      <div className="lp-drawer-cta">
        <a className="btn btn-ghost lp-drawer-login" href={`${APP}/login`}>Entrar</a>
        <ShimmerButton size="lg" href={`${APP}/signup`} className="shimmer-btn-block">Testar 7 dias grátis</ShimmerButton>
      </div>
    </div>
  </header>;
}

/* ---- Hero HITL mock ---- */
const MOCK_PROPS=[
  {agentCode:"NK",agentName:"Negative Keyword Finder",accountName:"Clínica Vitalle",accountCustomerId:"7841203956",id:"a1f2",title:'Negativar "curso de estética gratuito" e mais 13 termos',description:"Search terms sem conversão consumindo budget nos últimos 30 dias.",diff:[{type:"del",text:'"curso de estética gratuito" · R$ 412/mês · 0 conv'},{type:"add",text:'14 negativas de correspondência exata na campanha Search'}],impact:{spend:-1240,confidence:.93},guardrails:{passed:4,total:4},save:1240},
  {agentCode:"AC",agentName:"Ad Copy Analyst",accountName:"TechFix Assistência",accountCustomerId:"3390871244",id:"b7c3",title:"Trocar headline estagnada no grupo 'Conserto iPhone'",description:"RSA com CTR 1,1% há 4 meses; headline pinada trava o leilão.",diff:[{type:"del",text:'H1: "Assistência técnica de confiança"'},{type:"add",text:'H1: "Conserto de iPhone em 40 min · Orçamento na hora"'}],impact:{spend:-380,confidence:.87},guardrails:{passed:4,total:4},save:380},
  {agentCode:"PM",agentName:"PMAX Advisor",accountName:"Loja Aurora Home",accountCustomerId:"5512094873",id:"c9d1",title:"Excluir 6 canais de display sem conversão na PMax",description:"Placements de app queimando verba sem uma única conversão em 60 dias.",diff:[{type:"del",text:"6 placements mobile app · R$ 890 · 0 conv"},{type:"add",text:"Exclusão de placement no asset group principal"}],impact:{spend:-890,confidence:.91},guardrails:{passed:4,total:4},save:890}
];

function HeroMock(){
  const {ProposalCard}=DS;
  const [idx,setIdx]=useState(0);
  const [status,setStatus]=useState("pending");
  const [anim,setAnim]=useState("enter");
  const [saved,setSaved]=useState(0);
  const [cur,setCur]=useState({x:"84%",y:"78%",on:false,click:false});
  useEffect(()=>{
    let alive=true;const ts=[];
    const at=(ms,fn)=>ts.push(setTimeout(()=>{if(alive)fn();},ms));
    setAnim("enter");setStatus("pending");
    at(60,()=>setAnim(""));
    at(1500,()=>setCur({x:"62%",y:"84%",on:true,click:false}));
    at(2300,()=>setCur({x:"62%",y:"84%",on:true,click:true}));
    at(2550,()=>{setStatus("executing");setCur(c=>({...c,on:false,click:false}));});
    at(4300,()=>{setStatus("executed");setSaved(s=>s+MOCK_PROPS[idx].save);});
    at(6200,()=>setAnim("out"));
    at(6600,()=>setIdx(i=>(i+1)%MOCK_PROPS.length));
    return()=>{alive=false;ts.forEach(clearTimeout);};
  },[idx]);
  const p=MOCK_PROPS[idx];
  return <div className="mock">
    <div className="mock-frame">
      <div className="mock-head">
        {LI(P.shield,14)}<span className="ttl">Fila de aprovação</span>
        <span className="live"><Badge variant="pos" pulse>ao vivo</Badge></span>
      </div>
      <div className="mock-body">
        <div className={`mock-card ${anim}`}>
          <ProposalCard agentCode={p.agentCode} agentName={p.agentName} accountName={p.accountName} accountCustomerId={p.accountCustomerId} id={p.id} title={p.title} description={p.description} age="agora" diff={p.diff} impact={p.impact} guardrails={p.guardrails} status={status} canAct={status==="pending"}/>
        </div>
        <div className="cursor-dot" style={{left:cur.x,top:cur.y}} data-on={cur.on} data-click={cur.click} ref={el=>{if(el){el.className=`cursor-dot ${cur.on?"on":""} ${cur.click?"click":""}`;}}}></div>
      </div>
      <div className="mock-foot">
        {LI(P.check,12)}<span>nada aplica sem o seu aval</span>
        <span className="sum">R$ <CountUpLive value={saved}/> /mês recuperados</span>
      </div>
    </div>
  </div>;
}
function CountUpLive({value}){
  const [v,setV]=useState(0);const prev=useRef(0);
  useEffect(()=>{
    const from=prev.current;prev.current=value;const t0=performance.now();
    let raf;const tick=t=>{const p=Math.min(1,(t-t0)/700);setV(Math.round(from+(value-from)*(1-Math.pow(1-p,3))));if(p<1)raf=requestAnimationFrame(tick);};
    raf=requestAnimationFrame(tick);return()=>cancelAnimationFrame(raf);
  },[value]);
  return <b>{v.toLocaleString("pt-BR")}</b>;
}

/* Magic UI Particles — https://magicui.design/docs/components/particles */
function hexToRgb(hex){
  let h=String(hex||"#ffffff").replace("#","");
  if(h.length===3) h=h.split("").map(c=>c+c).join("");
  const n=parseInt(h,16);
  return [(n>>16)&255,(n>>8)&255,n&255];
}
function useMousePosition(){
  const [pos,setPos]=useState({x:0,y:0});
  useEffect(()=>{
    const onMove=(e)=>setPos({x:e.clientX,y:e.clientY});
    window.addEventListener("mousemove",onMove,{passive:true});
    return()=>window.removeEventListener("mousemove",onMove);
  },[]);
  return pos;
}
function Particles({
  className="",quantity=100,staticity=50,ease=50,size=0.4,
  refresh=false,color="#ffffff",vx=0,vy=0,
}){
  const containerRef=useRef(null);
  const canvasRef=useRef(null);
  const ctxRef=useRef(null);
  const circlesRef=useRef([]);
  const mouseRef=useRef({x:0,y:0});
  const sizeRef=useRef({w:0,h:0});
  const rafRef=useRef(null);
  const mouse=useMousePosition();
  const dpr=typeof window!=="undefined"?Math.min(window.devicePixelRatio||1,2):1;
  const rgb=hexToRgb(color);
  const reduced=typeof window!=="undefined"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  useEffect(()=>{
    const canvas=canvasRef.current;
    if(!canvas)return;
    ctxRef.current=canvas.getContext("2d");
  },[]);

  useEffect(()=>{
    const canvas=canvasRef.current;
    if(!canvas||!sizeRef.current.w)return;
    const rect=canvas.getBoundingClientRect();
    const {w,h}=sizeRef.current;
    const x=mouse.x-rect.left-w/2;
    const y=mouse.y-rect.top-h/2;
    if(x<w/2&&x>-w/2&&y<h/2&&y>-h/2){
      mouseRef.current.x=x;
      mouseRef.current.y=y;
    }
  },[mouse.x,mouse.y]);

  useEffect(()=>{
    if(reduced)return;
    const container=containerRef.current;
    const canvas=canvasRef.current;
    if(!container||!canvas)return;
    const ctx=canvas.getContext("2d");
    if(!ctx)return;
    ctxRef.current=ctx;

    const circleParams=()=>{
      const w=sizeRef.current.w,h=sizeRef.current.h;
      return {
        x:Math.floor(Math.random()*Math.max(1,w)),
        y:Math.floor(Math.random()*Math.max(1,h)),
        translateX:0,translateY:0,
        size:Math.floor(Math.random()*2)+size,
        alpha:0,
        targetAlpha:parseFloat((Math.random()*0.6+0.1).toFixed(1)),
        dx:(Math.random()-0.5)*0.1,
        dy:(Math.random()-0.5)*0.1,
        magnetism:0.1+Math.random()*4,
      };
    };
    const drawCircle=(circle,update=false)=>{
      const c=ctxRef.current;if(!c)return;
      const {x,y,translateX,translateY,size:s,alpha}=circle;
      c.translate(translateX,translateY);
      c.beginPath();
      c.arc(x,y,s,0,Math.PI*2);
      c.fillStyle=`rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`;
      c.fill();
      c.setTransform(dpr,0,0,dpr,0,0);
      if(!update) circlesRef.current.push(circle);
    };
    const remap=(value,start1,end1,start2,end2)=>{
      const v=((value-start1)*(end2-start2))/(end1-start1)+start2;
      return v>0?v:0;
    };
    const resize=()=>{
      const c=ctxRef.current;if(!c)return;
      const w=container.offsetWidth||container.clientWidth;
      const h=container.offsetHeight||container.clientHeight;
      if(w<2||h<2)return;
      sizeRef.current.w=w;
      sizeRef.current.h=h;
      canvas.width=w*dpr;
      canvas.height=h*dpr;
      canvas.style.width=w+"px";
      canvas.style.height=h+"px";
      c.setTransform(dpr,0,0,dpr,0,0);
      circlesRef.current=[];
      for(let i=0;i<quantity;i++) drawCircle(circleParams());
    };
    const animate=()=>{
      const c=ctxRef.current;
      if(!c)return;
      c.clearRect(0,0,sizeRef.current.w,sizeRef.current.h);
      circlesRef.current.forEach((circle,i)=>{
        const edge=[
          circle.x+circle.translateX-circle.size,
          sizeRef.current.w-circle.x-circle.translateX-circle.size,
          circle.y+circle.translateY-circle.size,
          sizeRef.current.h-circle.y-circle.translateY-circle.size,
        ];
        const closest=edge.reduce((a,b)=>Math.min(a,b));
        const remapEdge=parseFloat(remap(closest,0,20,0,1).toFixed(2));
        if(remapEdge>1){
          circle.alpha+=0.02;
          if(circle.alpha>circle.targetAlpha) circle.alpha=circle.targetAlpha;
        }else{
          circle.alpha=circle.targetAlpha*remapEdge;
        }
        circle.x+=circle.dx+vx;
        circle.y+=circle.dy+vy;
        circle.translateX+=(mouseRef.current.x/(staticity/circle.magnetism)-circle.translateX)/ease;
        circle.translateY+=(mouseRef.current.y/(staticity/circle.magnetism)-circle.translateY)/ease;
        drawCircle(circle,true);
        if(
          circle.x<-circle.size||circle.x>sizeRef.current.w+circle.size||
          circle.y<-circle.size||circle.y>sizeRef.current.h+circle.size
        ){
          circlesRef.current.splice(i,1);
          drawCircle(circleParams());
        }
      });
      rafRef.current=requestAnimationFrame(animate);
    };

    let resizeTimer=null;
    const onResize=()=>{
      clearTimeout(resizeTimer);
      resizeTimer=setTimeout(resize,180);
    };
    resize();
    rafRef.current=requestAnimationFrame(animate);
    window.addEventListener("resize",onResize);
    return()=>{
      window.removeEventListener("resize",onResize);
      clearTimeout(resizeTimer);
      if(rafRef.current!=null) cancelAnimationFrame(rafRef.current);
      circlesRef.current=[];
    };
  },[color,quantity,staticity,ease,size,refresh,vx,vy,dpr,rgb[0],rgb[1],rgb[2],reduced]);

  return <div ref={containerRef} className={`lp-particles ${className}`} aria-hidden="true">
    <canvas ref={canvasRef}/>
  </div>;
}

/* Magic UI Animated Grid Pattern — https://magicui.design/docs/components/animated-grid-pattern */
function AnimatedGridPattern({
  width=40,height=40,x=-1,y=-1,strokeDasharray=0,
  numSquares=30,maxOpacity=.1,duration=3,repeatDelay=1,className="",
}){
  const uid=useRef("agp-"+Math.random().toString(36).slice(2,9)).current;
  const ref=useRef(null);
  const [dimensions,setDimensions]=useState({width:0,height:0});
  const [squares,setSquares]=useState([]);
  const getPos=useCallback(()=>{
    const cols=Math.max(1,Math.floor(dimensions.width/width));
    const rows=Math.max(1,Math.floor(dimensions.height/height));
    return [Math.floor(Math.random()*cols),Math.floor(Math.random()*rows)];
  },[dimensions.height,dimensions.width,height,width]);
  useEffect(()=>{
    const el=ref.current;if(!el||!window.ResizeObserver)return;
    const ro=new ResizeObserver((entries)=>{
      for(const entry of entries){
        setDimensions({width:entry.contentRect.width,height:entry.contentRect.height});
      }
    });
    ro.observe(el);
    return()=>ro.disconnect();
  },[]);
  useEffect(()=>{
    if(!dimensions.width||!dimensions.height)return;
    setSquares(Array.from({length:numSquares},(_,i)=>({id:i,pos:getPos(),iteration:0})));
  },[dimensions.width,dimensions.height,getPos,numSquares]);
  const onDone=(squareId)=>{
    setTimeout(()=>{
      setSquares((cur)=>{
        const current=cur[squareId];
        if(!current||current.id!==squareId)return cur;
        const next=cur.slice();
        next[squareId]={...current,pos:getPos(),iteration:current.iteration+1};
        return next;
      });
    },repeatDelay*1000);
  };
  return <svg
    ref={ref}
    aria-hidden="true"
    className={`agp ${className}`}
    style={{"--agp-op":maxOpacity,"--agp-dur":`${duration}s`}}
  >
    <defs>
      <pattern id={uid} width={width} height={height} patternUnits="userSpaceOnUse" x={x} y={y}>
        <path d={`M.5 ${height}V.5H${width}`} fill="none" strokeDasharray={strokeDasharray}/>
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill={`url(#${uid})`}/>
    <svg x={x} y={y} className="agp-squares" overflow="visible">
      {squares.map(({pos:[sx,sy],id,iteration},index)=>
        <rect
          key={`${id}-${iteration}`}
          className="agp-square"
          width={width-1}
          height={height-1}
          x={sx*width+1}
          y={sy*height+1}
          style={{animationDelay:`${index*.1}s`}}
          onAnimationEnd={()=>onDone(id)}
        />)}
    </svg>
  </svg>;
}

function Hero(){
  return <section className="hero">
    <AnimatedGridPattern
      numSquares={30}
      maxOpacity={0.12}
      duration={3}
      repeatDelay={1}
      className="hero-agp"
    />
    <div className="wrap hero-grid">
      <div>
        <Reveal><span className="hero-badge"><span className="tag">Novo</span><AnimatedShinyText className="hero-badge-shiny">Servidor MCP — use o boraADS de dentro do seu chat de IA</AnimatedShinyText></span></Reveal>
        <Reveal as="h1" cls="h1" d={80}>A IA encontra o dinheiro queimado no seu Google Ads. <AuroraText>Quem decide continua sendo você.</AuroraText></Reveal>
        <Reveal as="p" cls="hero-sub" d={160}>Uma equipe de <b>9 agentes especializados</b> vasculha sua conta sob demanda: search terms queimando budget, anúncios estagnados, PMax sem transparência, leilão perdido. Cada achado vira uma <b>proposta com impacto em R$</b> — você aprova, o boraADS aplica direto na API oficial do Google. Em português, com Pix e nota fiscal.</Reveal>
        <Reveal cls="hero-ctas" d={240}>
          <ShimmerButton size="lg" href={`${APP}/signup`} iconRight={LI(P.arrow)}>Começar trial de 7 dias</ShimmerButton>
          <ShimmerButton variant="secondary" size="lg" href="#agentes">Ver os agentes em ação</ShimmerButton>
        </Reveal>
        <Reveal cls="hero-trust" d={320}>
          <span>{LI(P.check,13)}Sem cartão de crédito</span>
          <span>{LI(P.check,13)}Conta conectada em 90s via OAuth do Google</span>
          <span>{LI(P.check,13)}Cancela quando quiser</span>
        </Reveal>
      </div>
      <Reveal dir="r" d={200}><HeroMock/></Reveal>
    </div>
  </section>;
}

/* ---- Demo ---- */
function Demo(){
  const [playing,setPlaying]=useState(false);
  const vid=useRef(null);
  const play=()=>{
    setPlaying(true);
    requestAnimationFrame(()=>{const v=vid.current;if(v){v.play().catch(()=>{});}});
  };
  return <section className="sec demo-sec" id="demo">
    <div className="demo-glow" aria-hidden="true"></div>
    <div className="wrap demo-wrap">
      <SectionHead center eyebrow="Veja em ação" title="O produto funcionando, sem trailer.">
        Onze minutos de tela real: conexão via OAuth, auditoria pelos 9 agentes, propostas com diff e impacto em R$, aprovação humana e aplicação na API. Sem corte esperto, sem dashboard de mentira.
      </SectionHead>
      <Reveal cls="demo-stage" d={160}>
        <div className="demo-player">
          {playing
            ? <video ref={vid} className="demo-video" src={DEMO_VIDEO} poster={DEMO_POSTER} controls playsInline preload="metadata"/>
            : <React.Fragment>
                <img className="demo-poster" src={DEMO_POSTER} alt="Capa da demonstração boraADS" width={1920} height={1080} decoding="async"/>
                <div className="demo-poster-shade" aria-hidden="true"></div>
                <button type="button" className="demo-play" onClick={play} aria-label="Reproduzir demonstração">
                  <span className="btn-circ">{LI(P.play,28)}</span>
                  <span className="dur">11:38 · tela real, sem cortes</span>
                </button>
              </React.Fragment>}
        </div>
        <div className="demo-badges">
          <Chip>OAuth real</Chip><Chip>9 agentes</Chip><Chip>Aprovação humana</Chip><Chip>Audit log ao vivo</Chip>
        </div>
      </Reveal>
    </div>
  </section>;
}

/* ---- Stats ---- */
function Stats(){
  const items=[
    {v:<React.Fragment>5–<em><CountUp to={15} suffix="%"/></em></React.Fragment>,l:<React.Fragment>de redução em <b>custo por conversão</b> no primeiro mês</React.Fragment>},
    {v:<React.Fragment><em><CountUp to={20}/>+</em> h/sem</React.Fragment>,l:<React.Fragment>liberadas para gestores que <b>aprovam em lote</b></React.Fragment>},
    {v:<React.Fragment>&lt; <em><CountUp to={30}/></em> min</React.Fragment>,l:<React.Fragment>para a <b>auditoria completa</b> de uma conta nova</React.Fragment>},
    {v:<React.Fragment><em><CountUp to={100} suffix="%"/></em></React.Fragment>,l:<React.Fragment>das mudanças <b>com aprovação humana</b></React.Fragment>}
  ];
  return <section className="sec" style={{paddingTop:0}}>
    <div className="wrap">
      <div className="stats">
        {items.map((s,i)=><Reveal key={i} cls="stat" d={i*90}><div className="v">{s.v}</div><div className="l">{s.l}</div></Reveal>)}
      </div>
    </div>
  </section>;
}

Object.assign(window,{Reveal,CountUp,SectionHead,AnimatedShinyText,AuroraText,ShimmerButton,AnimatedGridPattern,Particles,AnimatedThemeToggler,LpTopbar,Hero,Demo,Stats,LI,P});