// Installer feedback / built-by-car-people testimonial-style band.
const Installers = () => {
  const { motion } = window.Motion;

  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 },
  });

  const quotes = [
    {
      q: "It lays in like a vinyl but lives like a PPF. I stopped quoting two products to my customers — I just quote OVERCUT.",
      who: "M. Roth",
      shop: "Zürich Auto Studio",
    },
    {
      q: "We sent feedback on edge-tack and the next batch had it dialled. They actually listen, which is rare in this industry.",
      who: "J. Alvarez",
      shop: "Coastline Wraps, CA",
    },
    {
      q: "Three years in on a daily-driven Cayman and the gloss is still wet. Self-heal genuinely works on the door pulls.",
      who: "L. Tanaka",
      shop: "Private Owner, Tokyo",
    },
  ];

  return (
    <section id="installers" 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="max-w-3xl">
          <motion.div {...fadeUp(0)} className="text-sm font-body text-black/80 mb-6">
            // Built with installers
          </motion.div>
          <motion.h2
            {...fadeUp(0.1)}
            className="font-heading italic text-black text-6xl md:text-7xl lg:text-[5.5rem] leading-[0.9]"
            style={{ letterSpacing: "-3px" }}
          >
            Made by car people.
            <br />
            Refined by installers.
          </motion.h2>
          <motion.p
            {...fadeUp(0.2)}
            className="mt-6 text-base text-black/90 font-body font-light leading-snug max-w-xl"
          >
            OVERCUT was started by a small team of obsessives who couldn&rsquo;t find a colour PPF that hit performance, price and palette at the same time. Every roll since v1 has been adjusted with feedback from working shops &mdash; tack, stretch, release liner, edge seal &mdash; until the product fit the bay, not just the spec sheet.
          </motion.p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-5 mt-16">
          {quotes.map((it, i) => (
            <motion.figure
              key={it.who}
              {...fadeUp(0.2 + i * 0.1)}
              className="card-rise liquid-glass rounded-[1.25rem] p-7 flex flex-col"
            >
              <div className="font-heading italic text-black text-5xl leading-none mb-4" aria-hidden="true">&ldquo;</div>
              <blockquote className="font-heading italic text-black text-2xl md:text-[1.6rem] leading-tight" style={{ letterSpacing: "-0.5px" }}>
                {it.q}
              </blockquote>
              <figcaption className="mt-6 pt-4 border-t border-black/15">
                <div className="font-body text-sm font-medium text-black">{it.who}</div>
                <div className="font-mono text-[11px] tracking-[0.12em] uppercase text-black/70">{it.shop}</div>
              </figcaption>
            </motion.figure>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Installers = Installers;