import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useState, type ReactNode } from "react";
import { motion, useReducedMotion, type Variants } from "motion/react";
import {
  Menu,
  X,
  ArrowRight,
  Check,
  Instagram,
  Linkedin,
  Facebook,
  Network,
  Rocket,
  Server,
  Users,
  TrendingUp,
  Plus,
  Minus,
  Signal,
  Building2,
  Cpu,
  Handshake,
} from "lucide-react";
import logoWhite from "@/assets/logo-cvb-white.asset.json";
import logoDark from "@/assets/logo-cvb-dark.asset.json";
import heroBg from "@/assets/hero-bg.png.asset.json";
import logoGranto from "@/assets/logo-granto.asset.json";
import logoCadex from "@/assets/logo-cadex.asset.json";
import logoNeutra from "@/assets/logo-neutra.asset.json";
import logoDot from "@/assets/logo-dot.asset.json";
import logoBeefor from "@/assets/logo-beefor.asset.json";
import logoMediquo from "@/assets/logo-mediquo.asset.json";
import logoStarya from "@/assets/logo-starya.asset.json";
import logoStartup8 from "@/assets/logo-startup8.asset.json";
import logoPagarxl from "@/assets/logo-pagarxl.asset.json";
import dcImg from "@/assets/algar-datacenter.jpg";
import teamImg from "@/assets/algar-team.jpg";
import netImg from "@/assets/algar-network.jpg";
import triMintOutline from "@/assets/tri-mint-outline.png.asset.json";
import triMintOutlineThick from "@/assets/tri-mint-outline-thick.png.asset.json";
import triMintSolid from "@/assets/tri-mint-solid.png.asset.json";
import triNeonSolid from "@/assets/tri-neon-solid.png.asset.json";
import triNeonOutline from "@/assets/tri-neon-outline.png.asset.json";
import triDarkSolid from "@/assets/tri-dark-solid.png.asset.json";

export const Route = createFileRoute("/")({
  component: Index,
});

/* --------------------------- MOTION PRIMITIVES ------------------------- */
const EASE_PREMIUM: [number, number, number, number] = [0.16, 1, 0.3, 1];

const revealVariants: Variants = {
  hidden: { opacity: 0, y: 18 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.7, ease: EASE_PREMIUM } },
};

const staggerParent: Variants = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.08, delayChildren: 0.05 } },
};

function Reveal({
  children,
  className,
  delay = 0,
  as = "div",
}: {
  children: ReactNode;
  className?: string;
  delay?: number;
  as?: "div" | "section" | "h1" | "h2" | "h3" | "p" | "span" | "article" | "li";
}) {
  const reduce = useReducedMotion();
  const MotionTag = motion[as] as typeof motion.div;
  if (reduce) {
    const Tag = as as keyof React.JSX.IntrinsicElements;
    return <Tag className={className}>{children}</Tag>;
  }
  return (
    <MotionTag
      className={className}
      initial="hidden"
      whileInView="visible"
      viewport={{ once: true, margin: "-80px" }}
      variants={{
        hidden: { opacity: 0, y: 18 },
        visible: { opacity: 1, y: 0, transition: { duration: 0.7, ease: EASE_PREMIUM, delay } },
      }}
    >
      {children}
    </MotionTag>
  );
}

function Stagger({
  children,
  className,
  as = "div",
}: {
  children: ReactNode;
  className?: string;
  as?: "div" | "ul" | "ol" | "section";
}) {
  const reduce = useReducedMotion();
  const MotionTag = motion[as] as typeof motion.div;
  if (reduce) {
    const Tag = as as keyof React.JSX.IntrinsicElements;
    return <Tag className={className}>{children}</Tag>;
  }
  return (
    <MotionTag
      className={className}
      initial="hidden"
      whileInView="visible"
      viewport={{ once: true, margin: "-80px" }}
      variants={staggerParent}
    >
      {children}
    </MotionTag>
  );
}

function StaggerItem({ children, className, as = "div" }: { children: ReactNode; className?: string; as?: "div" | "article" | "li" }) {
  const reduce = useReducedMotion();
  const MotionTag = motion[as] as typeof motion.div;
  if (reduce) {
    const Tag = as as keyof React.JSX.IntrinsicElements;
    return <Tag className={className}>{children}</Tag>;
  }
  return (
    <MotionTag className={className} variants={revealVariants}>
      {children}
    </MotionTag>
  );
}

const NAV = [
  { label: "SOBRE", href: "#sobre" },
  { label: "BENEFÍCIOS", href: "#valor" },
  { label: "TESES", href: "#teses" },
  { label: "PROCESSO", href: "#processo" },
  { label: "PORTFÓLIO", href: "#portfolio" },
  { label: "FAQ", href: "#faq" },
  { label: "INSCREVA-SE", href: "#contato" },
];

const SOCIALS = [
  { Icon: Instagram, href: "https://www.instagram.com/algarventurebuilder", label: "Instagram" },
  { Icon: Linkedin, href: "https://www.linkedin.com/company/algar-venture-builder/", label: "LinkedIn" },
  { Icon: Facebook, href: "https://www.facebook.com/algartelecomventurebuilder", label: "Facebook" },
];

function Index() {
  return (
    <div className="min-h-screen bg-white text-neutral-900 antialiased">
      <Header />
      <main>
        <Hero />
        <Sobre />
        <ComoCriamosValor />
        <Teses />
        <Beneficios />
        <Processo />
        <Elegibilidade />
        <Portfolio />
        <SobreAlgar />
        <FAQ />
      </main>
      <Footer />
    </div>
  );
}

/* ------------------------- TRI GRAPHIC (marca d'água) ------------------ */
type TriTone = "mintOutline" | "mintOutlineThick" | "mintSolid" | "neonSolid" | "neonOutline" | "darkSolid";
const TRI_SRC: Record<TriTone, string> = {
  mintOutline: triMintOutline.url,
  mintOutlineThick: triMintOutlineThick.url,
  mintSolid: triMintSolid.url,
  neonSolid: triNeonSolid.url,
  neonOutline: triNeonOutline.url,
  darkSolid: triDarkSolid.url,
};
function TriGraphic({
  tone,
  className = "",
  style,
}: {
  tone: TriTone;
  className?: string;
  style?: React.CSSProperties;
}) {
  return (
    <img
      src={TRI_SRC[tone]}
      alt=""
      aria-hidden
      loading="lazy"
      className={`pointer-events-none absolute select-none ${className}`}
      style={style}
    />
  );
}

