// DemoDay.jsx — o palco do Launch: banca de investidores e universidades
function DemoDay() {
  const cards = [
    {
      n: '01', title: 'O piloto',
      body: 'Produto rodando com usuários reais, não um slide. A banca vê o que foi construído e os resultados da validação.',
      color: 'var(--aurora-blue-500)',
    },
    {
      n: '02', title: 'O negócio',
      body: 'Problema, mercado, modelo e métricas, os fundamentos de negócio trabalhados na fase Launch, apresentados como em uma rodada real.',
      color: 'var(--aurora-coral-500)',
    },
    {
      n: '03', title: 'O pitch',
      body: 'Minutos cronometrados diante de investidores, universidades e comunidade escolar. Perguntas de verdade, respostas de quem construiu.',
      color: 'var(--aurora-orange-500)',
    },
  ];

  return (
    <section id="demoday" data-screen-label="Demo Day" className="dark-surface" style={{
      position: 'relative', padding: '140px 40px', overflow: 'hidden',
    }}>
      <div aria-hidden className="glow-blob" style={{
        left: '50%', bottom: '-40%', transform: 'translateX(-50%)',
        width: 1200, height: 700,
        background: 'radial-gradient(ellipse, rgba(255,138,61,0.30) 0%, rgba(255,100,120,0.18) 40%, transparent 70%)',
      }} />

      <div style={{ maxWidth: 1320, margin: '0 auto', position: 'relative' }}>
        <Reveal style={{ maxWidth: 820, marginBottom: 72 }}>
          <div style={{
            fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 12,
            letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--aurora-coral-300)',
            display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24,
          }}>
            <span style={{ width: 32, height: 1, background: 'var(--aurora-coral-300)' }} />
            Launch · Demo Day
          </div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 'clamp(38px, 4.8vw, 72px)', lineHeight: 1.04,
            letterSpacing: '-0.03em', margin: 0, color: '#fff', textWrap: 'balance',
          }}>
            O dia em que o projeto sobe ao palco.
          </h2>
          <p style={{
            fontFamily: 'var(--font-body)', fontWeight: 300, fontSize: 20, lineHeight: 1.55,
            color: 'rgba(255,255,255,0.74)', maxWidth: 640, marginTop: 28,
          }}>
            No encerramento da fase Launch, cada equipe apresenta seu projeto a uma banca de investidores, universidades e comunidade escolar. É o momento em que um trabalho de escola vira uma porta aberta.
          </p>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {cards.map((c, i) => <DemoDayCard key={i} card={c} index={i} />)}
        </div>

        <Reveal delay={200} style={{ marginTop: 64, display: 'flex', justifyContent: 'center' }}>
          <a href="https://wa.link/b7fofs" target="_blank" rel="noopener noreferrer" className="mag-btn" style={{
            fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 15,
            padding: '18px 28px', borderRadius: 999, textDecoration: 'none',
            border: '1.5px solid rgba(255,255,255,0.28)', color: '#fff',
            display: 'inline-flex', alignItems: 'center', gap: 12,
            background: 'rgba(255,255,255,0.06)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
          }}>
            Quero acompanhar o primeiro Demo Day
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </Reveal>
      </div>
    </section>
  );
}

function DemoDayCard({ card, index }) {
  const [hover, setHover] = React.useState(false);
  const [ref, seen] = useReveal();
  return (
    <div
      ref={ref}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      className={`card-reveal ${seen ? 'in' : ''}`}
      style={{
        position: 'relative', overflow: 'hidden',
        padding: '36px 32px', borderRadius: 22, minHeight: 240,
        background: 'linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%)',
        border: '1px solid rgba(255,255,255,0.10)',
        backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)',
        animationDelay: seen ? `${index * 100}ms` : undefined,
        transform: hover ? 'translateY(-6px)' : 'translateY(0)',
        transition: 'transform 380ms var(--ease-out)',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 32,
      }}
    >
      <div aria-hidden style={{
        position: 'absolute', right: -80, top: -80, width: 220, height: 220, borderRadius: '50%',
        background: `radial-gradient(circle, ${hover ? card.color : 'transparent'}44, transparent 70%)`,
        transition: 'background 420ms var(--ease-out)', pointerEvents: 'none',
      }} />
      <div style={{
        fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14,
        color: card.color, letterSpacing: '0.06em',
      }}>{card.n}</div>
      <div>
        <h3 style={{
          fontFamily: 'var(--font-display)', fontWeight: 600,
          fontSize: 'clamp(24px, 2.2vw, 32px)', lineHeight: 1.1,
          letterSpacing: '-0.02em', margin: 0, color: '#fff',
        }}>{card.title}</h3>
        <p style={{
          fontFamily: 'var(--font-body)', fontWeight: 300, fontSize: 16, lineHeight: 1.6,
          color: 'rgba(255,255,255,0.72)', margin: '16px 0 0',
        }}>{card.body}</p>
      </div>
    </div>
  );
}

window.DemoDay = DemoDay;