/* Hero — kinetic headline + cinematic chase scene wrapping around the 'agora.' script */
function Hero(){
  const motion = window.motion;
  const AnimatePresence = window.AnimatePresence;
  const { useScroll, useTransform } = window.Motion || {};
  const [idx, setIdx] = React.useState(0);
  const words = ['Instagram.', 'YouTube.', 'TikTok.', 'Facebook.', 'sua conta.'];

  React.useEffect(()=>{
    const i = setInterval(()=> setIdx(v => (v+1)%words.length), 1700);
    return ()=>clearInterval(i);
  },[]);

  const ref = React.useRef(null);
  const { scrollYProgress } = useScroll({ target: ref, offset:['start start','end start'] });
  const yHead = useTransform(scrollYProgress, [0,1], [0,-160]);
  const opacity = useTransform(scrollYProgress, [0,.7], [1,0]);
  const scale = useTransform(scrollYProgress, [0,1], [1,.92]);

  const line1 = 'Recupere'.split('');
  const line2 = 'seus ativos'.split('');
  const line3 = 'digitais.'.split('');
  const letterV = {
    hidden:{ y:'110%', opacity:0 },
    show:(i)=>({ y:0, opacity:1, transition:{ delay:.9 + i*.03, duration:.7, ease:[.2,.8,.2,1]}})
  };

  return (
    <section ref={ref} style={{position:'relative', minHeight:'100vh', paddingTop:140, paddingBottom:560, overflow:'hidden'}}>
      <motion.div
        key="orb-cyan"
        animate={{ x:[0,40,0], y:[0,-30,0]}}
        transition={{duration:14, repeat:Infinity, ease:'easeInOut'}}
        style={{position:'absolute', top:'30%', left:'-10%', width:520, height:520,
          background:'radial-gradient(circle, rgba(107,209,240,.35), transparent 60%)',
          filter:'blur(40px)', pointerEvents:'none'}}
      />
      <motion.div
        key="orb-lime"
        animate={{ x:[0,-50,0], y:[0,40,0]}}
        transition={{duration:18, repeat:Infinity, ease:'easeInOut'}}
        style={{position:'absolute', bottom:'-10%', right:'10%', width:600, height:600,
          background:'radial-gradient(circle, rgba(199,255,80,.18), transparent 60%)',
          filter:'blur(50px)', pointerEvents:'none'}}
      />

      <motion.div key="hero-container" className="container" style={{position:'relative', y:yHead, opacity, scale, zIndex:5}}>
        <motion.div
          initial={{opacity:0, y:20}}
          animate={{opacity:1, y:0}}
          transition={{delay:.6, duration:.6}}
          className="mono"
          style={{display:'inline-flex', alignItems:'center', gap:10, padding:'8px 14px',
            border:'1px solid rgba(199,255,80,.4)', borderRadius:99,
            fontSize:11, letterSpacing:'.2em', textTransform:'uppercase', color:'#C7FF50',
            background:'rgba(199,255,80,.06)', marginBottom:32, marginTop: 24
          }}
        >
          <motion.span
            animate={{opacity:[1,.3,1]}}
            transition={{duration:1.2, repeat:Infinity}}
            style={{width:6, height:6, background:'#C7FF50', borderRadius:'50%'}}
          />
          atendimento 24h · mundo inteiro
        </motion.div>

        <div style={{position:'relative'}}>
          <h1 className="bebas" style={{
            fontSize:'clamp(72px, 13vw, 200px)', lineHeight:.86,
            color:'#F5EBD3', letterSpacing:'-.005em', textTransform:'uppercase',
            fontWeight:400, position:'relative', zIndex:3
          }}>
            <Line letters={line1} variant={letterV} />
            <Line letters={line2} variant={letterV} offset={line1.length} />
            <Line letters={line3} variant={letterV} offset={line1.length + line2.length} />
          </h1>

          {/* 3D character scene — Spline embed, sits to the right around 'agora.' */}
          <div style={{
            position:'absolute', right:'-4%', bottom:'-460px',
            width:'min(720px, 65%)', height:520,
            pointerEvents:'none', zIndex:2
          }}>
            <Spline3D/>
          </div>

          {/* 'agora.' on top, sits below headline in same area as scene */}
          <motion.div
            initial={{opacity:0, scale:.7, rotate:-2}}
            animate={{opacity:1, scale:1, rotate:-8}}
            transition={{delay:1.9, duration:.9, ease:[.2,.8,.2,1]}}
            className="caveat"
            style={{
              position:'absolute',
              right:'4%', bottom:'-340px',
              fontSize:'clamp(110px, 16vw, 260px)',
              color:'#C7FF50', fontWeight:700,
              lineHeight:.8,
              textShadow:'0 0 40px rgba(199,255,80,.5)',
              pointerEvents:'none',
              zIndex:4
            }}
          >
            agora.
            <motion.span
              initial={{scaleX:0}}
              animate={{scaleX:1}}
              transition={{delay:2.6, duration:.6}}
              style={{
                position:'absolute', left:'10%', bottom:'14%',
                width:'80%', height:6, background:'#C7FF50',
                transformOrigin:'left',
                borderRadius:4
              }}
            />
          </motion.div>
        </div>

        <motion.p
          initial={{opacity:0, y:20}}
          animate={{opacity:1, y:0}}
          transition={{delay:2.4, duration:.8}}
          style={{
            marginTop:520, maxWidth:760,
            fontFamily:'Inter Tight', fontSize:'clamp(18px, 1.6vw, 24px)',
            lineHeight:1.5, color:'rgba(245,235,211,.85)',
            position:'relative', zIndex:5
          }}
        >
          Sua conta caiu, seu canal foi derrubado, sua rede sumiu.
          A gente entra no caso pelo lado técnico e traz de volta.
          Quando o problema vai pro tribunal, <span style={{color:'#C7FF50'}}>nosso parceiro jurídico</span> entra em campo.
        </motion.p>

        <div style={{display:'flex', alignItems:'flex-end', gap:60, marginTop:60, flexWrap:'wrap', position:'relative', zIndex:5}}>
          <div>
            <div className="mono" style={{fontSize:11, letterSpacing:'.2em', textTransform:'uppercase', opacity:.6, marginBottom:14}}>
              recuperando agora
            </div>
            <div style={{display:'flex', alignItems:'baseline', gap:16, flexWrap:'wrap'}}>
              <span className="bebas" style={{fontSize:'clamp(36px, 5vw, 64px)', color:'#F5EBD3', textTransform:'uppercase'}}>
                de volta:
              </span>
              <div style={{position:'relative', height:'clamp(48px, 7vw, 88px)', minWidth:340, overflow:'hidden'}}>
                <AnimatePresence mode="wait">
                  <motion.span
                    key={idx}
                    initial={{y:'100%', opacity:0, skewY:6}}
                    animate={{y:0, opacity:1, skewY:0}}
                    exit={{y:'-100%', opacity:0, skewY:-6}}
                    transition={{duration:.55, ease:[.2,.8,.2,1]}}
                    className="bebas"
                    style={{
                      position:'absolute', display:'block',
                      fontSize:'clamp(48px, 7vw, 88px)', color:'#6BD1F0',
                      textTransform:'uppercase', letterSpacing:'-.005em'
                    }}
                  >
                    {words[idx]}
                  </motion.span>
                </AnimatePresence>
              </div>
            </div>

            <motion.div style={{display:'flex', gap:12, marginTop:36, flexWrap:'wrap'}}>
              <motion.a
                href="#contato"
                whileHover={{scale:1.03, boxShadow:'0 20px 60px rgba(199,255,80,.45)'}}
                whileTap={{scale:.97}}
                style={{
                  padding:'18px 28px', background:'#C7FF50', color:'#0A1A3D',
                  fontFamily:'JetBrains Mono', fontSize:13, fontWeight:600,
                  letterSpacing:'.15em', textTransform:'uppercase',
                  borderRadius:14, textDecoration:'none',
                  display:'inline-flex', alignItems:'center', gap:10
                }}
              >
                falar com a gente
                <span style={{fontSize:18}}>→</span>
              </motion.a>
              <motion.a
                href="#servicos"
                whileHover={{scale:1.03, background:'rgba(245,235,211,.08)'}}
                whileTap={{scale:.97}}
                style={{
                  padding:'18px 28px', background:'transparent', color:'#F5EBD3',
                  fontFamily:'JetBrains Mono', fontSize:13, fontWeight:500,
                  letterSpacing:'.15em', textTransform:'uppercase',
                  borderRadius:14, textDecoration:'none',
                  border:'1px solid rgba(245,235,211,.25)',
                  display:'inline-flex', alignItems:'center', gap:10
                }}
              >
                ver serviços
              </motion.a>
            </motion.div>
          </div>
        </div>
      </motion.div>

      <motion.div
        key="hero-ticker"
        initial={{opacity:0}}
        animate={{opacity:1}}
        transition={{delay:2.2, duration:.6}}
        style={{position:'absolute', bottom:0, left:0, right:0, overflow:'hidden', pointerEvents:'none', zIndex:6}}
      >
        <Ticker />
      </motion.div>
    </section>
  );
}

