// Content grid + Schedule
function Content() {
  const [tab, setTab] = useState('influencer');
  const isMobile = useIsMobile();
  const tabs = {
    influencer: {
      label: 'Influencer IA',
      items: [
        { title: 'Criação do personagem', label: 'De rosto a personalidade', video: 'assets/personagem.mp4' },
        { title: 'Consistência facial', label: 'Mesmo rosto, sempre', video: 'assets/consistencia.mp4' },
        { title: 'Cenários e figurino', label: 'Direção de arte com IA', video: 'assets/figurino.mp4' },
        { title: 'Voz clonada', label: 'Áudio natural', video: 'assets/voz.mp4' },
        { title: 'Lip-sync realista', label: 'Boca sincronizada', video: 'assets/lipsync.mp4' },
        { title: 'Storytelling', label: 'Narrativa que vende', video: 'assets/storytelling.mp4' },
      ],
    },
    vendas: {
      label: 'Vendas com IA',
      items: [
        { title: 'Esteira de conteúdo', label: 'Produção em escala', video: 'assets/esteira.mp4' },
        { title: 'Copy que converte', label: 'Prompts de vendas', video: 'assets/copy.mp4' },
        { title: 'Gatilhos de compra', label: 'Psicologia aplicada', video: 'assets/gatilhos.mp4' },
        { title: 'Reels virais', label: 'Estrutura de 10s', video: 'assets/reel-viral.mp4' },
        { title: 'Ads com IA', label: 'Meta + CapCut', video: 'assets/ads-ia.mp4' },
        { title: 'Monetização real', label: 'Do clique à venda', video: 'assets/monetizacao.mp4' },
      ],
    },
  };
  const ref = useReveal();

  return (
    <section style={{padding: isMobile ? '60px 0' : '120px 0'}} id="conteudo">
      <div className="container">
        <div ref={ref} className="reveal" style={{
          display:'flex', justifyContent:'space-between', alignItems: isMobile ? 'flex-start' : 'flex-end',
          flexDirection: isMobile ? 'column' : 'row',
          marginBottom:32, gap:20,
        }}>
          <div>
            <div className="mono" style={{color:'var(--fg-3)', marginBottom:10}}>C · O · N · T · E · Ú · D · O</div>
            <h2 className="section-title">O que você irá aprender?</h2>
          </div>
          <div style={{display:'flex', gap:8, background:'var(--bg-3)', padding:6, borderRadius:999, border:'1px solid var(--line)', flexShrink:0}}>
            {Object.entries(tabs).map(([k,v]) => (
              <button key={k} onClick={() => setTab(k)} style={{
                padding:'10px 16px', borderRadius:999, fontSize:13, fontWeight:600,
                background: tab === k ? 'var(--accent)' : 'transparent',
                color: tab === k ? '#000' : 'var(--fg-2)',
                transition:'all .3s',
              }}>{v.label}</button>
            ))}
          </div>
        </div>

        <div style={{
          display:'grid',
          gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)',
          gap: isMobile ? 10 : 14,
        }}>
          {tabs[tab].items.map((it, i) => <ContentCard key={tab+i} {...it} i={i}/>)}
        </div>
      </div>
    </section>
  );
}

