/* All content sections.  Each exports onto window. */

/* ============================================================
   HERO
   ============================================================ */
function Hero() {
  return (
    <section id="top" className="relative min-h-[100svh] flex flex-col items-center justify-center overflow-hidden">
      <HeroImageCarousel />

      <div className="relative z-10 max-w-5xl mx-auto px-5 sm:px-6 lg:px-8 text-center pt-32 sm:pt-36 pb-32">
        <div data-reveal className="flex items-center justify-center gap-3 mb-5">
          <span className="text-3xl leading-none" role="img" aria-label="Estados Unidos">🇺🇸</span>
          <span className="w-px h-5 bg-white/20"></span>
          <span className="text-3xl leading-none" role="img" aria-label="Brasil">🇧🇷</span>
        </div>

        <div className="chip mb-7 mx-auto" data-reveal>
          <span className="w-1.5 h-1.5 rounded-full bg-brand-mint animate-pulse"></span>
          Processo seletivo · Vagas limitadas para 2026
        </div>

        <h1
          data-reveal data-reveal-delay="100"
          className="display text-[26px] sm:text-[32px] md:text-[40px] lg:text-[46px] xl:text-[52px] font-medium text-fog-100 max-w-4xl mx-auto"
        >
          A diferença entre empresas que <em>escalam</em> com Inteligência Artificial
          {" "}e as que apenas <span className="text-fog-300">"usam IA"</span> está em uma
          {" "}<em>decisão estratégica</em> que você ainda não tomou.
        </h1>

        <div data-reveal data-reveal-delay="200" className="mt-7 max-w-2xl mx-auto space-y-4 text-[15.5px] md:text-[17px] text-fog-300 leading-relaxed">
          <p>
            Você sente que a empresa pode mais, mas o método atual já entregou tudo o que podia.
            Adicionar ferramenta não resolve. Contratar não resolve. O que destrava é
            {" "}<span className="text-fog-100">estratégia aplicada com método.</span>
          </p>
          <p>
            Existem <span className="text-brand-mint font-medium">7 retornos mensuráveis</span> capazes
            de justificar sozinhos o investimento desta mentoria. Você não precisa dos 7.
            Precisa de <span className="text-fog-100">1, bem executado,</span> para o jogo virar.
          </p>
        </div>

        <div data-reveal data-reveal-delay="300" className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
          <CTAButton variant="primary" size="lg" href="#investimento">Solicitar vaga para Mentoria</CTAButton>
          <CTAButton variant="secondary" size="lg" icon={false} href="#contato">Falar com Consultor</CTAButton>
        </div>
      </div>

      {/* Scroll indicator */}
      <a href="#separa" aria-label="Rolar para próxima seção"
         className="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 scroll-indicator text-fog-300 hover:text-fog-100 transition-colors">
        <IconArrowDownThin size={26} strokeWidth={1.2} />
      </a>
    </section>
  );
}

/* ============================================================
   SECTION 3 - O QUE SEPARA EMPRESAS QUE CRESCEM
   ============================================================ */
