// Why + FutureBanner
function WhyAI() {
  const isMobile = useIsMobile();
  const cards = [
    { icon: 'TimerIcon', title: 'GANHE TEMPO', text: 'Faça em minutos o que tomava horas ou dias e use o tempo ganho onde importa: ter tempo de qualidade com quem importa para você.', visual: 'clock' },
    { icon: 'Spark', title: 'CRIE O IMPOSSÍVEL', text: 'Produções de alto nível saem caras e tomam muito tempo do jeito tradicional. Agora, com IA, é possível e rápido direto do celular.', visual: 'spiral' },
    { icon: 'Users', title: 'TÉCNICA + IA', text: 'Não é deixar a IA fazer por você. É ter um resultado genérico e amador. Quando se junta técnica, conhecimento e IA, o resultado é assustador.', visual: 'glow' },
    { icon: 'Camera', title: 'O MERCADO JÁ MUDOU', text: 'Você pode virar o jogo e se destacar. A IA é um oceano azul no mercado de conteúdo e pode mudar o potencial da sua entrega.', visual: 'terrain' },
  ];

  return (
    <section id="por-que" style={{position:'relative', padding: isMobile ? '80px 0 60px' : '120px 0 0'}}>
      <style>{`
        .why-card-inner {
          position: relative;
          background: var(--bg-2);
          border: 1px solid var(--line);
          border-radius: 2px;
          padding: 28px 32px;
          display: grid;
          gap: 28px;
          box-shadow: 0 4px 40px rgba(0,0,0,0.5);
          transform: translateY(40px);
          opacity: 0;
          transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), opacity 0.6s ease;
        }
        .why-card-inner.in { transform: translateY(0); opacity: 1; }
        .why-card-inner::before {
          content:''; position:absolute; top:-3px; left:-3px;
          width:14px; height:14px;
          border-top:2px solid var(--accent); border-left:2px solid var(--accent);
        }
        .why-card-inner::after {
          content:''; position:absolute; bottom:-3px; right:-3px;
          width:14px; height:14px;
          border-bottom:2px solid var(--accent); border-right:2px solid var(--accent);
        }
        @keyframes marqueeVid { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        @keyframes scanY { 0%,100% { top: 0; } 50% { top: 100%; } }
      `}</style>
      <div className="container">
        <div style={{
          display:'grid',
          gridTemplateColumns: isMobile ? '1fr' : '280px 1fr',
          gap: isMobile ? 32 : 80,
          alignItems:'flex-start',
        }}>
          {/* Title */}
          <div style={isMobile ? {} : {position:'sticky', top:120, paddingBottom:40}}>
            <div style={{width:44,height:44,background:'var(--accent)',color:'#000',display:'grid',placeItems:'center',borderRadius:6,fontWeight:800,fontSize:22,marginBottom:24}}>?</div>
            <h2 style={{fontFamily:'var(--font-mono)',fontSize:'clamp(20px, 5vw, 28px)',lineHeight:1.15,textTransform:'uppercase',letterSpacing:'-0.01em',fontWeight:700,marginBottom:16}}>
              POR QUE CRIAR<br/><span style={{color:'var(--accent)'}}>INFLUENCERS COM IA?</span>
            </h2>
            <div className="mono" style={{color:'var(--fg-3)'}}>//CONTEÚDO</div>
          </div>

          {/* Cards */}
          <div>
            {cards.map((c, i) => <WhyCard key={i} {...c} index={i} isMobile={isMobile}/>)}
            {!isMobile && <div style={{height:80}}/>}
          </div>
        </div>
      </div>
    </section>
  );
}

