"use client";

import Link from "next/link";
import { m } from "framer-motion";
import { Rocket, Factory, Building2, HeartHandshake, Landmark, Sprout } from "lucide-react";
import { SectionHeading } from "@/components/patterns/SectionHeading";
import { Card, CardContent } from "@/components/ui/Card";
import { fadeUp, staggerContainer, scrollReveal } from "@/lib/motion";

/** Section 4 — Funding Solutions. Every organization audience named in Sprint 2 §01, each routed to its hub. */
const solutions = [
  { icon: Rocket, title: "Startups", href: "/who-we-serve/startups", description: "Pre-seed through growth-stage venture funding, matched to thesis-fit investors." },
  { icon: Factory, title: "MSMEs", href: "/who-we-serve/msme", description: "Working capital and growth finance for micro, small, and medium enterprises." },
  { icon: Building2, title: "SMEs", href: "/who-we-serve/sme", description: "Structured growth capital for established small and medium businesses." },
  { icon: HeartHandshake, title: "NGOs", href: "/who-we-serve/ngos", description: "Grant and CSR-aligned funding for registered non-profit organizations." },
  { icon: Landmark, title: "Trusts", href: "/who-we-serve/trusts", description: "Funding pathways for charitable and public trusts, matched to mandate." },
  { icon: Sprout, title: "Social Enterprises", href: "/who-we-serve/social-enterprises", description: "Blended capital — impact investment and grant funding — for mission-driven ventures." },
];

export function FundingSolutions() {
  return (
    <section aria-labelledby="funding-solutions-heading" className="border-b border-line bg-tint py-24">
      <div className="container">
        <SectionHeading
          id="funding-solutions-heading"
          eyebrow="Funding Solutions"
          title="Funding pathways for every kind of organization."
          description="Each pathway is prepared and matched differently — an NGO is not routed through the same process as a Series A startup."
        />

        <m.div
          initial="hidden"
          whileInView="visible"
          viewport={scrollReveal}
          variants={staggerContainer}
          className="mt-14 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"
        >
          {solutions.map(({ icon: Icon, title, href, description }) => (
            <m.div key={title} variants={fadeUp}>
              <Link href={href} className="group block h-full">
                <Card className="h-full">
                  <CardContent className="flex h-full flex-col p-7">
                    <span className="flex size-11 items-center justify-center rounded-lg bg-tag-bg">
                      <Icon className="size-5 text-primary" aria-hidden="true" />
                    </span>
                    <h3 className="mt-5 font-display text-h3 font-normal text-ink group-hover:text-primary">
                      {title}
                    </h3>
                    <p className="mt-2 text-body-sm text-ink-soft">{description}</p>
                  </CardContent>
                </Card>
              </Link>
            </m.div>
          ))}
        </m.div>
      </div>
    </section>
  );
}