// 300+ colours showcase — uses oklch swatches grouped by family.
const Colours = () => {
  const { motion } = window.Motion;

  // Curated families. Each row is one finish family with representative swatches.
  const families = [
    {
      label: "Gloss",
      count: 62,
      desc: "Mirror clarity that mimics fresh factory paint.",
      swatches: ["#0b0b10", "#9a0a14", "#0c2447", "#0d4a2f", "#f5f3ee", "#b87333", "#d3cf2a", "#5a1c8a"],
    },
    {
      label: "Satin",
      count: 54,
      desc: "Soft sheen that flatters every body line.",
      swatches: ["#2a2a2e", "#5b6066", "#7a8580", "#9b8e7c", "#3d4a3a", "#6b3838", "#33414f", "#bfb6a8"],
    },
    {
      label: "Matte",
      count: 48,
      desc: "Dead-flat surface, zero reflection, full presence.",
      swatches: ["#0a0a0a", "#1a1a1a", "#2c2c30", "#3a3a3e", "#4d4d52", "#5e5e63", "#7a7a7e", "#a0a0a4"],
    },
    {
      label: "Metallic",
      count: 71,
      desc: "Real metallic flake suspended in the colour layer.",
      swatches: ["#74808c", "#9aa3ad", "#b8c0c8", "#3a4750", "#7a3a45", "#3a5a45", "#8a7a3a", "#5a3a7a"],
    },
    {
      label: "Candy",
      count: 38,
      desc: "Translucent over a metallic base — endless depth.",
      swatches: ["#7a0010", "#a30024", "#0a3da3", "#062b6e", "#1c5e2c", "#0f3a1c", "#7a4a00", "#5a0a5a"],
    },
    {
      label: "Pearl",
      count: 31,
      desc: "Shifting pigment that throws colour at every angle.",
      swatches: ["#d8d0c0", "#c8a890", "#a8b8c8", "#b8a8c8", "#c8b8a8", "#a8c8b8", "#9aa8b8", "#cfc6b8"],
    },
  ];

  const fadeUp = (delay = 0) => ({
    initial: { filter: "blur(10px)", opacity: 0, y: 20 },
    whileInView: { filter: "blur(0px)", opacity: 1, y: 0 },
    viewport: { once: true, amount: 0.15 },
    transition: { duration: 0.8, ease: "easeOut", delay },
  });

  return (
    <section id="colours" className="relative w-full overflow-hidden">
      <div className="relative z-10 px-8 md:px-16 lg:px-20 pt-32 pb-24">
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-14">
          <div>
            <motion.div {...fadeUp(0)} className="text-sm font-body text-black/80 mb-6">
              // The Library
            </motion.div>
            <motion.h2
              {...fadeUp(0.1)}
              className="font-heading italic text-black text-6xl md:text-7xl lg:text-[6rem] leading-[0.9]"
              style={{ letterSpacing: "-3px" }}
            >
              Three hundred
              <br />
              and counting.
            </motion.h2>
          </div>
          <motion.p
            {...fadeUp(0.2)}
            className="max-w-md text-base text-black/90 font-body font-light leading-snug"
          >
            Six finishes. Over 300 colours. From a perfect factory black to one-off candy reds you can&rsquo;t buy from any paint shop. Sample swatches ship next-day.
          </motion.p>
        </div>

        <div className="space-y-4">
          {families.map((f, idx) => (
            <motion.div
              key={f.label}
              {...fadeUp(0.1 + idx * 0.06)}
              className="card-rise liquid-glass rounded-[1.25rem] p-5 md:p-6 flex flex-col md:flex-row md:items-center gap-5"
            >
              <div className="md:w-64 shrink-0">
                <div className="flex items-baseline gap-3">
                  <h3 className="font-heading italic text-black text-3xl md:text-4xl leading-none" style={{ letterSpacing: "-1px" }}>
                    {f.label}
                  </h3>
                  <span className="font-mono text-[11px] tracking-[0.12em] text-black/70 uppercase">
                    {f.count} colours
                  </span>
                </div>
                <p className="mt-2 text-xs text-black/80 font-body font-light leading-snug max-w-[28ch]">
                  {f.desc}
                </p>
              </div>
              <div className="flex flex-wrap gap-2 md:gap-2.5">
                {f.swatches.map((c, i) => (
                  <div
                    key={i}
                    className="h-12 w-12 md:h-14 md:w-14 rounded-full"
                    style={{
                      background: c,
                      boxShadow:
                        "inset 0 1px 1px rgba(255,255,255,0.25), inset 0 -8px 14px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.15)",
                    }}
                    aria-label={`${f.label} swatch`}
                  />
                ))}
                <div className="liquid-glass h-12 w-12 md:h-14 md:w-14 rounded-full flex items-center justify-center">
                  <span className="font-mono text-[10px] tracking-[0.1em] uppercase text-black/80">+{f.count - 8}</span>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Colours = Colours;