function Line({letters, variant, offset=0}){
  const motion = window.motion;
  return (
    <motion.span style={{display:'block', overflow:'hidden', paddingBottom:'.06em'}}>
      <motion.span style={{display:'inline-block'}}>
        {letters.map((l,i)=>(
          <motion.span
            key={i}
            custom={i+offset}
            initial="hidden"
            animate="show"
            variants={variant}
            style={{display:'inline-block', whiteSpace: l===' ' ? 'pre' : 'normal'}}
          >{l===' '?' ':l}</motion.span>
        ))}
      </motion.span>
    </motion.span>
  );
}

/* 3D character scene via Three.js (RobotExpressive) com camadas cyber:
 * partículas, glow rings, scanlines, mouse parallax, lighting cyan+lime. */
function Spline3D(){
  const motion = window.motion;
  const ref = React.useRef(null);
  const [loaded, setLoaded] = React.useState(false);
  const [failed, setFailed] = React.useState(false);

  React.useEffect(()=>{
    if(!ref.current || !window.init3DCharacter) {
      setFailed(true);
      return;
    }
    const handle = window.init3DCharacter(ref.current);

    const observer = setInterval(()=>{
      if(!ref.current) return;
      if(ref.current.dataset.loaded === 'true'){
        setLoaded(true);
        clearInterval(observer);
      } else if(ref.current.dataset.failed === 'true'){
        setFailed(true);
        clearInterval(observer);
      }
    }, 200);

    // timeout — se demorar 12s, vai pro fallback
    const timeout = setTimeout(()=>{
      if(!loaded) setFailed(true);
    }, 12000);

    return ()=>{
      clearInterval(observer);
      clearTimeout(timeout);
      if(handle && handle.dispose) handle.dispose();
    };
  }, []);

  if(failed) return <ChaseScene/>;

  return (
    <div style={{position:'absolute', inset:0}}>
      {/* Glow rings ambient — rotacionando atrás do robô */}
      <motion.div
        animate={{rotate:360}}
        transition={{duration:24, repeat:Infinity, ease:'linear'}}
        style={{
          position:'absolute', inset:'10% 15%',
          border:'1px dashed rgba(199,255,80,.25)',
          borderRadius:'50%',
          pointerEvents:'none'
        }}
      />
      <motion.div
        animate={{rotate:-360}}
        transition={{duration:38, repeat:Infinity, ease:'linear'}}
        style={{
          position:'absolute', inset:'18% 22%',
          border:'1px solid rgba(107,209,240,.18)',
          borderRadius:'50%',
          pointerEvents:'none'
        }}
      />
      <motion.div
        animate={{rotate:180}}
        transition={{duration:60, repeat:Infinity, ease:'linear'}}
        style={{
          position:'absolute', inset:'4% 8%',
          border:'1px dotted rgba(245,235,211,.12)',
          borderRadius:'50%',
          pointerEvents:'none'
        }}
      />

      {/* Scanline cruzando vertical */}
      <motion.div
        animate={{y:['-100%','120%']}}
        transition={{duration:5, repeat:Infinity, ease:'linear'}}
        style={{
          position:'absolute', left:0, right:0, height:80,
          background:'linear-gradient(180deg, transparent, rgba(199,255,80,.18), transparent)',
          mixBlendMode:'screen',
          pointerEvents:'none'
        }}
      />

      {/* Partículas cyber espalhadas */}
      {[...Array(14)].map((_,i)=>(
        <motion.div
          key={i}
          animate={{
            y:[0, -20-(i%4)*8, 0],
            x:[0, ((i%3)-1)*12, 0],
            opacity:[.3, 1, .3]
          }}
          transition={{duration: 3 + (i%5)*.6, repeat:Infinity, ease:'easeInOut', delay: i*.2}}
          style={{
            position:'absolute',
            top: `${10 + (i*7)%80}%`,
            left: `${5 + (i*11)%90}%`,
            width: 2 + (i%3),
            height: 2 + (i%3),
            borderRadius:'50%',
            background: i%3===0 ? '#C7FF50' : i%3===1 ? '#6BD1F0' : '#F5EBD3',
            boxShadow: i%3===0 ? '0 0 8px #C7FF50' : i%3===1 ? '0 0 6px #6BD1F0' : '0 0 4px #F5EBD3',
            pointerEvents:'none'
          }}
        />
      ))}

      {/* Canvas Three.js — robô */}
      <div ref={ref} style={{position:'absolute', inset:0, width:'100%', height:'100%'}}/>

      {!loaded && (
        <motion.div
          animate={{opacity:[.4,1,.4]}}
          transition={{duration:1.4, repeat:Infinity}}
          className="mono"
          style={{
            position:'absolute', inset:0, display:'flex',
            alignItems:'center', justifyContent:'center',
            color:'#C7FF50', fontSize:11, letterSpacing:'.25em', textTransform:'uppercase',
            pointerEvents:'none'
          }}
        >
          carregando agente 3d…
        </motion.div>
      )}

      {/* HUD overlay topo-esquerda */}
      {loaded && (
        <motion.div
          initial={{opacity:0, x:-10}}
          animate={{opacity:1, x:0}}
          transition={{duration:.8, delay:.3}}
          style={{
            position:'absolute', top:20, left:20,
            color:'#C7FF50', fontFamily:'JetBrains Mono', fontSize:10,
            letterSpacing:'.2em', textTransform:'uppercase',
            display:'flex', flexDirection:'column', gap:4, pointerEvents:'none'
          }}
        >
          <div style={{display:'flex', alignItems:'center', gap:8}}>
            <motion.div
              animate={{opacity:[1,.3,1]}}
              transition={{duration:1.2, repeat:Infinity}}
              style={{width:6, height:6, background:'#C7FF50', borderRadius:'50%', boxShadow:'0 0 8px #C7FF50'}}
            />
            agente · ativo
          </div>
          <div style={{opacity:.5}}>operação · em andamento</div>
          <div style={{opacity:.3, fontSize:9, marginTop:6}}>uplink · cifrado</div>
        </motion.div>
      )}

      {/* HUD overlay topo-direita — coordenadas tickando */}
      {loaded && (
        <motion.div
          initial={{opacity:0, x:10}}
          animate={{opacity:1, x:0}}
          transition={{duration:.8, delay:.5}}
          style={{
            position:'absolute', top:20, right:20,
            color:'#6BD1F0', fontFamily:'JetBrains Mono', fontSize:9,
            letterSpacing:'.18em', textAlign:'right',
            display:'flex', flexDirection:'column', gap:3, pointerEvents:'none'
          }}
        >
          <TickingCoord/>
        </motion.div>
      )}

      {/* HUD bottom-esquerda — barra de progresso fake */}
      {loaded && (
        <motion.div
          initial={{opacity:0}}
          animate={{opacity:1}}
          transition={{duration:.8, delay:.7}}
          style={{
            position:'absolute', bottom:30, left:20, right:'auto', width:140,
            pointerEvents:'none'
          }}
        >
          <div className="mono" style={{fontSize:9, letterSpacing:'.2em', color:'#C7FF50', marginBottom:6, textTransform:'uppercase'}}>
            recuperando
          </div>
          <div style={{height:3, background:'rgba(245,235,211,.1)', borderRadius:2, overflow:'hidden'}}>
            <motion.div
              animate={{x:['-100%','100%']}}
              transition={{duration:2.2, repeat:Infinity, ease:'easeInOut'}}
              style={{height:'100%', width:'60%', background:'linear-gradient(90deg, transparent, #C7FF50, transparent)'}}
            />
          </div>
        </motion.div>
      )}
    </div>
  );
}

