import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useRef, useState } from "react";
import { Facebook, Instagram, Linkedin, ArrowUp } from "lucide-react";

const img = (name: string) => `/assets/${name}`;

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Alya Ventures — Inovação em Corporate Venture Capital e M&A" },
      {
        name: "description",
        content:
          "Gestora especializada em Corporate Venture Capital, Transações de Investimento e M&A.",
      },
      { property: "og:title", content: "Alya Ventures — Corporate Venture Capital e M&A" },
      {
        property: "og:description",
        content: "Gestora especializada em Corporate Venture Capital, Transações de Investimento e M&A.",
      },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: Index,
});

const services = [
  ["icn-planejamento-estrategico", "Planejamento estratégico de investimentos;"],
  ["icn-tese-investimento", "Definição de tese de Investimentos;"],
  ["icn-estruturacao", "Estruturação de veículo de investimento (FIP/Offshore/Holding);"],
  ["icn-compliance", "Estruturação do compliance e governança de gestão de investimentos;"],
  ["icn-sinergia-estrategica", "Estruturação do modelo de geração de sinergias estratégicas;"],
  ["icn-hunting-ativo", "Hunting ativo / screening / análise preliminar / seleção de startups e scale-ups;"],
  ["icn-elaborando-negocio", "Deep Dive / Due Diligence de negócio, elaborando infopack com modelagem do negócio, budget, Valuation, infomemo, teaser etc.;"],
  ["icn-contrato", "Negociação de investimentos;"],
  ["icn-gestao-contabil", "Gestão de Due Diligence contábil, fiscal trabalhista, financeira, jurídica, tecnológica, mercadológica e comportamental e identificação de riscos;"],
  ["icn-analise-contigencia", "Análise de contingências apresentadas na Due Diligence;"],
  ["icn-elaboracao-plano", "Elaboração do plano de 90 dias a ser implementado logo após investimento;"],
  ["icn-gestao-ativa", "Gestão ativa pós-investimento para agregação de valor (performance improvement) para o portfólio de investimentos e geração de sinergias;"],
  ["icn-mapa-de-saida", "Desenvolvimento e execução da estratégia de desinvestimento / saída / exit, com elaboração de mapa de saída e monitoramento de drivers de valor de incubents desde o investimento."],
];

function Counter({ to }: { to: number }) {
  const ref = useRef<HTMLSpanElement>(null);
  const [v, setV] = useState(0);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (!e?.isIntersecting) return;
      io.disconnect();
      const start = performance.now();
      const tick = (t: number) => {
        const p = Math.min(1, (t - start) / 2000);
        setV(Math.round(to * p));
        if (p < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    });
    io.observe(el);
    return () => io.disconnect();
  }, [to]);
  return <span ref={ref}>+{v}</span>;
}

function Stat({ label, to }: { label: string; to: number }) {
  return (
    <div className="text-center">
      <p className="text-sm uppercase tracking-wide text-muted-foreground">{label}</p>
      <p className="font-display text-6xl text-primary">
        <Counter to={to} />
      </p>
    </div>
  );
}

