"use client";

import { m } from "framer-motion";
import { Target, ShieldCheck, Users, Scale } from "lucide-react";
import { SectionHeading } from "@/components/patterns/SectionHeading";
import { fadeUp, staggerContainer, scrollReveal } from "@/lib/motion";

/** Section 6 — Why Choose ROPTS. Differentiators framed against the real alternative (cold outreach, open marketplaces), not generic superlatives. */
const reasons = [
  {
    icon: Target,
    title: "Thesis-matched introductions",
    description: "We introduce against a registered investment thesis or CSR mandate — not a broad blast to anyone who might read a deck.",
  },
  {
    icon: ShieldCheck,
    title: "Judgment behind every introduction",
    description: "We decline far more organizations than we forward. An introduction from ROPTS is a claim about quality we stand behind.",
  },
  {
    icon: Users,
    title: "Two-sided fluency",
    description: "We speak the language of a Series A term sheet and a Schedule VII CSR mandate equally — most advisors know only one.",
  },
  {
    icon: Scale,
    title: "Advisor, not counterparty",
    description: "We are never the investor in the deals we introduce, which means our incentive is a good match, not a closed transaction.",
  },
];

export function WhyChooseRopts() {
  return (
    <section aria-labelledby="why-ropts-heading" className="border-b border-line bg-paper section-texture py-24">
      <div className="container">
        <SectionHeading
          id="why-ropts-heading"
          eyebrow="Why Choose ROPTS"
          title="Discernment is the product."
          align="center"
        />

        <m.div
          initial="hidden"
          whileInView="visible"
          viewport={scrollReveal}
          variants={staggerContainer}
          className="mx-auto mt-14 grid max-w-4xl grid-cols-1 gap-x-10 gap-y-10 sm:grid-cols-2"
        >
          {reasons.map(({ icon: Icon, title, description }) => (
            <m.div key={title} variants={fadeUp} className="flex gap-4">
              <Icon className="mt-1 size-5 shrink-0 text-primary" aria-hidden="true" />
              <div>
                <h3 className="font-display text-h3 font-normal text-ink">{title}</h3>
                <p className="mt-2 text-body-sm text-ink-soft">{description}</p>
              </div>
            </m.div>
          ))}
        </m.div>
      </div>
    </section>
  );
}