function SectionSeparates() {
  const stats = [
    { icon: IconBot,        label: 'Processos',          metric: 'Automatizados', detail: 'Operações que rodam sem fricção, sem dependência de heróis internos.' },
    { icon: IconTrendDown,  label: 'Redução de CAC',     metric: 'até 40%',       detail: 'Aquisição mais barata, com IA aplicada ao funil correto.' },
    { icon: IconBars,       label: 'ROI otimizado',      metric: '3x mais claro', detail: 'Cada real investido em tecnologia conectado a um número.' },
    { icon: IconUsers,      label: 'Equipe produtiva',   metric: '3x output',     detail: 'Pessoas qualificadas operando IA, não esperando ordens.' },
  ];

  return (
    <section id="separa" className="relative py-28 md:py-36 overflow-hidden">
      <div className="absolute inset-0 -z-0"
           style={{ background: 'radial-gradient(ellipse at 20% 0%, rgba(59,130,246,0.06) 0%, transparent 50%)' }} />

      <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-10 grid lg:grid-cols-12 gap-14 lg:gap-20 items-start relative">
        <div className="lg:col-span-5 lg:sticky lg:top-32">
          <Eyebrow>O que separa as duas empresas</Eyebrow>
          <SectionTitle>
            Não é orçamento. Não é tamanho.<br />
            É <em>como</em> você está aplicando IA.
          </SectionTitle>
          <SectionLead>
            A maioria dos empresários hoje compra ferramentas, contrata especialistas, escuta podcasts, e mesmo
            assim continua exatamente no mesmo lugar. O motivo é simples: tecnologia sem direção estratégica
            é despesa, não ativo.
          </SectionLead>
          <div data-reveal data-reveal-delay="200" className="mt-8">
            <CTAButton variant="primary" size="md" href="#contato">Falar com Consultor</CTAButton>
          </div>
        </div>

        <div className="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-5">
          {stats.map((s, i) => (
            <div
              key={s.label}
              data-reveal data-reveal-delay={i * 80}
              className="lift group relative rounded-2xl border border-white/[0.07] bg-white/[0.02] hover:bg-white/[0.04] hover:border-white/15 p-7"
            >
              <div className="flex items-center justify-between mb-8">
                <div className="w-11 h-11 rounded-xl bg-accent-500/10 border border-accent-500/20 flex items-center justify-center text-accent-500">
                  <s.icon size={20} strokeWidth={1.6} />
                </div>
                <span className="text-fog-400 text-xs tracking-[0.18em] uppercase">0{i + 1}</span>
              </div>
              <div className="text-fog-300 text-sm tracking-tight uppercase">{s.label}</div>
              <div className="display text-3xl md:text-[34px] font-medium text-fog-100 mt-1">{s.metric}</div>
              <p className="mt-3 text-[14px] text-fog-300 leading-relaxed">{s.detail}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   SECTION 4 - QUEM SOU EU (Douglas Madeira)
   ============================================================ */
function SectionAbout() {
  const credentials = [
    'Doutorando em Business · EUA',
    'Membro AAAI',
    'Google Certified Educator',
    '20 anos de experiência',
  ];

  return (
    <section id="quem-sou-eu" className="relative py-28 md:py-36 bg-ink-700/40">
      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
      <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-10 grid lg:grid-cols-12 gap-14 items-center">
        {/* Portrait */}
        <div className="lg:col-span-5 order-2 lg:order-1" data-reveal>
          <div className="relative max-w-md mx-auto lg:mx-0">
            <div className="absolute -inset-3 rounded-[28px] bg-gradient-to-br from-brand-mint/25 via-transparent to-brand-mint/10 blur-2xl opacity-70"></div>
            <div className="relative aspect-[4/5] rounded-[24px] overflow-hidden border border-white/10 bg-ink-900">
              <img
                src="assets/douglas-madeira.jpg"
                alt="Douglas Madeira"
                className="w-full h-full object-cover object-[center_30%]"
              />
              <div className="absolute inset-0" style={{ background: 'linear-gradient(180deg, transparent 50%, rgba(16,20,29,0.85) 100%)' }} />
              <div className="absolute bottom-0 inset-x-0 p-6">
                <div className="text-[11px] tracking-[0.2em] uppercase text-fog-300">Mentor · Founder</div>
                <div className="text-fog-100 text-xl font-medium mt-1">Douglas Madeira</div>
              </div>
            </div>

            {/* Small AAAI badge below the portrait */}
            <div className="mt-6 flex items-center gap-4 justify-center lg:justify-start" data-reveal data-reveal-delay="200">
              <span className="text-[10px] tracking-[0.22em] uppercase text-fog-400">Membro</span>
              <img src="assets/logo-aaai.webp" alt="Association for the Advancement of Artificial Intelligence" className="h-6 w-auto opacity-80" />
            </div>
          </div>
        </div>

        {/* Body */}
        <div className="lg:col-span-7 order-1 lg:order-2">
          <Eyebrow>Quem está do outro lado</Eyebrow>
          <SectionTitle>
            20 anos construindo <em>negócios</em>.<br />
            Hoje, aplicando IA com método.
          </SectionTitle>

          <div data-reveal data-reveal-delay="100" className="mt-7 space-y-5 text-[16.5px] text-fog-300 leading-relaxed max-w-2xl">
            <p>
              Sou Douglas Madeira. Empresário há duas décadas, com formação técnica em sistemas, MBA executivo
              e atualmente cursando doutorado em Business nos Estados Unidos, com foco em aplicação de
              Inteligência Artificial em modelos de negócio.
            </p>
            <p>
              Sou membro da <span className="text-fog-100">AAAI</span> (Association for the Advancement of Artificial Intelligence)
              e Google Certified Educator. Mas o que importa para você não é o currículo, é o que
              isso permite: traduzir tecnologia de fronteira em decisões que cabem na realidade da sua empresa.
            </p>
            <p>
              Eu não vendo o que está na moda. Construí, errei e reconstruí processos suficientes para saber
              onde IA gera caixa de verdade, e onde é apenas distração cara.
            </p>
          </div>

          {/* Credential badges */}
          <div data-reveal data-reveal-delay="200" className="mt-8 flex flex-wrap gap-2.5">
            {credentials.map(c => (
              <span key={c} className="chip">{c}</span>
            ))}
          </div>

          <div data-reveal data-reveal-delay="300" className="mt-10">
            <CTAButton variant="primary" size="md" href="#investimento">Solicitar vaga para Mentoria</CTAButton>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   SECTION 5 - COMO FUNCIONA (Timeline)
   ============================================================ */
function SectionHowItWorks() {
  const phases = [
    {
      icon: IconSearch,
      tag: 'Fase 01',
      title: 'Análise de Enquadramento',
      body: 'Antes de qualquer proposta, eu olho a sua empresa: estágio, margem, equipe, tecnologia em uso e ponto de alavanca real. Se o encaixe não existir, não seguimos. Esse é o ponto de partida, e é gratuito.',
    },
    {
      icon: IconTarget,
      tag: 'Fase 02',
      title: 'Estratégia de Aplicação',
      body: 'Mapeamos juntos onde IA gera retorno mensurável no seu modelo, não em geral, no seu. Saímos com um plano enxuto: 1 ou 2 vetores que justificam o investimento sozinhos.',
    },
    {
      icon: IconCog,
      tag: 'Fase 03',
      title: 'Implementação Guiada',
      body: '8 encontros 1:1 onde acompanho a execução, removo barreiras técnicas, valido decisões e ajusto a rota quando a realidade contesta o plano. Acesso direto entre as sessões.',
    },
    {
      icon: IconUserCheck,
      tag: 'Fase 04',
      title: 'Qualificação de Equipe',
      body: 'A virada permanente acontece quando o time aprende a operar IA sem depender de você ou de mim. Estruturamos rituais, indicadores e capacitação para que o ganho fique na casa.',
    },
  ];

  return (
    <section id="metodologia" className="relative py-28 md:py-36 overflow-hidden">
      <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-10">
        <div className="max-w-3xl">
          <Eyebrow>Como funciona</Eyebrow>
          <SectionTitle>
            Como funciona a <em>Mentoria Executiva</em>.
          </SectionTitle>
          <SectionLead>
            Um processo de seleção, não um produto aberto. Quatro fases sequenciais,
            cada uma com critério próprio para avançar.
          </SectionLead>
        </div>

        <div className="mt-20 relative">
          {/* Vertical connector (desktop only) */}
          <svg className="hidden lg:block absolute left-[31px] top-6 bottom-6 z-0" width="2" height="100%" preserveAspectRatio="none" viewBox="0 0 2 600">
            <line className="timeline-line" x1="1" y1="0" x2="1" y2="600" stroke="#3b82f6" strokeWidth="1.5" strokeDasharray="4 6" data-reveal />
          </svg>

          <ol className="space-y-10 lg:space-y-14 relative z-10">
            {phases.map((p, i) => (
              <li key={p.tag} data-reveal data-reveal-delay={i * 100} className="grid lg:grid-cols-12 gap-6 lg:gap-12 items-start">
                <div className="lg:col-span-1 flex lg:justify-center">
                  <div className="w-16 h-16 rounded-2xl bg-ink-700 border border-white/10 flex items-center justify-center text-accent-500 ring-4 ring-ink-800">
                    <p.icon size={24} strokeWidth={1.5} />
                  </div>
                </div>
                <div className="lg:col-span-11 lg:pl-2">
                  <div className="text-[11px] tracking-[0.22em] uppercase text-fog-400">{p.tag}</div>
                  <h3 className="mt-2 display text-2xl md:text-3xl font-medium text-fog-100">{p.title}</h3>
                  <p className="mt-3 text-fog-300 text-[16px] leading-relaxed max-w-3xl">{p.body}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>

        <div data-reveal className="mt-20 flex justify-center">
          <CTAButton variant="secondary" size="lg" href="#contato">Falar com Consultor</CTAButton>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   SECTION 6 - 7 RETORNOS MENSURÁVEIS
   ============================================================ */
function SectionReturns() {
  const returns = [
    { icon: IconTrendUp,    title: 'Aumento de faturamento',     body: 'Frentes de receita ampliadas por IA aplicada a pricing, vendas e oferta, não por mágica, por método.' },
    { icon: IconArrowDown,  title: 'Redução de custo operacional', body: 'Operações que custam menos por unidade entregue. Liberamos margem onde ela estava presa em retrabalho humano.' },
    { icon: IconCpu,        title: 'Automação de processos',     body: 'Fluxos críticos que rodam 24/7, com qualidade controlada e auditável, em vez de depender de pessoas saturadas.' },
    { icon: IconTarget,     title: 'Otimização de ROI',          body: 'Cada projeto de tecnologia ligado a um indicador financeiro. Investimento que justifica investimento.' },
    { icon: IconUsers,      title: 'Redução de CAC',             body: 'Aquisição mais barata e previsível com IA aplicada ao funil, onde dá efeito real, não onde está na moda.' },
    { icon: IconAward,      title: 'Equipe qualificada',         body: 'Pessoas que aprendem a operar IA sem você no meio. O ganho deixa de ser dependente do mentor, e do dono.' },
    { icon: IconServer,     title: 'Parque tecnológico',         body: 'Stack proprietário documentado: o que você usa, por quê, e o que precisa evoluir. Um ativo, não um custo.' },
  ];

  return (
    <section id="retornos" className="relative py-28 md:py-36 overflow-hidden">
      <div className="absolute inset-0 -z-0"
           style={{ background: 'radial-gradient(ellipse at 80% 20%, rgba(52,229,198,0.08) 0%, transparent 55%), radial-gradient(ellipse at 0% 80%, rgba(52,229,198,0.06) 0%, transparent 55%)' }} />

      <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-10 relative">
        <div className="max-w-3xl">
          <Eyebrow>Retorno mensurável</Eyebrow>
          <SectionTitle>
            Os 7 retornos que justificam o investimento.
          </SectionTitle>
          <SectionLead>
            Você não precisa dos 7. Precisa de <em className="not-italic text-fog-100 font-medium">1</em>. Um único vetor bem executado já paga a mentoria várias vezes,
            e é exatamente disso que tratam as primeiras conversas.
          </SectionLead>
        </div>

        <div className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-5">
          {returns.map((r, i) => (
            <article
              key={r.title}
              data-reveal data-reveal-delay={i * 70}
              className="lift group relative rounded-2xl border border-white/[0.07] bg-white/[0.02] hover:bg-white/[0.04] hover:border-brand-mint/40 p-7 overflow-hidden"
            >
              <div className="absolute -top-8 -right-2 stamp text-[110px] leading-none opacity-[0.07] group-hover:opacity-[0.12] transition-opacity duration-500">
                {String(i + 1).padStart(2, '0')}
              </div>

              <div className="w-12 h-12 rounded-xl bg-brand-mint/10 border border-brand-mint/20 flex items-center justify-center text-brand-mint mb-6 relative z-10">
                <r.icon size={22} strokeWidth={1.5} />
              </div>

              <div className="text-fog-400 text-[11px] tracking-[0.2em] uppercase relative z-10">Retorno {String(i + 1).padStart(2, '0')}</div>
              <h3 className="display text-xl md:text-[22px] font-medium text-fog-100 mt-2 relative z-10">{r.title}</h3>
              <p className="mt-3 text-[14.5px] text-fog-300 leading-relaxed relative z-10">{r.body}</p>
            </article>
          ))}

          {/* 8th card slot: CTA card */}
          <div data-reveal data-reveal-delay="490" className="lift relative rounded-2xl border border-brand-mint/30 bg-gradient-to-br from-brand-mint/15 to-transparent p-7 flex flex-col justify-between">
            <div>
              <div className="w-12 h-12 rounded-xl bg-white/10 border border-white/20 flex items-center justify-center text-fog-100 mb-6">
                <IconSparkle size={22} strokeWidth={1.5} />
              </div>
              <h3 className="display text-xl md:text-[22px] font-medium text-fog-100">Qual desses retornos compensa o investimento na sua operação?</h3>
            </div>
            <div className="mt-6">
              <CTAButton variant="primary" size="md" href="#investimento">Solicitar vaga para Mentoria</CTAButton>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   SECTION 7 - CASES REAIS
   ============================================================ */
function SectionTestimonials() {
  const cases = [
    {
      brand: 'Gabriela Rocha',
      role: 'Maior cantora gospel do Brasil',
      tag: 'Case 01',
      initials: 'GR',
      challenge: 'Produção de vídeo em escala para o maior canal gospel do país, sem perder identidade criativa e sem travar o time em processos manuais.',
      solution: 'IA aplicada à produção e direção criativa de vídeos para o YouTube. Cada etapa do processo redesenhada para que a tecnologia amplificasse o talento, sem substituí-lo.',
      resultIcon: '📈',
      resultMetric: '+10 milhões',
      resultLabel: 'de visualizações geradas',
      area: 'Produção de conteúdo · Direção criativa com IA',
      instagram: 'gabrielarocha77',
      photo: 'assets/case-gabriela.jpg',
    },
    {
      brand: 'Editora .edu',
      role: 'Plataforma educacional pública',
      tag: 'Case 02',
      initials: 'ED',
      challenge: 'Produzir 20 cursos técnicos para o Estado do Maranhão com prazo, escala e controle de qualidade que um processo manual não sustentaria.',
      solution: 'IA integrada nos controles de gestão operacional responsável pela produção em escala. O fluxo redesenhado do zero para funcionar sem aumentar proporcionalmente a equipe.',
      resultIcon: '⚙️',
      resultMetric: '20 cursos',
      resultLabel: 'técnicos com gestão automatizada',
      area: 'Gestão operacional · Produção em escala',
      instagram: 'sistemapontoedu',
      photo: 'assets/case-pontoedu.jpg',
    },
    {
      brand: 'Instituto Gaia Soul',
      role: 'Instituto educacional',
      tag: 'Case 03',
      initials: 'GS',
      challenge: 'Desenvolver uma coleção completa de livros do 1º ano fundamental ao 3º ano do ensino médio. Escopo imenso. Prazo real. Processo inexistente.',
      solution: 'Fluxo operacional construído com IA para produção editorial em série, mantendo coerência pedagógica do início ao fim da coleção completa K-12.',
      resultIcon: '📚',
      resultMetric: 'Coleção K-12',
      resultLabel: 'completa entregue no prazo',
      area: 'Fluxo editorial · Operação criativa estruturada',
      instagram: 'institutogaiasoul',
      photo: 'assets/case-gaiasoul.jpg',
    },
  ];

  return (
    <section id="depoimentos" className="relative py-28 md:py-36 bg-brand-navy2/60">
      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
      <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-10">
        <div className="max-w-3xl">
          <Eyebrow>Cases reais</Eyebrow>
          <SectionTitle>
            O que empresários que já passaram pela mentoria <em>estão construindo</em>.
          </SectionTitle>
          <SectionLead>
            Três aplicações distintas do mesmo método: estruturar IA como vetor de operação, não como ferramenta solta.
            Setores diferentes, mesmo princípio.
          </SectionLead>
        </div>

        {/* Mobile: horizontal swipe; Desktop: 3-col grid */}
        <div className="mt-16">
          <div className="lg:hidden flex gap-4 overflow-x-auto no-scrollbar -mx-5 px-5 snap-x snap-mandatory pb-4">
            {cases.map((c, i) => (
              <div key={c.brand} className="snap-center shrink-0 w-[88%]">
                <CaseCard c={c} i={i} />
              </div>
            ))}
          </div>
          <div className="hidden lg:grid grid-cols-3 gap-5">
            {cases.map((c, i) => <CaseCard key={c.brand} c={c} i={i} />)}
          </div>
        </div>

        <div data-reveal className="mt-16 flex justify-center">
          <CTAButton variant="secondary" size="lg" href="#contato">Falar com Consultor</CTAButton>
        </div>
      </div>
    </section>
  );
}

function CaseCard({ c, i }) {
  return (
    <article
      data-reveal data-reveal-delay={i * 90}
      className="lift group relative rounded-2xl border border-white/[0.07] bg-brand-navy hover:border-brand-mint/40 p-7 h-full flex flex-col"
    >
      {/* Header */}
      <div className="flex items-start justify-between mb-7">
        <div className="flex items-center gap-3.5">
          <div className="relative w-14 h-14 rounded-full overflow-hidden border border-white/15 flex-shrink-0 bg-brand-mint/10">
            {/* Initials fallback — visible only if the photo fails to load */}
            <div className="absolute inset-0 flex items-center justify-center text-brand-mint text-[15px] font-medium tracking-tight">
              {c.initials}
            </div>
            {/* Real photo on top */}
            <img
              src={c.photo}
              alt={c.brand}
              loading="lazy"
              className="relative w-full h-full object-cover"
            />
          </div>
          <div>
            <div className="text-fog-100 text-[15px] font-medium leading-tight">{c.brand}</div>
            <div className="text-fog-400 text-[12px] mt-0.5 leading-snug">{c.role}</div>
          </div>
        </div>
        <span className="text-[10.5px] tracking-[0.2em] uppercase text-fog-400 mt-1.5 flex-shrink-0">{c.tag}</span>
      </div>

      {/* Challenge */}
      <div className="mb-5">
        <div className="text-[10.5px] tracking-[0.22em] uppercase text-brand-mint/80 mb-2">Desafio</div>
        <p className="text-fog-100 text-[16px] leading-snug">{c.challenge}</p>
      </div>

      {/* Solution */}
      <div className="mb-6 pb-6 border-b border-white/[0.06]">
        <div className="text-[10.5px] tracking-[0.22em] uppercase text-fog-400 mb-2">Aplicação</div>
        <p className="text-fog-300 text-[14px] leading-relaxed">{c.solution}</p>
      </div>

      {/* Result */}
      <div className="rounded-xl bg-brand-mint/[0.06] border border-brand-mint/20 p-4 flex items-start gap-3 mb-5">
        <span className="text-[22px] leading-none mt-0.5" aria-hidden="true">{c.resultIcon}</span>
        <div className="min-w-0">
          <div className="text-brand-mint text-[17px] font-medium leading-tight">{c.resultMetric}</div>
          <div className="text-fog-200 text-[13px] mt-1 leading-snug">{c.resultLabel}</div>
        </div>
      </div>

      {/* Area + IG */}
      <div className="mt-auto pt-2 flex items-center justify-between gap-4">
        <div className="text-fog-400 text-[12px] leading-snug flex-1">{c.area}</div>
        <a
          href={`https://www.instagram.com/${c.instagram}/`}
          target="_blank" rel="noopener noreferrer"
          aria-label={`Instagram de ${c.brand}`}
          className="text-fog-300 hover:text-brand-mint transition-colors p-2 -mr-2 flex-shrink-0"
        >
          <IconInstagram size={18} strokeWidth={1.5} />
        </a>
      </div>
    </article>
  );
}

/* ============================================================
   SECTION 8 - NÃO É PARA TODO MUNDO
   ============================================================ */
function SectionNotForEveryone() {
  const notFor = [
    'Você está em fase pré-operacional e ainda não tem receita validada.',
    'Você procura "ferramenta mágica", um app, um prompt, um curso pronto.',
    'Você quer terceirizar a decisão estratégica em vez de assumi-la.',
    'Você acredita que IA substitui modelo de negócio e gestão.',
    'Você não tem disponibilidade real para 8 encontros 1:1 ao longo de meses.',
  ];
  const forYou = [
    'Sua empresa fatura, tem operação rodando e quer dar o próximo salto.',
    'Você entende que IA é tecnologia, e tecnologia exige direção estratégica.',
    'Você quer reduzir CAC, custo operacional ou destravar receita com método.',
    'Você está disposto a tomar decisões duras: cortar, focar, descontinuar.',
    'Você prefere processo enxuto e mensurável a curso interminável.',
  ];

  return (
    <section className="relative py-28 md:py-36">
      <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-10">
        <div className="max-w-3xl">
          <Eyebrow>Critério honesto</Eyebrow>
          <SectionTitle>Isso <em>não</em> é para todo mundo.</SectionTitle>
          <SectionLead>
            A mentoria existe porque o resultado existe, e o resultado depende de quem entra.
            Por isso o filtro acontece antes, não depois.
          </SectionLead>
        </div>

        <div className="mt-14 grid lg:grid-cols-2 gap-5">
          <div data-reveal className="rounded-2xl border border-red-500/20 bg-red-500/[0.04] p-8 md:p-10">
            <div className="flex items-center gap-3 mb-7">
              <div className="w-10 h-10 rounded-xl bg-red-500/15 border border-red-500/30 flex items-center justify-center text-red-400">
                <IconX size={20} strokeWidth={2} />
              </div>
              <h3 className="display text-xl md:text-2xl font-medium text-fog-100">Não é para você se...</h3>
            </div>
            <ul className="space-y-4">
              {notFor.map(t => (
                <li key={t} className="flex gap-3 text-[15.5px] text-fog-300 leading-relaxed">
                  <IconX size={18} strokeWidth={2} className="text-red-400/80 mt-1 flex-shrink-0" />
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>

          <div data-reveal data-reveal-delay="100" className="rounded-2xl border border-grow-500/25 bg-grow-500/[0.04] p-8 md:p-10">
            <div className="flex items-center gap-3 mb-7">
              <div className="w-10 h-10 rounded-xl bg-grow-500/15 border border-grow-500/30 flex items-center justify-center text-grow-400">
                <IconCheck size={20} strokeWidth={2} />
              </div>
              <h3 className="display text-xl md:text-2xl font-medium text-fog-100">É para você se...</h3>
            </div>
            <ul className="space-y-4">
              {forYou.map(t => (
                <li key={t} className="flex gap-3 text-[15.5px] text-fog-300 leading-relaxed">
                  <IconCheck size={18} strokeWidth={2} className="text-grow-400 mt-1 flex-shrink-0" />
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div data-reveal className="mt-14 flex justify-center">
          <CTAButton variant="primary" size="lg" href="#investimento">Solicitar vaga para Mentoria</CTAButton>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   SECTION 9 - COMPROMISSO + CTA FINAL
   ============================================================ */
function SectionCommitment() {
  const [agreed, setAgreed] = useState(false);
  return (
    <section id="investimento" className="relative py-28 md:py-40 overflow-hidden"
             style={{ background: 'linear-gradient(180deg, #0f1419 0%, #06080b 100%)' }}>
      <div className="absolute inset-0 -z-0"
           style={{ background: 'radial-gradient(ellipse at 50% 0%, rgba(59,130,246,0.10) 0%, transparent 60%)' }} />

      <div id="contato" className="max-w-3xl mx-auto px-5 sm:px-6 lg:px-10 relative text-center">
        <div className="chip mx-auto mb-7" data-reveal>
          <IconShield size={14} strokeWidth={1.8} className="text-accent-500" />
          Processo Seletivo · Vagas Limitadas
        </div>

        <SectionTitle align="center">
          O último passo é um <em>compromisso</em>, não um clique.
        </SectionTitle>
        <SectionLead align="center">
          Antes de solicitar sua análise de enquadramento, leia e marque a caixa abaixo.
          Esse é o nível de seriedade do processo.
        </SectionLead>

        <div data-reveal data-reveal-delay="150" className={[
          "mt-12 rounded-2xl border p-7 md:p-10 text-left relative transition-colors duration-300",
          agreed
            ? "border-brand-mint/30 bg-brand-mint/[0.04]"
            : "border-white/10 bg-white/[0.025]"
        ].join(' ')}>
          {/* Animated "marque para continuar" hint — only shown until agreed */}
          {!agreed && (
            <div className="hint-pulse absolute -top-3.5 left-7 md:left-10 pointer-events-none">
              <div className="flex items-center gap-1.5 bg-brand-mint text-brand-navy text-[10.5px] font-semibold tracking-[0.12em] uppercase px-3 py-1.5 rounded-full shadow-[0_8px_24px_-8px_rgba(52,229,198,0.6)] whitespace-nowrap">
                <span>Marque para continuar</span>
                <IconArrowDownThin size={11} strokeWidth={2.4} />
              </div>
            </div>
          )}

          <label className="flex items-start gap-5 cursor-pointer">
            <span className={!agreed ? "pulse-ring-wrap relative" : "relative"}>
              <input
                type="checkbox"
                className="custom-check mt-1 relative z-10"
                checked={agreed}
                onChange={e => setAgreed(e.target.checked)}
              />
            </span>
            <span className="text-[15.5px] md:text-base text-fog-200 leading-relaxed">
              Eu reconheço que este é um <span className="text-fog-100 font-medium">investimento estratégico</span>,
              não uma despesa. Entendo que o valor da mentoria está entre
              {" "}<span className="text-accent-500 font-medium">R$ 13.000 e R$ 20.000</span>, com
              {" "}<span className="text-grow-400 font-medium">desconto especial para pagamento via PIX</span> e possibilidade de
              {" "}<span className="text-fog-100">parcelamento no cartão de crédito</span>.
              Entendo também que a vaga depende de aprovação no processo seletivo, e que essa
              ainda não é uma confirmação de inscrição.
            </span>
          </label>
        </div>

        <div data-reveal data-reveal-delay="250" className="mt-10 flex flex-col items-center gap-4">
          <CTAButton
            variant="primary" size="xl"
            disabled={!agreed}
            ariaLabel="Solicitar análise de enquadramento"
            href="https://woodn8n.douglasmadeira.com.br/form/mentoria"
          >
            Solicitar Análise de Enquadramento
          </CTAButton>
          <p className={[
            "text-sm transition-colors duration-300",
            agreed ? "text-brand-mint" : "text-fog-400"
          ].join(' ')}>
            {agreed
              ? "✓ Compromisso aceito. Clique acima para abrir o formulário."
              : "Vagas limitadas. Apenas empresários selecionados."}
          </p>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FOOTER
   ============================================================ */
function Footer() {
  return (
    <footer className="bg-black border-t border-white/[0.06]">
      <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-10 py-14 grid md:grid-cols-12 gap-10">
        <div className="md:col-span-5">
          <BrandMark size="lg" />
          <p className="mt-6 text-sm text-fog-400 leading-relaxed max-w-md">
            Mentoria 1:1 estruturada como processo seletivo. 8 encontros executivos focados em retorno mensurável.
          </p>
        </div>

        <div className="md:col-span-3">
          <div className="text-[11px] tracking-[0.22em] uppercase text-fog-400 mb-4">Navegação</div>
          <ul className="space-y-2.5 text-sm text-fog-300">
            <li><a className="hover:text-fog-100 transition" href="#metodologia">Metodologia</a></li>
            <li><a className="hover:text-fog-100 transition" href="#retornos">Resultados</a></li>
            <li><a className="hover:text-fog-100 transition" href="#depoimentos">Depoimentos</a></li>
            <li><a className="hover:text-fog-100 transition" href="#investimento">Investimento</a></li>
          </ul>
        </div>

        <div className="md:col-span-4">
          <div className="text-[11px] tracking-[0.22em] uppercase text-fog-400 mb-4">Contato</div>
          <ul className="space-y-3 text-sm text-fog-300">
            <li><a className="flex items-center gap-3 hover:text-fog-100 transition" href="mailto:contato@douglasmadeira.com.br">
              <IconMail size={16} strokeWidth={1.6} className="text-fog-400" /> contato@douglasmadeira.com.br
            </a></li>
          </ul>
          <div className="mt-6 flex items-center gap-3">
            <a aria-label="LinkedIn de Douglas Madeira" href="https://www.linkedin.com/in/douglasmadeira/" target="_blank" rel="noopener noreferrer"
               className="w-9 h-9 rounded-lg border border-white/10 flex items-center justify-center text-fog-300 hover:text-brand-mint hover:border-brand-mint/40 transition"><IconLinkedin size={16} strokeWidth={1.6}/></a>
            <a aria-label="Instagram @douglasmadeira.ai" href="https://www.instagram.com/douglasmadeira.ai" target="_blank" rel="noopener noreferrer"
               className="w-9 h-9 rounded-lg border border-white/10 flex items-center justify-center text-fog-300 hover:text-brand-mint hover:border-brand-mint/40 transition"><IconInstagram size={16} strokeWidth={1.6}/></a>
          </div>
        </div>
      </div>

      <div className="border-t border-white/[0.05]">
        <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-10 py-6 flex flex-col md:flex-row items-center justify-between gap-3">
          <p className="text-xs text-fog-500">© 2026 Douglas Madeira. Todos os direitos reservados.</p>
          <div className="flex items-center gap-6 text-xs text-fog-400">
            <a className="hover:text-fog-100 transition" href="politica-de-privacidade.html">Política de Privacidade</a>
            <a className="hover:text-fog-100 transition" href="termos-de-uso.html">Termos de Uso</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Hero, SectionSeparates, SectionAbout, SectionHowItWorks,
  SectionReturns, SectionTestimonials, CaseCard,
  SectionNotForEveryone, SectionCommitment, Footer,
});