function Index() {
  const [top, setTop] = useState(false);
  useEffect(() => {
    const f = () => setTop(window.scrollY > 400);
    window.addEventListener("scroll", f);
    return () => window.removeEventListener("scroll", f);
  }, []);

  return (
    <div className="font-body bg-background text-foreground">
      <header className="absolute inset-x-0 top-0 z-20">
        <div className="mx-auto flex max-w-[1280px] items-center justify-between px-6 py-8">
          <img src={img("icone-alya-ventures-branca.png")} alt="Alya Ventures" className="h-16" />
          <nav className="flex gap-8 text-xl">
            <a href="#quem-somos" className="hover:text-primary">Quem Somos</a>
            <a href="#o-que-fazemos" className="hover:text-primary">O que fazemos</a>
          </nav>
        </div>
      </header>

      <section className="relative flex min-h-screen items-center justify-center overflow-hidden">
        <video
          className="pointer-events-none absolute left-1/2 top-1/2 h-[56.25vw] min-h-full w-[177.78vh] min-w-full -translate-x-1/2 -translate-y-1/2 object-cover opacity-30"
          src="/videos/alya-ventures.mp4"
          autoPlay
          muted
          loop
          playsInline
          aria-label="Vídeo institucional da Alya Ventures"
        />
        <div className="relative z-10 px-6 text-center">
          <img src={img("logo-alya-ventures-branca.webp")} alt="logo Alya Ventures - branco" className="mx-auto w-[490px] max-w-full" />
          <div className="mx-auto my-8 h-px w-16 bg-primary" />
          <h1 className="font-display text-5xl uppercase leading-tight text-primary md:text-7xl">
            Inovação em Corporate<br />Venture Capital e M&amp;A
          </h1>
        </div>
      </section>

      <section id="quem-somos" className="mx-auto grid max-w-[1140px] gap-12 px-6 py-24 md:grid-cols-2">
        <div>
          <h2 className="font-display text-5xl uppercase text-primary">Alya Ventures</h2>
          <p className="mt-6 text-lg leading-relaxed">
            A Alya Ventures é uma gestora inovadora e especializada em Corporate Venture Capital, Transações de Investimento e M&amp;A, aliando o pioneirismo e a experiência de mais de 30 anos de seus fundadores como empreendedores e investidores em empresas de base tecnológica / startups com o relacionamento do ecossistema dos seus venture partners estratégicos, provendo soluções integradas e nível de excelência inigualável.
          </p>
        </div>
        <div className="aspect-video">
          <video className="h-full w-full" src="/videos/alya-ventures.mp4" poster="/videos/alya-ventures-poster.webp" controls preload="metadata" />
        </div>
      </section>

      <section className="bg-secondary py-24">
        <div className="mx-auto max-w-[900px] px-6 text-center">
          <img src={img("icone-alya-ventures-branca2.png")} alt="" className="mx-auto mb-6 h-16" />
          <h2 className="font-display text-5xl uppercase text-primary">O que significa Alya</h2>
          <p className="mt-6 text-lg leading-relaxed">
            É uma brilhante estrela na constelação de Serpens (serpente), observada desde tempos remotos. Significado: Alya – céu (árabe, turco), brilhante (eslavo) ou subir (hebraico).
          </p>
          <p className="mt-4 text-lg leading-relaxed">
            Escolhemos este nome por representar nosso propósito, que é tornar nossos clientes parte de uma constelação das estrelas mais brilhantes do seu setor.
          </p>
        </div>
      </section>

      <section className="mx-auto grid max-w-[1140px] items-center gap-12 px-6 py-24 md:grid-cols-2">
        <img src={img("img-uniao-de-sucesso.webp")} alt="união de sucesso" className="w-full" />
        <div>
          <h2 className="font-display text-5xl uppercase text-primary">Uma união de sucesso</h2>
          <p className="mt-6 text-lg leading-relaxed">
            Atuando, estruturando e desenvolvendo o mercado de Venture Capital e Corporate Venture, da união entre <strong>Altivia Ventures</strong>, gestor estratégico de grandes corporações, <strong>i-Ventures</strong>, consultoria e funding partner especializada em investimentos Venture Capital, e <strong>FCJ</strong>, maior rede Corporate Venture Builders da América Latina, nasce a Alya Ventures.
          </p>
          <p className="mt-4 text-lg leading-relaxed">
            Uma gestora que proporcionará às Corporates uma plataforma de gestão de CVC e M&amp;A com maior acesso ao ecossistema de startups e Scale-ups, além da experiência e track record em mais de R$ 300 milhões em investimentos e transações de M&amp;A realizados em 75 empresas e startups.
          </p>
        </div>
      </section>

      <section id="o-que-fazemos" className="bg-secondary py-24">
        <div className="mx-auto max-w-[1140px] px-6">
          <h2 className="text-center font-display text-5xl uppercase text-primary">O que fazemos</h2>
          <p className="mx-auto mt-6 max-w-[900px] text-center text-lg">
            <strong>Estruturamos e operacionalizamos</strong> todo o ciclo de investimento estratégico das corporações em negócios inovadores, seja pelo modelo de Corporate Venture Capital, bem como Corporate Venture Building e/ou fusões&amp;aquisições (M&amp;A), assim, executamos:
          </p>
          <div className="mt-14 grid gap-10 sm:grid-cols-2 lg:grid-cols-3">
            {services.map(([icon, text]) => (
              <div key={icon} className="flex items-start gap-4">
                <img src={img(`${icon}.svg`)} alt="" className="h-14 w-14 shrink-0" />
                <p className="leading-relaxed">{text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-[1140px] px-6 py-24 text-center">
        <h2 className="font-display text-5xl uppercase text-primary">Track Record</h2>
        <p className="mt-6 text-lg">A Alya já nasce com track record excepcional, fruto do portfólio dos seus fundadores:</p>
        <div className="mt-14 grid gap-12 md:grid-cols-3">
          <div className="space-y-6">
            <img src={img("altivia-logo.webp")} alt="logo Altivia Ventures" className="mx-auto h-20 object-contain" />
            <Stat label="Startups investidas" to={35} />
          </div>
          <div className="space-y-6">
            <img src={img("iventures-logo.webp")} alt="logo I ventures" className="mx-auto h-20 object-contain" />
            <Stat label="transações de M&A executadas" to={20} />
            <Stat label="investimentos em startups" to={20} />
          </div>
          <div className="space-y-6">
            <img src={img("fcjgroup.png")} alt="fcjgroup" className="mx-auto h-20 object-contain" />
            <Stat label="Corporate Venture Builders" to={40} />
          </div>
        </div>
        <p className="mt-14 text-xl">
          Totalizando <strong>+R$ 300 milhões em investimentos</strong> e <strong>transações de M&amp;A</strong> realizados com sucesso.
        </p>
        <a
          href="https://innovarium.fcjventurebuilder.com/#/loja/fcjbrasil/competicao/alya-ventures"
          target="_blank"
          rel="noreferrer"
          className="mt-10 inline-block rounded-full bg-primary px-10 py-4 font-semibold uppercase text-primary-foreground transition hover:opacity-90"
        >
          Cadastre sua startup
        </a>
      </section>

      <footer id="contato" className="bg-secondary py-12">
        <div className="flex justify-center gap-4">
          {[
            [Facebook, "https://www.facebook.com/alya.ventures", "Facebook"],
            [Instagram, "https://www.instagram.com/alya.ventures/", "Instagram"],
            [Linkedin, "https://www.linkedin.com/company/alya-ventures/about/", "Linkedin"],
          ].map(([Icon, href, l]) => {
            const I = Icon as typeof Facebook;
            return (
              <a key={l as string} href={href as string} target="_blank" rel="noreferrer" aria-label={l as string} className="rounded-full bg-primary p-3 text-primary-foreground hover:opacity-80">
                <I className="h-5 w-5" />
              </a>
            );
          })}
        </div>
      </footer>

      {top && (
        <button
          aria-label="Rolar para cima"
          onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
          className="fixed bottom-6 right-6 rounded bg-primary p-3 text-primary-foreground"
        >
          <ArrowUp className="h-5 w-5" />
        </button>
      )}
    </div>
  );
}