/* ----------------------------- HEADER ---------------------------------- */
function Header() {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header className="fixed inset-x-0 top-0 z-50">
      <div className="container mx-auto max-w-7xl px-4 pt-4 sm:px-6 lg:px-8">
        <div
          className={`flex items-center justify-between gap-4 rounded-full border border-white/15 px-3 py-2 backdrop-blur-md transition-all sm:px-5 ${
            scrolled ? "bg-black/30 shadow-lg shadow-black/10" : "bg-white/10"
          }`}
        >
          <a href="#top" className="flex shrink-0 items-center gap-2 pl-1">
            <img src={logoWhite.url} alt="Algar Venture Builder" className="h-7 w-auto md:h-8" />
          </a>

          <nav className="hidden items-center gap-7 md:flex">
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="text-[11px] font-semibold uppercase tracking-widest text-white/85 transition-colors hover:text-brand-mint"
                style={{ fontFamily: "var(--font-display)" }}
              >
                {item.label}
              </a>
            ))}
          </nav>

          <div className="hidden items-center gap-3 md:flex">
            {SOCIALS.map((s) => (
              <SocialIcon key={s.label} Icon={s.Icon} href={s.href} label={s.label} />
            ))}
          </div>

          <button
            aria-label="Abrir menu"
            onClick={() => setOpen((v) => !v)}
            className="flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white md:hidden"
          >
            {open ? <X size={20} /> : <Menu size={20} />}
          </button>
        </div>

        {open && (
          <div className="mt-2 rounded-3xl border border-white/15 bg-black/60 p-4 backdrop-blur-lg md:hidden">
            <nav className="flex flex-col gap-1">
              {NAV.map((item) => (
                <a
                  key={item.href}
                  href={item.href}
                  onClick={() => setOpen(false)}
                  className="rounded-xl px-3 py-3 text-sm font-semibold uppercase tracking-widest text-white/90 hover:bg-white/10"
                  style={{ fontFamily: "var(--font-display)" }}
                >
                  {item.label}
                </a>
              ))}
            </nav>
            <div className="mt-3 flex items-center gap-3 border-t border-white/10 pt-3">
              {SOCIALS.map((s) => (
                <SocialIcon key={s.label} Icon={s.Icon} href={s.href} label={s.label} />
              ))}
            </div>
          </div>
        )}
      </div>
    </header>
  );
}

function SocialIcon({ Icon, href, label }: { Icon: typeof Instagram; href: string; label: string }) {
  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      className="flex h-9 w-9 items-center justify-center rounded-full border border-white/20 text-white/85 transition-colors hover:border-brand-mint hover:text-brand-mint"
      aria-label={label}
    >
      <Icon size={16} />
    </a>
  );
}

