import { createFileRoute } from "@tanstack/react-router";
import { useState, type FormEvent } from "react";
import {
  ArrowRight,
  ArrowUpRight,
  Brain,
  Building2,
  Compass,
  Cpu,
  Factory,
  Handshake,
  Layers,
  LineChart,

  Network,
  Rocket,
  ScrollText,
  Shield,
  ShoppingBag,
  Sparkles,
  Target,
  Truck,
  Users,
  Workflow,
} from "lucide-react";


import cvbLogo from "@/assets/cvb-logo.png.asset.json";
import fcjLogo from "@/assets/fcj-group.png.asset.json";
import heroBg from "@/assets/hero-bg.jpg.asset.json";
import humansCompanies from "@/assets/humans-companies.jpg.asset.json";
import humansConsultants from "@/assets/humans-consultants.jpg.asset.json";
import humansStartups from "@/assets/humans-startups.jpg.asset.json";
import founderChristian from "@/assets/founder-christian.png.asset.json";
import founderCarmelo from "@/assets/founder-carmelo.png.asset.json";
import founderGiselle from "@/assets/founder-giselle.jpg.asset.json";
import founderMarcos from "@/assets/founder-marcos.png.asset.json";
import founderCleidison from "@/assets/founder-cleidison.jpg.asset.json";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      {
        title:
          "Consulting Venture Builder — Desenvolvemos startups que resolvem problemas reais | Venture Builder",
      },
      {
        name: "description",
        content:
          "A Consulting Venture Builder ajuda a desenvolver startups escaláveis com metodologia própria, tecnologia, inteligência artificial e um ecossistema de consultores e especialistas.",
      },
      { property: "og:title", content: "Consulting Venture Builder — Desenvolvemos startups que resolvem problemas reais | Venture Builder" },
      {
        property: "og:description",
        content:
          "A Consulting Venture Builder ajuda a desenvolver startups escaláveis com metodologia própria, tecnologia, inteligência artificial e um ecossistema de consultores e especialistas.",
      },
      { property: "og:url", content: "/" },
    ],
    links: [{ rel: "canonical", href: "/" }],
    scripts: [
      {
        type: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "Organization",
          name: "Consulting Venture Builder",
          description:
            "Venture builder que apoia empreendedores no desenvolvimento de startups escaláveis por meio de metodologia própria, tecnologia, inteligência artificial e um ecossistema de especialistas.",
          areaServed: "BR",
        }),
      },
    ],
  }),
  component: HomePage,
});

/* -------------------------------------------------------------------------- */
/* Data                                                                        */
/* -------------------------------------------------------------------------- */

const processSteps = [
  {
    n: "01",
    icon: Compass,
    title: "Descoberta",
    desc: "Identificamos problemas reais de mercado e mapeamos oportunidades com alto potencial de impacto.",
  },
  {
    n: "02",
    icon: Target,
    title: "Validação",
    desc: "Apoiamos a transformação de hipóteses em oportunidades através de testes estruturados e evidências.",
  },
  {
    n: "03",
    icon: Layers,
    title: "Desenvolvimento",
    desc: "Ajudamos a desenvolver produtos, MVPs e modelos de negócio prontos para o mercado.",
  },
  {
    n: "04",
    icon: Rocket,
    title: "Escala",
    desc: "Apoiamos startups a se estruturarem para crescer de forma sustentável e sólida.",
  },
];

const ecosystem = [
  {
    n: "01",
    icon: Users,
    label: "Consultores",
    desc: "Profissionais experientes que atuaram anos em projetos reais de transformação.",
  },
  {
    n: "02",
    icon: Target,
    label: "Especialistas",
    desc: "Referências técnicas em áreas-chave para acelerar decisões e execução.",
  },
  {
    n: "03",
    icon: Building2,
    label: "Empresas",
    desc: "Clientes e parceiros que trazem dores reais de mercado para o ecossistema.",
  },
  {
    n: "04",
    icon: Cpu,
    label: "Tecnologia",
    desc: "Stack moderna para construir soluções em produção — não em PowerPoint.",
  },
  {
    n: "05",
    icon: Brain,
    label: "Inteligência Artificial",
    desc: "IA aplicada como multiplicador de produtividade e valor entregue.",
    accent: true,
  },
  {
    n: "06",
    icon: Shield,
    label: "Governança",
    desc: "Estrutura, métricas e disciplina desde o dia zero da operação.",
  },
  {
    n: "07",
    icon: Workflow,
    label: "Metodologia",
    desc: "Framework próprio de venture building testado em projetos reais.",
  },
  {
    n: "08",
    icon: Network,
    label: "Rede de Parceiros",
    desc: "Conexões estratégicas com o ecossistema FCJ e comunidades de inovação.",
  },
];

const verticals = [
  { icon: Truck, label: "Logística", desc: "Soluções para cadeias de suprimentos e operações." },
  { icon: Factory, label: "Indústria", desc: "Inovação em manufatura, processos e produtividade." },
  { icon: Handshake, label: "Serviços", desc: "Tecnologia aplicada a serviços profissionais." },
  { icon: ShoppingBag, label: "Varejo", desc: "Experiência, dados e IA para o novo consumo." },
];

const offerings = [
  { icon: Workflow, title: "Metodologia", desc: "Framework próprio de Venture Building." },
  { icon: Shield, title: "Governança", desc: "Estruturação empresarial desde o início." },
  { icon: Cpu, title: "Tecnologia", desc: "Apoio técnico para desenvolvimento de soluções." },
  { icon: Brain, title: "IA", desc: "Ferramentas inteligentes para acelerar crescimento." },
  { icon: Users, title: "Rede de especialistas", desc: "Mentores e profissionais experientes." },
  { icon: LineChart, title: "Desenvolvimento de negócios", desc: "Estratégia, validação e estruturação comercial." },
];

const differentiators = [
  "Tecnologia aplicada ao negócio",
  "Metodologia própria",
  "Ecossistema colaborativo",
  "Apoio ao desenvolvimento de soluções reais",
  "Apoio estratégico",
  "Visão de longo prazo",
];

const STARTUP_SIGNUP_URL =
  "https://innovarium.fcjventurebuilder.com/#/loja/fcjbrasil/competicao/consulting-venture-builder";

/* -------------------------------------------------------------------------- */
/* Page                                                                        */
/* -------------------------------------------------------------------------- */

function HomePage() {

  return (
    <div className="min-h-screen bg-background text-foreground">
      <Nav />
      <Hero />
      <WhoWeAre />
      <Founders />
      <WhyWeExist />
      <WhatWeWant />
      <HowWeDoIt />
      <ForWhom />
      <Thesis />
      <Process />
      <Ecosystem />
      <AISection />
      <Verticals />
      <Offerings />
      <Differentiators />
      <StartupSignup />
      <FCJBlock />

      <CTASection />
      <Footer />
    </div>
  );
}

