"use client";

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

/** Section 11 — CSR Partnership. Speaks directly to the corporate CSR head journey from Sprint 2 §11. */
const stats = [
  { label: "CSR Focus Areas Matched", value: "Mandate-first", caption: "Not sector-first" },
  { label: "Matching Model", value: "Curated", caption: "Not a public applicant listing" },
  { label: "Reporting", value: "Structured", caption: "Cadence set with each partnership" },
];

export function CsrPartnership() {
  return (
    <section aria-labelledby="csr-partnership-heading" className="border-b border-line py-24">
      <div className="container">
        <SectionHeading
          id="csr-partnership-heading"
          eyebrow="CSR Partnership"
          title="Deploy CSR budgets against a mandate, not a mailing list."
          description="Register your CSR focus areas, budget, and compliance requirements once. We surface matched NGOs, Trusts, and Social Enterprises — and support structuring the partnership and its impact-reporting cadence."
        />

        <m.div
          initial="hidden"
          whileInView="visible"
          viewport={scrollReveal}
          variants={staggerContainer}
          className="mt-12"
        >
          <m.div variants={fadeUp}>
            <StatGrid stats={stats} />
          </m.div>
        </m.div>

        <LinkButton href="/services/csr-and-grants/csr-partnership" variant="secondary" size="md" className="mt-10">
          Register a CSR Mandate
        </LinkButton>
      </div>
    </section>
  );
}