import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, UserPlus, Search, Wallet, LineChart, ShieldCheck, Building2, Sparkles } from "lucide-react";
import { SiteLayout } from "@/components/SiteLayout";

export const Route = createFileRoute("/como-investir")({
  head: () => ({
    meta: [
      { title: "Como Investir — InvestPlus" },
      { name: "description", content: "Em quatro passos você começa a investir em startups e venture builders pela plataforma InvestPlus." },
      { property: "og:title", content: "Como Investir — InvestPlus" },
      { property: "og:description", content: "Em quatro passos você começa a investir em startups e venture builders." },
    ],
  }),
  component: ComoInvestir,
});

function ComoInvestir() {
  const steps = [
    { i: UserPlus, t: "Crie sua conta", d: "Cadastre-se de maneira segura na plataforma InvestPlus, com verificação de identidade conforme exigência regulatória." },
    { i: Search, t: "Explore as oportunidades", d: "Confira as diversas ofertas disponíveis — de startups a venture builders e investimentos alternativos." },
    { i: Wallet, t: "Realize seu investimento", d: "Selecione a oportunidade que combina com seu perfil, faça seu aporte e adquira uma participação." },
    { i: LineChart, t: "Acompanhe ou venda", d: "Mantenha seu investimento, participe de futuras rodadas ou venda suas cotas em eventos subsequentes." },
  ];
  return (
    <SiteLayout>
      <section className="hero-bg py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <p className="text-xs font-semibold uppercase tracking-widest text-white/60">Como Investir</p>
          <h1 className="mt-3 max-w-3xl text-5xl font-bold text-white sm:text-6xl">
            Do cadastro ao seu primeiro aporte em <span className="brand-text">poucos minutos</span>.
          </h1>
          <p className="mt-5 max-w-2xl text-white/70">
            A InvestPlus simplifica todo o processo de investimento em startups com uma jornada digital,
            segura e regulamentada pela CVM.
          </p>
          <a
            href="https://www.platform.investplus.vc/auth/register"
            className="brand-gradient mt-8 inline-flex items-center gap-2 rounded-full px-7 py-3.5 text-sm font-semibold text-[oklch(0.15_0.02_250)]"
          >
            Criar conta gratuita <ArrowRight className="size-4" />
          </a>
        </div>
      </section>

      <section className="py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
            {steps.map((s, idx) => (
              <div key={s.t} className="card-soft relative rounded-2xl border border-border/60 p-7">
                <span className="brand-text font-display text-5xl font-bold">{String(idx + 1).padStart(2, "0")}</span>
                <s.i className="mt-4 size-6 text-[oklch(0.5_0.16_210)]" />
                <h3 className="mt-3 font-display text-lg font-semibold">{s.t}</h3>
                <p className="mt-2 text-sm text-foreground/70">{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="ink-section py-24">
        <div className="mx-auto grid max-w-7xl gap-12 px-4 sm:px-6 lg:grid-cols-2 lg:px-8">
          <div>
            <div className="h-1 w-12 brand-gradient rounded-full" />
            <h2 className="mt-3 text-3xl font-bold text-white sm:text-4xl">
              Modalidades de investimento disponíveis
            </h2>
            <p className="mt-4 text-white/70">
              A Resolução CVM 88/2022 habilita diferentes instrumentos. Na InvestPlus, você acessa
              os principais formatos em uma única plataforma.
            </p>
          </div>
          <div className="grid gap-4">
            {[
              { t: "Equity Crowdfunding", d: "Participação acionária em startups e venture builders selecionadas." },
              { t: "Mútuo Conversível", d: "Empréstimo conversível em participação na empresa investida." },
              { t: "Investimento sobre Dívida", d: "Recebimento de juros sobre o valor emprestado à companhia." },
              { t: "Tokens Imobiliários", d: "Frações digitais de ativos imobiliários com potencial de renda e valorização." },
            ].map((m) => (
              <div key={m.t} className="rounded-2xl border border-white/10 bg-white/[0.03] p-6">
                <h3 className="font-display text-lg font-semibold text-white">{m.t}</h3>
                <p className="mt-1 text-sm text-white/60">{m.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="h-1 w-12 brand-gradient rounded-full" />
          <h2 className="mt-3 text-3xl font-bold sm:text-4xl">Segurança e regulamentação</h2>
          <div className="mt-10 grid gap-6 md:grid-cols-3">
            {[
              { i: ShieldCheck, t: "Regulamentada pela CVM", d: "Plataforma autorizada conforme Resolução CVM 88/2022." },
              { i: Building2, t: "Sócia FCJ Group", d: "Maior rede de Corporate Venture Builders da América Latina." },
              { i: Sparkles, t: "Due diligence rigorosa", d: "Análise jurídica, contábil e estratégica de cada oferta antes de ir ao ar." },
            ].map((b) => (
              <div key={b.t} className="card-soft rounded-2xl border border-border/60 p-6">
                <div className="brand-gradient inline-flex size-12 items-center justify-center rounded-xl">
                  <b.i className="size-6 text-[oklch(0.15_0.02_250)]" />
                </div>
                <h3 className="mt-5 font-display text-lg font-semibold">{b.t}</h3>
                <p className="mt-2 text-sm text-foreground/70">{b.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="pb-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="hero-bg flex flex-col items-start justify-between gap-6 rounded-3xl p-10 sm:flex-row sm:items-center sm:p-14">
            <div>
              <h2 className="text-3xl font-bold text-white">Pronto para investir?</h2>
              <p className="mt-2 text-white/70">Crie sua conta e veja as ofertas em captação.</p>
            </div>
            <div className="flex flex-wrap gap-3">
              <a
                href="https://www.platform.investplus.vc/auth/register"
                className="brand-gradient inline-flex items-center gap-2 rounded-full px-6 py-3 text-sm font-semibold text-[oklch(0.15_0.02_250)]"
              >
                Cadastrar <ArrowRight className="size-4" />
              </a>
              <Link
                to="/ofertas"
                className="rounded-full border border-white/15 px-6 py-3 text-sm font-semibold text-white hover:bg-white/5"
              >
                Ver ofertas
              </Link>
            </div>
          </div>
        </div>
      </section>
    </SiteLayout>
  );
}