"use client";

import Link from "next/link";
import { m } from "framer-motion";
import { SectionHeading } from "@/components/patterns/SectionHeading";
import { Card, CardContent, CardTitle, CardDescription } from "@/components/ui/Card";
import { fadeUp, staggerContainer, scrollReveal } from "@/lib/motion";

/** Section 8 — Services Overview. The four service categories from Sprint 2 §03/§05, each linking to its hub. */
const services = [
  {
    title: "Fundraising Advisory",
    href: "/services/fundraising-advisory",
    description: "Pitch deck review, fundraising strategy, business valuation guidance, and investment readiness.",
  },
  {
    title: "Capital Raising",
    href: "/services/capital-raising",
    description: "Investor discovery, strategic introductions, capital raising advisory, and due diligence support.",
  },
  {
    title: "Sector Funding",
    href: "/services/sector-funding",
    description: "Dedicated funding pathways for startups, MSMEs, SMEs, NGOs, and trusts.",
  },
  {
    title: "CSR & Grants",
    href: "/services/csr-and-grants",
    description: "CSR partnership, corporate CSR matchmaking, grant discovery, and government funding guidance.",
  },
];

export function ServicesOverview() {
  return (
    <section aria-labelledby="services-overview-heading" className="border-b border-line bg-tint py-24">
      <div className="container">
        <SectionHeading id="services-overview-heading" eyebrow="Services" title="Advisory across the full funding lifecycle." />

        <m.div
          initial="hidden"
          whileInView="visible"
          viewport={scrollReveal}
          variants={staggerContainer}
          className="mt-14 grid gap-6 md:grid-cols-2"
        >
          {services.map((service) => (
            <m.div key={service.href} variants={fadeUp}>
              <Link href={service.href}>
                <Card className="h-full">
                  <CardContent>
                    <CardTitle>{service.title}</CardTitle>
                    <CardDescription className="mt-2">{service.description}</CardDescription>
                  </CardContent>
                </Card>
              </Link>
            </m.div>
          ))}
        </m.div>
      </div>
    </section>
  );
}