import Image from "next/image";
import Link from "next/link";
import { ArrowRight, CircleCheck, MoveRight } from "lucide-react";
import { LeadForm } from "@/app/components/LeadForm";
import { DataLayerBridge } from "@/app/components/InteractiveBlocks";
import { ExperimentProvider, HomeExperimentHero } from "@/app/components/Experimentation";
import { comando } from "@/lib/comando";

const doors = [
  { n: "01", title: "Empresários e gestores", text: "Pressão, liderança, decisões e execução sem dispersão.", href: "/empresarios-e-gestores" },
  { n: "02", title: "Comerciais e autónomos", text: "Disciplina, influência, conversas e consistência de performance.", href: "/comerciais-e-lideres" },
  { n: "03", title: "Profissionais em transição", text: "Clareza para decidir o próximo capítulo sem saltos cegos.", href: "/profissionais-em-transicao" },
  { n: "04", title: "Autoliderança", text: "Padrões, confiança praticável e continuidade depois da energia inicial.", href: "/autolideranca" },
  { n: "05", title: "Empresas e RH", text: "Liderança emocional, equipas e implementação com acompanhamento comercial.", href: "/empresas" },
];

const mechanism = [
  ["C1", "Clareza", "Separar facto, interpretação, ruído e prioridade."],
  ["C2", "Comando emocional", "Criar espaço operacional entre o sinal e a resposta."],
  ["C3", "Coragem decisória", "Escolher com critérios quando adiar também tem custo."],
  ["C4", "Consistência", "Converter decisão em cadência de 90 dias."],
];

