const Hero = () => {
  const { motion } = window.Motion;
  const {
    BlurText,
    ArrowUpRight,
    Play,
    SwissFlag,
  } = window;

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

  return (
    <section className="relative w-full h-screen min-h-[760px] overflow-hidden">
      <div className="relative z-10 flex flex-col h-full">
        <div className="flex-1 flex flex-col items-center justify-center text-center pt-24 px-4">
          {/* Badge */}
          <motion.div
            {...fadeUp(0.4)}
            className="card-rise liquid-glass rounded-full inline-flex items-center gap-2 pl-1 pr-3 py-1"
          >
            <span className="btn-primary bg-black text-white rounded-full px-3 py-1 text-xs font-semibold font-body">
              New
            </span>
            <span className="text-sm text-black/90 font-body inline-flex items-center gap-1.5">
              Swiss-engineered colour PPF
              <SwissFlag className="h-3.5 w-3.5" />
            </span>
          </motion.div>

          {/* Headline */}
          <div className="mt-6 max-w-3xl mx-auto">
            <BlurText
              text="Wrap once. Live in colour."
              className="text-6xl md:text-7xl lg:text-[5.5rem] font-heading italic text-black leading-[0.85]"
              as="h1"
            />
          </div>

          {/* Subheading */}
          <motion.p
            {...fadeUp(0.8)}
            className="mt-5 text-base md:text-lg text-black max-w-2xl font-body font-light leading-snug"
          >
            OVERCUT is a coloured paint protection film built by car people, for car people. Swiss-engineered to install like vinyl, last three times longer, and self-heal in the sun.
          </motion.p>

          {/* CTAs */}
          <motion.div
            {...fadeUp(1.1)}
            className="flex items-center gap-6 mt-7"
          >
            <a
              href="#colours"
              className="btn-ghost liquid-glass-strong inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-medium text-black"
            >
              Browse 300+ Colours
              <ArrowUpRight className="h-5 w-5 arrow-ico" />
            </a>
            <a
              href="#film"
              className="inline-flex items-center gap-2 text-sm font-medium text-black"
            >
              Watch the Film
              <Play className="h-4 w-4" />
            </a>
          </motion.div>

          {/* Stats */}
          <motion.div
            {...fadeUp(1.3)}
            className="flex flex-wrap items-stretch justify-center gap-4 mt-10"
          >
            <div className="liquid-glass p-5 w-[210px] rounded-[1.25rem] flex flex-col items-start text-left">
              <div className="text-[10px] font-mono uppercase tracking-[0.15em] text-black/70">
                Longevity
              </div>
              <div className="mt-5 text-4xl font-heading italic text-black leading-none" style={{ letterSpacing: "-1px" }}>
                3× Longer
              </div>
              <div className="text-xs text-black font-body font-light mt-2">
                Outlasts traditional vinyl wraps without yellowing.
              </div>
            </div>
            <div className="liquid-glass p-5 w-[210px] rounded-[1.25rem] flex flex-col items-start text-left">
              <div className="text-[10px] font-mono uppercase tracking-[0.15em] text-black/70">
                Library
              </div>
              <div className="mt-5 text-4xl font-heading italic text-black leading-none" style={{ letterSpacing: "-1px" }}>
                300+
              </div>
              <div className="text-xs text-black font-body font-light mt-2">
                Colours across gloss, satin, matte, candy, metallic & pearl.
              </div>
            </div>
            <div className="liquid-glass p-5 w-[210px] rounded-[1.25rem] flex flex-col items-start text-left">
              <div className="text-[10px] font-mono uppercase tracking-[0.15em] text-black/70">
                Shipping
              </div>
              <div className="mt-5 text-4xl font-heading italic text-black leading-none" style={{ letterSpacing: "-1px" }}>
                2–7 Days
              </div>
              <div className="text-xs text-black font-body font-light mt-2">
                Worldwide dispatch on every colour, every order.
              </div>
            </div>
          </motion.div>
        </div>

        {/* Footer chip */}
        <motion.div
          {...fadeUp(1.4)}
          className="flex flex-col items-center gap-3 pb-8 px-4"
        >
          <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">
            Engineered in Switzerland <SwissFlag className="h-3 w-3" /> · Trusted by installers worldwide
          </div>
        </motion.div>
      </div>
    </section>
  );
};

window.Hero = Hero;