// Content sections: "Why AI", video gallery, instructor, schedule, guarantee, FAQ.

const { AutoVideo, VideoPlaceholder, CTAButton, Eyebrow, Tag } = window;

// ── Shared: AnimatedTitle — per-word reveal with blur / stagger ────────────

function AnimatedTitle({ text, accentWords = [], className = '' }) {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            setVisible(true);
            io.disconnect();
          }
        });
      },
      { threshold: 0.25 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);

  const words = text.split(' ');
  return (
    <h2
      ref={ref}
      className={`anim-title ${visible ? 'is-in' : ''} ${className}`}
      aria-label={text}
    >
      {words.map((w, i) => (
        <span
          key={i}
          className={`anim-title-word ${accentWords.includes(w) ? 'is-accent' : ''}`}
          style={{ '--d': `${i * 110}ms` }}
        >
          <span className="anim-title-word-inner">{w}</span>
        </span>
      ))}
    </h2>
  );
}

// Make available to JSX inside this file (same scope) and also to app.jsx if ever needed
window.AnimatedTitle = AnimatedTitle;

// ── Section: why AI for audiovisual ─────────────────────────────────────────

function WhyAI({ config }) {
  const items = [
    {
      k: 'ganhe tempo',
      v: 'Faça em minutos o que tomava horas ou dias e use o tempo ganho onde importa: ter tempo de qualidade com sua família.',
    },
    {
      k: 'crie vídeos impossíveis',
      v: 'Fazer animações e grandes publicidades sai caro e demanda muito tempo do jeito tradicional. Mas agora com IA é possível e rápido.',
    },
    {
      k: 'técnica + IA',
      v: 'Não é deixar uma IA fazer por você. Quando se junta técnica e conhecimento com inteligência artificial, o resultado é assustador e começa a ser mais valorizado.',
    },
    {
      k: 'o mercado já mudou',
      v: 'Você pode virar o jogo e se destacar. A IA é um oceano azul no audiovisual e pode mudar o potencial da sua entrega.',
    },
  ];

  return (
    <section className="why" id="why" data-screen-label="02 Por que IA">
      <div className="why-head" data-reveal>
        <Eyebrow index={1}>://conteúdo</Eyebrow>
        <h2 className="sec-title">
          por que aprender <span className="accent">IA para audiovisual</span>?
        </h2>
      </div>

      <div className="why-grid">
        {items.map((it, i) => (
          <div className="why-card hover-lift" key={i} data-reveal style={{'--reveal-delay': `${i * 100}ms`}}>
            <div className="why-card-idx mono">0{i + 1}</div>
            <h3 className="why-card-title">{it.k}</h3>
            <p className="why-card-body">{it.v}</p>
            <div className="why-card-deco" aria-hidden>
              <AutoVideo src={config.cornerLoops[i % config.cornerLoops.length]} />
            </div>
          </div>
        ))}
      </div>

      {/* The "future already arrived" banner */}
      <div className="future-banner" data-reveal data-reveal-kind="scale">
        <div className="future-banner-text">
          <span className="mono accent">://</span>
          <span className="future-title">
            o <span className="ital">futuro</span> já chegou —
            {' '}e se ignorar, o mercado vai te engolir.
          </span>
        </div>
        <AutoVideo
          src={config.ambientLoop}
          className="future-banner-bg"
        />
        <div className="grid-tex grid-tex-fine" aria-hidden />
      </div>
    </section>
  );
}

// ── Section: clients (trust strip) ──────────────────────────────────────────