export default async function Home({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  const search = await searchParams;
  const requested = Array.isArray(search.variant) ? search.variant[0] : search.variant;
  const requestedVariant = requested || (Array.isArray(search.v) ? search.v[0] : search.v);
  const variants = comando.ab_variants.filter((variant) => variant.route === "/");
  return (
    <ExperimentProvider route="/" variants={variants} requestedVariant={requestedVariant}><main>
      <DataLayerBridge route="/" />
      <header className="site-header">
        <Link href="/" className="comando-mark" aria-label="COMANDO — início"><Image src="/brand/comando-mark.svg" alt="" width={30} height={30} aria-hidden="true" /><b>COMANDO</b></Link>
        <div className="header-meta"><span>Imersão · 2 dias</span><a href="#lista">Lista prioritária <ArrowRight /></a></div>
      </header>

      <section className="hero">
        <div className="hero-type" aria-hidden="true">COMANDO</div>
        <div className="hero-copy">
          <p className="eyebrow"><span /> Inteligência emocional · decisão · execução</p>
          <HomeExperimentHero />
          <p className="provisional">Primeira edição Portugal · data, cidade e bilhetes em confirmação</p>
        </div>
        <div className="hero-portrait">
          <Image src="/brand/lucas-comando-hero.jpg" alt="Lucas Atanazio em retrato editorial" fill priority sizes="(max-width: 900px) 100vw, 45vw" />
          <div className="portrait-vignette" />
          <div className="author-card"><span>Condução</span><b>Lucas Atanazio</b><small>Empresário e arquiteto de sistemas de comportamento, negociação e execução</small></div>
        </div>
        <div className="hero-index"><b>4C</b><span>um método<br />quatro movimentos</span></div>
      </section>

      <section className="outcomes" aria-labelledby="outcomes-title">
        <div className="section-number">01</div>
        <div className="outcomes-intro"><p className="eyebrow dark"><span /> O que fica depois da energia</p><h2 id="outcomes-title">Não sai apenas inspirado.<br />Sai com trabalho feito.</h2></div>
        <div className="outcome-list">
          {[
            ["Mapa de Decisões", "Uma leitura objetiva das decisões abertas, custos de adiamento e critérios que realmente importam."],
            ["Protocolo Pessoal Sob Pressão", "Uma sequência curta, praticável e não clínica para preparar respostas em contextos exigentes."],
            ["Plano de Execução de 90 Dias", "Prioridades, cadência, marcos de revisão e próximos movimentos com responsabilidade definida."],
          ].map(([title, text], index) => <article key={title}><span>0{index + 1}</span><div><h3>{title}</h3><p>{text}</p></div><CircleCheck aria-hidden="true" /></article>)}
        </div>
      </section>

      <section className="method" id="metodo" aria-labelledby="method-title">
        <div className="method-photo"><Image src="/brand/lucas-comando-stage.jpg" alt="Lucas Atanazio a conduzir uma sessão" fill sizes="(max-width: 900px) 100vw, 40vw" /></div>
        <div className="method-content">
          <p className="eyebrow light"><span /> O mecanismo proprietário</p><h2 id="method-title">Quatro movimentos.<br />Uma direção.</h2>
          <div className="mechanism-grid">{mechanism.map(([code, title, text]) => <article key={code}><span>{code}</span><h3>{title}</h3><p>{text}</p></article>)}</div>
          <p className="boundary">COMANDO é uma experiência educativa e aplicada. Não substitui psicoterapia, diagnóstico, tratamento clínico, aconselhamento jurídico ou financeiro.</p>
        </div>
      </section>

      <section className="doors" aria-labelledby="doors-title">
        <div className="doors-head"><div><p className="eyebrow dark"><span /> Cinco portas, a mesma sala</p><h2 id="doors-title">Uma mensagem ampla não precisa de ser genérica.</h2></div><p>Cada público terá argumentos, anúncios, objeções e páginas próprios. A experiência, o método e o padrão de responsabilidade permanecem os mesmos.</p></div>
        <div className="doors-grid">{doors.map((door) => <Link href={door.href} key={door.n}><article><span>{door.n}</span><h3>{door.title}</h3><p>{door.text}</p><MoveRight aria-hidden="true" /></article></Link>)}</div>
      </section>

      <section className="anti-guru">
        <Image src="/brand/lucas-comando-work.jpg" alt="Lucas Atanazio em contexto de trabalho e decisão" fill sizes="100vw" /><div className="anti-overlay" />
        <div className="anti-copy"><p className="eyebrow light"><span /> Uma distinção necessária</p><h2>Isto não é entusiasmo vazio.</h2><p>Escala, energia e participação ao serviço de um método. Sem multidões fabricadas, sem transformação garantida, sem frases emprestadas.</p></div>
      </section>

      <section className="waitlist" id="lista" aria-labelledby="waitlist-title">
        <div className="waitlist-copy"><p className="eyebrow light"><span /> Prioridade real</p><h2 id="waitlist-title">Entre antes da venda.</h2><p>A lista recebe primeiro a cidade, a data, o programa do piloto e as condições efetivamente aprovadas. Não abre compra nem promete disponibilidade antes disso.</p><ul><li>Escolha a sua porta de entrada</li><li>Consentimentos separados por canal</li><li>Saída simples em todas as comunicações</li></ul></div>
        <div className="waitlist-form"><LeadForm /></div>
      </section>

      <section className="trust-strip" id="protecoes" aria-label="Proteções da fase de pré-produção">
        <article id="privacidade"><span>Privacidade</span><p>Os dados desta lista servem apenas para gerir o interesse no COMANDO e os canais que cada pessoa autorizou. Não são vendidos nem usados para inferir condições emocionais.</p></article>
        <article id="termos"><span>Termos</span><p>A lista não constitui compra, reserva de lugar ou promessa de preço. Bilhetes, IVA, cancelamento, transferência e livre resolução serão publicados antes da abertura da venda.</p></article>
        <article id="contactos"><span>Contacto e acessibilidade</span><p>Pedidos de acesso, correção, remoção ou necessidades de acessibilidade terão canal próprio antes do piloto e da edição principal.</p></article>
      </section>

      <footer>
        <div className="comando-mark footer-mark"><Image src="/brand/comando-mark.svg" alt="" width={24} height={24} aria-hidden="true" /><b>COMANDO</b></div>
        <p>Uma propriedade intelectual ATANAZIO · nome provisório, sujeito a verificação de marca e domínio.</p>
        <nav aria-label="Informação legal"><Link href="/privacidade">Privacidade</Link><Link href="/termos">Termos</Link><Link href="/contactos-acessibilidade">Contactos e acessibilidade</Link></nav>
      </footer>
    </main></ExperimentProvider>
  );
}