function ContentCard({ title, label, i, video }) {
  const ref = useReveal();
  const videoRef = useRef(null);
  const hues = [18, 26, 14, 22, 30, 20];
  const hue = hues[i % hues.length];

  useEffect(() => {
    const el = videoRef.current;
    if (!el || !video) return;
    el.src = video;
    el.muted = true;
    el.preload = 'none';
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        el.preload = 'auto';
        el.load();
        setTimeout(() => el.play().catch(() => {}), 300);
        io.disconnect();
      }
    }, { threshold: 0.05 });
    io.observe(el);
    return () => io.disconnect();
  }, [video]);

  return (
    <div ref={ref} className="reveal" style={{
      background:'var(--bg-3)', border:'1px solid var(--line)',
      borderRadius:12, overflow:'hidden',
      transitionDelay:`${i * 70}ms`, cursor:'pointer',
      transition:'border-color .3s ease, opacity .9s ease, transform .9s cubic-bezier(0.16,1,0.3,1)',
    }}
    onMouseEnter={(e) => e.currentTarget.style.borderColor='var(--line-2)'}
    onMouseLeave={(e) => e.currentTarget.style.borderColor='var(--line)'}
    >
      <div style={{
        aspectRatio:'4/5',
        background:`linear-gradient(135deg, hsla(${hue}, 30%, 12%, 1), hsla(${hue+6}, 20%, 6%, 1))`,
        position:'relative', overflow:'hidden',
      }}>
        {video ? (
          <video autoPlay loop muted playsInline preload="none"
            ref={el => { videoRef.current = el; }}
            style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
        ) : (
          <svg viewBox="0 0 300 375" style={{position:'absolute',inset:0,width:'100%',height:'100%'}}>
            <circle cx="150" cy="160" r="60" fill={`hsla(${hue},40%,15%,0.9)`}/>
            <path d="M 60 375 L 60 290 Q 60 220 150 220 Q 240 220 240 290 L 240 375 Z" fill={`hsla(${hue},40%,12%,0.9)`}/>
          </svg>
        )}
        <div style={{position:'absolute',inset:0,background:'linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 40%, transparent 70%)'}}/>
        <div style={{position:'absolute',top:10,left:10,fontFamily:'var(--font-mono)',fontSize:9,color:'rgba(255,255,255,0.55)',letterSpacing:'0.15em'}}>
          #{String(i+1).padStart(2,'0')}
        </div>
        <div style={{position:'absolute',bottom:12,left:12,right:12}}>
          <div style={{fontSize:13,fontWeight:500,lineHeight:1.2,marginBottom:3}}>{title}</div>
          <div className="mono" style={{fontSize:9,color:'rgba(255,255,255,0.5)'}}>{label}</div>
        </div>
      </div>
    </div>
  );
}

// Schedule
function Schedule() {
  const ref = useReveal();
  const isMobile = useIsMobile();
  const rows = [
    { t: '09H30', label: 'ABERTURA' },
    { t: '12H00', label: 'ALMOÇO' },
    { t: '13H30', label: 'PRÁTICA' },
    { t: '18H00', label: 'ENCERRAMENTO*' },
  ];
  return (
    <section style={{padding: isMobile ? '60px 0' : '80px 0', background:'var(--bg-2) url()', backgroundSize:'80px'}} className="grid-bg">
      <div className="container">
        <div ref={ref} className="reveal" style={{
          background:'var(--bg-2)', border:'1px solid var(--line)',
          borderRadius:18, padding: isMobile ? '24px 20px' : 40,
          display:'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1.2fr',
          gap: isMobile ? 32 : 48,
        }}>
          <div>
            <div style={{width:44,height:44,background:'var(--accent)',color:'#000',display:'grid',placeItems:'center',borderRadius:6,marginBottom:20}}>
              <Icon.Calendar/>
            </div>
            <h3 style={{fontFamily:'var(--font-mono)',fontSize:'clamp(20px, 5vw, 30px)',textTransform:'uppercase',letterSpacing:'-0.01em',lineHeight:1.1,marginBottom:14}}>
              CRONOGRAMA<br/>DO EVENTO
            </h3>
            <div className="mono" style={{color:'var(--fg-2)',marginBottom:20}}>DIA 16 DE MAIO · AO VIVO · ZOOM</div>
            <div style={{fontSize:12,lineHeight:1.6,color:'var(--fg-3)',padding:14,border:'1px dashed var(--line-2)',borderRadius:10}}>
              *Podemos encerrar mais tarde caso os participantes peçam aprofundamento em algum ponto.
            </div>
          </div>
          <div>
            <div style={{display:'inline-block',background:'var(--accent)',color:'#000',padding:'6px 12px',borderRadius:6,fontFamily:'var(--font-mono)',fontSize:10,letterSpacing:'0.12em',fontWeight:700,marginBottom:20}}>CRONOGRAMA DO DIA</div>
            {rows.map((r, i) => (
              <div key={i} style={{
                display:'grid', gridTemplateColumns:'24px 1fr 1fr', alignItems:'center',
                padding:'16px 0', borderBottom: i < rows.length-1 ? '1px solid var(--line)' : 'none',
              }}>
                <div style={{color:'var(--accent)'}}>▶</div>
                <div style={{fontFamily:'var(--font-mono)',fontSize: isMobile ? 16 : 18,fontWeight:700,letterSpacing:'0.05em'}}>{r.t}</div>
                <div style={{textAlign:'right',fontFamily:'var(--font-mono)',fontSize:12,letterSpacing:'0.12em',color:'var(--fg-2)'}}>{r.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Content, Schedule });