// "Capabilities" section, repurposed as the OVERCUT feature trio.
const Capabilities = () => {
  const { motion } = window.Motion;

  const cards = [
    {
      eyebrow: "Self-Healing",
      title: "Heals in the sun",
      tags: ["Scratch Recovery", "Swirl Resistant", "Heat Reflow", "Daily-Drive Ready"],
      body: "Light scratches, swirl marks and fingernail nicks vanish under sun or warm water. The top layer reflows like memory foam — no buffing, no compounding.",
    },
    {
      eyebrow: "Engineered Thickness",
      title: "Built for hard panels",
      tags: ["Compound Curves", "Tight Recesses", "Stretch & Hold", "No Lifting"],
      body: "Thin enough to chase the meanest body lines on modern supercars, thick enough to take a stone strike. Tuned panel by panel by the people who actually install it.",
    },
    {
      eyebrow: "Installer DNA",
      title: "Goes on like vinyl",
      tags: ["Same Tools", "Same Time", "Repositionable", "Clean Release"],
      body: "We listened to installers and shipped their feedback. OVERCUT lays in the same time as a traditional vinyl wrap — no relearning, no specialty kit, no compromise on protection.",
    },
  ];

  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.2 },
    transition: { duration: 0.8, ease: "easeOut", delay },
  });

  return (
    <section id="film" className="relative w-full min-h-screen overflow-hidden">
      <div className="relative z-10 px-8 md:px-16 lg:px-20 pt-24 pb-20 flex flex-col min-h-screen">
        <div className="mb-auto">
          <motion.div {...fadeUp(0)} className="text-sm font-body text-black/80 mb-6">
            // The Film
          </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" }}
          >
            Protection,
            <br />
            in colour.
          </motion.h2>
          <motion.p
            {...fadeUp(0.2)}
            className="mt-6 max-w-xl text-base text-black/90 font-body font-light leading-snug"
          >
            OVERCUT replaces both your wrap and your PPF in a single layer. One install. One product. Three times the lifespan.
          </motion.p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16">
          {cards.map(({ eyebrow, title, tags, body }, i) => (
            <motion.div
              key={title}
              {...fadeUp(0.2 + i * 0.1)}
              className="card-rise liquid-glass rounded-[1.25rem] p-6 min-h-[360px] flex flex-col"
            >
              <div className="flex items-start justify-between gap-4">
                <div className="card-rise liquid-glass rounded-full px-3 py-1 text-[11px] text-black/90 font-mono uppercase tracking-[0.12em] whitespace-nowrap">
                  {eyebrow}
                </div>
                <div className="flex flex-wrap justify-end gap-1.5 max-w-[65%]">
                  {tags.map((t) => (
                    <span
                      key={t}
                      className="card-rise liquid-glass rounded-full px-3 py-1 text-[11px] text-black/90 font-body whitespace-nowrap"
                    >
                      {t}
                    </span>
                  ))}
                </div>
              </div>

              <div className="flex-1" />

              <div className="mt-6">
                <h3
                  className="font-heading italic text-black text-3xl md:text-4xl leading-none"
                  style={{ letterSpacing: "-1px" }}
                >
                  {title}
                </h3>
                <p className="mt-3 text-sm text-black/90 font-body font-light leading-snug max-w-[34ch]">
                  {body}
                </p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Capabilities = Capabilities;