/* ------------------------------ HERO ----------------------------------- */
function Hero() {
  return (
    <section
      id="top"
      className="bg-brand-dark relative overflow-hidden bg-cover bg-center bg-no-repeat lg:min-h-[760px]"
      style={{
        backgroundImage: `url(${heroBg.url})`,
        backgroundPosition: "right center",
      }}
    >
      {/* Overlays em camadas: legibilidade + luz ambiente */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-linear-to-r from-brand-dark via-brand-dark/95 to-transparent lg:via-brand-dark/72"
      />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-brand-dark/60 lg:hidden"
      />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0"
        style={{
          backgroundImage:
            "radial-gradient(600px 400px at 12% 20%, rgba(0,254,0,0.18), transparent 60%), radial-gradient(500px 400px at 8% 90%, rgba(0,229,161,0.12), transparent 60%)",
        }}
      />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-0 h-px"
        style={{ background: "linear-gradient(90deg, transparent, rgba(0,254,0,0.35), transparent)" }}
      />

      <TriGraphic tone="mintOutline" className="hidden lg:block" style={{ right: "-80px", bottom: "-120px", width: 520, opacity: 0.08, transform: "rotate(-12deg)" }} />
      <TriGraphic tone="neonOutline" className="hidden lg:block" style={{ right: "38%", top: "18%", width: 140, opacity: 0.14, transform: "rotate(18deg)" }} />

      <div className="container relative mx-auto max-w-7xl px-4 pb-20 pt-32 sm:px-6 lg:px-8 lg:pb-40 lg:pt-48">
        <Stagger className="w-full lg:w-[62%]">
          <StaggerItem className="mb-7 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/[0.06] px-3.5 py-1.5 backdrop-blur-xl">
            <span className="bg-brand-neon h-1.5 w-1.5 rounded-full shadow-[0_0_12px_rgba(0,254,0,0.9)]" />
            <span className="text-[10.5px] font-semibold uppercase tracking-[0.22em] text-white/85" style={{ fontFamily: "var(--font-display)" }}>
              Corporate Venture Builder × Algar
            </span>
          </StaggerItem>
          <StaggerItem>
            <h1
              className="display-title text-white"
              style={{ fontSize: "clamp(2.5rem, 5.4vw, 4.75rem)" }}
            >
              Startups que geram<br />
              <span className="text-brand-mint">negócio real</span> dentro<br />
              de uma operação de 70 anos.
            </h1>
          </StaggerItem>
          <StaggerItem>
            <p className="mt-7 max-w-xl text-base font-light leading-relaxed text-white/85 md:text-[17px]">
              A Algar Venture Builder identifica, valida e desenvolve startups com aderência às frentes de inovação da Algar, conectando-as a um mercado de <span className="text-white">1,3 milhão de clientes</span>.
            </p>
          </StaggerItem>
          <StaggerItem className="mt-10 flex flex-wrap items-center gap-4">
            <a
              href="https://innovarium.fcjventurebuilder.com/#/loja/fcjbrasil/competicao/algar-venture-builder"
              target="_blank"
              rel="noopener noreferrer"
              className="text-brand-dark group relative inline-flex items-center gap-2 overflow-hidden rounded-full px-8 py-4 text-sm font-bold uppercase tracking-wide shadow-[0_10px_40px_-8px_rgba(0,254,0,0.55)] transition-transform duration-500 hover:scale-[1.03]"
              style={{
                fontFamily: "var(--font-display)",
                background: "linear-gradient(135deg, #00fe00 0%, #00e5a1 100%)",
                transitionTimingFunction: "cubic-bezier(0.16,1,0.3,1)",
              }}
            >
              <span className="relative z-10">Inscreva sua startup</span>
              <ArrowRight size={16} className="relative z-10 transition-transform duration-500 group-hover:translate-x-1.5" />
              <span
                aria-hidden
                className="absolute inset-0 -translate-x-full bg-white/25 transition-transform duration-700 group-hover:translate-x-full"
                style={{ transitionTimingFunction: "cubic-bezier(0.16,1,0.3,1)" }}
              />
            </a>
            <a
              href="#portfolio"
              className="hover:border-brand-mint hover:text-brand-mint group inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/[0.04] px-6 py-4 text-sm font-semibold uppercase tracking-wide text-white backdrop-blur-md transition-all duration-500"
              style={{ fontFamily: "var(--font-display)", transitionTimingFunction: "cubic-bezier(0.16,1,0.3,1)" }}
            >
              Conheça o portfólio
              <ArrowRight size={14} className="transition-transform duration-500 group-hover:translate-x-1" />
            </a>
          </StaggerItem>
        </Stagger>
      </div>
    </section>
  );
}

/* ------------------------------ SOBRE ---------------------------------- */
function Sobre() {
  const [playing, setPlaying] = useState(false);
  return (
    <section id="sobre" className="surface-light divider-fade-top relative py-24 md:py-32 lg:py-40">
      <div className="container mx-auto grid max-w-6xl gap-12 px-4 sm:px-6 lg:grid-cols-2 lg:items-center lg:gap-20 lg:px-8">
        <Reveal className="relative aspect-video overflow-hidden rounded-[28px] shadow-[0_30px_80px_-30px_rgba(11,101,90,0.35)] ring-1 ring-black/[0.04] md:rounded-[32px]">
          {playing ? (
            <iframe
              src="https://www.youtube.com/embed/QnTmwHaMBmU?autoplay=1&rel=0&modestbranding=1"
              title="Vídeo institucional Algar Venture Builder"
              loading="lazy"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerPolicy="strict-origin-when-cross-origin"
              allowFullScreen
              className="absolute inset-0 h-full w-full border-0"
            />
          ) : (
            <button
              type="button"
              onClick={() => setPlaying(true)}
              aria-label="Assistir vídeo institucional"
              className="group absolute inset-0 h-full w-full cursor-pointer overflow-hidden"
            >
              <img
                src={`https://img.youtube.com/vi/QnTmwHaMBmU/maxresdefault.jpg`}
                alt="Vídeo institucional Algar Venture Builder"
                className="absolute inset-0 h-full w-full object-cover transition-transform duration-1000 group-hover:scale-105"
                style={{ transitionTimingFunction: "cubic-bezier(0.16,1,0.3,1)" }}
              />
              <div
                aria-hidden
                className="absolute inset-0"
                style={{
                  background:
                    "linear-gradient(135deg, rgba(11,101,90,0.7) 0%, rgba(11,101,90,0.45) 55%, rgba(0,229,161,0.25) 100%)",
                }}
              />
              <div className="absolute inset-0 flex flex-col items-center justify-center gap-6 p-6">
                <img src={logoWhite.url} alt="" className="h-10 w-auto opacity-95 md:h-12" />
                <span className="ring-play text-brand-dark relative flex h-16 w-16 items-center justify-center rounded-full shadow-[0_10px_30px_-6px_rgba(0,254,0,0.6)] transition-transform duration-500 group-hover:scale-110 md:h-20 md:w-20" style={{ background: "linear-gradient(135deg,#00fe00,#00e5a1)", transitionTimingFunction: "cubic-bezier(0.16,1,0.3,1)" }}>
                  <svg viewBox="0 0 24 24" fill="currentColor" className="ml-1 h-7 w-7 md:h-8 md:w-8">
                    <path d="M8 5v14l11-7z" />
                  </svg>
                </span>
                <span
                  className="text-[10.5px] font-bold uppercase tracking-[0.22em] text-white/90"
                  style={{ fontFamily: "var(--font-display)" }}
                >
                  Assista ao vídeo institucional
                </span>
              </div>
            </button>
          )}
        </Reveal>

        <Stagger>
          <StaggerItem>
            <span className="eyebrow">Sobre</span>
          </StaggerItem>
          <StaggerItem>
            <h2
              className="text-brand-dark display-title mt-6"
              style={{ fontSize: "clamp(1.9rem, 3.4vw, 2.75rem)" }}
            >
              O que é a Algar Venture Builder
            </h2>
          </StaggerItem>
          <StaggerItem>
          <p className="mt-6 max-w-[62ch] text-[15.5px] font-light leading-relaxed text-neutral-700 md:text-base">
            Somos a Corporate Venture Builder da Algar. Não somos aceleradora nem incubadora: construímos junto com startups que já têm produto em operação, usando o mercado, os clientes e a infraestrutura da Algar como principal ativo de crescimento.
          </p>
          <p className="mt-4 max-w-[62ch] text-[15.5px] font-light leading-relaxed text-neutral-700 md:text-base">
            Identificamos, qualificamos, validamos e desenvolvemos startups com aderência às frentes de inovação da Algar, conectando-as a 1,3 milhão de clientes por meio de um modelo baseado em acesso a mercado e cocriação.
          </p>
          </StaggerItem>
        </Stagger>
      </div>
    </section>
  );
}

/* -------------------------- COMO CRIAMOS VALOR ------------------------- */
const VALOR_CARDS = [
  {
    title: "Acesso ao mercado Algar",
    Icon: Network,
    body: "Portas abertas para 1,3 milhão de clientes Algar (MPE, corporativo e B2C) como cliente âncora e canal de distribuição.",
  },
  {
    title: "Desenvolvimento estruturado",
    Icon: Rocket,
    body: "Aplicamos a metodologia FCJ de Venture Building, com rito de sprints, indicadores e cadência executiva para acelerar tração.",
  },
  {
    title: "Rede FCJ e comunidade",
    Icon: Users,
    body: "Aplicamos a metodologia FCJ de venture building, com ritos de acompanhamento, indicadores e cadência executiva para acelerar o crescimento da sua startup.",
  },
  {
    title: "Perks: R$ 500 mil+ em benefícios",
    Icon: Handshake,
    body: "Pacote de créditos e serviços em cloud, jurídico, contábil, dados e ferramentas essenciais para founders em estágio de tração.",
  },
  {
    title: "Governança e preparação para captação",
    Icon: TrendingUp,
    body: "Apoio na organização societária, cap table e materiais para rodadas de investimento com fundos de venture capital.",
  },
  {
    title: "Apoio comercial e abertura de mercado",
    Icon: Signal,
    body: "Time dedicado da Algar Venture Builder abre reuniões com as áreas de negócio da Algar e conduz a estruturação de contratos com cláusulas de earnout.",
  },
];

function ComoCriamosValor() {
  return (
    <section id="valor" className="surface-light-alt divider-fade-top relative overflow-hidden py-24 md:py-32 lg:py-40">
      <TriGraphic tone="neonOutline" className="hidden md:block" style={{ left: "-80px", top: "60px", width: 260, opacity: 0.08, transform: "rotate(180deg)" }} />
      <TriGraphic tone="mintOutlineThick" className="hidden lg:block" style={{ right: "-60px", bottom: "40px", width: 220, opacity: 0.07, transform: "rotate(30deg)" }} />
      <div className="container relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <Reveal className="mx-auto max-w-2xl text-center">
          <span className="eyebrow justify-center">O que a startup recebe</span>
          <h2
            className="text-brand-dark display-title mt-6"
            style={{ fontSize: "clamp(1.9rem, 3.4vw, 2.75rem)" }}
          >
            Muito além de capital: acesso, método e rede
          </h2>
          <p className="mt-5 text-[15.5px] font-light leading-relaxed text-neutral-600 md:text-base">
            Seis ativos concretos que diferenciam a Algar Venture Builder de uma aceleradora tradicional e encurtam o caminho da startup até receita recorrente.
          </p>
        </Reveal>

        <Stagger className="mt-16 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-7">
          {VALOR_CARDS.map(({ title, Icon, body }) => (
            <StaggerItem key={title} as="article" className="card-elevated group relative overflow-hidden rounded-[24px] p-8">
              <div className="relative mb-7 inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-linear-to-br from-brand-mint/15 to-brand-neon/10">
                <span aria-hidden className="absolute inset-0 rounded-2xl bg-brand-mint/25 opacity-0 blur-xl transition-opacity duration-500 group-hover:opacity-100" />
                <Icon className="text-brand-dark relative" size={24} strokeWidth={2.1} />
              </div>
              <h3 className="text-brand-dark text-[17px] font-bold leading-snug tracking-tight md:text-lg" style={{ fontFamily: "var(--font-display)" }}>
                {title}
              </h3>
              <p className="mt-3 text-[14.5px] font-light leading-relaxed text-neutral-600">{body}</p>
              <div
                aria-hidden
                className="absolute inset-x-0 top-0 h-px origin-left scale-x-0 bg-linear-to-r from-transparent via-brand-neon to-transparent opacity-0 transition-all duration-700 group-hover:scale-x-100 group-hover:opacity-100"
                style={{ transitionTimingFunction: "cubic-bezier(0.16,1,0.3,1)" }}
              />
            </StaggerItem>
          ))}
        </Stagger>
      </div>
    </section>
  );
}

/* ------------------------------- TESES --------------------------------- */
const TESES_ITEMS = [
  {
    tag: "Tese 01",
    title: "Novos negócios",
    body: "Startups com novos produtos digitais para clientes B2B e B2C dentro do ecossistema Algar.",
    example: "Ex.: nova plataforma vertical que se torna mais um SKU para os clientes corporativos da Algar.",
    Icon: Rocket,
  },
  {
    tag: "Tese 02",
    title: "Operações automatizadas",
    body: "Startups que digitalizam e automatizam operações e simplificam processos internos.",
    example: "Ex.: automação de fluxo de provisionamento que reduz tempo de ativação de circuito de dias para horas.",
    Icon: Cpu,
  },
  {
    tag: "Tese 03",
    title: "Experiência digitalizada",
    body: "Startups que digitalizam a experiência do cliente, reduzem atrito na jornada e otimizam o resultado comercial.",
    example: "Ex.: onboarding self-service que corta chamados no call center e melhora ativação.",
    Icon: Building2,
  },
  {
    tag: "Tese 04",
    title: "Data Driven",
    body: "Startups que apoiam decisões orientadas a dados, com inteligência analítica e preditiva.",
    example: "Ex.: motor de churn preditivo aplicado à base MPE, com ganho mensurável em retenção.",
    Icon: Signal,
  },
];

function Teses() {
  return (
    <section id="teses" className="surface-dark relative overflow-hidden py-24 md:py-32 lg:py-40">
      <TriGraphic tone="mintSolid" className="hidden md:block" style={{ right: "-100px", top: "-60px", width: 380, opacity: 0.08, transform: "rotate(-10deg)" }} />
      <TriGraphic tone="neonOutline" className="hidden md:block" style={{ left: "-40px", bottom: "40px", width: 200, opacity: 0.1, transform: "rotate(200deg)" }} />
      <div className="container relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <Reveal className="mx-auto max-w-2xl text-center">
          <span className="eyebrow eyebrow-light justify-center">Teses de Investimento</span>
          <h2 className="display-title mt-6 text-white" style={{ fontSize: "clamp(1.9rem, 3.4vw, 2.75rem)" }}>
            As quatro alavancas de inovação da Algar
          </h2>
          <p className="mx-auto mt-5 max-w-xl text-[15.5px] font-light leading-relaxed text-white/75 md:text-base">
            Buscamos startups aderentes a pelo menos uma destas quatro frentes. É por aqui que o fundador confere se a Algar Venture Builder é o parceiro certo para o próximo estágio da sua empresa.
          </p>
        </Reveal>

        <Stagger className="mt-16 grid grid-cols-1 gap-6 md:grid-cols-2 lg:gap-7">
          {TESES_ITEMS.map(({ tag, title, body, example, Icon }) => (
            <StaggerItem key={tag} as="article" className="card-glass-dark group relative overflow-hidden rounded-[24px] p-8 md:p-9">
              <div className="flex items-center gap-2">
                <span className="bg-brand-neon h-1 w-1 rounded-full shadow-[0_0_8px_rgba(0,254,0,0.9)]" />
                <div className="text-brand-neon text-[10px] font-bold uppercase tracking-[0.3em]" style={{ fontFamily: "var(--font-display)" }}>
                  {tag}
                </div>
              </div>
              <div className="relative mt-7 flex h-14 w-14 items-center justify-center rounded-2xl border border-brand-mint/30 bg-linear-to-br from-brand-mint/15 to-transparent">
                <span aria-hidden className="absolute inset-0 rounded-2xl bg-brand-mint/30 opacity-0 blur-xl transition-opacity duration-500 group-hover:opacity-100" />
                <Icon className="text-brand-mint relative" size={24} strokeWidth={2.1} />
              </div>
              <h3 className="display-title mt-6 text-[22px] text-white md:text-2xl">
                {title}
              </h3>
              <p className="mt-3 text-[14.5px] font-light leading-relaxed text-white/75">{body}</p>
              <p className="mt-5 border-t border-white/10 pt-4 text-xs italic leading-relaxed text-brand-mint/85">
                {example}
              </p>
            </StaggerItem>
          ))}
        </Stagger>
      </div>
    </section>
  );
}

/* ---------------------------- BENEFÍCIOS ------------------------------- */
const BENEFICIOS_ITEMS = [
  {
    title: "O que é um venture builder corporativo",
    body: "Não é aceleradora nem incubadora. É construção conjunta com uma corporação que já tem mercado, clientes e infraestrutura para acelerar a nova empresa.",
    Icon: Building2,
  },
  {
    title: "O que a Algar Venture Builder faz",
    body: "Identifica, qualifica, valida e desenvolve startups aderentes às frentes de inovação da Algar, conectando-as ao mercado por meio de contratos com cláusulas de earnout.",
    Icon: Handshake,
  },
  {
    title: "O que a startup ganha",
    body: "Acesso a mercado com o capital do cliente Algar, desenvolvimento estruturado com metodologia FCJ e uma rede que encurta o caminho até receita recorrente.",
    Icon: Rocket,
  },
];

function Beneficios() {
  return (
    <section id="beneficios" className="bg-white py-24 md:py-32 lg:py-40">
      <div className="container mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <div className="grid gap-14 lg:grid-cols-[1fr_1.6fr] lg:items-start lg:gap-20">
          <Reveal>
            <span className="eyebrow">Modelo</span>
            <h2 className="text-brand-dark display-title mt-6" style={{ fontSize: "clamp(1.9rem, 3.4vw, 2.75rem)" }}>
              Três leituras rápidas para entender a Algar Venture Builder
            </h2>
            <p className="mt-6 max-w-md text-[15.5px] font-light leading-relaxed text-neutral-600 md:text-base">
              O modelo da Algar Venture Builder é baseado em acesso ao mercado, não em aporte financeiro direto. Aqui vale a leitura antes de qualquer decisão de inscrição.
            </p>
          </Reveal>

          <Stagger className="grid grid-cols-1 gap-5 sm:grid-cols-3">
            {BENEFICIOS_ITEMS.map(({ title, body, Icon }) => (
              <StaggerItem key={title} className="card-elevated group relative overflow-hidden rounded-[22px] p-7">
                <div className="mb-5 inline-flex h-11 w-11 items-center justify-center rounded-xl bg-linear-to-br from-brand-mint/15 to-transparent">
                  <Icon className="text-brand-dark" size={22} strokeWidth={2.1} />
                </div>
                <h3 className="text-brand-dark text-[15px] font-bold leading-snug tracking-tight md:text-base" style={{ fontFamily: "var(--font-display)" }}>
                  {title}
                </h3>
                <p className="mt-2 text-[14px] font-light leading-relaxed text-neutral-600">{body}</p>
              </StaggerItem>
            ))}
          </Stagger>
        </div>
      </div>
    </section>
  );
}

/* ----------------------------- PROCESSO -------------------------------- */
const PROCESSO_STEPS = [
  { n: "01", title: "Inscrição", body: "Preenchimento do formulário inicial com dados da startup, tese de aderência, estágio e faturamento." },
  { n: "02", title: "Avaliação inicial", body: "Time da Algar Venture Builder e heads de inovação da Algar analisam sinergia entre a startup, a tese e o modelo de investimento." },
  { n: "03", title: "Pitch para a banca", body: "Investor Day com C-levels do Grupo Algar, do Brains e da FCJ. Aqui a startup passa pelo crivo final." },
  { n: "04", title: "Proposta formal", body: "Startups aprovadas na banca recebem a oferta com metas de earnout e cláusulas de performance." },
  { n: "05", title: "Formalização", body: "Assinatura do contrato de parceria, entrada no portfólio e início da jornada de cocriação com as áreas da Algar." },
];

function Processo() {
  return (
    <section id="processo" className="surface-light-alt divider-fade-top relative overflow-hidden py-24 md:py-32 lg:py-40">
      <TriGraphic tone="mintOutlineThick" className="hidden md:block" style={{ right: "-40px", top: "40px", width: 240, opacity: 0.08, transform: "rotate(-20deg)" }} />
      <div className="container relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <Reveal className="mx-auto max-w-2xl text-center">
          <span className="eyebrow justify-center">Processo</span>
          <h2 className="text-brand-dark display-title mt-6" style={{ fontSize: "clamp(1.9rem, 3.4vw, 2.75rem)" }}>
            Cinco etapas transparentes até a assinatura da parceria
          </h2>
        </Reveal>

        <Stagger className="mt-16 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-5">
          {PROCESSO_STEPS.map((s, i) => (
            <StaggerItem key={s.n} className="card-elevated relative rounded-[22px] p-7">
              <div className="text-brand-mint text-3xl font-black metric-glow" style={{ fontFamily: "var(--font-display)", letterSpacing: "-0.02em" }}>{s.n}</div>
              <h3 className="text-brand-dark mt-4 text-[15px] font-bold leading-snug tracking-tight md:text-base" style={{ fontFamily: "var(--font-display)" }}>
                {s.title}
              </h3>
              <p className="mt-2 text-[14px] font-light leading-relaxed text-neutral-600">{s.body}</p>
              {i < PROCESSO_STEPS.length - 1 && (
                <ArrowRight className="text-brand-mint/70 absolute -right-3 top-8 hidden lg:block" size={20} />
              )}
            </StaggerItem>
          ))}
        </Stagger>

        <Reveal className="mt-14 flex justify-center">
          <a
            href="https://innovarium.fcjventurebuilder.com/#/loja/fcjbrasil/competicao/algar-venture-builder"
            target="_blank"
            rel="noopener noreferrer"
            className="bg-brand-dark text-white group relative inline-flex items-center gap-2 overflow-hidden rounded-full px-8 py-4 text-sm font-bold uppercase tracking-wide shadow-[0_10px_30px_-8px_rgba(11,101,90,0.5)] transition-transform duration-500 hover:scale-[1.03]"
            style={{ fontFamily: "var(--font-display)", transitionTimingFunction: "cubic-bezier(0.16,1,0.3,1)" }}
          >
            <span className="relative z-10">Inscreva sua startup</span>
            <ArrowRight size={16} className="relative z-10 transition-transform duration-500 group-hover:translate-x-1.5" />
            <span aria-hidden className="absolute inset-0 -translate-x-full bg-linear-to-r from-brand-neon/40 to-brand-mint/40 transition-transform duration-700 group-hover:translate-x-0" style={{ transitionTimingFunction: "cubic-bezier(0.16,1,0.3,1)" }} />
          </a>
        </Reveal>
      </div>
    </section>
  );
}

/* --------------------------- ELEGIBILIDADE ----------------------------- */
const ELEG_YES = [
  "CNPJ ativo e produto em operação (não avaliamos ideias em papel).",
  "Estágio de tração: MRR mínimo de referência R$ 80 mil.",
  "Fundadores dedicados em tempo integral ao negócio.",
  "Aderência a pelo menos uma das quatro teses da Algar Venture Builder.",
  "Sinergia real com os ativos econômicos da Algar (mercado, canais, base de clientes).",
  "TAM ≥ R$ 2 bi e SOM ≥ 1%, com potencial de valuation acima de R$ 20 mi.",
];
const ELEG_NO = [
  "Projetos apenas conceituais, sem produto em operação nem CNPJ ativo.",
  "Modelos sem qualquer sinergia com os ativos e clientes da Algar.",
  "Times parciais, sem sócios dedicados em tempo integral.",
  "Startups já em estágio de escala (fora do recorte da nossa tese).",
];

function Elegibilidade() {
  return (
    <section id="elegibilidade" className="bg-white py-24 md:py-32 lg:py-40">
      <div className="container mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
        <Reveal className="mx-auto max-w-2xl text-center">
          <span className="eyebrow justify-center">Elegibilidade</span>
          <h2 className="text-brand-dark display-title mt-6" style={{ fontSize: "clamp(1.9rem, 3.4vw, 2.75rem)" }}>
            Critérios preliminares, validados no processo de seleção
          </h2>
          <p className="mt-5 text-[15.5px] font-light leading-relaxed text-neutral-600 md:text-base">
            Estes são os filtros iniciais aplicados à triagem. Requisitos financeiros e estratégicos completos seguem os parâmetros descritos na Tese de Investimento da Algar Venture Builder.
          </p>
        </Reveal>

        <Stagger className="mt-16 grid gap-6 md:grid-cols-2 md:gap-7">
          <StaggerItem className="card-elevated relative overflow-hidden rounded-[24px] border-brand-mint/25 p-8 md:p-10" >
            <div aria-hidden className="pointer-events-none absolute -right-16 -top-16 h-40 w-40 rounded-full bg-brand-mint/20 blur-3xl" />
            <div className="text-brand-dark text-xs font-bold uppercase tracking-[0.25em]" style={{ fontFamily: "var(--font-display)" }}>
              Para quem é
            </div>
            <ul className="relative mt-6 space-y-4">
              {ELEG_YES.map((t) => (
                <li key={t} className="flex items-start gap-3">
                  <span className="bg-brand-mint text-white mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full shadow-[0_4px_12px_-2px_rgba(0,229,161,0.55)]">
                    <Check size={14} strokeWidth={3} />
                  </span>
                  <span className="text-[14.5px] font-light text-neutral-800 md:text-[15px]">{t}</span>
                </li>
              ))}
            </ul>
          </StaggerItem>
          <StaggerItem className="rounded-[24px] border border-neutral-200 bg-neutral-50/60 p-8 md:p-10">
            <div className="text-neutral-500 text-xs font-bold uppercase tracking-[0.25em]" style={{ fontFamily: "var(--font-display)" }}>
              Para quem ainda não é
            </div>
            <ul className="mt-6 space-y-4">
              {ELEG_NO.map((t) => (
                <li key={t} className="flex items-start gap-3">
                  <span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-neutral-300 text-neutral-500">
                    <X size={14} strokeWidth={3} />
                  </span>
                  <span className="text-[14.5px] font-light text-neutral-700 md:text-[15px]">{t}</span>
                </li>
              ))}
            </ul>
          </StaggerItem>
        </Stagger>
      </div>
    </section>
  );
}

/* ------------------------------ PORTFOLIO ------------------------------ */
function Portfolio() {
  const asAsset = (a: unknown) => (a as { url: string }).url;
  // `scale`: ajuste óptico por logo (proporção do arquivo) para peso visual homogêneo.
  const STARTUPS: { name: string; url: string; site: string; scale: number }[] = [
    { name: "Granto", url: asAsset(logoGranto), site: "https://grantoseguros.com", scale: 0.95 },
    { name: "Cadex", url: asAsset(logoCadex), site: "https://www.cadex.com.br", scale: 0.95 },
    { name: "Neutra", url: asAsset(logoNeutra), site: "https://neutramais.com", scale: 1.05 },
    { name: "Dot", url: asAsset(logoDot), site: "https://dotadot.com.br", scale: 1 },
    { name: "Beefor", url: asAsset(logoBeefor), site: "https://beefor.io", scale: 1.05 },
    { name: "mediQuo", url: asAsset(logoMediquo), site: "https://mediquo.com.br", scale: 0.95 },
    { name: "StaryaAI", url: asAsset(logoStarya), site: "https://starya.ai", scale: 1 },
    { name: "G4FLEX", url: asAsset(logoStartup8), site: "https://www.g4flex.com", scale: 1.1 },
    { name: "pagarXL", url: asAsset(logoPagarxl), site: "https://www.pagar.com.br", scale: 0.9 },
  ];
  return (
    <section id="portfolio" className="surface-dark relative py-24 md:py-32 lg:py-40">
      <div className="container mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <Reveal className="mx-auto max-w-2xl text-center">
          <span className="eyebrow eyebrow-light justify-center">Portfólio</span>
          <h2 className="display-title mt-6 text-white" style={{ fontSize: "clamp(1.9rem, 3.4vw, 2.75rem)" }}>
            Startups no portfólio da Algar Venture Builder
          </h2>
          <p className="mt-5 text-[15.5px] font-light leading-relaxed text-white/70 md:text-base">
            Companhias que hoje operam com o mercado, a rede e os clientes da Algar.
          </p>
        </Reveal>

        <Stagger className="mt-16 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-3 lg:gap-5">
          {STARTUPS.map((s) => (
            <StaggerItem
              key={s.name}
              className="card-glass-dark group relative flex aspect-[4/3] items-center justify-center rounded-[20px] p-8"
              aria-label={s.name}
            >
              <a
                href={s.site}
                target="_blank"
                rel="noopener noreferrer"
                aria-label={`Visitar site da ${s.name}`}
                title={s.site.replace(/^https?:\/\//, "")}
                className="absolute inset-0 flex items-center justify-center rounded-[20px] p-8 outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-mint)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
              >
                <img
                  src={s.url}
                  alt={s.name}
                  loading="lazy"
                  className="h-auto object-contain opacity-90 transition-opacity duration-500 group-hover:opacity-100"
                  style={{
                    width: `calc(${s.scale} * clamp(104px, 76%, 176px))`,
                    maxHeight: `calc(${s.scale} * clamp(32px, 7.5vw, 56px))`,
                  }}
                />
              </a>
            </StaggerItem>
          ))}
        </Stagger>
      </div>
    </section>
  );
}

/* --------------------------- SOBRE A ALGAR ----------------------------- */
function SobreAlgar() {
  const pilares = [
    "Rede própria de fibra óptica com presença nacional e infraestrutura crítica de telecom.",
    "1,3 milhão de clientes ativos entre MPE, corporativo e B2C. Esse é o capital de cliente que a Algar Venture Builder oferece às startups.",
    "70+ anos de operação, com solidez financeira, cultura de longo prazo e reputação para sustentar novos negócios digitais.",
  ];
  return (
    <section id="algar" className="surface-dark relative overflow-hidden py-24 md:py-32 lg:py-40">
      <div
        aria-hidden
        className="pointer-events-none absolute -left-32 top-1/3 h-96 w-96 rounded-full opacity-30 blur-3xl"
        style={{ background: "radial-gradient(circle, #00e5a1 0%, transparent 70%)" }}
      />
      <TriGraphic tone="darkSolid" className="hidden md:block" style={{ right: "-60px", top: "-40px", width: 300, opacity: 0.5, transform: "rotate(-15deg)" }} />
      <TriGraphic tone="mintOutline" className="hidden md:block" style={{ left: "40%", bottom: "-40px", width: 180, opacity: 0.1, transform: "rotate(200deg)" }} />
      <div className="container relative mx-auto grid max-w-6xl gap-14 px-4 sm:px-6 lg:grid-cols-2 lg:items-center lg:gap-20 lg:px-8">
        <Stagger>
          <StaggerItem><span className="eyebrow eyebrow-light">Algar</span></StaggerItem>
          <StaggerItem>
          <h2 className="display-title mt-6 text-white" style={{ fontSize: "clamp(1.9rem, 3.4vw, 2.75rem)" }}>
            70+ anos sustentando a base de mercado que acelera as startups da Algar Venture Builder
          </h2>
          </StaggerItem>
          <StaggerItem>
          <p className="mt-6 max-w-[58ch] text-[15.5px] font-light leading-relaxed text-white/85 md:text-base">
            A Algar é uma das companhias mais tradicionais do setor de telecomunicações no Brasil. Nossa história é feita de infraestrutura própria, atendimento próximo e uma cultura corporativa reconhecida pela consistência.
          </p>
          <p className="mt-4 max-w-[58ch] text-[15.5px] font-light leading-relaxed text-white/85 md:text-base">
            Essa base é a plataforma que sustenta a Algar Venture Builder: fornece o mercado, a infraestrutura e o rito corporativo que permitem às startups do portfólio ganharem escala.
          </p>
          </StaggerItem>
          <StaggerItem>
          <ul className="mt-10 space-y-4 border-t border-white/10 pt-8">
            {pilares.map((p) => (
              <li key={p} className="flex items-start gap-3">
                <span className="bg-brand-neon/15 text-brand-neon mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full shadow-[0_0_20px_-4px_rgba(0,254,0,0.5)]">
                  <Check size={14} strokeWidth={3} />
                </span>
                <span className="text-[14.5px] font-light text-white/85 md:text-[15px]">{p}</span>
              </li>
            ))}
          </ul>
          </StaggerItem>
        </Stagger>

        <Reveal className="grid grid-cols-6 grid-rows-4 gap-3 md:gap-4 lg:h-[480px]">
          <img src={dcImg} alt="Data center Algar" loading="lazy" className="col-span-4 row-span-4 h-full w-full rounded-[24px] object-cover shadow-[0_30px_80px_-30px_rgba(0,0,0,0.6)] ring-1 ring-white/10 md:rounded-[32px]" />
          <img src={netImg} alt="Infraestrutura de rede" loading="lazy" className="col-span-2 row-span-2 h-full w-full rounded-[24px] object-cover ring-1 ring-white/10" />
          <img src={teamImg} alt="Time Algar" loading="lazy" className="col-span-2 row-span-2 h-full w-full rounded-[24px] object-cover ring-1 ring-white/10" />
        </Reveal>
      </div>
    </section>
  );
}

/* -------------------------------- FAQ ---------------------------------- */
const FAQ_ITEMS = [
  {
    q: "A Algar Venture Builder é uma aceleradora ou incubadora?",
    a: "Não. Somos uma Corporate Venture Builder: construímos junto com startups que já têm produto em operação, usando o mercado, os clientes e a infraestrutura da Algar como principal ativo de crescimento, algo que aceleradoras e incubadoras tradicionais não oferecem.",
  },
  {
    q: "Quem pode se inscrever?",
    a: "Startups com CNPJ ativo, produto em operação, fundadores dedicados em tempo integral e aderência a pelo menos uma das quatro teses (Novos negócios, Operações automatizadas, Experiência digitalizada, Data Driven). Consulte a seção Elegibilidade para os critérios completos.",
  },
  {
    q: "A Algar Venture Builder faz aporte financeiro direto?",
    a: "Não. Nosso modelo é baseado no capital do cliente Algar: firmamos contratos com cláusulas de earnout, com metas financeiras entre 12 e 36 meses. Alcançadas as metas, exercemos a opção de compra de cotas definida em contrato. Decisões de aporte tradicional seguem rito e alçadas próprios do Grupo Algar e não são atribuídas à Algar Venture Builder.",
  },
  {
    q: "Quanto tempo leva o processo de seleção?",
    a: "Aproximadamente cinco meses, distribuídos em cinco etapas transparentes: inscrição, avaliação inicial pelos heads de inovação da Algar, pitch para a banca do Investor Day (C-levels do Grupo Algar, do Brains e da FCJ), proposta formal e formalização da parceria.",
  },
  {
    q: "Qual é a duração da parceria depois da entrada no portfólio?",
    a: "Entre 5 e 10 anos, distribuídos em três macroetapas: Crescimento (12 a 36 meses, com foco em receita via Algar como cliente e canal), Fundraising (preparação para rodadas com VCs) e Exit (saída via M&A com direito de preferência da Algar).",
  },
  {
    q: "Como faço para me inscrever?",
    a: "Use o botão \"Inscreva sua startup\" ao final desta página.",
  },
];

function FAQ() {
  const [open, setOpen] = useState<number | null>(0);
  return (
    <section id="faq" className="surface-light-alt relative overflow-hidden py-24 md:py-32 lg:py-40">
      <TriGraphic tone="mintOutlineThick" className="hidden md:block" style={{ right: "-60px", top: "40px", width: 220, opacity: 0.07, transform: "rotate(-30deg)" }} />
      <div className="container relative mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
        <Reveal className="text-center">
          <span className="eyebrow justify-center">FAQ</span>
          <h2 className="text-brand-dark display-title mt-6" style={{ fontSize: "clamp(1.9rem, 3.4vw, 2.75rem)" }}>
            Perguntas frequentes
          </h2>
        </Reveal>

        <div className="card-elevated mt-14 divide-y divide-neutral-200/60 rounded-[24px] p-1">
          {FAQ_ITEMS.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={item.q} className="rounded-[20px] transition-colors">
                <button
                  type="button"
                  onClick={() => setOpen(isOpen ? null : i)}
                  className="flex w-full items-center justify-between gap-6 rounded-[20px] px-6 py-6 text-left transition-colors hover:bg-neutral-50/70 md:px-8"
                  aria-expanded={isOpen}
                >
                  <span className="text-brand-dark text-[15px] font-bold leading-snug tracking-tight md:text-base" style={{ fontFamily: "var(--font-display)" }}>
                    {item.q}
                  </span>
                  <span className="text-brand-mint flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-brand-mint/40 transition-transform duration-500" style={{ transform: isOpen ? "rotate(180deg)" : "none", transitionTimingFunction: "cubic-bezier(0.16,1,0.3,1)" }}>
                    {isOpen ? <Minus size={16} /> : <Plus size={16} />}
                  </span>
                </button>
                {isOpen && (
                  <div className="animate-fade-in px-6 pb-7 text-[14.5px] font-light leading-relaxed text-neutral-600 md:px-8 md:text-[15px]">{item.a}</div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ------------------------------ FOOTER --------------------------------- */
function Footer() {
  return (
    <footer id="contato" className="surface-dark relative overflow-hidden">
      <TriGraphic tone="neonSolid" className="hidden md:block" style={{ left: "-60px", top: "40px", width: 260, opacity: 0.06, transform: "rotate(15deg)" }} />
      <div className="container relative mx-auto max-w-6xl px-4 pb-10 pt-24 sm:px-6 lg:px-8 lg:pt-32">
        {/* CTA final */}
        <Reveal className="border-brand-mint/25 relative overflow-hidden rounded-[32px] border bg-white/[0.04] p-10 backdrop-blur-xl md:p-16">
          <div
            aria-hidden
            className="pointer-events-none absolute -right-20 -top-20 h-72 w-72 rounded-full opacity-40 blur-3xl"
            style={{ background: "radial-gradient(circle, #00fe00 0%, transparent 70%)" }}
          />
          <div aria-hidden className="pointer-events-none absolute -bottom-20 -left-20 h-72 w-72 rounded-full opacity-25 blur-3xl" style={{ background: "radial-gradient(circle, #00e5a1 0%, transparent 70%)" }} />
          <div className="relative grid gap-8 lg:grid-cols-[1.4fr_1fr] lg:items-center">
            <div>
              <h3 className="display-title text-white" style={{ fontSize: "clamp(1.75rem, 3vw, 2.5rem)" }}>
                Sua startup resolve uma dessas frentes? Inscreva-se.
              </h3>
              <p className="mt-5 max-w-xl text-[15px] font-light leading-relaxed text-white/80">
                Se sua startup tem aderência a pelo menos uma das quatro alavancas de inovação, queremos conhecer você. Inscrições avaliadas em ciclos de aproximadamente cinco meses.
              </p>
            </div>
            <div className="flex flex-wrap gap-3 lg:justify-end">
              <a
                href="https://innovarium.fcjventurebuilder.com/#/loja/fcjbrasil/competicao/algar-venture-builder"
                target="_blank"
                rel="noopener noreferrer"
                className="text-brand-dark group relative inline-flex items-center gap-2 overflow-hidden rounded-full px-8 py-4 text-sm font-bold uppercase tracking-wide shadow-[0_10px_40px_-8px_rgba(0,254,0,0.55)] transition-transform duration-500 hover:scale-[1.03]"
                style={{ fontFamily: "var(--font-display)", background: "linear-gradient(135deg,#00fe00,#00e5a1)", transitionTimingFunction: "cubic-bezier(0.16,1,0.3,1)" }}
              >
                <span className="relative z-10">Inscreva sua startup</span>
                <ArrowRight size={16} className="relative z-10 transition-transform duration-500 group-hover:translate-x-1.5" />
                <span aria-hidden className="absolute inset-0 -translate-x-full bg-white/25 transition-transform duration-700 group-hover:translate-x-full" />
              </a>
            </div>
          </div>
        </Reveal>

        {/* Menu simplificado */}
        <div className="mt-16 grid gap-10 border-t border-white/10 pt-12 md:grid-cols-[1.2fr_1fr_1fr]">
          <div>
            <img src={logoWhite.url} alt="Algar Venture Builder" className="h-8 w-auto" />
            <p className="mt-5 max-w-sm text-[14px] font-light leading-relaxed text-white/65">
              Corporate Venture Builder da Algar em parceria com o FCJ Group. Identificamos, validamos e desenvolvemos startups aderentes às frentes de inovação da Algar.
            </p>
          </div>
          <div>
            <div className="text-brand-mint text-[10.5px] font-bold uppercase tracking-[0.25em]" style={{ fontFamily: "var(--font-display)" }}>
              Navegação
            </div>
            <ul className="mt-5 space-y-2.5">
              {NAV.map((n) => (
                <li key={n.href}>
                  <a href={n.href} className="hover:text-brand-mint text-[14px] font-light text-white/75 transition-colors">{n.label}</a>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <div className="text-brand-mint text-[10.5px] font-bold uppercase tracking-[0.25em]" style={{ fontFamily: "var(--font-display)" }}>
              Redes
            </div>
            <div className="mt-5 flex items-center gap-3">
              {SOCIALS.map((s) => (
                <SocialIcon key={s.label} Icon={s.Icon} href={s.href} label={s.label} />
              ))}
            </div>
          </div>
        </div>

        <div className="mt-12 flex flex-col items-start justify-between gap-4 border-t border-white/10 pt-6 md:flex-row md:items-center">
          <p className="text-[12px] font-light text-white/55">
            © {new Date().getFullYear()} Algar Venture Builder. Todos os direitos reservados.
          </p>
          <div className="flex flex-wrap gap-5 text-[12px] font-light text-white/55">
            {/* TODO: substituir por URLs reais de páginas legais */}
            <a href="#" className="hover:text-brand-mint transition-colors">Política de Privacidade</a>
            <a href="#" className="hover:text-brand-mint transition-colors">Termos de Uso</a>
            <a href="#" className="hover:text-brand-mint transition-colors">Cookies</a>
          </div>
        </div>
      </div>
      {/* usar logoDark evita warning de import não utilizado */}
      <img src={logoDark.url} alt="" aria-hidden className="hidden" />
    </footer>
  );
}