/* -------------------------------------------------------------------------- */
/* Navigation                                                                 */
/* -------------------------------------------------------------------------- */

function Nav() {
  return (
    <nav className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-md">
      <div className="mx-auto flex h-20 max-w-7xl items-center justify-between px-6">
        <a href="#top" className="flex items-center gap-3">
          <img
            src={cvbLogo.url}
            alt="Consulting Venture Builder"
            width={200}
            height={64}
            className="h-10 w-auto md:h-12"
          />
        </a>
        <div className="hidden items-center gap-7 md:flex">
          <a href="#sobre" className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground">
            Empresa
          </a>
          <a href="#founders" className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground">
            Founders
          </a>
          <a href="#empresas" className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground">
            Empresas
          </a>
          <a href="#consultores" className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground">
            Consultores
          </a>
          <a href="#startups" className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground">
            Startups
          </a>
          <a href="#contato" className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground">
            Contato
          </a>
          <a
            href={STARTUP_SIGNUP_URL}
            target="_blank"
            rel="noopener noreferrer"
            className="rounded-full bg-foreground px-5 py-2.5 text-[11px] font-bold uppercase tracking-widest text-background transition-all hover:bg-primary hover:text-primary-foreground"
          >
            Cadastre sua startup
          </a>

        </div>
      </div>
    </nav>
  );
}

/* -------------------------------------------------------------------------- */
/* Hero                                                                        */
/* -------------------------------------------------------------------------- */

function Hero() {
  return (
    <section id="top" className="relative overflow-hidden pt-32 pb-28 lg:pt-40 lg:pb-36">
      {/* Background image */}
      <div className="absolute inset-0">
        <img
          src={heroBg.url}
          alt="Time de consultores em reunião estratégica com dashboards de dados"
          className="h-full w-full object-cover"
          width={1920}
          height={1280}
        />
        <div className="absolute inset-0 bg-gradient-to-r from-background/95 via-background/70 to-background/20" />
        <div className="absolute inset-0 bg-gradient-to-t from-background via-background/30 to-transparent" />

      </div>
      <div className="pointer-events-none absolute inset-0 blueprint-grid opacity-20 [mask-image:radial-gradient(ellipse_at_top,black,transparent_70%)]" />
      <div className="pointer-events-none absolute -top-40 right-0 h-[600px] w-[600px] rounded-full bg-primary/20 blur-[160px]" />

      <div className="relative mx-auto grid max-w-7xl grid-cols-1 items-center gap-16 px-6 lg:grid-cols-12">
        <div className="lg:col-span-8">
          <div className="animate-reveal mb-8 inline-flex items-center gap-3 rounded-full border border-primary/25 bg-primary/10 px-3 py-1 text-[10px] font-bold uppercase tracking-[0.25em] text-primary backdrop-blur">
            <span className="relative flex h-2 w-2">
              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75" />
              <span className="relative inline-flex h-2 w-2 rounded-full bg-primary" />
            </span>
            Inovação séria
          </div>

          <h1 className="animate-reveal text-balance text-5xl font-extrabold leading-[0.95] tracking-tighter md:text-7xl lg:text-[5.5rem]">
            Ajudamos a desenvolver <span className="text-primary">startups</span> que resolvem problemas reais.
          </h1>

          <p className="animate-reveal mt-8 max-w-2xl text-pretty text-lg leading-relaxed text-foreground/80 md:text-xl">
            A Consulting Venture Builder apoia empreendedores no desenvolvimento de startups escaláveis,
            conectando consultores, especialistas e empresas por meio de metodologia,
            tecnologia e inteligência artificial.
          </p>

          <div className="animate-reveal mt-10 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
            <a
              href={STARTUP_SIGNUP_URL}
              target="_blank"
              rel="noopener noreferrer"
              className="group inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-8 py-4 text-sm font-bold text-primary-foreground shadow-glow transition-transform hover:-translate-y-0.5"
            >
              Cadastre sua startup
              <ArrowRight className="size-4 transition-transform group-hover:translate-x-1" />
            </a>
            <a
              href="#metodologia"
              className="inline-flex items-center justify-center gap-2 rounded-lg border border-border bg-background/60 px-8 py-4 text-sm font-bold text-foreground backdrop-blur transition-colors hover:bg-accent"
            >
              Conheça nossa metodologia
            </a>
          </div>


          <div className="animate-reveal mt-16 grid max-w-xl grid-cols-3 gap-8 border-t border-border/70 pt-8">
            <MiniStat label="Verticais" value="04" />
            <MiniStat label="Pilares do ecossistema" value="08" />
            <MiniStat label="Jornada" value="4 etapas" />
          </div>
        </div>
      </div>
    </section>
  );
}

function MiniStat({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <div className="text-2xl font-extrabold tracking-tighter text-primary">{value}</div>
      <div className="mt-1 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
        {label}
      </div>
    </div>
  );
}

/* -------------------------------------------------------------------------- */
/* About                                                                       */
/* -------------------------------------------------------------------------- */

function WhoWeAre() {
  return (
    <section id="sobre" className="border-y border-border py-28 lg:py-36">
      <div className="mx-auto grid max-w-7xl grid-cols-1 gap-16 px-6 lg:grid-cols-12">
        <div className="lg:col-span-4">
          <SectionKicker label="// Quem somos" />
          <h2 className="mt-4 text-4xl font-extrabold leading-tight tracking-tight md:text-5xl">
            Consultores construindo a <span className="text-primary">próxima geração</span> da consultoria.
          </h2>
        </div>
        <div className="space-y-6 text-lg leading-relaxed text-muted-foreground lg:col-span-7 lg:col-start-6">
          <p>
            Somos um time de consultores, especialistas e operadores que passou anos dentro
            de projetos reais de transformação — em indústrias, no varejo, em serviços e na
            logística. Sabemos, na prática, o que trava a rotina de um consultor e o que
            gera valor de verdade para um cliente.
          </p>
          <p>
            A <strong className="text-foreground">Consulting Venture Builder</strong> é o
            nosso jeito de reunir essa experiência em um único ambiente:
            pessoas com trajetória sólida, tecnologia proprietária, inteligência artificial
            e a força institucional da <strong className="text-foreground">FCJ Group</strong>,
            nossa sócia estratégica no modelo de venture building.
          </p>
          <p>
            Não somos uma consultoria tradicional e não somos uma software house. Somos um
            grupo que acredita que a consultoria do futuro entrega
            <strong className="text-foreground"> solução, não apresentação</strong>.
          </p>
        </div>
      </div>
    </section>
  );
}

/* -------------------------------------------------------------------------- */
/* Why We Exist                                                                */
/* -------------------------------------------------------------------------- */