function TickingCoord(){
  const [t, setT] = React.useState(Date.now());
  React.useEffect(()=>{
    const i = setInterval(()=>setT(Date.now()), 220);
    return ()=>clearInterval(i);
  },[]);
  // gera coords pseudo-random tickadas
  const lat = (Math.sin(t/1500)*30 + 14).toFixed(4);
  const lon = (Math.cos(t/1700)*40 - 8).toFixed(4);
  return (
    <>
      <div style={{textTransform:'uppercase'}}>x · {lat}</div>
      <div style={{textTransform:'uppercase'}}>y · {lon}</div>
      <div style={{opacity:.5, marginTop:4, textTransform:'uppercase'}}>node · br · 24h</div>
    </>
  );
}

/* Cinematic chase — frame-by-frame cartoon poses, runs right-to-left, wraps the area where 'agora.' sits */
function ChaseScene(){
  const motion = window.motion;
  const D = 6; // 6s loop

  // Frame keyframes for sprint poses — switch between two poses quickly to fake cartoon frame-by-frame
  const [frame, setFrame] = React.useState(0);
  React.useEffect(()=>{
    const i = setInterval(()=> setFrame(f => (f+1)%2), 110); // 9fps cartoon
    return ()=>clearInterval(i);
  },[]);

  return (
    <div style={{position:'absolute', inset:0, overflow:'hidden'}}>
      {/* dust ground line */}
      <div style={{
        position:'absolute', left:0, right:0, bottom:'24%',
        height:1,
        background:'linear-gradient(90deg, transparent, rgba(245,235,211,.4), transparent)'
      }}/>

      {/* speed lines layer */}
      {[...Array(8)].map((_,i)=>(
        <motion.div
          key={i}
          animate={{x:['120%','-30%']}}
          transition={{duration: .8 + (i%3)*.4, repeat:Infinity, ease:'linear', delay: i*.15}}
          style={{
            position:'absolute',
            top: `${15 + i*9}%`,
            height: 1 + (i%2),
            width: 60 + (i*8 % 80),
            background:`linear-gradient(90deg, transparent, ${i%3===0?'#C7FF50': i%3===1?'#F5EBD3':'#6BD1F0'}, transparent)`,
            opacity: .3 + (i%3)*.15
          }}
        />
      ))}

      {/* Hacker — runs right-to-left, in front */}
      <motion.div
        animate={{x:['100%','-30%']}}
        transition={{duration:D, repeat:Infinity, ease:'linear'}}
        style={{position:'absolute', bottom:'18%', left:0, width:140, height:200}}
      >
        <Hacker frame={frame}/>
        {/* spilling icons — trail behind */}
        <motion.div
          animate={{ x:[40, 80, 130], y:[10, -20, 30], opacity:[1,1,0], rotate:[0,180,360]}}
          transition={{duration:1.6, repeat:Infinity, ease:'easeOut'}}
          style={{position:'absolute', top:60, left:60}}
        >
          <SpillIcon kind="ig"/>
        </motion.div>
        <motion.div
          animate={{ x:[30, 90, 150], y:[20, -10, 40], opacity:[1,1,0], rotate:[0,-180,-360]}}
          transition={{duration:1.6, repeat:Infinity, ease:'easeOut', delay:.4}}
          style={{position:'absolute', top:50, left:70}}
        >
          <SpillIcon kind="yt"/>
        </motion.div>
        <motion.div
          animate={{ x:[20, 70, 120], y:[30, 0, 50], opacity:[1,1,0], rotate:[0,90,200]}}
          transition={{duration:1.6, repeat:Infinity, ease:'easeOut', delay:.8}}
          style={{position:'absolute', top:70, left:65}}
        >
          <SpillIcon kind="tt"/>
        </motion.div>
        <motion.div
          animate={{ x:[35, 85, 140], y:[15, -25, 25], opacity:[1,1,0], rotate:[0,-90,-200]}}
          transition={{duration:1.6, repeat:Infinity, ease:'easeOut', delay:1.2}}
          style={{position:'absolute', top:55, left:75}}
        >
          <SpillIcon kind="fb"/>
        </motion.div>
      </motion.div>

      {/* Pursuer 1 — Ykaro */}
      <motion.div
        animate={{x:['115%','-25%']}}
        transition={{duration:D, repeat:Infinity, ease:'linear', delay:.4}}
        style={{position:'absolute', bottom:'19%', left:0, width:130, height:200}}
      >
        <Sprinter frame={frame} accent="#C7FF50" tag="YK"/>
      </motion.div>

      {/* Pursuer 2 — Fábio (slightly offset) */}
      <motion.div
        animate={{x:['125%','-20%']}}
        transition={{duration:D, repeat:Infinity, ease:'linear', delay:.55}}
        style={{position:'absolute', bottom:'17%', left:0, width:130, height:200}}
      >
        <Sprinter frame={(frame+1)%2} accent="#6BD1F0" tag="FB"/>
      </motion.div>

      {/* Recovered icons — float up to top-right corner (vault direction) */}
      {[0,1,2].map(i=>(
        <motion.div
          key={i}
          animate={{
            x:['80%','60%','40%','20%'],
            y:['80%','40%','20%','5%'],
            opacity:[0,1,1,0],
            scale:[.5,1,1,.6]
          }}
          transition={{duration:3, repeat:Infinity, ease:'easeOut', delay:i*.9}}
          style={{position:'absolute', top:0, left:0}}
        >
          <SpillIcon kind={['ig','yt','fb'][i]} recovered/>
        </motion.div>
      ))}

      {/* small vault glyph top-right */}
      <motion.div
        animate={{scale:[1,1.06,1], opacity:[.7,1,.7]}}
        transition={{duration:2, repeat:Infinity}}
        style={{position:'absolute', top:'6%', right:'4%', width:60, height:60,
          borderRadius:14, border:'2px solid #C7FF50',
          background:'radial-gradient(circle, rgba(199,255,80,.25), rgba(199,255,80,.05))',
          display:'flex', alignItems:'center', justifyContent:'center',
          boxShadow:'0 0 30px rgba(199,255,80,.5)'
        }}
      >
        <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
          <rect x="4" y="10" width="16" height="12" rx="2" stroke="#C7FF50" strokeWidth="2"/>
          <path d="M8 10V7a4 4 0 018 0v3" stroke="#C7FF50" strokeWidth="2"/>
        </svg>
      </motion.div>

      <div className="mono" style={{position:'absolute', top:'6%', right:'4%', transform:'translate(-72px, 14px)', fontSize:9, letterSpacing:'.2em', textTransform:'uppercase', color:'#C7FF50', opacity:.7, whiteSpace:'nowrap'}}>
        cofre →
      </div>
    </div>
  );
}

/* Hacker — hooded silhouette in sprint pose, frame-by-frame leg flip */
function Hacker({frame}){
  const stroke = '#F5EBD3';
  const dark = '#0a1f3d';
  // Two poses for cartoon frame switch
  const legA = "M58 110 L42 156 M58 110 L70 150"; // left leg back, right leg fwd
  const legB = "M58 110 L74 156 M58 110 L46 150"; // mirrored
  const armA = "M52 78 L34 96 M62 78 L82 60"; // arm back / arm forward
  const armB = "M52 78 L40 60 M62 78 L80 100";

  return (
    <svg width="140" height="200" viewBox="0 0 140 200" fill="none" style={{filter:'drop-shadow(0 8px 16px rgba(0,0,0,.4))'}}>
      {/* dust puff at feet */}
      <ellipse cx={frame===0?44:74} cy="160" rx="14" ry="3" fill={stroke} opacity=".25"/>
      {/* legs */}
      <path d={frame===0?legA:le