import { Layers, MapPinned, FileSignature, GraduationCap } from "lucide-react";
import type { LucideIcon } from "lucide-react";

import { Container } from "@/components/Container";
import { StatCounter } from "./StatCounter";

type Stat = {
  value: number;
  suffix?: string;
  display?: string;
  label: string;
  /** Compact tag shown above the number, e.g. "Initiatives" */
  eyebrow: string;
  Icon: LucideIcon;
};

const stats: Stat[] = [
  {
    value: 6,
    eyebrow: "Initiatives",
    label: "OrthoGlobe initiatives",
    Icon: Layers,
  },
  {
    value: 7,
    eyebrow: "Atlas",
    label: "Anatomical regions",
    Icon: MapPinned,
  },
  {
    value: 321,
    eyebrow: "ConsentIQ",
    label: "Consent leaflets",
    Icon: FileSignature,
  },
  {
    value: 1575,
    display: "1,575",
    eyebrow: "OrthoPrep",
    label: "FRCS SBA questions",
    Icon: GraduationCap,
  },
];

/**
 * Stats panel anchored below the hero. Rendered as a contained rounded card
 * on the white page background (not a full-bleed blue band) so it reads as
 * a distinct data block. Vertical hairlines on desktop give it a dashboard
 * feel; small eyebrow + icon above each number keep the scanning rhythm
 * even when the numbers themselves vary in width.
 */
export function StatStrip() {
  return (
    <section className="bg-white pb-6 pt-2 md:pb-10 md:pt-4">
      <Container>
        <div className="relative overflow-hidden rounded-2xl bg-[var(--color-blue)] shadow-[0_24px_56px_-24px_rgba(30,64,255,0.45)]">
          {/* Corner glows so the card doesn't read flat. */}
          <div
            aria-hidden
            className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(255,255,255,0.18),transparent_58%),radial-gradient(ellipse_at_bottom_left,rgba(255,255,255,0.08),transparent_55%)]"
          />
          {/* Fine grid texture — kept very subtle, 7% opacity. */}
          <div
            aria-hidden
            className="pointer-events-none absolute inset-0 opacity-[0.07]"
            style={{
              backgroundImage:
                "linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px)",
              backgroundSize: "40px 40px",
            }}
          />

          {/* Header rail */}
          <div className="relative flex flex-wrap items-center justify-between gap-3 border-b border-white/15 px-6 py-4 md:px-10">
            <div className="flex items-center gap-2">
              <span
                aria-hidden
                className="inline-block h-1.5 w-1.5 rounded-full bg-white/85"
              />
              <span className="text-[10px] font-bold uppercase tracking-[0.2em] text-white/80">
                OrthoGlobe by the numbers
              </span>
            </div>
            <span className="text-[11px] font-semibold text-white/70">
              Updated continuously
            </span>
          </div>

          {/* Grid of stats */}
          <div className="relative grid grid-cols-2 md:grid-cols-4">
            {stats.map((s, i) => (
              <div
                key={s.label}
                className={[
                  "flex flex-col gap-3 px-6 py-8 md:px-8 md:py-12",
                  // Vertical hairline dividers — not on the last column at each
                  // breakpoint.
                  i % 2 === 1 ? "" : "border-r border-white/15",
                  "md:border-r",
                  i === stats.length - 1 ? "md:!border-r-0" : "",
                  // Row divider so the second row doesn't collide into the first
                  // on mobile (2-column layout).
                  i < 2 ? "border-b border-white/15 md:border-b-0" : "",
                ].join(" ")}
              >
                <div className="flex items-center gap-2">
                  <span className="flex h-7 w-7 items-center justify-center rounded-md bg-white/15 text-white ring-1 ring-inset ring-white/20">
                    <s.Icon className="h-[14px] w-[14px]" aria-hidden />
                  </span>
                  <span className="text-[10px] font-bold uppercase tracking-[0.2em] text-white/85">
                    {s.eyebrow}
                  </span>
                </div>
                <StatCounter
                  value={s.value}
                  suffix={s.suffix}
                  display={s.display}
                  label={s.label}
                />
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}
