"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
import { HeroLogo } from "@/components/heroes/HeroLogo";
import { staggerFast } from "@/lib/animations";

const HERO_STATS = [
  { title: "Verified Local Stores", icon: "store", desc: "Growing local commerce" },
  { title: "Neighbourhood", icon: "location_on", desc: "Hyperlocal service radius" },
  { title: "Happy Customers", icon: "mood", desc: "Growing neighbourhood community" },
  { title: "Trusted Platform", icon: "star", desc: "Loved by local shoppers" },
];

const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];

// Shared cascade timing: logo settles at ~1.2s, then badge → heading → description
const badgeVariant = {
  hidden: { opacity: 0, scale: 0.88 },
  visible: { opacity: 1, scale: 1, transition: { type: "spring" as const, stiffness: 280, damping: 20, delay: 0.9 } },
};
const titleVariant = {
  hidden: { opacity: 0, y: 36 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.65, delay: 1.05, ease: EASE } },
};
const descVariant = {
  hidden: { opacity: 0, y: 24 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.5, delay: 1.25, ease: EASE } },
};

export function PeopleHero() {
  return (
    <section className="w-full flex flex-col select-none bg-white">
      <div className="relative overflow-hidden border-b border-[#6330D6]/10 bg-[#FAF8FC]">
        <Image
          src="/images/hero/people1.webp"
          alt=""
          fill
          sizes="100vw"
          className="absolute inset-0 z-0 h-full w-full object-cover object-[68%_center] md:object-[62%_center] xl:object-center"
          priority
          fetchPriority="high"
          aria-hidden="true"
        />
        <div className="absolute inset-0 z-[1] bg-black/40 md:bg-[radial-gradient(ellipse_100%_100%_at_50%_45%,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.4)_40%,rgba(0,0,0,0.1)_100%)]" />

        <div className="relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:px-12 md:py-16 lg:px-16 lg:py-16 max-w-[1600px] mx-auto">

          <motion.div
            className="flex flex-col items-center text-center w-full max-w-[860px] relative z-20 px-6 py-8 md:px-14 md:py-6 lg:py-8"
            variants={staggerFast}
            initial="hidden"
            animate="visible"
          >
            <HeroLogo />

            <motion.span
              variants={badgeVariant}
              className="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full text-xs font-bold tracking-widest bg-white text-[#6330D6] shadow-md uppercase mb-6 w-fit"
            >
              Nearle for People
            </motion.span>

            <motion.h1
              variants={titleVariant}
              className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-extrabold text-white leading-[1.1] tracking-tight [text-shadow:0_4px_32px_rgba(0,0,0,0.5)]"
            >
              Your Neighbourhood,
              <br />
              Now in Your <span className="text-[#A855F7]">Pocket.</span>
            </motion.h1>

            <motion.p
              variants={descVariant}
              className="text-lg sm:text-xl md:text-xl lg:text-2xl text-white/95 font-medium mt-6 leading-[1.6] [text-shadow:0_2px_16px_rgba(0,0,0,0.6)]"
            >
              Discover verified local stores, save your favorite merchants, and order everyday items with superfast local fulfillment.
            </motion.p>
          </motion.div>
        </div>
      </div>

      <div className="bg-[#FAF7FD] border-b border-[#6330D6]/10">
        <div className="px-6 sm:px-10 max-w-[1600px] mx-auto">
          <FeatureStatsRow items={HERO_STATS} />
        </div>
      </div>
    </section>
  );
}