"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { ShieldCheck, BadgeCheck } from "lucide-react";
import { compliance } from "@/lib/content";
import { SectionHeading, Reveal } from "@/components/ui-stratops/reveal";

const statusColor: Record<string, string> = {
  Verified: "text-success",
  Active: "text-info",
  Registered: "text-warning",
};

const statusDotBg: Record<string, string> = {
  Verified: "bg-success",
  Active: "bg-info",
  Registered: "bg-warning",
};

export function ComplianceSection() {
  return (
    <section
      id="compliance"
      className="relative overflow-hidden border-t border-border/60 bg-gradient-to-b from-background via-card/30 to-background py-20 sm:py-28 lg:py-32"
    >
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionHeading
          eyebrow="Trust & Compliance"
          title={
            <>
              Compliance, built in — and{" "}
              <span className="text-brand italic">ready to lend.</span>
            </>
          }
          description="Non-compliance blocks contracts. We hold ourselves to the full South African compliance stack, and we help our partners and clients get there too — B-BBEE, POPIA, CSD, and ISO readiness."
          className="mb-14"
        />

        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {compliance.map((item, i) => (
            <Reveal key={item.code} delay={i * 0.06}>
              <article className="group relative h-full overflow-hidden rounded-2xl border border-border/60 bg-card p-6 transition-all duration-300 hover:border-brand/40 hover:bg-card/80">
                <div className="flex items-start justify-between gap-3">
                  <div className="flex flex-col gap-1">
                    <span className="font-mono-num text-[11px] uppercase tracking-[0.24em] text-muted-foreground">
                      {String(i + 1).padStart(2, "0")} / {compliance.length}
                    </span>
                    <span className="font-display text-3xl font-semibold text-brand">
                      {item.code}
                    </span>
                  </div>
                  <span className="flex h-10 w-10 items-center justify-center rounded-xl bg-brand/10 text-brand">
                    <BadgeCheck className="h-5 w-5" strokeWidth={1.6} />
                  </span>
                </div>

                <h3 className="mt-5 font-display text-xl font-semibold text-foreground">
                  {item.title}
                </h3>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                  {item.description}
                </p>

                <div className="mt-5 flex items-center gap-2 border-t border-border/60 pt-4">
                  <span className="relative flex h-2 w-2">
                    <span className={`absolute inline-flex h-full w-full animate-ping rounded-full ${statusDotBg[item.status] ?? "bg-brand"} opacity-40`} />
                    <span className={`relative inline-flex h-2 w-2 rounded-full ${statusDotBg[item.status] ?? "bg-brand"}`} />
                  </span>
                  <span
                    className={`font-mono-num text-[10px] uppercase tracking-[0.24em] ${
                      statusColor[item.status] ?? "text-muted-foreground"
                    }`}
                  >
                    {item.status}
                  </span>
                </div>
              </article>
            </Reveal>
          ))}
        </div>

        {/* Reassurance banner */}
        <Reveal delay={0.1}>
          <div className="mt-10 flex flex-col items-start gap-5 rounded-2xl border border-brand/30 bg-brand/5 p-6 sm:flex-row sm:items-center sm:justify-between sm:p-8">
            <div className="flex items-start gap-4">
              <span className="hidden sm:flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-brand/15 text-brand">
                <ShieldCheck className="h-6 w-6" strokeWidth={1.6} />
              </span>
              <div>
                <h3 className="font-display text-xl font-semibold text-foreground">
                  Procurement-ready, audit-ready, day one.
                </h3>
                <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
                  Every certificate, registration and policy is current and
                  available on request. We treat your procurement process as part
                  of the engagement, not a side-channel.
                </p>
              </div>
            </div>
            <a
              href="#book"
              className="flex-shrink-0 rounded-full bg-brand px-5 py-3 text-sm font-semibold text-background transition-colors hover:bg-brand/90"
            >
              Request compliance pack
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}