import { useEffect, useState, type ReactNode } from "react";
import { Link, useNavigate } from "@tanstack/react-router";
import { toast } from "sonner";
import { supabase } from "@/integrations/supabase/client";
import { getVariant, esteticaVariants, type Variant } from "@/lib/ab";
import { captureUtmFromUrl, trackEvent, getStoredUtm } from "@/lib/tracking";
import { buildWhatsAppHref, loadWhatsAppSettings, type WhatsAppSettings } from "@/lib/whatsapp";
import { sendCapiEvent } from "@/lib/capi.functions";
import logo from "@/assets/logo-ponto.png";

type LeadInfo = { nome: string; cidade: string };

export type NicheConfig = {
  slug: string;
  niche: string;
  heroLead: string;
  heroHighlight: string;
  heroSub: string;
  ticker: string[];
  painTitle: string;
  pains: string[];
  comparison?: { before: string[]; after: string[] };
  benefits: { title: string; desc: string }[];
  whyUs?: string[];
  testimonials?: { name: string; role: string; quote: string; result: string }[];
  caseStudy?: { company: string; challenge: string; solution: string; result: string };
  guarantee?: { title: string; desc: string };
  steps: { title: string; desc: string }[];
  results: { value: string; label: string }[];
  faq: { q: string; a: string }[];
  accent: string;
  gradientFrom: string;
  gradientTo: string;
  heroImage?: string;
  whatsapp?: { number: string; message?: string };
};

export function LandingPage({ cfg }: { cfg: NicheConfig }) {
  const [variant, setVariant] = useState<Variant | null>(null);
  const [leadInfo, setLeadInfo] = useState<LeadInfo>({ nome: "", cidade: "" });
  const [waSettings, setWaSettings] = useState<WhatsAppSettings | null>(null);

  useEffect(() => {
    if (cfg.slug === "estetica") {
      setVariant(getVariant("estetica_hero_v1"));
    }
    captureUtmFromUrl();
    loadWhatsAppSettings().then(setWaSettings);
  }, [cfg.slug]);

  const copy = cfg.slug === "estetica" && variant ? esteticaVariants[variant] : null;

  return (
    <div className="min-h-screen bg-background text-foreground">
      <Hero cfg={cfg} copy={copy} />
      <Ticker items={cfg.ticker} />
      <Pains cfg={cfg} />
      {cfg.comparison && <Comparison cfg={cfg} />}
      <Benefits cfg={cfg} />
      {cfg.whyUs && <WhyUs cfg={cfg} />}
      <Steps cfg={cfg} />
      <Results cfg={cfg} />
      {cfg.testimonials && <Testimonials cfg={cfg} />}
      {cfg.caseStudy && <CaseStudy cfg={cfg} />}
      {cfg.guarantee && <Guarantee cfg={cfg} />}
      <Urgency cfg={cfg} />
      <FormSection cfg={cfg} copy={copy} variant={variant} onLeadInfoChange={setLeadInfo} />
      <Faq cfg={cfg} />
      <Footer />
      <WhatsAppFab cfg={cfg} settings={waSettings} leadInfo={leadInfo} />
    </div>
  );
}

