// Shipping + closing CTA section.
const Shipping = () => {
  const { motion } = window.Motion;
  const { ArrowUpRight, SwissFlag } = window;

  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 lanes = [
    { region: "Europe", time: "2–3 days", note: "Dispatched from our Lausanne warehouse." },
    { region: "North America", time: "3–5 days", note: "Express courier from EU. No customs surprises." },
    { region: "Asia & Pacific", time: "4–7 days", note: "Tracked air freight on every roll, every order." },
    { region: "Rest of World", time: "5–7 days", note: "If it has an address, we’ll get OVERCUT to it." },
  ];

  return (
    <section id="shipping" 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">
              // Worldwide shipping
            </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" }}
            >
              From Switzerland
              <br />
              to your bay.
            </motion.h2>
          </div>
          <motion.p
            {...fadeUp(0.2)}
            className="max-w-md text-base text-black/90 font-body font-light leading-snug inline-flex items-start gap-2"
          >
            Every colour ships from our facility in Switzerland <SwissFlag className="h-3.5 w-3.5 mt-1.5 shrink-0" /> within 24 hours of order. No bonded warehouse waits. No drop-ship middleman.
          </motion.p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
          {lanes.map((l, i) => (
            <motion.div
              key={l.region}
              {...fadeUp(0.1 + i * 0.07)}
              className="card-rise liquid-glass rounded-[1.25rem] p-6 flex flex-col"
            >
              <div className="font-mono text-[11px] tracking-[0.15em] uppercase text-black/70">
                {l.region}
              </div>
              <div className="mt-5 font-heading italic text-black text-4xl md:text-5xl leading-none" style={{ letterSpacing: "-1px" }}>
                {l.time}
              </div>
              <p className="mt-4 text-sm text-black/90 font-body font-light leading-snug" dangerouslySetInnerHTML={{ __html: l.note }} />
            </motion.div>
          ))}
        </div>

        {/* Closing CTA panel */}
        <motion.div
          {...fadeUp(0.4)}
          id="order"
          className="liquid-glass-strong rounded-[2rem] mt-20 px-8 md:px-14 py-14 md:py-20 flex flex-col items-center text-center"
        >
          <div className="card-rise liquid-glass rounded-full px-3.5 py-1 text-xs font-medium text-black inline-flex items-center gap-2">
            Limited launch batch · Now shipping <SwissFlag className="h-3 w-3" />
          </div>
          <h2
            className="mt-6 font-heading italic text-black text-5xl md:text-7xl lg:text-[5.5rem] leading-[0.9] max-w-3xl"
            style={{ letterSpacing: "-3px" }}
          >
            Wrap your car in something that lasts.
          </h2>
          <p className="mt-5 max-w-xl text-base md:text-lg text-black/90 font-body font-light leading-snug">
            Order a sample pack, browse the full 300+ palette, or get matched with an OVERCUT-certified installer in your city.
          </p>
          <div className="flex flex-wrap items-center justify-center gap-4 mt-8">
            <a
              href="#"
              className="btn-ghost liquid-glass-strong inline-flex items-center gap-2 rounded-full px-5 py-3 text-sm font-medium text-black"
            >
              Order Sample Pack
              <ArrowUpRight className="h-5 w-5 arrow-ico" />
            </a>
            <a
              href="#"
              className="btn-primary bg-black text-white rounded-full inline-flex items-center gap-2 px-5 py-3 text-sm font-medium"
            >
              Find an Installer
              <ArrowUpRight className="h-5 w-5 arrow-ico" />
            </a>
            <a
              href="#colours"
              className="inline-flex items-center gap-2 text-sm font-medium text-black"
            >
              Browse the palette
              <ArrowUpRight className="h-4 w-4 arrow-ico" />
            </a>
          </div>
        </motion.div>
      </div>
    </section>
  );
};

window.Shipping = Shipping;