"use client";

import Link from "next/link";
import { m } from "framer-motion";
import { SectionHeading } from "@/components/patterns/SectionHeading";
import { StatGrid } from "@/components/patterns/StatCard";
import { fadeUp, staggerContainer, scrollReveal } from "@/lib/motion";

/** Section 12 — Investor Network. All ten partner types from Sprint 2 §01, framed as network composition — a verifiable category count, not a fabricated performance metric. */
const partnerTypes = [
  { label: "Angel Investors", href: "/partners/angel-investors" },
  { label: "Venture Capital Firms", href: "/partners/venture-capital-firms" },
  { label: "Family Offices", href: "/partners/family-offices" },
  { label: "Corporate Investors", href: "/partners/corporate-investors" },
  { label: "CSR Partners", href: "/partners/csr-partners" },
  { label: "Grant Providers", href: "/partners/grant-providers" },
  { label: "Philanthropic Organizations", href: "/partners/philanthropic-organizations" },
  { label: "Impact Investors", href: "/partners/impact-investors" },
  { label: "Foundations", href: "/partners/foundations" },
  { label: "Government Funding Programs", href: "/partners/government-funding-programs" },
];

const stats = [
  { label: "Partner Categories", value: "10", caption: "Angels to government programs" },
  { label: "Verification Standard", value: "100%", caption: "Every partner is thesis-registered" },
  { label: "Matching Basis", value: "Thesis-fit", caption: "Never a broad deal blast" },
];

export function InvestorNetwork() {
  return (
    <section aria-labelledby="investor-network-heading" className="border-b border-line bg-tint py-24">
      <div className="container">
        <SectionHeading
          id="investor-network-heading"
          eyebrow="Investor Network"
          title="Ten categories of capital and partnership, one registration."
        />

        <div className="mt-10">
          <StatGrid stats={stats} />
        </div>

        <m.div
          initial="hidden"
          whileInView="visible"
          viewport={scrollReveal}
          variants={staggerContainer}
          className="mt-12 flex flex-wrap gap-3"
        >
          {partnerTypes.map((p) => (
            <m.div key={p.href} variants={fadeUp}>
              <Link
                href={p.href}
                className="rounded-full border border-line bg-paper px-4 py-2 text-body-sm text-ink-soft transition-colors hover:border-primary hover:text-primary"
              >
                {p.label}
              </Link>
            </m.div>
          ))}
        </m.div>
      </div>
    </section>
  );
}