function WhyWeExist() {
  return (
    <section id="por-que-existimos" className="border-b border-border py-28 lg:py-36">
      <div className="mx-auto max-w-7xl px-6">
        <div className="grid grid-cols-1 gap-16 lg:grid-cols-12">
          <div className="lg:col-span-5">
            <SectionKicker label="// Por que existimos" />
            <h2 className="mt-4 text-4xl font-extrabold leading-tight tracking-tight md:text-5xl">
              O mercado de consultoria está em transformação. Queremos construir a <span className="text-primary">versão 2.0</span>.
            </h2>
          </div>
          <div className="lg:col-span-7">
            <div className="space-y-6 text-lg leading-relaxed text-muted-foreground">
              <p>
                Historicamente, consultoria significou <em>diagnóstico, deck e recomendação</em>.
                Muito conhecimento entregue em PDF — e pouca coisa realmente implementada.
              </p>
              <p>
                Enxergamos uma virada estrutural: soluções cada vez mais <strong className="text-foreground">tech</strong>{" "}
                estão entrando no ambiente das consultorias. Automação, IA e produtos digitais
                passam a fazer parte do dia a dia do consultor, que fica <strong className="text-foreground">
                melhor suportado por tecnologia</strong> e livre para atuar como um verdadeiro
                <strong className="text-foreground"> advisor estratégico</strong>.
              </p>
              <p>
                A dinâmica muda para todo mundo — consultor, empresa cliente e mercado.
                A Consulting Venture Builder existe para <strong className="text-foreground">
                construir essa visão futura da consultoria</strong>: mais tecnológica, mais
                orientada a resultado, mais próxima da operação e menos dependente de
                relatório.
              </p>
            </div>

            <div className="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-3">
              <ShiftCard from="Diagnóstico em PDF" to="Solução em produção" />
              <ShiftCard from="Consultor sobrecarregado" to="Consultor com IA ao lado" highlighted />
              <ShiftCard from="Projeto que termina" to="Solução que segue evoluindo" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ShiftCard({ from, to, highlighted }: { from: string; to: string; highlighted?: boolean }) {
  return (
    <div
      className={
        "rounded-2xl border p-5 " +
        (highlighted ? "border-primary/40 bg-primary/5" : "border-border bg-card/40")
      }
    >
      <div className="font-mono-tech text-[10px] uppercase tracking-widest text-muted-foreground">
        de
      </div>
      <div className="mt-1 text-sm font-semibold text-muted-foreground line-through">
        {from}
      </div>
      <div className="mt-4 font-mono-tech text-[10px] uppercase tracking-widest text-primary">
        para
      </div>
      <div className={"mt-1 text-base font-extrabold tracking-tight " + (highlighted ? "text-primary" : "text-foreground")}>
        {to}
      </div>
    </div>
  );
}

/* -------------------------------------------------------------------------- */
/* What We Want                                                                */
/* -------------------------------------------------------------------------- */

function WhatWeWant() {
  return (
    <section id="o-que-queremos" className="py-28 lg:py-36">
      <div className="mx-auto max-w-7xl px-6">
        <div className="mb-16 max-w-3xl">
          <SectionKicker label="// O que queremos" />
          <h2 className="mt-4 text-4xl font-extrabold leading-tight tracking-tight md:text-5xl">
            Resolver <span className="text-primary">dores reais</span> com tecnologia, quick-wins e velocidade.
          </h2>
          <p className="mt-6 text-lg leading-relaxed text-muted-foreground">
            Nosso propósito tem dois lados que se completam — e nenhum deles cabe em uma
            apresentação de slides.
          </p>
        </div>

        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
          <div className="rounded-3xl border border-border bg-card/40 p-10">
            <div className="flex size-12 items-center justify-center rounded-xl bg-primary/10 text-primary">
              <Building2 className="size-6" strokeWidth={1.5} />
            </div>
            <h3 className="mt-8 text-2xl font-extrabold tracking-tight">Para empresas</h3>
            <p className="mt-4 text-base leading-relaxed text-muted-foreground">
              Ajudar organizações a resolver problemas concretos com{" "}
              <strong className="text-foreground">tecnologia aplicada, quick-wins e velocidade</strong>.
              Menos diagnóstico, mais solução em produção. O foco é destravar valor rápido
              — com método, dados e IA sustentando cada decisão.
            </p>
          </div>

          <div className="rounded-3xl border border-primary/30 bg-primary/5 p-10">
            <div className="flex size-12 items-center justify-center rounded-xl bg-primary text-primary-foreground">
              <Users className="size-6" strokeWidth={1.5} />
            </div>
            <h3 className="mt-8 text-2xl font-extrabold tracking-tight">Para consultores</h3>
            <p className="mt-4 text-base leading-relaxed text-muted-foreground">
              Ajudar consultores a <strong className="text-foreground">entregar melhor os
              seus serviços</strong> — resolvendo primeiro as próprias dores operacionais
              com tecnologia e IA — para, como consequência, entregar muito mais valor às
              empresas atendidas.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------------------------------------------------------------------------- */
/* How We Do It                                                                */
/* -------------------------------------------------------------------------- */

function HowWeDoIt() {
  return (
    <section id="como-faremos" className="border-y border-border bg-card/30 py-28 lg:py-36">
      <div className="mx-auto max-w-7xl px-6">
        <div className="mb-16 grid grid-cols-1 gap-10 lg:grid-cols-12">
          <div className="lg:col-span-5">
            <SectionKicker label="// Como faremos" />
            <h2 className="mt-4 text-4xl font-extrabold leading-tight tracking-tight md:text-5xl">
              <span className="text-primary">Dois pilares</span> sustentam a nossa forma de atuar.
            </h2>
          </div>
          <p className="text-lg leading-relaxed text-muted-foreground lg:col-span-6 lg:col-start-7">
            Uma tese clara e um time de especialistas — combinados a tecnologia,
            IA e método — para transformar dor em solução em ciclos curtos.
          </p>
        </div>

        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
          <PillarCard
            n="01"
            title="Um grupo de especialistas em áreas-chave"
            desc="Consultores e operadores seniores em tecnologia, dados, IA, processos, produto e desenvolvimento de negócios — cada um dominando profundamente a sua frente."
          />
          <PillarCard
            n="02"
            title="Uma tese focada nas dores de pequenas e médias empresas"
            desc="Nosso recorte é objetivo: atacar os gargalos mais comuns de PMEs em logística, indústria, serviços e varejo com soluções tecnológicas de rápida implementação."
            highlighted
          />
        </div>
      </div>
    </section>
  );
}

function PillarCard({
  n,
  title,
  desc,
  highlighted,
}: {
  n: string;
  title: string;
  desc: string;
  highlighted?: boolean;
}) {
  return (
    <div
      className={
        "rounded-3xl border p-10 " +
        (highlighted ? "border-primary/40 bg-primary/5" : "border-border bg-background")
      }
    >
      <div className="flex items-center justify-between">
        <span className="font-mono-tech text-sm text-primary">{n}</span>
        <span className="font-mono-tech text-[10px] uppercase tracking-widest text-muted-foreground">
          pilar
        </span>
      </div>
      <h3 className="mt-10 text-2xl font-extrabold leading-tight tracking-tight md:text-3xl">
        {title}
      </h3>
      <p className="mt-4 text-base leading-relaxed text-muted-foreground">{desc}</p>
    </div>
  );
}

/* -------------------------------------------------------------------------- */
/* For Whom                                                                    */
/* -------------------------------------------------------------------------- */

const personas = [
  {
    id: "empresas",
    icon: Building2,
    label: "Para empresas",
    tagline: "Resolva dores reais com tecnologia e velocidade.",
    image: humansCompanies.url,
    bullets: [
      "Solução em produção, não diagnóstico em PDF",
      "Quick-wins com IA aplicada à operação",
      "Roadmap orientado a valor, não a entregável",
    ],
  },
  {
    id: "consultores",
    icon: Users,
    label: "Para consultores",
    tagline: "Entregue mais valor com tecnologia ao seu lado.",
    image: humansConsultants.url,
    bullets: [
      "Ferramentas e IA para escalar sua entrega",
      "Metodologia e governança compartilhadas",
      "Rede de especialistas para complementar seu portfólio",
    ],
  },
  {
    id: "startups",
    icon: Rocket,
    label: "Para startups",
    tagline: "Apoio no desenvolvimento de negócios escaláveis.",
    image: humansStartups.url,
    bullets: [
      "Metodologia própria de venture building",
      "Governança e estruturação desde o início",
      "Rede de mentores, especialistas e parceiros",
    ],
  },
];

function ForWhom() {
  return (
    <section id="para-quem" className="py-28 lg:py-36">
      <div className="mx-auto max-w-7xl px-6">
        <div className="mb-16 flex flex-col items-start justify-between gap-6 md:flex-row md:items-end">
          <div className="max-w-2xl">
            <SectionKicker label="// Para quem" />
            <h2 className="mt-4 text-4xl font-extrabold leading-tight tracking-tight md:text-5xl">
              O que entregamos para <span className="text-primary">cada perfil</span>.
            </h2>
          </div>
          <p className="max-w-md text-muted-foreground">
            Uma proposta clara e distinta para empresas, consultores e startups.
          </p>
        </div>

        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
          {personas.map((p) => (
            <div
              key={p.id}
              id={p.id}
              className="group flex flex-col overflow-hidden rounded-3xl border border-border bg-card/40 transition-all hover:-translate-y-1 hover:border-primary/50 hover:shadow-xl"
            >
              <div className="relative aspect-[16/10] overflow-hidden">
                <img
                  src={p.image}
                  alt={p.label}
                  className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
                  loading="lazy"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-card via-card/20 to-transparent" />
                <div className="absolute left-6 top-6 flex size-12 items-center justify-center rounded-xl bg-background/80 text-primary backdrop-blur">
                  <p.icon className="size-6" strokeWidth={1.5} />
                </div>
              </div>
              <div className="flex flex-1 flex-col p-8">
                <h3 className="text-2xl font-extrabold tracking-tight">{p.label}</h3>
                <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                  {p.tagline}
                </p>
                <ul className="mt-6 space-y-3">
                  {p.bullets.map((b) => (
                    <li key={b} className="flex items-start gap-3 text-sm">
                      <span className="mt-1.5 inline-flex size-1.5 shrink-0 rounded-full bg-primary" />
                      <span className="text-foreground/90">{b}</span>
                    </li>
                  ))}
                </ul>
                <a
                  href="#contato"
                  className="mt-auto inline-flex items-center gap-2 pt-8 text-[11px] font-bold uppercase tracking-widest text-primary"
                >
                  Quero falar sobre isso
                  <ArrowRight className="size-4 transition-transform group-hover:translate-x-1" />
                </a>
              </div>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

/* -------------------------------------------------------------------------- */
/* Founders                                                                    */
/* -------------------------------------------------------------------------- */

const founders = [
  { name: "Christian Amorim", role: "Founder", photo: founderChristian.url },
  { name: "Carmelo Rocha", role: "Founder", photo: founderCarmelo.url },
  { name: "Giselle Brighenti", role: "Founder", photo: founderGiselle.url },
  { name: "Marcos Reis", role: "Founder", photo: founderMarcos.url },
  { name: "Cleidison Alves", role: "Founder", photo: founderCleidison.url },
];

function Founders() {
  return (
    <section id="founders" className="border-b border-border py-28 lg:py-36">
      <div className="mx-auto max-w-7xl px-6">
        <div className="mb-16 grid grid-cols-1 gap-12 lg:grid-cols-12">
          <div className="lg:col-span-5">
            <SectionKicker label="// Founders" />
            <h2 className="mt-4 text-4xl font-extrabold leading-tight tracking-tight md:text-5xl">
              Os <span className="text-primary">idealizadores</span> por trás da Consulting Venture Builder.
            </h2>
          </div>
          <div className="lg:col-span-6 lg:col-start-7">
            <p className="text-lg leading-relaxed text-muted-foreground">
              Um time de founders com trajetória complementar em consultoria, tecnologia,
              gestão e desenvolvimento de negócios — unidos pela missão de apoiar
              empreendedores no desenvolvimento de startups escaláveis.
            </p>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-5 sm:grid-cols-3 lg:grid-cols-5">
          {founders.map((f) => (
            <div
              key={f.name}
              className="group overflow-hidden rounded-2xl border border-border bg-card/40 transition-all hover:-translate-y-1 hover:border-primary/40 hover:shadow-lg"
            >
              <div className="aspect-[4/5] overflow-hidden bg-muted">
                <img
                  src={f.photo}
                  alt={`${f.name} — ${f.role} da Consulting Venture Builder`}
                  className="h-full w-full object-cover grayscale transition-all duration-500 group-hover:grayscale-0 group-hover:scale-105"
                  loading="lazy"
                />
              </div>
              <div className="p-5">
                <div className="text-sm font-extrabold tracking-tight text-foreground">
                  {f.name}
                </div>
                <div className="mt-1 font-mono-tech text-[10px] uppercase tracking-widest text-primary">
                  {f.role}
                </div>
              </div>
            </div>
          ))}
        </div>


        {/* FCJ Group highlight */}
        <div className="mt-16 overflow-hidden rounded-3xl border border-primary/30 bg-gradient-to-br from-primary/10 via-card to-card">
          <div className="grid grid-cols-1 items-center gap-10 p-8 md:grid-cols-12 md:p-12">
            <div className="flex items-center justify-center md:col-span-4">
              <div className="rounded-2xl bg-background p-8 shadow-lg">
                <img
                  src={fcjLogo.url}
                  alt="FCJ Group"
                  className="h-24 w-auto md:h-28"
                />
              </div>
            </div>
            <div className="md:col-span-8">
              <SectionKicker label="// Sócia estratégica" />
              <h3 className="mt-4 text-3xl font-extrabold leading-tight tracking-tight md:text-4xl">
                FCJ Group: sócia fundamental do nosso sucesso.
              </h3>
              <p className="mt-6 text-lg leading-relaxed text-muted-foreground">
                A <strong className="text-foreground">FCJ Group</strong> é sócia da
                Consulting Venture Builder e peça-chave da nossa trajetória. Com mais de
                uma década construindo, investindo e escalando startups no Brasil e na
                América Latina, a FCJ traz o <strong className="text-foreground">domínio
                pleno do modelo de venture building</strong>, metodologia consolidada,
                governança de nível institucional e uma rede ativa de investidores,
                mentores e corporações.
              </p>
              <ul className="mt-8 grid grid-cols-1 gap-3 sm:grid-cols-2">
                {[
                  "Expertise consolidada em venture building",
                  "Domínio do modelo end-to-end",
                  "Rede de investidores e corporações",
                  "Governança e metodologia madura",
                ].map((item) => (
                  <li
                    key={item}
                    className="flex items-start gap-3 rounded-xl border border-border/60 bg-background/40 p-3 text-sm font-semibold"
                  >
                    <span className="mt-1 inline-flex size-2 shrink-0 rounded-full bg-primary" />
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}



/* -------------------------------------------------------------------------- */
/* Thesis                                                                      */
/* -------------------------------------------------------------------------- */

function Thesis() {
  return (
    <section className="py-28 lg:py-36">
      <div className="mx-auto grid max-w-7xl grid-cols-1 items-center gap-16 px-6 md:grid-cols-2 md:gap-24">
        <div>
          <SectionKicker label="// Tese estratégica" />
          <h2 className="mt-4 text-4xl font-extrabold tracking-tight md:text-5xl">
            De <span className="text-primary">consultores</span> para <span className="text-primary">consultores</span>.
          </h2>
          <div className="mt-8 space-y-5 text-lg leading-relaxed text-muted-foreground">
            <p>
              Acreditamos que grandes startups nascem da experiência prática de profissionais
              que conhecem profundamente os desafios do mercado.
            </p>
            <p>
              Por isso criamos um ecossistema que conecta consultores, especialistas,
              tecnologia e empresas para apoiar o desenvolvimento de soluções capazes de gerar
              impacto real.
            </p>
            <p>
              Nossa proposta é reduzir fricções operacionais utilizando tecnologia,
              inteligência artificial e metodologias de venture building.
            </p>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4">
          <StatCard title="100%" caption="Foco em problemas reais" />
          <StatCard title="+IA" caption="Aceleração tecnológica" highlighted />
          <div className="col-span-2 rounded-2xl border border-border bg-card/40 p-8">
            <div className="text-3xl font-extrabold tracking-tighter">Ecosystem First</div>
            <div className="mt-2 text-[11px] font-bold uppercase tracking-widest text-muted-foreground">
              Rede de especialistas integrada
            </div>
            <div className="mt-6 h-px w-full bg-border" />
            <div className="mt-6 flex items-center justify-between text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
              <span className="font-mono-tech">/ modelo fcj</span>
              <span className="font-mono-tech text-primary">colaborativo</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function StatCard({
  title,
  caption,
  highlighted,
}: {
  title: string;
  caption: string;
  highlighted?: boolean;
}) {
  return (
    <div
      className={
        "rounded-2xl border p-8 " +
        (highlighted
          ? "border-primary/30 bg-primary/5"
          : "border-border bg-card/40")
      }
    >
      <div
        className={
          "text-4xl font-extrabold tracking-tighter " + (highlighted ? "text-primary" : "")
        }
      >
        {title}
      </div>
      <div className="mt-2 text-[11px] font-bold uppercase tracking-widest text-muted-foreground">
        {caption}
      </div>
    </div>
  );
}

/* -------------------------------------------------------------------------- */
/* Process                                                                     */
/* -------------------------------------------------------------------------- */

function Process() {
  return (
    <section id="metodologia" className="bg-card/30 py-28 lg:py-36">
      <div className="mx-auto max-w-7xl px-6">
        <div className="mb-16 flex flex-col items-start justify-between gap-6 md:flex-row md:items-end">
          <div className="max-w-xl">
            <SectionKicker label="// Como atuamos" />
            <h2 className="mt-4 text-4xl font-extrabold tracking-tight md:text-5xl">
              Uma jornada estruturada em quatro etapas.
            </h2>
          </div>
          <p className="max-w-md text-muted-foreground">
            Da descoberta do problema à escala da operação — em cada etapa, apoiamos com
            metodologia, governança e tecnologia.
          </p>
        </div>

        <div className="grid grid-cols-1 gap-px overflow-hidden rounded-2xl border border-border bg-border md:grid-cols-2 lg:grid-cols-4">
          {processSteps.map(({ n, title, desc, icon: Icon }) => (
            <div
              key={n}
              className="group relative flex flex-col justify-between bg-background p-10 transition-colors hover:bg-primary/[0.03]"
            >
              <div className="flex items-center justify-between">
                <span className="font-mono-tech text-sm text-primary">{n}</span>
                <Icon className="size-5 text-muted-foreground transition-colors group-hover:text-primary" />
              </div>
              <div className="mt-16">
                <h3 className="text-2xl font-extrabold tracking-tight">{title}</h3>
                <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* -------------------------------------------------------------------------- */
/* Ecosystem                                                                   */
/* -------------------------------------------------------------------------- */

function Ecosystem() {
  return (
    <section id="ecossistema" className="relative overflow-hidden py-28 lg:py-36">
      <div className="pointer-events-none absolute inset-0 blueprint-grid opacity-[0.07]" />
      <div className="pointer-events-none absolute -left-40 top-1/3 h-[500px] w-[500px] rounded-full bg-primary/10 blur-[140px]" />
      <div className="relative mx-auto max-w-7xl px-6">
        <div className="mb-16 grid grid-cols-1 gap-10 lg:grid-cols-12 lg:items-end">
          <div className="lg:col-span-7">
            <SectionKicker label="// Ecossistema" />
            <h2 className="mt-4 text-4xl font-extrabold tracking-tight md:text-5xl">
              Oito pilares. <span className="text-primary">Um ecossistema.</span>
            </h2>
            <p className="mt-6 max-w-2xl text-lg text-muted-foreground">
              Não somos uma consultoria isolada nem uma startup solo. Reunimos pessoas,
              método e tecnologia em um ecossistema que se retroalimenta — cada pilar
              multiplica o valor do outro.
            </p>
          </div>
          <div className="lg:col-span-5">
            <div className="rounded-2xl border border-primary/30 bg-primary/5 p-6">
              <div className="flex items-center gap-2 font-mono-tech text-[10px] uppercase tracking-[0.25em] text-primary">
                <span className="h-1.5 w-1.5 rounded-full bg-primary" />
                Colaboração radical
              </div>
              <p className="mt-3 text-sm leading-relaxed text-foreground/80">
                Consultores, especialistas e empresas conectados por tecnologia e IA para
                transformar experiência prática em soluções reais.
              </p>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {ecosystem.map((item) => {
            const Icon = item.icon;
            const highlight = item.accent;
            return (
              <div
                key={item.n}
                className={
                  "group relative flex flex-col justify-between overflow-hidden rounded-2xl border p-6 transition-all hover:-translate-y-1 " +
                  (highlight
                    ? "border-primary/60 bg-primary text-primary-foreground shadow-glow"
                    : "border-border bg-card/40 hover:border-primary/60 hover:bg-card")
                }
              >
                <div
                  className={
                    "pointer-events-none absolute -right-10 -top-10 h-32 w-32 rounded-full blur-2xl transition-opacity " +
                    (highlight ? "bg-white/20" : "bg-primary/0 group-hover:bg-primary/15")
                  }
                />
                <div className="relative flex items-start justify-between">
                  <div
                    className={
                      "flex size-11 items-center justify-center rounded-xl border transition-colors " +
                      (highlight
                        ? "border-white/30 bg-white/10"
                        : "border-border bg-background group-hover:border-primary/50 group-hover:text-primary")
                    }
                  >
                    <Icon className="size-5" />
                  </div>
                  <span
                    className={
                      "font-mono-tech text-[10px] uppercase tracking-widest " +
                      (highlight ? "text-white/70" : "text-muted-foreground")
                    }
                  >
                    {item.n} / 08
                  </span>
                </div>
                <div className="relative mt-8">
                  <h3 className="text-lg font-extrabold leading-tight tracking-tight">
                    {item.label}
                  </h3>
                  <p
                    className={
                      "mt-2 text-sm leading-relaxed " +
                      (highlight ? "text-white/85" : "text-muted-foreground")
                    }
                  >
                    {item.desc}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* -------------------------------------------------------------------------- */
/* AI Section                                                                  */
/* -------------------------------------------------------------------------- */

function AISection() {
  return (
    <section className="px-6 pb-28 lg:pb-36">
      <div className="relative mx-auto max-w-7xl overflow-hidden rounded-3xl bg-primary p-10 md:p-16">
        <div className="absolute inset-0 blueprint-grid opacity-15" />
        <div className="pointer-events-none absolute -right-24 -top-24 h-96 w-96 rounded-full bg-white/10 blur-3xl" />

        <div className="relative grid grid-cols-1 items-center gap-12 md:grid-cols-3">
          <div className="md:col-span-2">
            <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-3 py-1 font-mono-tech text-[10px] uppercase tracking-widest text-white">
              <Sparkles className="size-3" /> IA · Aceleradora
            </div>
            <h2 className="text-4xl font-extrabold leading-tight tracking-tight text-white md:text-5xl">
              IA como aceleradora de negócios.
            </h2>
            <p className="mt-6 max-w-xl text-lg leading-relaxed text-white/85">
              Utilizamos Inteligência Artificial para aumentar produtividade, automatizar
              processos, apoiar decisões estratégicas e acelerar o desenvolvimento das startups.
              Nossa visão é usar IA como um multiplicador de valor para empreendedores e empresas.
            </p>

            <ul className="mt-8 grid gap-3 text-white/90 sm:grid-cols-2">
              {[
                "Automação de processos operacionais",
                "Apoio à decisão estratégica",
                "Aceleração no desenvolvimento",
                "Multiplicador de valor",
              ].map((t) => (
                <li key={t} className="flex items-center gap-3 text-sm">
                  <span className="size-1.5 rounded-full bg-white" />
                  {t}
                </li>
              ))}
            </ul>
          </div>

          <div className="flex justify-center md:justify-end">
            <div className="relative flex size-56 items-center justify-center rounded-full border border-white/25">
              <div className="absolute inset-4 animate-pulse rounded-full border border-white/25" />
              <div className="flex size-32 items-center justify-center rounded-full border border-white/40 bg-white/10 backdrop-blur">
                <Brain className="size-10 text-white" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------------------------------------------------------------------------- */
/* Verticals                                                                   */
/* -------------------------------------------------------------------------- */

function Verticals() {
  return (
    <section className="border-t border-border py-28 lg:py-36">
      <div className="mx-auto max-w-7xl px-6">
        <div className="mb-16 max-w-2xl">
          <SectionKicker label="// Verticais" />
          <h2 className="mt-4 text-4xl font-extrabold tracking-tight md:text-5xl">
            Áreas de <span className="text-primary">atuação</span>
          </h2>
          <p className="mt-6 text-lg text-muted-foreground">
            Focamos em setores onde tecnologia e metodologia geram transformação real.
          </p>
        </div>

        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {verticals.map(({ icon: Icon, label, desc }) => (
            <div
              key={label}
              className="group flex flex-col rounded-2xl border border-border bg-card/30 p-8 transition-all hover:-translate-y-1 hover:border-primary/50"
            >
              <Icon className="size-8 text-primary" strokeWidth={1.5} />
              <h3 className="mt-8 text-xl font-extrabold tracking-tight">{label}</h3>
              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* -------------------------------------------------------------------------- */
/* Offerings                                                                   */
/* -------------------------------------------------------------------------- */

function Offerings() {
  return (
    <section className="bg-card/30 py-28 lg:py-36">
      <div className="mx-auto max-w-7xl px-6">
        <div className="mb-16 max-w-2xl">
          <SectionKicker label="// O que oferecemos" />
          <h2 className="mt-4 text-4xl font-extrabold tracking-tight md:text-5xl">
            Tudo o que uma startup precisa para <span className="text-primary">nascer preparada</span>.
          </h2>
        </div>

        <div className="grid grid-cols-1 gap-px overflow-hidden rounded-2xl border border-border bg-border sm:grid-cols-2 lg:grid-cols-3">
          {offerings.map(({ icon: Icon, title, desc }) => (
            <div
              key={title}
              className="group flex flex-col bg-background p-10 transition-colors hover:bg-primary/[0.03]"
            >
              <div className="flex size-11 items-center justify-center rounded-lg border border-border bg-card">
                <Icon className="size-5 text-primary" strokeWidth={1.5} />
              </div>
              <h3 className="mt-8 text-xl font-extrabold tracking-tight">{title}</h3>
              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* -------------------------------------------------------------------------- */
/* Differentiators                                                             */
/* -------------------------------------------------------------------------- */

function Differentiators() {
  return (
    <section className="py-28 lg:py-36">
      <div className="mx-auto max-w-7xl px-6">
        <div className="mb-16 flex flex-col items-start justify-between gap-6 md:flex-row md:items-end">
          <div className="max-w-xl">
            <SectionKicker label="// Diferenciais" />
            <h2 className="mt-4 text-4xl font-extrabold tracking-tight md:text-5xl">
              Por que a <span className="text-primary">Consulting Venture Builder</span>
            </h2>
          </div>
          <p className="max-w-md text-muted-foreground">
            Uma combinação única de tecnologia, método e ecossistema aplicada ao
            desenvolvimento de negócios.
          </p>
        </div>

        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {differentiators.map((d, i) => (
            <div
              key={d}
              className="group flex items-center gap-5 rounded-xl border border-border bg-card/30 p-6 transition-all hover:-translate-y-0.5 hover:border-primary hover:bg-primary/[0.04]"
            >
              <span className="flex size-9 items-center justify-center rounded-lg bg-primary/10 font-mono-tech text-xs font-bold text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
                0{i + 1}
              </span>
              <span className="text-base font-semibold">{d}</span>
              <ArrowUpRight className="ml-auto size-4 text-muted-foreground transition-colors group-hover:text-primary" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* -------------------------------------------------------------------------- */
/* Cadastro de startups                                                        */
/* -------------------------------------------------------------------------- */

function StartupSignup() {
  const steps = [
    { title: "Cadastro", desc: "Você preenche o formulário oficial com as informações da sua startup." },
    { title: "Análise", desc: "Nosso time avalia o problema, a solução e o estágio do negócio." },
    { title: "Conversa", desc: "Entramos em contato para entender a fundo a oportunidade." },
    { title: "Desenvolvimento", desc: "Se houver fit, iniciamos a jornada com metodologia e tecnologia." },
  ];

  return (
    <section id="cadastro" className="relative overflow-hidden border-t border-border py-28 lg:py-36">
      <div className="pointer-events-none absolute inset-0 blueprint-grid opacity-20 [mask-image:radial-gradient(ellipse_at_center,black,transparent_75%)]" />
      <div className="pointer-events-none absolute -bottom-40 left-1/2 h-[500px] w-[500px] -translate-x-1/2 rounded-full bg-primary/20 blur-[160px]" />

      <div className="relative mx-auto max-w-7xl px-6">
        <div className="grid grid-cols-1 gap-16 lg:grid-cols-12">
          <div className="lg:col-span-5">
            <SectionKicker label="// Cadastre sua startup" />
            <h2 className="mt-4 text-4xl font-extrabold leading-tight tracking-tight md:text-5xl">
              Inscreva sua <span className="text-primary">startup</span> na Consulting Venture Builder.
            </h2>
            <p className="mt-6 text-base leading-relaxed text-muted-foreground">
              Se você tem uma startup em qualquer estágio e quer desenvolvê-la com metodologia,
              governança, tecnologia e uma rede de especialistas, faça seu cadastro na plataforma
              oficial. É rápido e sua inscrição é analisada pelo nosso time.
            </p>
            <a
              href={STARTUP_SIGNUP_URL}
              target="_blank"
              rel="noopener noreferrer"
              className="group mt-10 inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-8 py-4 text-sm font-bold text-primary-foreground shadow-glow transition-transform hover:-translate-y-0.5"
            >
              Cadastre sua startup
              <ArrowUpRight className="size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
            </a>
          </div>

          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:col-span-7">
            {steps.map((s, i) => (
              <div
                key={s.title}
                className="rounded-xl border border-border bg-card/60 p-8 backdrop-blur transition-colors hover:border-primary/50"
              >
                <div className="font-mono-tech text-[10px] font-bold uppercase tracking-widest text-primary">
                  {String(i + 1).padStart(2, "0")}
                </div>
                <div className="mt-3 text-lg font-extrabold tracking-tight">{s.title}</div>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------------------------------------------------------------------------- */
/* FCJ Block                                                                   */
/* -------------------------------------------------------------------------- */



function FCJBlock() {
  return (
    <section className="border-y border-border py-24">
      <div className="mx-auto flex max-w-7xl flex-col items-start justify-between gap-8 px-6 md:flex-row md:items-center">
        <div className="flex items-center gap-6">
          <div className="flex size-16 items-center justify-center rounded-xl border border-border bg-card">
            <Network className="size-7 text-primary" strokeWidth={1.5} />
          </div>
          <div>
            <div className="font-mono-tech text-[10px] uppercase tracking-widest text-muted-foreground">
              // ecossistema institucional
            </div>
            <div className="mt-1 text-2xl font-extrabold tracking-tight">
              Consulting Venture Builder
            </div>
            <div className="mt-1 max-w-xl text-sm text-muted-foreground">
              Fazemos parte de um ecossistema consolidado de inovação, com metodologia,
              rede de especialistas e alcance de mercado para apoiar o desenvolvimento de
              novas startups.
            </div>
          </div>
        </div>
        <div className="flex items-center gap-3 font-mono-tech text-[10px] uppercase tracking-widest text-muted-foreground">
          <ScrollText className="size-4" />
          Institucional
        </div>
      </div>
    </section>
  );
}

/* -------------------------------------------------------------------------- */
/* CTA + Contact                                                               */
/* -------------------------------------------------------------------------- */

function CTASection() {
  return (
    <section id="contato" className="py-28 lg:py-36">
      <div className="mx-auto grid max-w-7xl grid-cols-1 gap-16 px-6 md:grid-cols-2 md:gap-20">
        <div>
          <SectionKicker label="// Vamos conversar" />
          <h2 className="mt-4 text-4xl font-extrabold leading-tight tracking-tight md:text-5xl lg:text-6xl">
            Tem uma ideia ou quer <span className="text-primary">desenvolver uma startup</span>?
          </h2>
          <p className="mt-8 text-lg leading-relaxed text-muted-foreground">
            Se você acredita que tecnologia pode resolver problemas reais e deseja
            desenvolver uma startup com metodologia, governança e apoio estratégico,
            queremos conhecer sua ideia.
          </p>

          <div className="mt-10 space-y-4">
            <ContactRow icon={Building2} label="Desenvolvimento de startups" />
            <ContactRow icon={Users} label="Consultores parceiros" />
            <ContactRow icon={Brain} label="Projetos com IA" />
          </div>
        </div>

        <ContactForm />
      </div>
    </section>
  );
}

function ContactRow({ icon: Icon, label }: { icon: typeof Building2; label: string }) {
  return (
    <div className="flex items-center gap-4 rounded-xl border border-border bg-card/30 p-4">
      <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
        <Icon className="size-5" strokeWidth={1.5} />
      </div>
      <span className="text-sm font-semibold">{label}</span>
    </div>
  );
}

function ContactForm() {
  const [submitted, setSubmitted] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError(null);
    setLoading(true);
    const fd = new FormData(e.currentTarget);
    const payload = Object.fromEntries(fd.entries());
    try {
      const res = await fetch("/api/public/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      if (!res.ok) {
        const data = (await res.json().catch(() => ({}))) as { error?: string };
        throw new Error(data.error || "Falha ao enviar");
      }
      setSubmitted(true);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Falha ao enviar");
    } finally {
      setLoading(false);
    }
  }

  if (submitted) {
    return (
      <div className="flex flex-col items-start justify-center rounded-2xl border border-primary/30 bg-primary/5 p-10">
        <div className="mb-4 flex size-12 items-center justify-center rounded-lg bg-primary text-primary-foreground">
          <Sparkles className="size-5" />
        </div>
        <h3 className="text-2xl font-extrabold tracking-tight">Recebemos sua mensagem.</h3>
        <p className="mt-3 text-muted-foreground">
          Nossa equipe entrará em contato em breve para conhecer sua ideia.
        </p>
      </div>
    );
  }

  return (
    <form
      onSubmit={onSubmit}
      className="space-y-5 rounded-2xl border border-border bg-card/30 p-8"
    >
      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
        <Field label="Nome" name="nome" required />
        <Field label="Empresa" name="empresa" />
      </div>
      <Field label="E-mail" name="email" type="email" required />
      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
        <Field label="Telefone" name="telefone" type="tel" />
        <Field label="Cidade" name="cidade" />
      </div>
      <div className="space-y-2">
        <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
          Conte um pouco sobre sua startup ou ideia
        </label>
        <textarea
          name="mensagem"
          rows={4}
          className="w-full resize-none rounded-lg border border-border bg-background/60 p-4 text-sm outline-none transition-colors focus:border-primary"
        />
      </div>
      <input
        type="text"
        name="website"
        tabIndex={-1}
        autoComplete="off"
        className="hidden"
        aria-hidden="true"
      />
      {error && (
        <p className="text-sm font-medium text-red-600">
          Não foi possível enviar. Tente novamente em instantes.
        </p>
      )}
      <button
        type="submit"
        disabled={loading}
        className="group inline-flex w-full items-center justify-center gap-2 rounded-lg bg-foreground py-4 text-[11px] font-black uppercase tracking-[0.25em] text-background transition-all hover:bg-primary hover:text-primary-foreground disabled:opacity-60"
      >
        {loading ? "Enviando..." : (<>Enviar <ArrowRight className="size-4 transition-transform group-hover:translate-x-1" /></>)}
      </button>
    </form>
  );
}

function Field({
  label,
  name,
  type = "text",
  required,
}: {
  label: string;
  name: string;
  type?: string;
  required?: boolean;
}) {
  return (
    <div className="space-y-2">
      <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
        {label}
      </label>
      <input
        name={name}
        type={type}
        required={required}
        className="w-full rounded-lg border border-border bg-background/60 p-4 text-sm outline-none transition-colors focus:border-primary"
      />
    </div>
  );
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                      */
/* -------------------------------------------------------------------------- */

function Footer() {
  return (
    <footer className="border-t border-border bg-card/20">
      <div className="mx-auto grid max-w-7xl grid-cols-1 gap-12 px-6 py-16 md:grid-cols-12">
        <div className="md:col-span-5">
          <img
            src={cvbLogo.url}
            alt="Consulting Venture Builder"
            width={220}
            height={64}
            className="h-12 w-auto"
          />
          <p className="mt-6 max-w-sm text-sm leading-relaxed text-muted-foreground">
            Apoiamos empreendedores no desenvolvimento de startups escaláveis com
            metodologia, tecnologia, inteligência artificial e um ecossistema de
            especialistas.
          </p>
          <div className="mt-6 flex items-center gap-3">
            <a
              href="https://www.linkedin.com/company/cvb-consulting-venture-builder/"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="LinkedIn da Consulting Venture Builder"
              className="flex h-10 w-10 items-center justify-center rounded-full border border-border text-foreground transition-colors hover:border-primary hover:bg-primary hover:text-primary-foreground"
            >
              <svg viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4" aria-hidden="true">
                <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z"/>
              </svg>
            </a>
            <a
              href="https://www.instagram.com/cvb.consulting/"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Instagram da Consulting Venture Builder"
              className="flex h-10 w-10 items-center justify-center rounded-full border border-border text-foreground transition-colors hover:border-primary hover:bg-primary hover:text-primary-foreground"
            >
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4" aria-hidden="true">
                <rect x="3" y="3" width="18" height="18" rx="5" />
                <circle cx="12" cy="12" r="4" />
                <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
              </svg>
            </a>
          </div>

        </div>

        <FooterCol
          title="Navegação"
          items={[
            { label: "Empresa", href: "#sobre" },
            { label: "Metodologia", href: "#metodologia" },
            { label: "Ecossistema", href: "#ecossistema" },
            { label: "Contato", href: "#contato" },
          ]}
        />
        <FooterCol
          title="Redes"
          items={[
            { label: "LinkedIn", href: "https://www.linkedin.com/company/cvb-consulting-venture-builder" },
            { label: "Instagram", href: "https://www.instagram.com/cvb.consulting/" },
          ]}
        />
      </div>

      <div className="border-t border-border">
        <div className="mx-auto flex max-w-7xl flex-col items-start justify-between gap-3 px-6 py-6 text-[10px] font-bold uppercase tracking-widest text-muted-foreground md:flex-row md:items-center">
          <span>© {new Date().getFullYear()} Consulting Venture Builder</span>
          <span className="font-mono-tech text-primary">/ inovação séria</span>
        </div>
      </div>
    </footer>
  );
}

function SectionKicker({ label }: { label: string }) {
  return (
    <div className="font-mono-tech text-[11px] uppercase tracking-[0.25em] text-primary">
      {label}
    </div>
  );
}

function FooterCol({
  title,
  items,
}: {
  title: string;
  items: { label: string; href: string }[];
}) {
  return (
    <div className="md:col-span-2">
      <div className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
        {title}
      </div>
      <ul className="mt-5 space-y-3">
        {items.map((it) => (
          <li key={it.label}>
            <a
              href={it.href}
              target={it.href.startsWith("http") ? "_blank" : undefined}
              rel={it.href.startsWith("http") ? "noopener noreferrer" : undefined}
              className="text-sm font-semibold text-foreground transition-colors hover:text-primary"
            >
              {it.label}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}