function WhyCard({ icon, title, text, visual, index, isMobile }) {
  const innerRef = useRef(null);
  const IconComp = Icon[icon];

  useEffect(() => {
    const el = innerRef.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { el.classList.add('in'); io.disconnect(); }
    }, { threshold: 0.1 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  return (
    <div style={{
      position: isMobile ? 'relative' : 'sticky',
      top: isMobile ? 'auto' : `${110 + index * 28}px`,
      zIndex: index + 1,
      height: isMobile ? 'auto' : 200,
      marginBottom: isMobile ? 14 : 0,
    }}>
      <div ref={innerRef} className="why-card-inner" style={{
        gridTemplateColumns: isMobile ? '1fr' : '1fr 170px',
        transitionDelay:`${index * 60}ms`,
        height: isMobile ? 'auto' : 200,
        background: index % 2 === 0 ? 'var(--bg-2)' : 'var(--bg-3)',
      }}>
        <div style={{position:'absolute',top:-3,right:-3,width:14,height:14,borderTop:'2px solid var(--accent)',borderRight:'2px solid var(--accent)'}}/>
        <div style={{position:'absolute',bottom:-3,left:-3,width:14,height:14,borderBottom:'2px solid var(--accent)',borderLeft:'2px solid var(--accent)'}}/>
        <div>
          <div style={{color:'var(--accent)',marginBottom:12}}><IconComp style={{width:22,height:22}}/></div>
          <h3 style={{fontFamily:'var(--font-mono)',fontSize:16,textTransform:'uppercase',letterSpacing:'0.04em',marginBottom:10,fontWeight:700}}>{title}</h3>
          <p style={{color:'var(--fg-2)',fontSize:14,lineHeight:1.65}}>{text}</p>
        </div>
        {!isMobile && <CardVisual kind={visual}/>}
      </div>
    </div>
  );
}

function FutureBanner() {
  const ref = useReveal();
  const isMobile = useIsMobile();
  return (
    <section style={{padding: isMobile ? '60px 0 80px' : '60px 0 140px', position:'relative'}}>
      <div className="container">
        {/* Banner */}
        <div ref={ref} className="reveal" style={{
          position:'relative', borderRadius:18, overflow:'hidden',
          border:'1px solid var(--line-2)',
          aspectRatio: isMobile ? '4/3' : '5/2',
          background:'#0a0a0b',
        }}>
          <LazyVideo src="assets/futuro.mp4" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
          <div style={{position:'absolute',inset:0,background:'linear-gradient(90deg,rgba(10,10,11,0.2) 0%,rgba(10,10,11,0.1) 40%,rgba(10,10,11,0.65) 100%)'}}/>
          <div style={{
            position:'absolute', right:0, top:0, bottom:0,
            width: isMobile ? '100%' : '50%',
            padding: isMobile ? '24px 20px' : '40px 48px',
            display:'flex', flexDirection:'column', justifyContent:'flex-end',
            background: isMobile ? 'linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%)' : 'none',
          }}>
            <h3 style={{
              fontFamily:'var(--font-mono)',
              fontSize: isMobile ? 'clamp(18px, 5vw, 24px)' : 'clamp(22px, 2.8vw, 36px)',
              textTransform:'uppercase', fontWeight:700, letterSpacing:'-0.01em', lineHeight:1.1, marginBottom:10,
            }}>O FUTURO JÁ CHEGOU...</h3>
            <div className="mono" style={{color:'var(--fg-2)', fontSize: isMobile ? 10 : 11}}>
              E QUEM IGNORAR O MERCADO VAI FICAR PRA TRÁS
            </div>
          </div>
          <div style={{position:'absolute',left:0,right:0,top:0,height:2,background:'linear-gradient(90deg,transparent,var(--accent),transparent)',animation:'scanY 4s ease-in-out infinite'}}/>
        </div>

        {/* Video marquee */}
        <div style={{marginTop:60,overflow:'hidden',position:'relative',borderTop:'1px solid var(--line)',borderBottom:'1px solid var(--line)'}}>
          <div style={{display:'flex',gap:12,width:'max-content',animation:'marqueeVid 40s linear infinite',padding:'12px 0'}}>
            {[1,2,3,4,5,1,2,3,4,5].map((n,i) => (
              <div key={i} style={{width: isMobile ? 100 : 150,aspectRatio:'9/16',borderRadius:10,overflow:'hidden',border:'1px solid var(--line-2)',flexShrink:0}}>
                <LazyVideo src={`assets/v${n}.mp4`} style={{width:'100%',height:'100%',objectFit:'cover'}}/>
              </div>
            ))}
          </div>
          <div style={{position:'absolute',left:0,top:0,bottom:0,width:80,background:'linear-gradient(90deg,var(--bg),transparent)',pointerEvents:'none'}}/>
          <div style={{position:'absolute',right:0,top:0,bottom:0,width:80,background:'linear-gradient(-90deg,var(--bg),transparent)',pointerEvents:'none'}}/>
        </div>

        {/* Bottom copy */}
        <div style={{
          display:'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'auto 1fr',
          gap: isMobile ? 24 : 60,
          marginTop: isMobile ? 48 : 80,
          alignItems:'flex-start',
        }}>
          <div>
            <h3 style={{fontFamily:'var(--font-mono)',fontSize:'clamp(20px, 5vw, 30px)',textTransform:'uppercase',fontWeight:700,lineHeight:1.15,marginBottom:24}}>
              POR ISSO CRIAMOS<br/>ESSA IMERSÃO<span style={{color:'var(--accent)',marginLeft:8}}>↗</span>
            </h3>
            <a href="https://pay.hub.la/TCgY4cxmVJFdfEKq0VuL" target="_blank" className="btn btn-primary" style={isMobile ? {width:'100%', justifyContent:'center'} : {}}>
              INSCREVER-SE · LOTE 2 <Icon.Arrow className="arrow"/>
            </a>
          </div>
          <p style={{color:'var(--fg-2)',fontSize: isMobile ? 14 : 16,lineHeight:1.7}}>
            Um dia inteiro, ao vivo, criando seu influencer digital do zero. Você vai sair com um personagem de IA pronto, um método de produção de conteúdo replicável e uma esteira de vendas funcionando. Sem teoria vazia, tudo prático, direto do celular.
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WhyAI, FutureBanner });

function CardVisual({ kind }) {
  if (kind === 'clock') {
    const [tick, setTick] = useState(0);
    useEffect(() => { const id = setInterval(() => setTick(t => t+1), 1000); return () => clearInterval(id); }, []);
    return (
      <div style={{position:'relative', width:130, height:130, display:'grid', placeItems:'center', flexShrink:0}}>
        <svg width="130" height="130" viewBox="0 0 130 130">
          <circle cx="65" cy="65" r="58" fill="none" stroke="var(--line-2)" strokeWidth="1"/>
          {Array.from({length:60}).map((_,i) => (
            <line key={i} x1="65" y1="10" x2="65" y2={i%5===0?16:13} stroke={i%5===0?'var(--fg-2)':'var(--fg-3)'} strokeWidth="1" transform={`rotate(${i*6} 65 65)`}/>
          ))}
          <polygon points="65,60 62,78 68,78" fill="var(--accent)" transform={`rotate(${tick*6} 65 65)`} style={{transition:'transform 1s linear'}}/>
        </svg>
        <div style={{position:'absolute', fontFamily:'var(--font-mono)', fontSize:16, fontWeight:700, letterSpacing:'0.1em'}}>00{String(tick%10)}{String((tick+3)%10)}</div>
      </div>
    );
  }
  if (kind === 'spiral') return (
    <div style={{width:130,height:130,position:'relative',overflow:'hidden',borderRadius:8,flexShrink:0}}>
      <div style={{position:'absolute',inset:0,background:'conic-gradient(from 0deg,#222 0%,#444 25%,#222 50%,#333 75%,#222 100%)',animation:'rotate 8s linear infinite',mask:'radial-gradient(circle, transparent 20%, black 22%, black 90%, transparent 95%)',WebkitMask:'radial-gradient(circle, transparent 20%, black 22%, black 90%, transparent 95%)'}}/>
    </div>
  );
  if (kind === 'glow') return (
    <div style={{width:130,height:130,position:'relative',borderRadius:8,overflow:'hidden',background:'#000',flexShrink:0}}>
      <div style={{position:'absolute',top:'50%',left:'50%',width:180,height:180,transform:'translate(-50%,-50%)',background:'radial-gradient(circle, rgba(255,106,26,0.4), transparent 60%)',animation:'pulse-glow 3s ease-in-out infinite'}}/>
      <div style={{position:'absolute',top:'50%',left:'50%',transform:'translate(-50%,-50%)',width:60,height:60,borderRadius:'50%',border:'2px solid var(--accent)'}}/>
    </div>
  );
  return (
    <div style={{width:130,height:130,position:'relative',borderRadius:8,overflow:'hidden',background:'linear-gradient(180deg,#0a0a0b,#15151a)',flexShrink:0}}>
      <svg viewBox="0 0 130 130" style={{position:'absolute',inset:0}}>
        {Array.from({length:12}).map((_,i) => (
          <path key={i} d={`M 0 ${70+i*5} Q 30 ${65+i*5-Math.sin(i)*8} 65 ${70+i*5} T 130 ${70+i*5}`} fill="none" stroke={`rgba(255,255,255,${0.15-i*0.01})`} strokeWidth="0.5"/>
        ))}
      </svg>
    </div>
  );
}