function Clients() {
  const logos = [
    { src: 'assets/clients/hungria.png', alt: 'Hungria' },
    { src: 'assets/clients/mercado-pago.png', alt: 'Mercado Pago' },
    { src: 'assets/clients/ifood.png', alt: 'iFood' },
    { src: 'assets/clients/gran-cursos.png', alt: 'Gran Cursos Online' },
    { src: 'assets/clients/objetivo.png', alt: 'Objetivo' },
    { src: 'assets/clients/client-06.png', alt: 'Cliente' },
    { src: 'assets/clients/client-07.png', alt: 'Cliente' },
    { src: 'assets/clients/best.png', alt: 'Best' },
    { src: 'assets/clients/ame.png', alt: 'Ame' },
  ];
  // Duplicate for seamless loop
  const reel = [...logos, ...logos];
  return (
    <section className="clients" data-screen-label="02b Clientes">
      <div className="clients-inner">
        <div className="clients-head" data-reveal>
          <span className="mono accent">://quem já confiou no nosso trabalho</span>
          <h2 className="clients-title">
            marcas que já <span className="ital red">viveram</span> o <span className="red">nível.</span>
          </h2>
          <p className="clients-lede">
            Audiovisual produzido para grandes players do mercado. O que você vai aprender
            no workshop é o mesmo método que entregamos pra essas marcas.
          </p>
        </div>
      </div>

      <div className="clients-marquee" data-reveal>
        <div className="clients-marquee-track">
          {reel.map((l, i) => (
            <div key={i} className="clients-marquee-item">
              <img src={l.src} alt={l.alt} loading="lazy" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Section: video gallery (what you'll learn) ──────────────────────────────

function VideoGallery({ config, checkoutUrl, schedule, now }) {
  const _state = computeLotState(schedule, now);
  const _active = _state.activeIndex >= 0 ? _state.lots[_state.activeIndex] : _state.lots[0];
  const activeUrl = (_active && _active.url) || checkoutUrl || '#';
  const items = [
    { title: 'Animação com IA', tag: 'core', src: config.videos[0] },
    { title: 'Filmes publicitários', tag: 'publicidade', src: config.videos[1] },
    { title: 'Criação de universos', tag: 'direção de arte', src: config.videos[2] },
    { title: 'Autenticidade e estilo', tag: 'estética', src: config.videos[3] },
    { title: 'Textura e luz', tag: 'fotografia', src: config.videos[4] },
    { title: 'Técnica clássica com IA', tag: 'fundamentos', src: config.videos[5] },
    { title: 'Acabamento avançado', tag: 'pós', src: config.videos[6] },
    { title: 'Estética de cinema', tag: 'cinema', src: config.videos[7] },
    { title: 'Precisão e consistência', tag: 'método', src: config.videos[8] },
  ];

  return (
    <section className="gallery" id="conteudo" data-screen-label="03 Conteúdo">
      <div className="gallery-hero" data-reveal>
        <div className="gallery-hero-bg">
          <AutoVideo
            src="https://b-vz-7e8a0bc8-e2c.tv.pandavideo.com.br/df7fc06c-dc73-4f7c-a15c-651e14973363/playlist.m3u8"
            autoPlay
            muted
            loop
            playsInline
          />
          <div className="gallery-hero-scrim" />
        </div>
        <div className="gallery-hero-content">
          <Eyebrow index={2}>://o que você irá aprender</Eyebrow>
          <h2 className="gallery-hero-title">
            um projeto inteiro,<br />
            <span className="accent ital">do zero à finalização.</span>
          </h2>
          <p className="gallery-hero-lede">
            Dois dias intensivos ao meu lado pra dominar as habilidades que estão
            moldando o futuro com IA: audiovisual de alto nível, imagens realistas,
            animações impossíveis e publicidades fora do padrão ChatGPT que todo
            mundo faz. No primeiro dia você já consegue criar vídeos incríveis com
            as dicas mais quentes do mercado.
          </p>
        </div>
      </div>

      <div className="gallery-inner">

      <div className="gallery-learn-title">
        <span className="gallery-learn-eyebrow mono">://dobra.04</span>
        <AnimatedTitle
          text="O que você vai aprender."
          accentWords={['vai', 'aprender.']}
        />
      </div>

      <div className="gallery-grid">
        {items.map((it, i) => (
          <article key={i} className={`tile tile-${i % 4} hover-lift`} data-reveal data-reveal-kind="rise" style={{'--reveal-delay': `${(i % 3) * 120}ms`}}>
            <div className="tile-video">
              {it.src
                ? <AutoVideo src={it.src} />
                : <VideoPlaceholder label={it.title} />}
              <div className="tile-scrim" />
            </div>
            <div className="tile-meta">
              <span className="tile-idx mono">{String(i + 1).padStart(2, '0')}</span>
              <div className="tile-titles">
                <h3 className="tile-title">{it.title}</h3>
                <span className="tile-tag mono">// {it.tag}</span>
              </div>
            </div>
          </article>
        ))}
      </div>

      <div className="gallery-cta">
        <CTAButton href={activeUrl} kind="primary" progress={{ schedule, now, accent: config.accent }}>COMPRAR INGRESSO</CTAButton>
      </div>
      </div>
    </section>
  );
}

// ── Section: testimonials (quotes + real screenshots) ───────────────────────

const PULL_QUOTES = [
  { body: 'Cheguei achando que ia entender nada. Saí com 3 vídeos prontos.', name: 'Marina Souza', role: 'publicitária' },
  { body: 'O Rick não ensina prompt. Ensina direção. Outro nível de ver IA.', name: 'Lucas Filmmaker', role: 'diretor' },
  { body: 'Fechei 2 clientes novos na semana seguinte usando o que aprendi.', name: 'Preta Studio', role: 'produtora' },
];

const MINI_QUOTES = [
  { name: '@matheus.cria', body: 'Achei que ia ser genérico. Saí com método, não com truque.' },
  { name: '@vini.motion', body: 'Só a parte de consistência de personagem já valeu o ingresso.' },
  { name: '@cami.diretora', body: 'É intenso. Leve água, caderno e disposição. Vale cada minuto.' },
  { name: '@duda.films', body: 'Nunca vi alguém ensinar IA dessa forma prática. Saí pronto pra entregar.' },
  { name: '@joao.edita', body: 'Consegui integrar IA no meu fluxo do DaVinci no mesmo final de semana.' },
  { name: '@studio.noma', body: 'Em 2 dias aprendi mais do que em um mês caçando tutorial solto.' },
];

function Testimonials({ config }) {
  const shots = config.testimonialShots || [];
  return (
    <section className="tstm" data-screen-label="04 Feedbacks">
      <div className="tstm-head" data-reveal>
        <Eyebrow index={3}>://feedbacks</Eyebrow>
        <h2 className="sec-title">
          o que os <span className="accent">alunos</span> estão dizendo.
        </h2>
        <p className="sec-lede">
          Mais de 11 mil alunos já passaram pelas edições anteriores. Esses são
          só alguns dos prints e falas que a gente recebeu.
        </p>
      </div>

      {/* Three big pull quotes */}
      <div className="tstm-pulls">
        {PULL_QUOTES.map((q, i) => (
          <blockquote
            key={i}
            className="tstm-pull"
            data-reveal
            data-reveal-kind="up"
            style={{'--reveal-delay': `${i * 140}ms`}}
          >
            <span className="tstm-pull-mark" aria-hidden>“</span>
            <p className="tstm-pull-body">{q.body}</p>
            <footer className="tstm-pull-foot">
              <span className="tstm-pull-avatar" aria-hidden>
                {q.name.split(' ').map(n => n[0]).slice(0, 2).join('')}
              </span>
              <span className="tstm-pull-who">
                <span className="name">{q.name}</span>
                <span className="role mono">// {q.role}</span>
              </span>
            </footer>
          </blockquote>
        ))}
      </div>

      {/* Auto-scrolling print gallery */}
      <div className="tstm-prints" data-reveal>
        <div className="tstm-prints-head">
          <span className="mono"><span className="accent">//</span> prints reais · dos alunos ia maker</span>
          <span className="mono muted">arraste &larr;&rarr;</span>
        </div>
        <div className="tstm-marquee" aria-label="galeria de prints de depoimentos">
          <div className="tstm-marquee-track">
            {[...shots, ...shots].map((src, i) => (
              <figure key={i} className="tstm-print" style={{'--i': i}}>
                <img src={src} alt="" loading="lazy" />
              </figure>
            ))}
          </div>
          <div className="tstm-marquee-fade tstm-marquee-fade-l" aria-hidden />
          <div className="tstm-marquee-fade tstm-marquee-fade-r" aria-hidden />
        </div>
      </div>

      {/* Small quotes grid */}
      <div className="tstm-quotes">
        {MINI_QUOTES.map((q, i) => (
          <blockquote key={i} className="tstm-quote hover-lift" data-reveal data-reveal-kind="up" style={{'--reveal-delay': `${(i % 3) * 90}ms`}}>
            <p>"{q.body}"</p>
            <footer className="mono">— {q.name}</footer>
          </blockquote>
        ))}
      </div>

      {/* Student outputs — "o que você vai conseguir criar" */}
      <div className="tstm-student-work">
        <div className="tstm-subhead mono">
          <span className="accent">//</span> o que você vai conseguir criar
        </div>
        <div className="tstm-videos">
          {[0, 1, 2, 3].map(i => (
            <div key={i} className="tstm-video hover-lift" data-reveal data-reveal-kind="rise" style={{'--reveal-delay': `${i * 120}ms`}}>
              {config.studentVideos?.[i]
                ? <AutoVideo src={config.studentVideos[i]} />
                : <VideoPlaceholder label={`projeto ${i + 1}`} ratio="9 / 16" />}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Section: schedule ───────────────────────────────────────────────────────

function Schedule({ config }) {
  const blocks = [
    { t: '09h30', k: 'início' },
    { t: '12h00', k: 'almoço' },
    { t: '13h30', k: 'retorno' },
    { t: '17h30', k: 'encerramento*' },
  ];
  return (
    <section className="sched" id="cronograma" data-screen-label="05 Cronograma">
      <div className="sched-head" data-reveal>
        <Eyebrow index={4}>://cronograma do evento  /  23 e 24 de maio ao vivo sem replay</Eyebrow>
        <h2 className="sec-title" style={{ color: 'rgb(229, 45, 57)' }}>
          Que horas começa?
        </h2>
      </div>

      <div className="sched-grid">
        {blocks.map((b, i) => (
          <div className="sched-row" key={i} data-reveal data-reveal-kind="left" style={{'--reveal-delay': `${i * 120}ms`}}>
            <div className="sched-time mono">{b.t}</div>
            <div className="sched-dash" aria-hidden />
            <div className="sched-label">{b.k}</div>
          </div>
        ))}
      </div>

      <p className="sched-note mono">
        *podemos encerrar mais tarde caso os participantes peçam para nos
        aprofundarmos em algum ponto. o conteúdo do dia é dado até esse horário.
      </p>
    </section>
  );
}

// ── Section: instructor ─────────────────────────────────────────────────────

function Instructor({ config }) {
  return (
    <section className="instructor" id="instrutor" data-screen-label="06 Instrutor">
      <div className="instructor-grid">
        <div className="instructor-video" data-reveal data-reveal-kind="left">
          {config.instructorVideo
            ? <AutoVideo src={config.instructorVideo} />
            : <VideoPlaceholder label="rick · apresentação" ratio="4 / 5" />}
          <div className="instructor-video-tag mono">
            <span className="dot live" /> rick · ao vivo no workshop
          </div>
        </div>
        <div className="instructor-copy" data-reveal data-reveal-kind="right">
          <Eyebrow index={5}>://prazer</Eyebrow>
          <h2 className="sec-title">quem é o <span className="accent">Rick</span>?</h2>
          <p>
            Rick é o cara por trás do Filmboss, um dos cursos mais desejados e
            elogiados de audiovisual no Brasil. Começou com uma câmera simples,
            um sonho gigante e uma vontade absurda de transformar o audiovisual
            brasileiro. Hoje, tem o perfil no Instagram que mais ensina
            audiovisual no país.
          </p>
          <p>
            Com tanta demanda aparecendo, ele se especializou em IA para vídeo —
            o que já o levou a criar campanhas absurdas para grandes empresas,
            uma delas a Samsung global, usando 100% de IA. Ele acredita que todo
            mundo pode ser um BOSS, se tiver vontade e direção. É pra isso que
            nasceu o IA MAKER.
          </p>
          <div className="instructor-logos mono">
            <span>projetos com</span>
            <span className="pill">Samsung</span>
            <span className="pill">Adobe</span>
            <span className="pill">iFood</span>
            <span className="pill">Mercado Pago</span>
            <span className="pill">Hungria Hip Hop</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Section: guarantee + certificate ────────────────────────────────────────

function Guarantee() {
  return (
    <section className="guarantee-hero" data-screen-label="07 Garantia">
      <div className="guarantee-hero-inner">
        <div className="guarantee-hero-left" data-reveal data-reveal-kind="left">
          <span className="mono accent guarantee-eyebrow">://risco zero</span>
          <h2 className="guarantee-headline">
            se não for pra você,<br />
            <span className="ital">devolvemos cada centavo.</span>
          </h2>
          <p className="guarantee-lede">
            Você entra no workshop com <strong>garantia estendida</strong> até
            <strong> um dia depois</strong> do evento ao vivo. Assistiu e achou
            que não é pra você? Pede o dinheiro de volta — sem pergunta, sem
            desculpa, sem burocracia.
          </p>

          <ul className="guarantee-points">
            <li>
              <span className="mono accent">01 /</span>
              <div>
                <strong>Garantia até 24h após o fim do evento</strong>
                <p>Termina dia 24 à noite. Até dia 25 às 23h59 você pode pedir reembolso.</p>
              </div>
            </li>
            <li>
              <span className="mono accent">02 /</span>
              <div>
                <strong>Reembolso em até 7 dias úteis</strong>
                <p>Basta responder o e-mail da compra. O time de suporte devolve tudo, sem fricção.</p>
              </div>
            </li>
            <li>
              <span className="mono accent">03 /</span>
              <div>
                <strong>O risco é nosso. Não é seu.</strong>
                <p>Se a gente não entregar o que promete, assumimos o prejuízo. Simples assim.</p>
              </div>
            </li>
          </ul>
        </div>

        <div className="guarantee-hero-right" data-reveal data-reveal-kind="right">
          <GuaranteeSeal />
        </div>
      </div>

      {/* Certificado removido daqui — foi pra dobra própria */}
    </section>
  );
}

// Animated SVG seal — circular text + central badge
function GuaranteeSeal() {
  const circularText = '· GARANTIA ESTENDIDA · 100% DO SEU DINHEIRO DE VOLTA ';
  return (
    <div className="seal-wrap">
      <svg className="seal-svg" viewBox="0 0 400 400" aria-hidden>
        <defs>
          <path
            id="seal-text-path"
            d="M 200, 200 m -152, 0 a 152,152 0 1,1 304,0 a 152,152 0 1,1 -304,0"
          />
          <radialGradient id="seal-glow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="rgba(229,45,57,0.18)" />
            <stop offset="70%" stopColor="rgba(229,45,57,0)" />
          </radialGradient>
        </defs>

        {/* Soft red glow behind the seal */}
        <circle cx="200" cy="200" r="200" fill="url(#seal-glow)" />

        {/* Outer ring */}
        <circle cx="200" cy="200" r="180" fill="none" stroke="currentColor" strokeWidth="1" opacity="0.25" />
        {/* Inner ring */}
        <circle cx="200" cy="200" r="136" fill="none" stroke="currentColor" strokeWidth="1" opacity="0.4" />

        {/* Tick marks around the seal */}
        <g className="seal-ticks" opacity="0.45">
          {Array.from({ length: 60 }).map((_, i) => {
            const angle = (i * 6) * (Math.PI / 180);
            const r1 = 178;
            const r2 = i % 5 === 0 ? 162 : 170;
            const x1 = 200 + Math.cos(angle) * r1;
            const y1 = 200 + Math.sin(angle) * r1;
            const x2 = 200 + Math.cos(angle) * r2;
            const y2 = 200 + Math.sin(angle) * r2;
            return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="currentColor" strokeWidth="1" />;
          })}
        </g>

        {/* Circular text — spins slowly */}
        <g className="seal-rotating">
          <text fontSize="14.5" letterSpacing="3" fontFamily="'JetBrains Mono', monospace" fill="currentColor">
            <textPath href="#seal-text-path" startOffset="0">
              {circularText + circularText}
            </textPath>
          </text>
        </g>

        {/* Central badge */}
        <circle cx="200" cy="200" r="82" fill="rgba(229,45,57,0.08)" stroke="#e52d39" strokeWidth="1.5" />
        <circle cx="200" cy="200" r="72" fill="none" stroke="#e52d39" strokeWidth="0.5" opacity="0.5" />

        {/* Shield icon in the middle */}
        <g transform="translate(200 200)">
          <path
            d="M 0,-42 L 32,-28 L 32,4 C 32,22 18,36 0,44 C -18,36 -32,22 -32,4 L -32,-28 Z"
            fill="none"
            stroke="#e52d39"
            strokeWidth="2"
            strokeLinejoin="round"
          />
          {/* Checkmark inside shield */}
          <path
            d="M -14,2 L -3,14 L 16,-10"
            fill="none"
            stroke="#ffffff"
            strokeWidth="3"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </g>

        {/* Decorative star points around central badge */}
        <g opacity="0.6">
          {[0, 90, 180, 270].map((deg) => (
            <g key={deg} transform={`rotate(${deg} 200 200)`}>
              <circle cx="200" cy="104" r="2" fill="#e52d39" />
            </g>
          ))}
        </g>
      </svg>

      <div className="seal-stamp mono">
        <span className="seal-stamp-top">100%</span>
        <span className="seal-stamp-bot">risco zero</span>
      </div>
    </div>
  );
}

// ── Section: FAQ ────────────────────────────────────────────────────────────

const FAQ_ITEMS = [
  {
    q: 'O que eu vou conseguir fazer em 2 dias?',
    a: 'Vamos criar, em 2 dias, um projeto de animação com IA do zero.',
  },
  {
    q: 'É pra iniciante? Vou conseguir acompanhar?',
    a: 'Sim. Conduzo no passo a passo, com lógica simples e aplicação ao vivo. IA é algo muito novo, então quase todo mundo é iniciante nesse mercado. Tudo foi preparado pensando em todos os níveis, mas com objetivo de aprofundar. Fica tranquilo: mais de 11.376 alunos já fizeram o workshop e conseguiram acompanhar tranquilo.',
  },
  {
    q: 'Preciso de computador? Dá pra fazer no celular?',
    a: 'Dá para fazer do celular ou do computador. A maior parte das IAs roda na nuvem, ou seja, roda no servidor delas e não diretamente no seu PC ou celular. Então o resultado é o mesmo. Mas claro, se tiver os dois, no PC é mais confortável.',
  },
  {
    q: 'Quais ferramentas de IA vamos usar? Preciso pagar?',
    a: 'A maior parte do tempo vamos usar tudo dentro do Freepik pra facilitar pra vocês. Os principais modelos que vamos ensinar são: Nano Banana Pro, Seadream 4.5 e Kling. Não precisa assinar por enquanto.',
  },
  {
    q: 'Como eu acesso o evento?',
    a: 'Após a compra, você recebe tudo no seu e-mail/área do participante, com o link e instruções. Aí é só entrar no grupo do Workshop e aguardar — vamos informar por lá. Se der qualquer pepino, o suporte te coloca pra dentro.',
  },
  {
    q: 'Vai ficar gravado?',
    a: 'O ingresso não inclui replay. O foco é ao vivo e mão na massa. Mas vendemos a gravação do evento no formato de aula, em 12x de R$ 20. Só dá pra comprar até 1 dia antes do evento começar — depois já era.',
  },
  {
    q: 'Como funciona a garantia?',
    a: 'A garantia é estendida: você pode pedir reembolso até 24h após o evento terminar. Simples, sem drama.',
  },
  {
    q: 'Tem certificado?',
    a: 'Sim. Assistiu os dois dias e confirmou presença no formulário, o certificado sai em até 7 dias.',
  },
  {
    q: 'Como saber se é pra mim?',
    a: 'É pra quem quer subir de nível e criar vídeos com IA com direção + estética + consistência (sem "vídeo genérico"). Não é pra quem quer só "prompt pronto" sem aprender o processo.',
  },
  {
    q: 'Já sou seu aluno. Ainda vale?',
    a: 'Se já é aluno, já tem tudo que é mais atualizado na mão. Mas claro, se quiser pode fazer também o workshop. E como sempre priorizamos os nossos alunos, a gravação desse evento vai entrar de bônus pra vocês.',
  },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="faq" id="faq" data-screen-label="08 FAQ">
      <div className="faq-head" data-reveal>
        <Eyebrow index={6}>://faq</Eyebrow>
        <h2 className="sec-title">as dúvidas <span className="accent">mais frequentes</span>.</h2>
      </div>
      <div className="faq-list">
        {FAQ_ITEMS.map((item, i) => {
          const isOpen = open === i;
          return (
            <div key={i} className={`faq-item ${isOpen ? 'open' : ''}`} data-reveal data-reveal-kind="up" style={{'--reveal-delay': `${Math.min(i, 4) * 60}ms`}}>
              <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                <span className="faq-idx mono">{String(i + 1).padStart(2, '0')}</span>
                <span className="faq-q-text">{item.q}</span>
                <span className="faq-toggle mono" aria-hidden>{isOpen ? '−' : '+'}</span>
              </button>
              <div className="faq-a-wrap" style={{ gridTemplateRows: isOpen ? '1fr' : '0fr' }}>
                <div className="faq-a-inner">
                  <p>{item.a}</p>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ── Section: final CTA + footer ─────────────────────────────────────────────

function FinalCTA({ schedule, now, checkoutUrl, config }) {
  const state = computeLotState(schedule, now);
  const active = state.activeIndex >= 0 ? state.lots[state.activeIndex] : state.lots[0];
  const activeUrl = (active && active.url) || checkoutUrl || '#';
  const crystalSrc = config.crystal && config.crystal !== 'none'
    ? `assets/crystal-${config.crystal}.png`
    : null;

  return (
    <section className="final" data-screen-label="09 CTA final">
      <AutoVideo src={config.ambientLoop} className="final-bg" />
      <div className="final-scrim" />
      <div className="grid-tex grid-tex-fine" aria-hidden />
      <div className="final-content split" data-reveal data-reveal-kind="scale">
        {crystalSrc && (
          <div className="final-crystal" aria-hidden>
            <img src={crystalSrc} alt="" className="final-crystal-img" loading="lazy" />
          </div>
        )}
        <div className="final-copy">
          <Eyebrow index={7}>://garanta sua vaga</Eyebrow>
          <h2 className="sec-title big">
            garanta a sua vaga<br />
            antes do <span className="accent">valor subir</span>.
          </h2>
          <div className="final-lot-card">
            <div className="final-lot-row mono">
              <span>lote ativo</span>
              <strong>LOTE {String(active.number).padStart(2, '0')}</strong>
            </div>
            <div className="final-lot-price">{fmtPrice(active.price)}</div>
            <CTAButton href={activeUrl} kind="primary" fullWidth progress={{ schedule, now, accent: config.accent }}>
              COMPRAR INGRESSO · LOTE {String(active.number).padStart(2, '0')}
            </CTAButton>
            <div className="final-lot-note mono">
              AO VIVO · ONLINE · {config.eventDates}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="footer-top">
        <div className="footer-brand mono">
          <span className="logo-mark">◎</span>
          <span>IA MAKER / 5ª EDIÇÃO</span>
        </div>
        <div className="footer-support">
          <div>
            <p className="mono muted">suporte</p>
            <p>
              Dúvidas sobre a compra do workshop? Fala com a Marcinha no WhatsApp.
            </p>
          </div>
          <a
            className="cta cta-ghost"
            href="https://wa.me/5561991761118?text=Preciso%20de%20ajuda%20para%20comprar%20o%20ingresso%20do%20IA.%20Maker"
          >
            FALAR COM O SUPORTE
          </a>
        </div>
      </div>
      <div className="footer-bot mono">
        <span>© {new Date().getFullYear()} IA BOSS · Todos os direitos reservados.</span>
        <span>Política de privacidade · Termos de uso</span>
      </div>
    </footer>
  );
}

// ── Section: Certificate (dobra dedicada) ──────────────────────────────────

function Certificate() {
  return (
    <section className="cert-hero" data-screen-label="08 Certificado">
      <div className="cert-hero-inner">
        <div className="cert-hero-left" data-reveal data-reveal-kind="left">
          <span className="mono accent cert-eyebrow">://prova de conclusão</span>
          <h2 className="cert-headline">
            você sai com o seu nome em um<br />
            <span className="ital">certificado oficial.</span>
          </h2>
          <p className="cert-lede">
            Ao concluir os dois dias de workshop, você recebe um
            <strong> certificado digital de participação </strong>
            assinado pelo IA BOSS. Serve pra portfólio, LinkedIn, proposta pra
            cliente e pra provar no mercado que você tá na frente da curva.
          </p>

          <ul className="cert-points">
            <li>
              <span className="mono accent">01 /</span>
              <div>
                <strong>Liberação em até 7 dias</strong>
                <p>Depois do evento, você recebe por e-mail junto com os bônus.</p>
              </div>
            </li>
            <li>
              <span className="mono accent">02 /</span>
              <div>
                <strong>PDF em alta com QR de verificação</strong>
                <p>Imprime, posta, anexa em currículo. Código único intransferível.</p>
              </div>
            </li>
            <li>
              <span className="mono accent">03 /</span>
              <div>
                <strong>Requisito: estar presente nos dois dias</strong>
                <p>Precisa ter acompanhado o workshop completo e preenchido o formulário final.</p>
              </div>
            </li>
          </ul>
        </div>

        <div className="cert-hero-right" data-reveal data-reveal-kind="right">
          <CertificateMockup />
        </div>
      </div>
    </section>
  );
}

function CertificateMockup() {
  return (
    <div className="cert-mockup-wrap">
      <div className="cert-mockup-shadow" aria-hidden />
      <svg
        className="cert-mockup"
        viewBox="0 0 620 440"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden
      >
        <defs>
          <linearGradient id="cert-paper" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#f8f5ef" />
            <stop offset="100%" stopColor="#ece8df" />
          </linearGradient>
          <pattern id="cert-guilloche" width="12" height="12" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
            <line x1="0" y1="0" x2="0" y2="12" stroke="rgba(229,45,57,0.08)" strokeWidth="0.6" />
          </pattern>
        </defs>

        <rect x="0" y="0" width="620" height="440" fill="url(#cert-paper)" />
        <rect x="0" y="0" width="620" height="440" fill="url(#cert-guilloche)" />

        <rect x="20" y="20" width="580" height="400" fill="none" stroke="#1a1a1a" strokeWidth="1.5" />
        <rect x="28" y="28" width="564" height="384" fill="none" stroke="#1a1a1a" strokeWidth="0.5" />

        <g fill="none" stroke="#1a1a1a" strokeWidth="1">
          <path d="M 20,60 L 20,20 L 60,20" />
          <path d="M 600,60 L 600,20 L 560,20" />
          <path d="M 20,380 L 20,420 L 60,420" />
          <path d="M 600,380 L 600,420 L 560,420" />
        </g>

        <text x="310" y="70" textAnchor="middle" fontSize="11" letterSpacing="4" fontFamily="'JetBrains Mono', monospace" fill="#1a1a1a">
          CERTIFICADO · IA BOSS
        </text>

        <text x="310" y="130" textAnchor="middle" fontSize="34" fontFamily="'Fraunces', Georgia, serif" fontStyle="italic" fontWeight="400" fill="#1a1a1a">
          certificado de conclusão
        </text>

        <line x1="180" y1="158" x2="440" y2="158" stroke="#1a1a1a" strokeWidth="0.8" />

        <text x="310" y="190" textAnchor="middle" fontSize="12" letterSpacing="2" fontFamily="'JetBrains Mono', monospace" fill="#1a1a1a" opacity="0.7">
          CERTIFICAMOS QUE
        </text>

        <text x="310" y="236" textAnchor="middle" fontSize="38" fontFamily="'Space Grotesk', sans-serif" fontWeight="500" letterSpacing="-1" fill="#1a1a1a">
          SEU NOME AQUI
        </text>

        <line x1="140" y1="254" x2="480" y2="254" stroke="#1a1a1a" strokeWidth="0.5" opacity="0.4" />

        <text x="310" y="280" textAnchor="middle" fontSize="12" fontFamily="'Inter', sans-serif" fill="#1a1a1a" opacity="0.75">
          concluiu com êxito o Workshop
        </text>
        <text x="310" y="302" textAnchor="middle" fontSize="20" fontFamily="'Space Grotesk', sans-serif" fontWeight="500" fill="#1a1a1a">
          IA MAKER 5 — Animações com IA
        </text>
        <text x="310" y="326" textAnchor="middle" fontSize="11" fontFamily="'Inter', sans-serif" fill="#1a1a1a" opacity="0.6">
          24 horas de conteúdo · 23 e 24 de maio
        </text>

        <line x1="90" y1="388" x2="240" y2="388" stroke="#1a1a1a" strokeWidth="0.8" />
        <text x="165" y="404" textAnchor="middle" fontSize="10" letterSpacing="1.5" fontFamily="'JetBrains Mono', monospace" fill="#1a1a1a" opacity="0.7">
          IA BOSS · INSTRUTOR
        </text>

        <path d="M 100,380 C 115,372 125,386 140,378 C 155,370 170,384 185,376 C 200,370 215,382 230,378" fill="none" stroke="#1a1a1a" strokeWidth="1.2" strokeLinecap="round" />

        <line x1="380" y1="388" x2="530" y2="388" stroke="#1a1a1a" strokeWidth="0.8" />
        <text x="455" y="404" textAnchor="middle" fontSize="10" letterSpacing="1.5" fontFamily="'JetBrains Mono', monospace" fill="#1a1a1a" opacity="0.7">
          MAIO · 2026
        </text>
        <text x="455" y="378" textAnchor="middle" fontSize="14" fontFamily="'Fraunces', Georgia, serif" fontStyle="italic" fill="#1a1a1a">
          24 · 05 · 2026
        </text>

        <g transform="translate(526 226)">
          <circle cx="0" cy="0" r="54" fill="none" stroke="#e52d39" strokeWidth="2" opacity="0.75" />
          <circle cx="0" cy="0" r="44" fill="none" stroke="#e52d39" strokeWidth="0.8" opacity="0.5" />
          <text fontSize="9" letterSpacing="2.5" fontFamily="'JetBrains Mono', monospace" fill="#e52d39" opacity="0.85">
            <textPath href="#cert-stamp-path" startOffset="0">
              · AUTÊNTICO · IA BOSS · 2026 ·
            </textPath>
          </text>
          <path id="cert-stamp-path" d="M 0,0 m -40,0 a 40,40 0 1,1 80,0 a 40,40 0 1,1 -80,0" fill="none" />
          <text x="0" y="4" textAnchor="middle" fontSize="12" fontFamily="'Space Grotesk', sans-serif" fontWeight="700" letterSpacing="2" fill="#e52d39">
            IA
          </text>
          <text x="0" y="18" textAnchor="middle" fontSize="7" letterSpacing="1.5" fontFamily="'JetBrains Mono', monospace" fill="#e52d39" opacity="0.8">
            BOSS
          </text>
        </g>

        <path d="M 0,120 L 620,110" stroke="#1a1a1a" strokeWidth="0.3" opacity="0.04" />
        <path d="M 0,340 L 620,346" stroke="#1a1a1a" strokeWidth="0.3" opacity="0.04" />
      </svg>
    </div>
  );
}

Object.assign(window, {
  WhyAI, Clients, VideoGallery, Testimonials, Schedule, Instructor, Guarantee, Certificate, FAQ, FinalCTA, Footer
});