function WhatsAppFab({
  cfg,
  settings,
  leadInfo,
}: {
  cfg: NicheConfig;
  settings: WhatsAppSettings | null;
  leadInfo: LeadInfo;
}) {
  const number = settings?.number ?? cfg.whatsapp?.number ?? "5511999999999";
  const template =
    settings?.template ??
    cfg.whatsapp?.message ??
    "Olá! Meu nome é {nome}, sou de {cidade} e vim pela página de {nicho}. Quero saber mais sobre tráfego pago.";
  const href = buildWhatsAppHref({
    number,
    template,
    nome: leadInfo.nome,
    cidade: leadInfo.cidade,
    nicho: cfg.niche,
  });
  const handleClick = () => {
    const eventId = `wa-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
    trackEvent("whatsapp_click", {
      nicho: cfg.niche,
      slug: cfg.slug,
      location: "fab",
      has_lead_info: Boolean(leadInfo.nome || leadInfo.cidade),
      event_id: eventId,
    });
    sendCapiEvent({
      data: {
        event_name: "Contact",
        event_id: eventId,
        event_source_url: typeof window !== "undefined" ? window.location.href : undefined,
        user_data: {
          first_name: leadInfo.nome || undefined,
          city: leadInfo.cidade || undefined,
          client_user_agent: typeof navigator !== "undefined" ? navigator.userAgent : undefined,
        },
        custom_data: { nicho: cfg.niche, slug: cfg.slug, location: "whatsapp_fab" },
      },
    }).catch(() => {});
  };
  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      onClick={handleClick}
      data-event="whatsapp_click"
      data-nicho={cfg.niche}
      aria-label="Falar no WhatsApp"
      className="fixed bottom-6 right-6 z-50 inline-flex items-center gap-2 rounded-full bg-[#25D366] px-5 py-4 font-bold text-white shadow-[0_10px_30px_rgba(37,211,102,0.5)] transition-transform hover:scale-105"
    >
      <svg viewBox="0 0 32 32" className="h-6 w-6 fill-current" aria-hidden="true">
        <path d="M16 .5C7.4.5.5 7.4.5 16c0 2.8.7 5.5 2.1 7.9L.5 31.5l7.8-2c2.3 1.3 4.9 1.9 7.6 1.9 8.6 0 15.5-6.9 15.5-15.5S24.6.5 16 .5zm0 28.2c-2.4 0-4.8-.6-6.9-1.9l-.5-.3-4.6 1.2 1.2-4.5-.3-.5C3.6 20.6 3 18.3 3 16 3 8.8 8.8 3 16 3s13 5.8 13 13-5.8 12.7-13 12.7zm7.2-9.5c-.4-.2-2.3-1.1-2.7-1.3-.4-.1-.6-.2-.9.2s-1 1.3-1.3 1.6c-.2.2-.5.3-.9.1-.4-.2-1.7-.6-3.2-2-1.2-1.1-2-2.4-2.2-2.8-.2-.4 0-.6.2-.8.2-.2.4-.5.6-.7.2-.2.2-.4.4-.6.1-.3 0-.5 0-.7-.1-.2-.9-2.2-1.3-3-.3-.8-.7-.7-.9-.7h-.8c-.3 0-.7.1-1.1.5-.4.4-1.4 1.4-1.4 3.4s1.5 4 1.7 4.2c.2.3 2.9 4.5 7.1 6.3 1 .4 1.8.7 2.4.9.9.3 1.8.2 2.5.1.8-.1 2.3-1 2.6-1.9.3-.9.3-1.7.2-1.9 0-.2-.3-.3-.7-.5z" />
      </svg>
      <span className="hidden sm:inline">WhatsApp</span>
    </a>
  );
}

function Nav() {
  return (
    <nav className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-6 py-5 md:px-12">
      <Link to="/" className="flex items-center gap-2">
        <img src={logo} alt=".PONTO" className="h-10 w-auto" />
      </Link>
      <a
        href="#contato"
        className="hidden md:inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/5 px-5 py-2 text-sm font-semibold text-white backdrop-blur hover:bg-white/10"
      >
        Falar com especialista →
      </a>
    </nav>
  );
}

function Hero({
  cfg,
  copy,
}: {
  cfg: NicheConfig;
  copy: { heroHighlight: string; heroCta: string } | null;
}) {
  const highlight = copy?.heroHighlight ?? cfg.heroHighlight;
  const ctaLabel = copy?.heroCta ?? "Quero mais informações ↗";
  return (
    <header
      className="relative overflow-hidden"
      style={
        cfg.heroImage
          ? {
              backgroundImage: `url(${cfg.heroImage})`,
              backgroundSize: "cover",
              backgroundPosition: "center",
            }
          : {
              background: `linear-gradient(135deg, ${cfg.gradientFrom} 0%, ${cfg.gradientTo} 100%)`,
            }
      }
    >
      <Nav />
      {cfg.heroImage ? (
        <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-black/70 via-black/55 to-black/80" />
      ) : (
        <div className="pointer-events-none absolute inset-0 opacity-30">
          <div className="absolute -top-32 -right-32 h-[500px] w-[500px] rounded-full bg-white/10 blur-3xl" />
          <div className="absolute -bottom-40 -left-40 h-[600px] w-[600px] rounded-full bg-black/30 blur-3xl" />
        </div>
      )}

      <div className="relative mx-auto flex max-w-6xl flex-col items-center px-6 pt-36 pb-32 text-center md:pt-44 md:pb-40">
        <span className="mb-6 inline-flex items-center gap-2 rounded-full bg-black/40 px-4 py-1.5 text-xs font-semibold uppercase tracking-widest text-white/90 backdrop-blur">
          .PONTO · Tráfego pago para {cfg.niche}
        </span>
        <h1 className="font-display text-4xl font-black uppercase leading-[1.05] text-white drop-shadow-[0_4px_20px_rgba(0,0,0,0.6)] md:text-6xl lg:text-7xl">
          {cfg.heroLead}{" "}
          <span className="block text-[#FFB84D] drop-shadow-[0_2px_10px_rgba(0,0,0,0.5)]">
            {highlight}
          </span>
        </h1>
        <p className="mt-6 max-w-2xl text-base text-white/95 drop-shadow-[0_2px_8px_rgba(0,0,0,0.6)] md:text-lg">
          {cfg.heroSub}
        </p>
        <a
          href="#contato"
          className="mt-10 inline-flex items-center gap-3 rounded-full bg-[#3DFF8A] px-8 py-4 text-base font-bold text-black shadow-[0_8px_30px_rgba(61,255,138,0.45)] transition-transform hover:scale-[1.03]"
        >
          {ctaLabel}
        </a>
        <div className="mt-8 flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-xs font-semibold text-white/90 drop-shadow-[0_2px_6px_rgba(0,0,0,0.6)]">
          <span>★★★★★ 4,9/5 — +1.000 clientes</span>
          <span>•</span>
          <span>Sem fidelidade</span>
          <span>•</span>
          <span>Resposta em até 5 min</span>
        </div>
      </div>

      <svg
        className="relative -mb-1 block w-full"
        viewBox="0 0 1440 80"
        preserveAspectRatio="none"
      >
        <polygon points="0,80 1440,0 1440,80" fill="var(--background)" />
      </svg>
    </header>
  );
}

function Ticker({ items }: { items: string[] }) {
  const line = items.join(" • ") + " • ";
  return (
    <div className="-mt-8 space-y-3 overflow-hidden">
      <div className="rotate-[-3deg] border-y-2 border-black bg-white py-3">
        <div className="flex animate-marquee whitespace-nowrap text-base font-extrabold uppercase tracking-wider text-black">
          <span className="px-6">{line.repeat(6)}</span>
          <span className="px-6">{line.repeat(6)}</span>
        </div>
      </div>
      <div className="rotate-[2deg] border-y-2 border-[#3DFF8A] bg-[#3DFF8A]/90 py-3">
        <div className="flex animate-marquee whitespace-nowrap text-base font-extrabold uppercase tracking-wider text-black" style={{ animationDirection: "reverse" }}>
          <span className="px-6">{line.repeat(6)}</span>
          <span className="px-6">{line.repeat(6)}</span>
        </div>
      </div>
    </div>
  );
}

function Section({ children, id, className = "" }: { children: ReactNode; id?: string; className?: string }) {
  return (
    <section id={id} className={`mx-auto max-w-6xl px-6 py-20 md:py-28 ${className}`}>
      {children}
    </section>
  );
}

function Pains({ cfg }: { cfg: NicheConfig }) {
  return (
    <Section>
      <div className="mx-auto max-w-3xl text-center">
        <span className="text-xs font-bold uppercase tracking-[0.3em] text-[#3DFF8A]">A dor real</span>
        <h2 className="mt-4 text-3xl font-black uppercase md:text-5xl">{cfg.painTitle}</h2>
        <p className="mt-4 text-muted-foreground">
          Se você se identificou com pelo menos 2 dos pontos abaixo, está deixando dinheiro na mesa todos os dias.
        </p>
      </div>
      <div className="mt-14 grid gap-4 md:grid-cols-2">
        {cfg.pains.map((p) => (
          <div key={p} className="flex items-start gap-4 rounded-2xl border border-border bg-card p-6">
            <span className="mt-1 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-destructive/20 text-destructive">✕</span>
            <p className="text-base leading-relaxed text-muted-foreground">{p}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

function Comparison({ cfg }: { cfg: NicheConfig }) {
  if (!cfg.comparison) return null;
  return (
    <div className="border-y border-border bg-card/30">
      <Section>
        <div className="mx-auto max-w-3xl text-center">
          <span className="text-xs font-bold uppercase tracking-[0.3em] text-primary">Antes vs Depois</span>
          <h2 className="mt-4 text-3xl font-black uppercase md:text-5xl">
            A diferença de operar com a .PONTO
          </h2>
        </div>
        <div className="mt-14 grid gap-6 md:grid-cols-2">
          <div className="rounded-3xl border-2 border-destructive/30 bg-destructive/5 p-8">
            <div className="mb-6 flex items-center gap-3">
              <span className="flex h-10 w-10 items-center justify-center rounded-full bg-destructive/20 text-xl text-destructive">✕</span>
              <h3 className="text-xl font-black uppercase text-destructive">Sem a .PONTO</h3>
            </div>
            <ul className="space-y-3">
              {cfg.comparison.before.map((b) => (
                <li key={b} className="flex gap-3 text-sm text-muted-foreground">
                  <span className="mt-1 text-destructive">—</span>
                  <span className="line-through opacity-80">{b}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="rounded-3xl border-2 border-[#3DFF8A]/50 bg-[#3DFF8A]/5 p-8">
            <div className="mb-6 flex items-center gap-3">
              <span className="flex h-10 w-10 items-center justify-center rounded-full bg-[#3DFF8A]/20 text-xl text-[#3DFF8A]">✓</span>
              <h3 className="text-xl font-black uppercase text-[#3DFF8A]">Com a .PONTO</h3>
            </div>
            <ul className="space-y-3">
              {cfg.comparison.after.map((a) => (
                <li key={a} className="flex gap-3 text-sm">
                  <span className="mt-1 text-[#3DFF8A]">✓</span>
                  <span className="font-medium">{a}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </Section>
    </div>
  );
}

function Benefits({ cfg }: { cfg: NicheConfig }) {
  return (
    <div className="bg-gradient-to-b from-background to-card/40">
      <Section>
        <div className="mx-auto max-w-3xl text-center">
          <span className="text-xs font-bold uppercase tracking-[0.3em] text-primary">Como mudamos seu jogo</span>
          <h2 className="mt-4 text-3xl font-black uppercase md:text-5xl">
            Tráfego pago feito por especialistas em {cfg.niche.toLowerCase()}
          </h2>
        </div>
        <div className="mt-14 grid gap-6 md:grid-cols-3">
          {cfg.benefits.map((b, i) => (
            <div key={b.title} className="group relative overflow-hidden rounded-3xl border border-border bg-card p-8 transition-all hover:-translate-y-1 hover:border-primary/60">
              <div className="text-5xl font-black text-primary/30">{String(i + 1).padStart(2, "0")}</div>
              <h3 className="mt-4 text-xl font-bold">{b.title}</h3>
              <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{b.desc}</p>
            </div>
          ))}
        </div>
      </Section>
    </div>
  );
}

function WhyUs({ cfg }: { cfg: NicheConfig }) {
  if (!cfg.whyUs) return null;
  return (
    <Section>
      <div className="grid gap-12 md:grid-cols-2 md:items-center">
        <div>
          <span className="text-xs font-bold uppercase tracking-[0.3em] text-[#3DFF8A]">Por que a .PONTO</span>
          <h2 className="mt-4 text-3xl font-black uppercase leading-tight md:text-5xl">
            Não somos mais uma agência. Somos seu sócio de crescimento.
          </h2>
          <p className="mt-6 text-muted-foreground">
            A maioria das agências entrega relatório bonito e venda nenhuma. Aqui, a régua é uma só: leads qualificados que viram cliente pagante.
          </p>
          <a
            href="#contato"
            className="mt-8 inline-flex items-center gap-2 rounded-full bg-[#3DFF8A] px-6 py-3 text-sm font-bold text-black transition-transform hover:scale-105"
          >
            Quero falar agora ↗
          </a>
        </div>
        <ul className="space-y-3">
          {cfg.whyUs.map((w) => (
            <li key={w} className="flex items-start gap-4 rounded-2xl border border-border bg-card p-5">
              <span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[#3DFF8A]/20 text-[#3DFF8A]">✓</span>
              <span className="text-sm font-medium">{w}</span>
            </li>
          ))}
        </ul>
      </div>
    </Section>
  );
}

function Steps({ cfg }: { cfg: NicheConfig }) {
  return (
    <Section>
      <div className="mx-auto max-w-3xl text-center">
        <span className="text-xs font-bold uppercase tracking-[0.3em] text-[#3DFF8A]">O método .PONTO</span>
        <h2 className="mt-4 text-3xl font-black uppercase md:text-5xl">Em 4 passos, sua empresa no digital</h2>
      </div>
      <div className="mt-14 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
        {cfg.steps.map((s, i) => (
          <div key={s.title} className="relative rounded-2xl border border-border bg-card p-6">
            <div className="absolute -top-4 left-6 rounded-full bg-[#3DFF8A] px-3 py-1 text-xs font-black text-black">
              PASSO {i + 1}
            </div>
            <h3 className="mt-4 text-lg font-bold">{s.title}</h3>
            <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{s.desc}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

function Results({ cfg }: { cfg: NicheConfig }) {
  return (
    <div className="border-y border-border bg-card/40">
      <Section className="!py-16">
        <div className="grid gap-8 md:grid-cols-4 md:gap-12 text-center">
          {cfg.results.map((r) => (
            <div key={r.label}>
              <div className="bg-gradient-to-r from-primary to-[#3DFF8A] bg-clip-text text-5xl font-black text-transparent md:text-6xl">
                {r.value}
              </div>
              <div className="mt-2 text-xs font-bold uppercase tracking-widest text-muted-foreground">
                {r.label}
              </div>
            </div>
          ))}
        </div>
      </Section>
    </div>
  );
}

function Testimonials({ cfg }: { cfg: NicheConfig }) {
  if (!cfg.testimonials) return null;
  return (
    <Section>
      <div className="mx-auto max-w-3xl text-center">
        <span className="text-xs font-bold uppercase tracking-[0.3em] text-primary">Quem já cresceu com a gente</span>
        <h2 className="mt-4 text-3xl font-black uppercase md:text-5xl">Resultado real de gente real</h2>
      </div>
      <div className="mt-14 grid gap-6 md:grid-cols-3">
        {cfg.testimonials.map((t) => (
          <div key={t.name} className="flex flex-col rounded-3xl border border-border bg-card p-6">
            <div className="mb-3 text-[#3DFF8A]">★★★★★</div>
            <p className="flex-1 text-sm leading-relaxed text-muted-foreground">"{t.quote}"</p>
            <div className="mt-6 border-t border-border pt-4">
              <div className="font-bold">{t.name}</div>
              <div className="text-xs text-muted-foreground">{t.role}</div>
              <div className="mt-3 inline-block rounded-full bg-[#3DFF8A]/15 px-3 py-1 text-xs font-black text-[#3DFF8A]">
                {t.result}
              </div>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

function CaseStudy({ cfg }: { cfg: NicheConfig }) {
  if (!cfg.caseStudy) return null;
  const cs = cfg.caseStudy;
  return (
    <div className="bg-card/40 border-y border-border">
      <Section>
        <div className="grid gap-12 md:grid-cols-5 md:items-start">
          <div className="md:col-span-2">
            <span className="text-xs font-bold uppercase tracking-[0.3em] text-[#3DFF8A]">Case de sucesso</span>
            <h2 className="mt-4 text-3xl font-black uppercase leading-tight md:text-4xl">
              {cs.company}
            </h2>
            <p className="mt-4 text-sm text-muted-foreground">
              Histórias reais que ilustram exatamente o que a gente pode fazer pelo seu negócio.
            </p>
          </div>
          <div className="space-y-5 md:col-span-3">
            <div className="rounded-2xl border border-border bg-background p-6">
              <div className="text-xs font-bold uppercase tracking-widest text-destructive">Desafio</div>
              <p className="mt-2 text-sm">{cs.challenge}</p>
            </div>
            <div className="rounded-2xl border border-border bg-background p-6">
              <div className="text-xs font-bold uppercase tracking-widest text-primary">Solução .PONTO</div>
              <p className="mt-2 text-sm">{cs.solution}</p>
            </div>
            <div className="rounded-2xl border-2 border-[#3DFF8A]/50 bg-[#3DFF8A]/5 p-6">
              <div className="text-xs font-bold uppercase tracking-widest text-[#3DFF8A]">Resultado</div>
              <p className="mt-2 text-sm font-semibold">{cs.result}</p>
            </div>
          </div>
        </div>
      </Section>
    </div>
  );
}

function Guarantee({ cfg }: { cfg: NicheConfig }) {
  if (!cfg.guarantee) return null;
  return (
    <Section>
      <div className="relative mx-auto max-w-4xl overflow-hidden rounded-3xl border-2 border-[#3DFF8A]/40 bg-gradient-to-br from-[#3DFF8A]/10 via-card to-primary/10 p-10 text-center md:p-14">
        <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-[#3DFF8A] text-3xl font-black text-black">
          🛡
        </div>
        <h2 className="text-3xl font-black uppercase md:text-4xl">{cfg.guarantee.title}</h2>
        <p className="mx-auto mt-4 max-w-2xl text-muted-foreground">{cfg.guarantee.desc}</p>
      </div>
    </Section>
  );
}

function Urgency({ cfg }: { cfg: NicheConfig }) {
  return (
    <div className="bg-black text-white">
      <Section className="!py-14 text-center">
        <span className="inline-flex items-center gap-2 rounded-full bg-[#3DFF8A]/20 px-4 py-1.5 text-xs font-bold uppercase tracking-widest text-[#3DFF8A]">
          ⏰ Vagas limitadas
        </span>
        <h2 className="mx-auto mt-5 max-w-3xl text-2xl font-black uppercase leading-tight md:text-4xl">
          Atendemos apenas <span className="text-[#3DFF8A]">1 empresa de {cfg.niche.toLowerCase()} por região</span> para não criar concorrência entre clientes.
        </h2>
        <p className="mx-auto mt-4 max-w-2xl text-white/70">
          Se a sua cidade ainda estiver disponível, garantimos sua exclusividade. Caso contrário, entramos em uma lista de espera.
        </p>
        <a
          href="#contato"
          className="mt-8 inline-flex items-center gap-3 rounded-full bg-[#3DFF8A] px-8 py-4 text-base font-bold text-black transition-transform hover:scale-105"
        >
          Verificar disponibilidade na minha região ↗
        </a>
      </Section>
    </div>
  );
}

function FormSection({
  cfg,
  copy,
  variant,
  onLeadInfoChange,
}: {
  cfg: NicheConfig;
  copy: { formCta: string; formTitle: string } | null;
  variant: Variant | null;
  onLeadInfoChange?: (info: LeadInfo) => void;
}) {
  const navigate = useNavigate();
  const [sent, setSent] = useState(false);
  const [loading, setLoading] = useState(false);
  const [form, setForm] = useState({ nome: "", email: "", telefone: "", cidade: "" });

  const update = (k: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setForm((s) => {
      const next = { ...s, [k]: value };
      if ((k === "nome" || k === "cidade") && onLeadInfoChange) {
        onLeadInfoChange({ nome: next.nome, cidade: next.cidade });
      }
      return next;
    });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const nome = form.nome.trim();
    const email = form.email.trim();
    const telefone = form.telefone.trim();
    const cidade = form.cidade.trim();

    if (!nome || nome.length > 120) return toast.error("Informe seu nome.");
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) || email.length > 255)
      return toast.error("E-mail inválido.");
    if (telefone.length < 6 || telefone.length > 40) return toast.error("Telefone inválido.");
    if (!cidade || cidade.length > 120) return toast.error("Informe sua cidade.");

    setLoading(true);
    const utm = getStoredUtm();
    const { error } = await supabase.from("leads").insert({
      nome,
      email,
      telefone,
      cidade,
      nicho: cfg.niche,
      variant: cfg.slug === "estetica" ? variant : null,
      utm_source: utm.utm_source ?? null,
      utm_medium: utm.utm_medium ?? null,
      utm_campaign: utm.utm_campaign ?? null,
      utm_term: utm.utm_term ?? null,
      utm_content: utm.utm_content ?? null,
      referrer: utm.referrer ?? null,
      landing_path: utm.landing_path ?? (typeof window !== "undefined" ? window.location.pathname : null),
    });
    setLoading(false);

    if (error) {
      console.error(error);
      toast.error("Não foi possível enviar. Tente novamente.");
      return;
    }

    const leadEventId = `lead-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
    trackEvent("lead_generated", {
      nicho: cfg.niche,
      slug: cfg.slug,
      variant: cfg.slug === "estetica" ? variant : null,
      location: "landing_form",
      event_id: leadEventId,
    });
    sendCapiEvent({
      data: {
        event_name: "Lead",
        event_id: leadEventId,
        event_source_url: typeof window !== "undefined" ? window.location.href : undefined,
        user_data: {
          email,
          phone: telefone,
          first_name: nome,
          city: cidade,
          client_user_agent: typeof navigator !== "undefined" ? navigator.userAgent : undefined,
        },
        custom_data: {
          nicho: cfg.niche,
          slug: cfg.slug,
          variant: cfg.slug === "estetica" ? variant : null,
        },
      },
    }).catch(() => {});

    setForm({ nome: "", email: "", telefone: "", cidade: "" });
    onLeadInfoChange?.({ nome: "", cidade: "" });

    if (cfg.slug === "estetica") {
      navigate({ to: "/estetica/obrigado" });
      return;
    }
    setSent(true);
  };

  const formTitle = copy?.formTitle ?? "Fale com um especialista";
  const formCta = copy?.formCta ?? "Quero crescer agora ↗";

  return (
    <Section id="contato">
      <div className="grid gap-12 md:grid-cols-2 md:items-center">
        <div>
          <span className="text-xs font-bold uppercase tracking-[0.3em] text-[#3DFF8A]">Última chamada</span>
          <h2 className="mt-4 text-3xl font-black uppercase leading-tight md:text-5xl">
            NÃO SAIA AGORA! Faltam poucos segundos para sua empresa de {cfg.niche.toLowerCase()} mudar.
          </h2>
          <ul className="mt-8 space-y-4">
            {[
              { t: "Complete o formulário", d: "Suas informações são 100% seguras e usadas apenas para contato." },
              { t: "Receba uma ligação personalizada", d: "Em até 5 minutos no horário comercial, um especialista entra em contato." },
              { t: "Diagnóstico gratuito sem compromisso", d: "Você sai da call sabendo exatamente o que precisa fazer — contratando a gente ou não." },
            ].map((it) => (
              <li key={it.t} className="flex gap-4">
                <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/20 text-primary">★</span>
                <div>
                  <div className="font-bold">{it.t}</div>
                  <p className="text-sm text-muted-foreground">{it.d}</p>
                </div>
              </li>
            ))}
          </ul>
          <div className="mt-8 rounded-2xl border border-border bg-card p-5 text-sm text-muted-foreground">
            🔒 Seus dados ficam protegidos. Não enviamos spam, não vendemos lista. Apenas uma conversa, no seu tempo.
          </div>
        </div>

        <form
          onSubmit={handleSubmit}
          className="rounded-3xl border border-border bg-card p-8 shadow-2xl"
        >
          {sent ? (
            <div className="py-16 text-center">
              <div className="text-5xl">✅</div>
              <h3 className="mt-4 text-2xl font-black">Recebemos seu contato!</h3>
              <p className="mt-2 text-muted-foreground">Um especialista falará com você em breve.</p>
            </div>
          ) : (
            <div className="space-y-4">
              <h3 className="text-xl font-bold">{formTitle}</h3>
              <p className="text-sm text-muted-foreground">Resposta em até 5 minutos no horário comercial.</p>
              <input required value={form.nome} onChange={update("nome")} placeholder="Seu nome" maxLength={120}
                className="w-full rounded-xl border border-border bg-background px-4 py-3 text-sm outline-none placeholder:text-muted-foreground focus:border-primary" />
              <input required type="email" value={form.email} onChange={update("email")} placeholder="Seu melhor e-mail" maxLength={255}
                className="w-full rounded-xl border border-border bg-background px-4 py-3 text-sm outline-none placeholder:text-muted-foreground focus:border-primary" />
              <input required type="tel" value={form.telefone} onChange={update("telefone")} placeholder="Telefone / WhatsApp" maxLength={40}
                className="w-full rounded-xl border border-border bg-background px-4 py-3 text-sm outline-none placeholder:text-muted-foreground focus:border-primary" />
              <input required value={form.cidade} onChange={update("cidade")} placeholder="Cidade" maxLength={120}
                className="w-full rounded-xl border border-border bg-background px-4 py-3 text-sm outline-none placeholder:text-muted-foreground focus:border-primary" />
              <button
                type="submit"
                disabled={loading}
                className="w-full rounded-xl bg-[#3DFF8A] py-4 font-black uppercase text-black transition-transform hover:scale-[1.02] disabled:opacity-60 disabled:hover:scale-100"
              >
                {loading ? "Enviando..." : formCta}
              </button>
              <p className="text-center text-xs text-muted-foreground">
                Ao enviar, você concorda em receber contato da .PONTO.
              </p>
            </div>
          )}
        </form>
      </div>
    </Section>
  );
}

