"use client";

import Link from "next/link";
import { m } from "framer-motion";
import { ArrowRight } from "lucide-react";
import { SectionHeading } from "@/components/patterns/SectionHeading";
import { CapitalConnectionDiagram } from "@/components/patterns/CapitalConnectionDiagram";
import { fadeUp, staggerContainer, scrollReveal } from "@/lib/motion";

const connectionNodes = [
  { label: "Organizations", description: "Startups, MSMEs, SMEs, NGOs, trusts, social enterprises" },
  { label: "ROPTS", description: "Readiness review, then introduction", emphasized: true },
  { label: "Investors & Partners", description: "Angels to government funding programs" },
] as const;

/** Section 3 — What We Do. States the two-sided model plainly, in one sentence each side. */
export function WhatWeDo() {
  return (
    <section aria-labelledby="what-we-do-heading" className="border-b border-line py-24">
      <div className="container">
        <SectionHeading
          id="what-we-do-heading"
          eyebrow="What We Do"
          title="One firm, two disciplines."
          description="ROPTS operates on both sides of the fundraising table — preparing organizations to be raise-ready, and curating the capital and partners who fund them."
        />

        <m.div
          initial="hidden"
          whileInView="visible"
          viewport={scrollReveal}
          variants={fadeUp}
          className="mt-12 max-w-4xl"
        >
          <CapitalConnectionDiagram nodes={connectionNodes} />
        </m.div>

        <m.div
          initial="hidden"
          whileInView="visible"
          viewport={scrollReveal}
          variants={staggerContainer}
          className="mt-8 grid gap-8 md:grid-cols-2"
        >
          <m.div variants={fadeUp} className="rounded-md border border-line bg-paper p-8">
            <p className="font-mono text-[11px] uppercase tracking-wider text-primary">For Organizations</p>
            <h3 className="mt-3 font-display text-h2 font-normal text-ink">Readiness, then introduction.</h3>
            <p className="mt-3 text-body-md text-ink-soft">
              We diagnose fundraising readiness, sharpen the pitch and the numbers behind it, and introduce
              qualifying organizations to investors and partners whose thesis actually fits — rather than a blast
              of cold outreach to whoever will read a deck.
            </p>
            <Link
              href="/who-we-serve/startups"
              className="mt-5 inline-flex items-center gap-1.5 text-body-sm font-medium text-primary hover:underline"
            >
              See who we serve <ArrowRight className="size-4" aria-hidden="true" />
            </Link>
          </m.div>

          <m.div variants={fadeUp} className="rounded-md border border-line bg-paper p-8">
            <p className="font-mono text-[11px] uppercase tracking-wider text-primary">For Capital &amp; Partners</p>
            <h3 className="mt-3 font-display text-h2 font-normal text-ink">A filtered, accountable pipeline.</h3>
            <p className="mt-3 text-body-md text-ink-soft">
              Investors, CSR heads, grant providers, and foundations register a thesis or mandate once, and receive
              a curated stream of matched organizations — pre-verified, pre-diligenced where relevant, and never
              padded to inflate volume.
            </p>
            <Link
              href="/partners/venture-capital-firms"
              className="mt-5 inline-flex items-center gap-1.5 text-body-sm font-medium text-primary hover:underline"
            >
              See investor &amp; partner types <ArrowRight className="size-4" aria-hidden="true" />
            </Link>
          </m.div>
        </m.div>
      </div>
    </section>
  );
}