import { createFileRoute, Link } from "@tanstack/react-router";
import { useState } from "react";
import {
  ArrowLeft,
  ArrowRight,
  PlayCircle,
  
  AlertTriangle,
  Cpu,
  Layers,
  Network,
  TrendingUp,
  Handshake,
  Building2,
  Wallet,
  Briefcase,
  MessageCircle,
  Car,
} from "lucide-react";
import { SiteLayout } from "@/components/SiteLayout";
import heroBg from "@/assets/bg-vertice-blue.jpg";
import sergioPhoto from "@/assets/sergio-vertice.png";
import fabricioPhoto from "@/assets/fabricio-vertice.png";

export const Route = createFileRoute("/vertice-blue")({
  head: () => ({
    meta: [
      { title: "Vértice Blue — InvestPlus" },
      {
        name: "description",
        content:
          "Construindo a maior plataforma de soluções patrimoniais baseada em consórcios contemplados e ativos de valor do Brasil.",
      },
      { property: "og:title", content: "Vértice Blue — InvestPlus" },
      {
        property: "og:description",
        content:
          "Construindo a maior plataforma de soluções patrimoniais baseada em consórcios contemplados e ativos de valor do Brasil.",
      },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: VerticeBlue,
});

function VerticeBlue() {
  const PLATFORM_URL = "https://www.platform.investplus.vc/admin/rounds/company/55/round/44";
  const WHATSAPP_URL = "https://wa.me/551152863746";

  return (
    <SiteLayout>
      <Hero />
      <MainGrid platformUrl={PLATFORM_URL} whatsappUrl={WHATSAPP_URL} />
      <Team />
      
      <FinalCta platformUrl={PLATFORM_URL} />
    </SiteLayout>
  );
}

function Hero() {
  return (
    <section className="hero-bg relative overflow-hidden">
      <img
        src={heroBg}
        alt="Composição geométrica azul representando a Vértice Blue"
        width={1920}
        height={1088}
        className="absolute inset-0 h-full w-full object-cover opacity-45"
      />
      <div className="absolute inset-0 bg-gradient-to-t from-[oklch(0.15_0.03_250)]/95 via-[oklch(0.15_0.03_250)]/70 to-transparent" />
      <div className="relative mx-auto flex min-h-[55vh] max-w-7xl flex-col justify-end px-4 py-16 sm:px-6 lg:min-h-[70vh] lg:px-8 lg:py-24">
        <Link to="/ofertas" className="inline-flex items-center gap-2 text-sm text-white/70 hover:text-white">
          <ArrowLeft className="size-4" /> Todas as ofertas
        </Link>
        <div className="mt-6 flex flex-wrap items-center gap-3">
          <span className="rounded-full border border-white/30 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-white">
            Soluções Patrimoniais
          </span>
          <span className="rounded-full bg-emerald-500/20 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-emerald-300">
            Em captação
          </span>
        </div>
        <h1 className="mt-5 font-display text-5xl font-bold tracking-tight text-white sm:text-6xl">
          Vértice Blue
        </h1>
        <p className="mt-4 max-w-3xl text-xl text-white/85 sm:text-2xl">
          Construindo a maior plataforma de soluções patrimoniais baseada em consórcios contemplados e ativos de valor do Brasil
        </p>
        <p className="mt-6 max-w-3xl text-base leading-relaxed text-white/70">
          A Vértice Blue é uma estruturadora de ativos e soluções financeiras lastreadas em
          consórcios e ativos de valor. Atuamos com visão consultiva, responsabilidade financeira e inteligência

          estratégica, usando consórcios contemplados, cotas canceladas, Home Equity e operações
          estruturadas de crédito como instrumentos de crescimento patrimonial, expansão
          empresarial e aquisição planejada de ativos. Unimos tecnologia, inteligência de dados e
          uma rede nacional de parceiros para transformar o consórcio em ferramenta estratégica de
          geração de valor.
        </p>

      </div>
    </section>
  );
}

const TABS = [
  { key: "visao", label: "Visão Geral" },
  { key: "mercado", label: "O Mercado" },
  { key: "modelo", label: "Modelo de Negócio" },
  { key: "roadmap", label: "Roadmap" },
  { key: "riscos", label: "Principais Riscos" },
] as const;


function MainGrid({ platformUrl, whatsappUrl }: { platformUrl: string; whatsappUrl: string }) {
  const [tab, setTab] = useState<(typeof TABS)[number]["key"]>("visao");

  return (
    <section className="py-16">
      <div className="mx-auto grid max-w-7xl items-start gap-10 px-4 sm:px-6 lg:grid-cols-12 lg:px-8">
        <div className="lg:col-span-7">
          <div className="flex flex-wrap gap-2 border-b border-border/60">
            {TABS.map((t) => (
              <button
                key={t.key}
                onClick={() => setTab(t.key)}
                className={`relative px-4 py-3 text-sm font-semibold transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[oklch(0.5_0.16_210)] ${
                  tab === t.key ? "text-[oklch(0.5_0.16_210)]" : "text-foreground/60 hover:text-foreground"
                }`}
              >
                {t.label}
                {tab === t.key && (
                  <span className="brand-gradient absolute inset-x-0 -bottom-px h-0.5 rounded-full" />
                )}
              </button>
            ))}
          </div>

          <div className="mt-8">
            {tab === "visao" && <TabVisao />}
            {tab === "mercado" && <TabMercado />}
            {tab === "modelo" && <TabModelo />}
            {tab === "roadmap" && <TabRoadmap />}
            {tab === "riscos" && <TabRiscos />}
          </div>


          <UseOfProceeds />
        </div>

        <aside className="lg:col-span-5">
          <div className="static space-y-6 lg:sticky lg:top-24 lg:self-start">
            <VideoCard />
            <OfferCard platformUrl={platformUrl} whatsappUrl={whatsappUrl} />
          </div>
        </aside>
      </div>
    </section>
  );
}

function TabVisao() {
  const pillars = [
    {
      icon: Cpu,
      t: "Tecnologia proprietária",
      d: "Plataforma desenvolvida para automatizar processos, centralizar operações e entregar inteligência de dados a clientes, parceiros e investidores.",
    },
    {
      icon: Layers,
      t: "Modelo integrado",
      d: "Atuação combinada em consórcios contemplados, cotas canceladas, Home Equity e operações estruturadas de crédito, ampliando as frentes de originação e de receita.",
    },
    {
      icon: Network,
      t: "Rede nacional de parceiros",
      d: "Expansão por assessores, correspondentes, imobiliárias e franqueados, acelerando originação e distribuição.",
    },
    {
      icon: TrendingUp,
      t: "Escalabilidade digital",
      d: "Marketing digital, automação comercial e CRM permitindo crescimento com ganho progressivo de eficiência operacional.",
    },
  ];
  return (
    <div className="space-y-6">
      <p className="leading-relaxed text-foreground/80">
        A Vértice Blue nasceu da experiência de mais de 20 anos de seus fundadores nos mercados
        financeiro, de investimentos e tecnologia. Ao longo dessa trajetória, identificaram uma
        oportunidade clara: transformar o mercado de consórcios — tradicionalmente fragmentado,
        artesanal e pouco digitalizado — em um ecossistema eficiente, transparente e acessível.
      </p>
      <p className="leading-relaxed text-foreground/80">
        Mais do que intermediar negócios, a Vértice Blue constrói um novo padrão operacional para o
        setor. A tese é simples de enunciar e difícil de executar:{" "}
        <strong className="text-foreground">Consórcio as a Service</strong>. Padronizar o supply,
        qualificar a originação com inteligência e automação, e distribuir com escala nacional.
      </p>
      <div className="space-y-3">
        {pillars.map((p) => (
          <div key={p.t} className="flex items-start gap-4 rounded-xl bg-muted/60 p-5">
            <div className="brand-gradient inline-flex size-10 shrink-0 items-center justify-center rounded-lg">
              <p.icon className="size-5 text-[oklch(0.15_0.02_250)]" />
            </div>
            <div>
              <h3 className="font-display text-base font-semibold">{p.t}</h3>
              <p className="mt-1 text-sm leading-relaxed text-foreground/70">{p.d}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function TabMercado() {
  const kpis = [
    { v: "R$ 500 bi+", l: "Créditos comercializados no Brasil em 2025" },
    { v: "12 milhões", l: "Participantes ativos" },
    { v: "5,6 milhões", l: "Cotas vendidas" },
  ];
  const rows = [
    ["Fornecedores descentralizados, baixa padronização", "Estruturação de supply e qualificação operacional"],
    ["Processos dependentes de pessoas e planilhas", "Triagem, automação e suporte comercial com IA"],
    ["Pouca inteligência comercial e baixa integração", "Distribuição nacional com eficiência progressiva"],
    ["Conversão lenta e dificuldade de expansão", "Arquitetura desenhada para escala"],
  ];
  return (
    <div className="space-y-8">
      <div>
        <div className="grid gap-4 sm:grid-cols-3">
          {kpis.map((k) => (
            <div key={k.l} className="card-soft rounded-2xl border border-border/60 p-5">
              <p className="font-display text-2xl font-bold text-emerald-600">{k.v}</p>
              <p className="mt-1 text-xs leading-relaxed text-foreground/60">{k.l}</p>
            </div>
          ))}
        </div>
        <p className="mt-3 text-xs text-foreground/50">
          Fonte: ABAC — Associação Brasileira de Administradoras de Consórcios.
        </p>
      </div>
      <p className="leading-relaxed text-foreground/80">
        O setor brasileiro de consórcios apresenta crescimento consistente em volume, participantes e
        crédito liberado — de R$ 316 bilhões em 2023 para mais de R$ 500 bilhões em 2025. Ainda
        assim, a distribuição de cotas contempladas opera de forma fragmentada e com baixa
        digitalização.
      </p>
      <p className="leading-relaxed text-foreground/80">
        Essa assimetria é a oportunidade: existe espaço para plataformas capazes de estruturar
        liquidez, padronizar operações e escalar conversão comercial.
      </p>
      <div className="overflow-hidden rounded-2xl border border-border/60">
        <div className="grid grid-cols-2 bg-muted text-xs font-semibold uppercase tracking-wider text-foreground/60">
          <div className="p-4">O mercado hoje</div>
          <div className="border-l border-border/60 p-4">A proposta Vértice</div>
        </div>
        {rows.map(([a, b]) => (
          <div key={a} className="grid grid-cols-2 border-t border-border/60 text-sm">
            <div className="p-4 text-foreground/70">{a}</div>
            <div className="border-l border-border/60 p-4 font-medium text-foreground">{b}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function TabModelo() {
  const lines = [
    { icon: Handshake, t: "Intermediação de consórcios", d: "comissões e margens sobre cotas contempladas, canceladas e novos consórcios" },
    { icon: Building2, t: "Home Equity e crédito estruturado", d: "originação, estruturação e distribuição de operações com garantia de imóvel" },
    { icon: Car, t: "Auto Equity", d: "crédito com garantia de veículo quitado: o cliente transforma o carro em capital sem precisar vendê-lo, com taxas menores e prazos mais longos" },
    { icon: Cpu, t: "Plataforma tecnológica (SaaS)", d: "licenciamento para parceiros, assessores e franquias, com CRM, gestão comercial e automação" },
    { icon: Network, t: "Rede de franquias e parceiros", d: "taxas de adesão, royalties e participação na produção da rede credenciada" },
    { icon: Briefcase, t: "Serviços financeiros e consultoria", d: "honorários por estruturação de operações patrimoniais" },
  ];
  return (
    <div className="space-y-6">
      <ul className="space-y-3">
        {lines.map((l, i) => (
          <li key={l.t} className="card-soft flex items-start gap-4 rounded-xl border border-border/60 p-5">
            <div className="inline-flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted">
              <l.icon className="size-5 text-[oklch(0.5_0.16_210)]" />
            </div>
            <p className="text-sm leading-relaxed text-foreground/70">
              <span className="mr-2 text-xs font-semibold text-foreground/40">0{i + 1}</span>
              <strong className="font-display text-base font-semibold text-foreground">{l.t}</strong>{" "}
              — {l.d}
            </p>
          </li>
        ))}
      </ul>
      <p className="rounded-xl bg-muted/60 p-5 text-sm leading-relaxed text-foreground/75">
        Ao combinar receitas transacionais, recorrentes e de expansão de rede, a companhia constrói um
        modelo diversificado, reduzindo a dependência de uma única linha de negócio.
      </p>
    </div>
  );
}

function TabRoadmap() {
  const milestones = [
    { d: "SET · 2026", t: "Início da operação", x: "equipes de marketing e tecnologia iniciam oficialmente a operação" },
    { d: "OUT · 2026", t: "Estruturação operacional", x: "implantação de financeiro, ERP/CRM, atendimento e operação comercial B2C" },
    { d: "NOV · 2026", t: "Integrações estratégicas", x: "Serasa, contratos digitais, administradoras e app institucional" },
    { d: "DEZ · 2026", t: "Vértice Network", x: "rede de franqueados, administradoras e modelo de despachante semi-virtual" },
    { d: "ABR · 2027", t: "Fundo Vértice Blue", x: "estruturação da tese financeira e operacional" },
    { d: "JUN · 2027", t: "Vértice Garantido", x: "lançamento do modelo de consórcio com contemplação garantida" },
  ];
  return (
    <div>
      <ol className="relative space-y-6 border-l-2 border-[oklch(0.5_0.16_210)]/40 pl-6">
        {milestones.map((m) => (
          <li key={m.d} className="relative">
            <span className="absolute -left-[31px] top-1.5 size-3.5 rounded-full bg-emerald-500 ring-4 ring-background" />
            <p className="text-xs font-semibold uppercase tracking-widest text-foreground/50">{m.d}</p>
            <div className="card-soft mt-2 rounded-xl border border-border/60 p-4">
              <h3 className="font-display text-base font-semibold">{m.t}</h3>
              <p className="mt-1 text-sm leading-relaxed text-foreground/70">{m.x}</p>
            </div>
          </li>
        ))}
      </ol>
      <p className="mt-4 text-xs text-foreground/50">
        O roadmap descreve o plano de negócios da companhia e não constitui garantia de execução.
      </p>
    </div>
  );
}

function UseOfProceeds() {
  const items = [
    { p: 27, t: "Tecnologia e produto", d: "plataforma proprietária, IA e automação, integrações, produto, UX, segurança e infraestrutura" },
    { p: 24, t: "Marketing e aquisição de clientes", d: "marketing digital, geração de leads, branding e campanhas de performance" },
    { p: 27, t: "Expansão comercial", d: "rede de parceiros e franquias, estrutura comercial, vendas e atendimento" },
    { p: 22, t: "Capital de giro e governança", d: "gestão executiva, estrutura financeira e administrativa, compliance, processos e reserva operacional" },
  ];
  return (
    <div className="mt-14">
      <h2 className="font-display text-2xl font-bold">Destinação dos recursos</h2>
      <div className="mt-6 space-y-5">
        {items.map((i) => (
          <div key={i.t}>
            <div className="flex items-baseline justify-between gap-4">
              <p className="font-display text-base font-semibold">{i.t}</p>
              <span className="font-display text-lg font-bold text-[oklch(0.5_0.16_210)]">{i.p}%</span>
            </div>
            <div className="mt-2 h-2 w-full overflow-hidden rounded-full bg-muted">
              <div className="brand-gradient h-full rounded-full" style={{ width: `${i.p}%` }} />
            </div>
            <p className="mt-2 text-sm leading-relaxed text-foreground/65">{i.d}</p>
          </div>
        ))}
      </div>
    </div>
  );
}


const VIDEOS = [
  {
    id: "Xcu_bloBN1w",
    label: "Conheça a Vértice Blue",
    caption: "Apresentação institucional da companhia.",
  },
  {
    id: "luFQFBRBkfU",
    label: "A tese de investimento",
    caption: "Modelo de negócio e visão de crescimento.",
  },
];

function VideoCard() {
  return (
    <div className="space-y-6">
      {VIDEOS.map((v, i) => (
        <div
          key={`${v.id}-${i}`}
          className="card-soft overflow-hidden rounded-2xl border border-border/60 border-t-4 border-t-[oklch(0.5_0.16_210)] p-5 shadow-lg"
        >
          <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-foreground/60">
            <PlayCircle className="size-4 text-[oklch(0.5_0.16_210)]" /> {v.label}
          </div>
          <div className="mt-4 aspect-video w-full overflow-hidden rounded-xl bg-muted">
            <iframe
              src={`https://www.youtube.com/embed/${v.id}?rel=0&modestbranding=1`}
              title={`Vértice Blue — ${v.label}`}
              loading="lazy"
              allowFullScreen
              allow="accelerometer; clipboard-write; encrypted-media; picture-in-picture; web-share"
              className="h-full w-full"
            />
          </div>
          <p className="mt-3 text-xs text-foreground/50">{v.caption}</p>
        </div>
      ))}
    </div>
  );
}

function OfferCard({ platformUrl, whatsappUrl }: { platformUrl: string; whatsappUrl: string }) {
  const fields = [
    { l: "Tipo de valor mobiliário", v: "Mútuo conversível" },
    { l: "Modelo de investimento", v: "Aquisição" },
    { l: "Investimento mínimo", v: "R$ 50.000,00" },
    { l: "Quantidade de cotas", v: "20 cotas de R$ 50.000,00" },
    { l: "Objetivo de captação", v: "R$ 1.000.000,00" },
  ];
  return (
    <div className="card-soft rounded-2xl border border-border/60 p-6 shadow-lg">
      <p className="text-xs font-semibold uppercase tracking-widest text-foreground/50">
        Informações da oferta
      </p>
      <dl className="mt-4 divide-y divide-border/60">
        {fields.map((f) => (
          <div key={f.l} className="py-3">
            <dt className="text-[11px] uppercase tracking-wider text-foreground/50">{f.l}</dt>
            <dd className="mt-0.5 font-semibold">{f.v}</dd>
          </div>
        ))}
      </dl>
      <a
        href={platformUrl}
        className="mt-5 inline-flex w-full items-center justify-center gap-2 rounded-full bg-emerald-600 px-6 py-3 text-sm font-semibold text-white transition hover:bg-emerald-700"
      >
        Conheça esta oportunidade <ArrowRight className="size-4" />
      </a>
      <a
        href={whatsappUrl}
        className="mt-3 inline-flex w-full items-center justify-center gap-2 rounded-full border border-[oklch(0.5_0.16_210)] px-6 py-3 text-sm font-semibold text-[oklch(0.5_0.16_210)] transition hover:bg-[oklch(0.5_0.16_210)]/10"
      >
        <MessageCircle className="size-4" /> Falar com especialista
      </a>
    </div>
  );
}



function Team() {
  const people = [
    {
      n: "Sérgio Augusto Porto Gaspar",
      r: "CEO",
      img: sergioPhoto,
      b: "Empreendedor do mercado financeiro e fundador da Autem, que alcançou mais de R$ 3,5 bilhões sob gestão.",
    },
    {
      n: "Fabrício Romão de Sá Bezerra",
      r: "COO",
      img: fabricioPhoto,
      b: "Empreendedor de tecnologia há mais de 20 anos, com histórico de soluções para grandes organizações públicas e privadas.",
    },
  ];
  return (
    <section className="border-y border-border/60 bg-muted/50 py-16">
      <div className="mx-auto max-w-4xl px-4 text-center sm:px-6 lg:px-8">
        <h2 className="font-display text-3xl font-bold">Time</h2>
        <p className="mx-auto mt-4 max-w-2xl leading-relaxed text-foreground/70">
          Experiência comprovada em tecnologia, mercado financeiro e construção de negócios.
        </p>
        <div className="mt-10 grid gap-6 sm:grid-cols-2">
          {people.map((p) => (
            <div key={p.n} className="card-soft rounded-2xl border border-border/60 p-7">
              <img
                src={p.img}
                alt={`Retrato de ${p.n}`}
                width={192}
                height={192}
                loading="lazy"
                className="mx-auto size-24 rounded-full object-cover object-top ring-2 ring-[oklch(0.5_0.16_210)]/30"
              />
              <p className="mt-4 font-display text-lg font-semibold">{p.n}</p>
              <p className="mt-1 text-sm font-medium text-[oklch(0.5_0.16_210)]">{p.r}</p>
              <p className="mt-3 text-sm leading-relaxed text-foreground/70">{p.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}


function TabRiscos() {
  const risks = [
    { t: "Risco de execução", d: "A expansão depende da capacidade de implementar o plano de negócios, desenvolver a plataforma e ampliar a rede de parceiros conforme o cronograma previsto." },
    { t: "Risco de mercado", d: "Mudanças no cenário econômico, taxas de juros, oferta de crédito ou comportamento do consumidor podem afetar a demanda por soluções patrimoniais." },
    { t: "Risco regulatório", d: "Alterações na legislação ou nas normas do setor financeiro podem exigir adaptações no modelo de negócio." },
    { t: "Risco tecnológico", d: "Como empresa de base tecnológica, depende da disponibilidade, segurança e evolução contínua de sua plataforma e integrações." },
    { t: "Risco concorrencial", d: "O ingresso de novos concorrentes ou mudanças de estratégia de players estabelecidos pode intensificar a competição." },
    { t: "Risco de crescimento", d: "A expansão acelerada exige investimento em pessoas, processos e governança para sustentar a qualidade operacional." },
  ];
  return (
    <div className="space-y-6">
      <p className="leading-relaxed text-foreground/80">
        Todo investimento envolve riscos. A companhia adota estratégia de gestão e mitigação
        contínua, mas os fatores abaixo devem ser considerados antes de qualquer decisão.
      </p>
      <div className="grid gap-4 sm:grid-cols-2">
        {risks.map((r) => (
          <div key={r.t} className="card-soft rounded-xl border border-border/60 p-5">
            <AlertTriangle className="size-5 text-amber-500" />
            <h3 className="mt-3 font-display text-base font-semibold">{r.t}</h3>
            <p className="mt-2 text-sm leading-relaxed text-foreground/70">{r.d}</p>
          </div>
        ))}
      </div>
    </div>
  );
}


function FinalCta({ platformUrl }: { platformUrl: string }) {
  return (
    <section className="hero-bg py-20">
      <div className="mx-auto max-w-3xl px-4 text-center sm:px-6 lg:px-8">
        <h2 className="font-display text-3xl font-bold text-white sm:text-4xl">
          Pronto para conhecer a oferta da Vértice Blue?
        </h2>
        <p className="mt-4 text-white/75">
          Investimento mínimo de R$ 50.000,00. Acesse a plataforma para conhecer todas as informações
          essenciais da oferta.
        </p>
        <div className="mt-8 flex flex-wrap justify-center gap-3">
          <a
            href={platformUrl}
            className="inline-flex items-center gap-2 rounded-full bg-emerald-600 px-7 py-3 text-sm font-semibold text-white transition hover:bg-emerald-700"
          >
            Conhecer esta oportunidade <ArrowRight className="size-4" />
          </a>
          <Link
            to="/ofertas"
            className="inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/5 px-7 py-3 text-sm font-semibold text-white hover:bg-white/10"
          >
            Ver outras ofertas
          </Link>
        </div>
        <p className="mt-8 text-sm font-medium text-white/85">
          Não invista antes de entender as informações essenciais da oferta.
        </p>
      </div>
    </section>
  );
}

void Wallet;