function Faq({ cfg }: { cfg: NicheConfig }) {
  return (
    <div className="bg-card/30">
      <Section>
        <div className="mx-auto max-w-3xl text-center">
          <span className="text-xs font-bold uppercase tracking-[0.3em] text-primary">Perguntas frequentes</span>
          <h2 className="mt-4 text-3xl font-black uppercase md:text-4xl">Tudo que você quer saber</h2>
        </div>
        <div className="mx-auto mt-12 max-w-3xl space-y-3">
          {cfg.faq.map((f) => (
            <details key={f.q} className="group rounded-2xl border border-border bg-card p-6">
              <summary className="cursor-pointer list-none font-bold flex justify-between gap-4">
                {f.q}
                <span className="text-primary transition-transform group-open:rotate-45">+</span>
              </summary>
              <p className="mt-4 text-sm text-muted-foreground">{f.a}</p>
            </details>
          ))}
        </div>
      </Section>
    </div>
  );
}

function Footer() {
  return (
    <footer className="border-t border-border bg-background py-12">
      <div className="mx-auto flex max-w-6xl flex-col items-center gap-4 px-6 text-center">
        <img src={logo} alt=".PONTO" className="h-10 w-auto" />
        <p className="text-sm text-muted-foreground">Sua empresa no digital. Tráfego pago de performance.</p>
        <div className="flex gap-6 text-sm text-muted-foreground">
          <Link to="/climatizacao" className="hover:text-primary">Climatização</Link>
          <Link to="/restaurantes" className="hover:text-primary">Restaurantes</Link>
          <Link to="/telefonia" className="hover:text-primary">Telefonia</Link>
        </div>
        <p className="text-xs text-muted-foreground">© {new Date().getFullYear()} .PONTO — Todos os direitos reservados.</p>
      </div>
    </footer>
  );
}