// Why Overcut — long-form value props as a numbered list of glass cards.
const Why = () => {
  const { motion } = window.Motion;

  const items = [
    {
      n: "01",
      title: "Three times the life",
      body: "Most coloured vinyls fade or yellow within 18–24 months. OVERCUT’s urethane top-coat is rated for triple that — five to seven years of true colour stability under real-world UV.",
    },
    {
      n: "02",
      title: "Same install time as vinyl",
      body: "OVERCUT installs with the same heat gun, the same squeegee, and the same time-on-car as a traditional vinyl wrap. Your shop doesn’t slow down — your pricing doesn’t change.",
    },
    {
      n: "03",
      title: "Self-healing top layer",
      body: "Sunlight, a heat gun, or a hot-water rinse and surface scratches reflow into the urethane. Daily-drive damage stops being a damage report.",
    },
    {
      n: "04",
      title: "Tuned thickness, both ways",
      body: "Thin enough to wrap the tightest modern body lines without lifting. Thick enough to absorb chips and gravel from the road. We didn’t pick a number — we measured the cars.",
    },
    {
      n: "05",
      title: "Priced to actually wrap your car",
      body: "We benchmarked every major colour-PPF brand and undercut them across the board. No tier games. No installer-only pricing tricks. Just a fair number, every roll.",
    },
    {
      n: "06",
      title: "Built by car people",
      body: "OVERCUT exists because the founders couldn’t buy what they wanted: a colour PPF that performed at the top of the market without the top-of-the-market markup. So we made it.",
    },
  ];

  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.7, ease: "easeOut", delay },
  });

  return (
    <section id="why" 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">
              // Why OVERCUT
            </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" }}
            >
              Six reasons.
              <br />
              One film.
            </motion.h2>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
          {items.map((it, i) => (
            <motion.div
              key={it.n}
              {...fadeUp(0.1 + i * 0.05)}
              className="card-rise liquid-glass rounded-[1.25rem] p-7 flex gap-6"
            >
              <div className="font-heading italic text-black text-5xl leading-none shrink-0" style={{ letterSpacing: "-1px" }}>
                {it.n}
              </div>
              <div>
                <h3 className="font-heading italic text-black text-2xl md:text-3xl leading-tight" style={{ letterSpacing: "-0.5px" }}>
                  {it.title}
                </h3>
                <p className="mt-2 text-sm text-black/90 font-body font-light leading-snug" dangerouslySetInnerHTML={{ __html: it.body }} />
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Why = Why;