"use client";

import { m } from "framer-motion";
import { ShieldCheck, FileSearch, LockKeyhole, ClipboardCheck } from "lucide-react";
import { fadeUp, staggerContainer, scrollReveal } from "@/lib/motion";

/**
 * Section 2 — Trust Indicators.
 * Honest, verifiable trust signals rather than fabricated client logos or
 * unearned social proof (Sprint 1 §12 — trust is shown, not claimed).
 */
const indicators = [
  {
    icon: ShieldCheck,
    label: "Advisory-Only Model",
    detail: "We connect and prepare — we are never the counterparty to your raise.",
  },
  {
    icon: FileSearch,
    label: "Verified Investor Network",
    detail: "Every capital partner clears an accreditation and thesis-registration check.",
  },
  {
    icon: ClipboardCheck,
    label: "Structured Readiness Review",
    detail: "Every organization is assessed before any introduction is made.",
  },
  {
    icon: LockKeyhole,
    label: "Confidentiality by Default",
    detail: "Cap tables, terms, and pipeline are private unless you choose otherwise.",
  },
];

export function TrustIndicators() {
  return (
    <section aria-label="Trust and governance standards" className="border-b border-line bg-paper section-texture">
      <m.div
        initial="hidden"
        whileInView="visible"
        viewport={scrollReveal}
        variants={staggerContainer}
        className="container grid grid-cols-1 gap-8 py-14 sm:grid-cols-2 lg:grid-cols-4"
      >
        {indicators.map(({ icon: Icon, label, detail }) => (
          <m.div key={label} variants={fadeUp} className="flex gap-3.5">
            <Icon className="mt-0.5 size-5 shrink-0 text-primary" aria-hidden="true" />
            <div>
              <p className="text-body-sm font-semibold text-ink">{label}</p>
              <p className="mt-1 text-caption text-slate">{detail}</p>
            </div>
          </m.div>
        ))}
      </m.div>
    </section>
  );
}