"use client";

import Image from "next/image";
import { type Consultor, getWhatsappLink } from "@/lib/consultores";
import LeadForm from "./LeadForm";
import Diferenciais from "./Diferenciais";

export default function LandingPage({ consultor }: { consultor: Consultor }) {
  const waLink = getWhatsappLink(consultor);

  return (
    <main className="relative overflow-hidden bg-ink-800 text-white">
      {/* ============ HERO ============ */}
      <section
        id="hero"
        className="relative min-h-[100svh] flex flex-col justify-center pt-12 pb-14 md:pt-16 md:pb-20"
      >
        {/* Grid neon sutil */}
        <div
          className="absolute inset-0 opacity-40 pointer-events-none"
          style={{
            backgroundImage:
              "linear-gradient(rgba(173,255,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(173,255,0,0.04) 1px, transparent 1px)",
            backgroundSize: "48px 48px",
          }}
          aria-hidden
        />
        {/* Glow radial */}
        <div
          className="absolute inset-0 pointer-events-none"
          style={{
            background:
              "radial-gradient(ellipse 80% 60% at 50% 30%, rgba(173,255,0,0.15) 0%, transparent 70%)",
          }}
          aria-hidden
        />

        <div className="relative mx-auto max-w-7xl w-full px-5 md:px-10">
          <div className="grid grid-cols-1 lg:grid-cols-[1.35fr_1fr] gap-10 lg:gap-14 items-center">
            {/* ===== Coluna esquerda: texto ===== */}
            <div>
              {/* Selo evento */}
              <div className="flex items-center gap-3 mb-5 md:mb-7">
                <span className="inline-flex items-center gap-2 rounded-full border border-neon/30 bg-neon/5 px-3 py-1 text-[11px] uppercase tracking-[0.2em] text-neon font-mono">
                  <span className="h-2 w-2 rounded-full bg-neon animate-pulse-neon" />
                  CONAFOR SMART 2026
                </span>
                <span className="text-xs uppercase tracking-widest text-white/40 font-mono hidden sm:inline">
                  // 19 · 08 · 26
                </span>
              </div>

              {/* Logo oficial Cloud PhotoRF 2.0 */}
              <div className="mb-6 md:mb-8">
                <Image
                  src="/cloudphotorf-logo-grande.png"
                  alt="Cloud PhotoRF 2.0"
                  width={360}
                  height={90}
                  priority
                  className="h-14 md:h-20 w-auto object-contain object-left"
                />
              </div>

              {/* Headline */}
              <h1 className="font-display font-black uppercase leading-[0.88] tracking-tight text-[10.5vw] sm:text-[9vw] md:text-[7.5vw] lg:text-[5.4rem] xl:text-[6.4rem]">
                <span className="block text-white">Prepare-se</span>
                <span className="block text-white">para o</span>
                <span className="block text-neon drop-shadow-[0_0_40px_rgba(173,255,0,0.35)]">
                  absurdo.
                </span>
              </h1>

              {/* Subheadline */}
              <p className="mt-6 md:mt-8 max-w-3xl text-base sm:text-lg md:text-xl text-white/80 leading-snug">
                O Cloud PhotoRF <span className="text-neon font-semibold">2.0</span> não é mais só
                reconhecimento facial. É a linha de produção que vai mudar o jeito que você fecha
                cada temporada.
              </p>

              {/* Meta-info evento */}
              <div className="mt-7 md:mt-9 flex flex-wrap items-center gap-x-6 gap-y-3 text-xs md:text-sm font-mono uppercase tracking-widest text-white/50">
                <span>Estande PX3</span>
                <span className="text-neon/60">·</span>
                <span>Consultor: <span className="text-white">{consultor.primeiroNome}</span></span>
                <span className="text-neon/60">·</span>
                <a
                  href="#form"
                  className="text-neon underline underline-offset-4 hover:text-white transition-colors"
                >
                  Ir pro formulário ↓
                </a>
              </div>
            </div>

            {/* ===== Coluna direita: formando PNG transparente + brackets no rosto ===== */}
            <div className="relative w-full max-w-md mx-auto lg:mx-0 lg:justify-self-end">
              <div className="relative aspect-[3/4] w-full">
                {/* Foto formando SEM FUNDO (PNG alpha) - flutua sobre o bg da LP */}
                <Image
                  src="/formando.png"
                  alt="Formando reconhecido pelo Cloud PhotoRF"
                  fill
                  priority
                  sizes="(max-width: 1024px) 90vw, 40vw"
                  className="object-contain object-bottom drop-shadow-[0_20px_40px_rgba(0,0,0,0.5)]"
                />

                {/* Scanline neon animada (clipada ao container) */}
                <div
                  className="pointer-events-none absolute inset-0 z-10 overflow-hidden"
                  aria-hidden
                >
                  <div
                    className="absolute inset-x-0 h-[2px] animate-scan"
                    style={{
                      background:
                        "linear-gradient(90deg, transparent 0%, rgba(173,255,0,0.7) 50%, transparent 100%)",
                      boxShadow: "0 0 12px rgba(173,255,0,0.6)",
                    }}
                  />
                </div>

                {/*
                  Frame reconhecimento facial - centralizado EXATAMENTE no rosto.
                  Coordenadas calibradas por deteccao no PNG (957x1270):
                    top 19%, left 38.7%, width 24.8%, height 23.9%
                */}
                <div
                  className="pointer-events-none absolute z-20"
                  style={{
                    top: "19%",
                    left: "38.7%",
                    width: "24.8%",
                    height: "23.9%",
                  }}
                  aria-hidden
                >
                  {/* 4 brackets neon nos cantos - 15% do tamanho do frame, ~5px */}
                  <span className="absolute top-0 left-0 w-[22%] h-[22%] border-t-[5px] border-l-[5px] border-neon drop-shadow-[0_0_8px_rgba(173,255,0,0.85)]" />
                  <span className="absolute top-0 right-0 w-[22%] h-[22%] border-t-[5px] border-r-[5px] border-neon drop-shadow-[0_0_8px_rgba(173,255,0,0.85)]" />
                  <span className="absolute bottom-0 left-0 w-[22%] h-[22%] border-b-[5px] border-l-[5px] border-neon drop-shadow-[0_0_8px_rgba(173,255,0,0.85)]" />
                  <span className="absolute bottom-0 right-0 w-[22%] h-[22%] border-b-[5px] border-r-[5px] border-neon drop-shadow-[0_0_8px_rgba(173,255,0,0.85)]" />
                </div>

                {/* HUD topo: ID */}
                <div className="absolute top-3 left-3 z-30 bg-ink-800/85 backdrop-blur-sm px-2.5 py-1.5 border border-neon/40">
                  <span className="font-mono text-[10px] uppercase tracking-widest text-neon block leading-tight">
                    ID: 4127 · 99.8%
                  </span>
                  <span className="font-mono text-[8px] uppercase tracking-widest text-white/50 block leading-tight mt-0.5">
                    face_match ok
                  </span>
                </div>

                {/* HUD base: status */}
                <div className="absolute bottom-3 right-3 z-30 bg-ink-800/85 backdrop-blur-sm px-2.5 py-1.5 border border-neon/40 flex items-center gap-2">
                  <span className="h-2 w-2 rounded-full bg-neon animate-pulse-neon" />
                  <span className="font-mono text-[10px] uppercase tracking-widest text-neon">
                    Reconhecido
                  </span>
                </div>

                {/* HUD base esquerda: timestamp */}
                <div className="absolute bottom-3 left-3 z-30 bg-ink-800/85 backdrop-blur-sm px-2 py-1 border border-neon/25">
                  <span className="font-mono text-[9px] uppercase tracking-widest text-white/60">
                    14:22:07
                  </span>
                </div>
              </div>

              {/* Brackets externos do container inteiro */}
              <span className="pointer-events-none absolute -top-2 -left-2 w-10 h-10 border-t-2 border-l-2 border-neon/60" aria-hidden />
              <span className="pointer-events-none absolute -top-2 -right-2 w-10 h-10 border-t-2 border-r-2 border-neon/60" aria-hidden />
              <span className="pointer-events-none absolute -bottom-2 -left-2 w-10 h-10 border-b-2 border-l-2 border-neon/60" aria-hidden />
              <span className="pointer-events-none absolute -bottom-2 -right-2 w-10 h-10 border-b-2 border-r-2 border-neon/60" aria-hidden />
            </div>
          </div>
        </div>

        {/* Cantos brackets do hero */}
        <div className="absolute top-6 left-6 w-10 h-10 border-t-2 border-l-2 border-neon/50 md:top-10 md:left-10" aria-hidden />
        <div className="absolute top-6 right-6 w-10 h-10 border-t-2 border-r-2 border-neon/50 md:top-10 md:right-10" aria-hidden />
        <div className="absolute bottom-6 left-6 w-10 h-10 border-b-2 border-l-2 border-neon/50 md:bottom-10 md:left-10" aria-hidden />
        <div className="absolute bottom-6 right-6 w-10 h-10 border-b-2 border-r-2 border-neon/50 md:bottom-10 md:right-10" aria-hidden />
      </section>

      {/* ============ O QUE MUDA ============ */}
      <section id="o-que-muda" className="relative py-16 md:py-24 border-t border-neon/10">
        <div className="mx-auto max-w-7xl px-5 md:px-10 grid grid-cols-1 lg:grid-cols-[1fr_1.2fr] gap-10 lg:gap-16 items-start">
          {/* Coluna imagem */}
          <div className="order-2 lg:order-1">
            <div className="bracket-frame scanline-container relative aspect-[3/4] max-w-md mx-auto lg:mx-0 overflow-hidden">
              <span className="bl" />
              <span className="br" />
              <Image
                src="/formanda.jpg"
                alt="Formanda com beca verde"
                fill
                priority
                sizes="(max-width: 1024px) 80vw, 40vw"
                className="object-cover"
              />

              {/*
                Frame reconhecimento facial - centralizado no rosto da formanda.
                Coords calibradas por deteccao haar no JPG (1393x1986),
                convertidas p/ container 3/4 com object-cover (crop 3.24% topo/base)
                e ajustadas +2% no top pra baixar o quadro ate a testa (nao pegar capelo):
                  top 15.4%, left 36.6%, width 37.9%, height 28.4%
              */}
              <div
                className="pointer-events-none absolute z-20"
                style={{
                  top: "15.4%",
                  left: "36.6%",
                  width: "37.9%",
                  height: "28.4%",
                }}
                aria-hidden
              >
                <span className="absolute top-0 left-0 w-[22%] h-[22%] border-t-[5px] border-l-[5px] border-neon drop-shadow-[0_0_8px_rgba(173,255,0,0.85)]" />
                <span className="absolute top-0 right-0 w-[22%] h-[22%] border-t-[5px] border-r-[5px] border-neon drop-shadow-[0_0_8px_rgba(173,255,0,0.85)]" />
                <span className="absolute bottom-0 left-0 w-[22%] h-[22%] border-b-[5px] border-l-[5px] border-neon drop-shadow-[0_0_8px_rgba(173,255,0,0.85)]" />
                <span className="absolute bottom-0 right-0 w-[22%] h-[22%] border-b-[5px] border-r-[5px] border-neon drop-shadow-[0_0_8px_rgba(173,255,0,0.85)]" />
              </div>

              {/* Overlay identificação */}
              <div className="absolute top-3 left-3 z-10 bg-ink-800/80 backdrop-blur-sm px-2 py-1 border border-neon/40">
                <span className="font-mono text-[10px] uppercase tracking-widest text-neon">
                  ID: 3779 · 100%
                </span>
              </div>
              <div className="absolute bottom-3 right-3 z-10 bg-ink-800/80 backdrop-blur-sm px-2 py-1 border border-neon/40">
                <span className="font-mono text-[10px] uppercase tracking-widest text-neon">
                  ● RECONHECIDA
                </span>
              </div>
            </div>
          </div>

          {/* Coluna texto */}
          <div className="order-1 lg:order-2">
            <SectionLabel>A mudança</SectionLabel>
            <h2 className="mt-4 font-display font-black uppercase leading-[0.9] text-5xl sm:text-6xl md:text-7xl">
              O que muda no <span className="text-neon">2.0</span>
            </h2>
            <div className="mt-6 h-1 w-24 bg-neon" aria-hidden />

            <div className="mt-8 space-y-5 text-lg md:text-xl text-white/85 leading-relaxed max-w-2xl">
              <p>
                A versão 2.0 foi construída para quem lida com{" "}
                <span className="text-neon font-semibold">volume alto</span>, prazo curto e
                <span className="text-neon font-semibold"> zero margem para erro</span> de identificação.
              </p>
              <p>
                A lógica mudou: em vez de rodar foto por foto esperando o sistema decidir, você
                monta a fila, define os critérios e a IA trabalha enquanto você não precisa estar
                lá. <span className="text-white font-semibold">Três etapas de verificação</span>{" "}
                antes de destinar cada imagem. Múltiplos trabalhos em sequência, processando desatendido.
              </p>
              <p className="text-2xl md:text-3xl font-display font-bold uppercase leading-tight text-white">
                Menos erro. Menos retrabalho. <span className="text-neon">Menos dependência</span>{" "}
                de quem lembra o rosto de quem.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ============ DIFERENCIAIS 8 CARDS ============ */}
      <Diferenciais />

      {/* ============ PROVA SOCIAL ============ */}
      <section id="prova" className="relative py-16 md:py-24 border-t border-neon/10 overflow-hidden">
        {/* fundo militar em blur */}
        <div className="absolute inset-0 opacity-[0.12]" aria-hidden>
          <Image
            src="/militar.jpg"
            alt=""
            fill
            sizes="100vw"
            className="object-cover object-center blur-md scale-110"
          />
          <div className="absolute inset-0 bg-gradient-to-b from-ink-800 via-ink-800/70 to-ink-800" />
        </div>

        <div className="relative mx-auto max-w-7xl px-5 md:px-10 grid grid-cols-1 md:grid-cols-[280px_1fr] gap-10 md:gap-14 items-start">
          {/* foto militar */}
          <div className="bracket-frame relative aspect-[3/4] w-full max-w-[280px] mx-auto md:mx-0 overflow-hidden">
            <span className="bl" />
            <span className="br" />
            <Image
              src="/militar.jpg"
              alt="Militar com farda camuflada"
              fill
              sizes="280px"
              className="object-cover"
            />
            <div className="absolute bottom-2 left-2 right-2 bg-ink-900/85 border border-neon/40 px-2 py-1.5 z-10">
              <span className="font-mono text-[10px] leading-tight text-neon uppercase tracking-wider block">
                ● Reconhecido
              </span>
              <span className="font-mono text-[9px] text-white/60 block leading-tight mt-0.5">
                09:51 · face 42% oculta
              </span>
            </div>
          </div>

          {/* quote */}
          <div>
            <SectionLabel>Depoimento</SectionLabel>
            <blockquote className="mt-6">
              <p className="font-display font-bold uppercase leading-[0.95] text-3xl sm:text-4xl md:text-4xl lg:text-[2.25rem] xl:text-[2.5rem] text-white max-w-[52ch] lg:leading-[1.05]">
                <span className="text-neon">"</span>A gente mandou uma foto de um militar com
                farda camuflada, boné na cabeça e metade do rosto na sombra.{" "}
                <span className="text-neon">O sistema acertou.</span> Isso não era esperado. Esse
                nível de reconhecimento muda o que é possível fazer em produção.
                <span className="text-neon">"</span>
              </p>
              <footer className="mt-8 flex items-center gap-4">
                <div className="h-12 w-12 rounded-full bg-neon flex items-center justify-center font-bold text-ink-900 text-lg">
                  VP
                </div>
                <div>
                  <div className="font-bold text-white text-lg">Vinícius Pantolfi</div>
                  <div className="text-sm text-white/60 font-mono uppercase tracking-widest">
                    Bekas Formaturas
                  </div>
                </div>
              </footer>
            </blockquote>
          </div>
        </div>
      </section>

      {/* ============ OFERTA + FORM (unificados) ============ */}
      <section id="oferta" className="relative py-16 md:py-20 border-t border-neon/10">
        <div className="mx-auto max-w-5xl px-5 md:px-10 text-center">
          <SectionLabel center>A oferta do estande</SectionLabel>
          <h2 className="mt-6 font-display font-black uppercase leading-[0.9] text-5xl sm:text-6xl md:text-7xl">
            Teste com as suas próprias fotos.{" "}
            <span className="text-neon">Sem custo.</span>
          </h2>

          {/* Contador de créditos */}
          <div className="mt-10 inline-block">
            <div className="bracket-frame relative inline-block px-10 py-6 md:px-16 md:py-8 bg-ink-700/50 backdrop-blur-sm">
              <span className="bl" />
              <span className="br" />
              <div className="font-mono text-[10px] uppercase tracking-[0.3em] text-neon">
                Créditos liberados
              </div>
              <div className="font-display font-black text-neon text-7xl md:text-9xl leading-none mt-1 drop-shadow-[0_0_30px_rgba(173,255,0,0.4)]">
                5.000
              </div>
              <div className="font-mono text-[10px] uppercase tracking-widest text-white/60 mt-2">
                Para rodar no seu acervo
              </div>
            </div>
          </div>

          <div className="mt-8 max-w-2xl mx-auto space-y-4 text-lg md:text-xl text-white/85 leading-relaxed">
            <p>
              5000 créditos liberados pra você rodar o Cloud PhotoRF 2.0 no seu próprio acervo,
              com o seu próprio volume, do jeito que você trabalha.
            </p>
            <p className="text-white/70">
              Não é demo genérica. É o sistema completo com os recursos do 2.0, nas suas fotos, no
              seu fluxo.
            </p>
          </div>
        </div>

        {/* Form colado no bloco acima */}
        <div id="form" className="mx-auto max-w-3xl px-5 md:px-10 mt-12 md:mt-14">
          <div className="text-center mb-8">
            <h3 className="font-display font-black uppercase leading-[0.95] text-4xl sm:text-5xl md:text-6xl">
              Garanta seus <span className="text-neon">5 mil créditos gratuitos</span>
            </h3>
            <p className="mt-5 text-white/75 text-base md:text-lg max-w-xl mx-auto">
              Fale com o <span className="text-white font-semibold">{consultor.primeiroNome}</span>, preencha abaixo, clique no botão.
              O WhatsApp abre com a mensagem pronta.
            </p>
          </div>

          <LeadForm consultorSlug={consultor.slug} waLink={waLink} />
        </div>
      </section>

      {/* ============ FOOTER ============ */}
      <footer className="relative border-t border-neon/10 py-12 md:py-14">
        <div className="mx-auto max-w-7xl px-5 md:px-10">
          <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-8">
            <div className="flex items-center gap-4">
              <Image
                src="/px3lab-logo-oficial.png"
                alt="PX3 Lab"
                width={200}
                height={60}
                className="h-12 md:h-14 w-auto object-contain"
              />
              <div className="hidden md:block h-10 w-px bg-neon/20" aria-hidden />
              <div className="hidden md:block">
                <div className="text-xs font-mono uppercase tracking-widest text-white/50">
                  Cloud PhotoRF 2.0
                </div>
              </div>
            </div>

            <div className="text-xs md:text-sm text-white/60 font-mono uppercase tracking-widest max-w-md md:text-right leading-relaxed">
              Automação editorial, visão computacional,<br />
              IA e reconhecimento facial.
            </div>
          </div>

          <div className="mt-10 pt-6 border-t border-neon/10 flex flex-col md:flex-row justify-between gap-4 text-[11px] font-mono uppercase tracking-widest text-white/40">
            <span>© 2026 PX3 Lab · São Paulo · Brasil</span>
            <span className="text-neon/70">
              Página exclusiva // CONAFOR SMART 2026 // {consultor.primeiroNome}
            </span>
          </div>
        </div>
      </footer>
    </main>
  );
}

// ==================== SUBCOMPONENTS ====================

function SectionLabel({ children, center = false }: { children: React.ReactNode; center?: boolean }) {
  return (
    <div className={`inline-flex items-center gap-3 ${center ? "" : ""}`}>
      <span className="h-px w-8 bg-neon" />
      <span className="text-[11px] md:text-xs font-mono uppercase tracking-[0.3em] text-neon">
        {children}
      </span>
      <span className="h-px w-8 bg-neon" />
    </div>
  );
}