"use client";

import Link from "next/link";
import Image from "next/image";
import { motion } from "framer-motion";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import {
  fadeUp,
  slideInRight,
  staggerContainer,
  viewport,
} from "@/lib/animations";

const PROOF_ITEMS = [
  { label: "Verified", text: "Local Stores", icon: "store" },
  { label: "2km", text: "Neighbourhood Coverage", icon: "location_on" },
  { label: "Growing", text: "Customer Community", icon: "mood" },
  { label: "Trusted", text: "Local Platform", icon: "star" },
];

export function Hero() {
  return (
    <section className="relative overflow-hidden bg-gradient-to-b from-[#FAF8FC] to-[#FFFFFF] select-none w-full">
      {/* ─── DECORATIONS (BEHIND CONTENT) ─── */}

      {/* 1. Large pale lavender partial circle (top-left) */}
      <div className="hidden md:block absolute top-[-100px] left-[-100px] w-[350px] h-[350px] rounded-full border-[1.5px] border-[#6D28D9]/15 bg-[#6D28D9]/5 opacity-[0.55] z-0 pointer-events-none" />

      {/* 2. Purple solid circle (center-right around collage) */}
      <div className="hidden lg:block absolute right-[22%] top-[38%] w-[84px] h-[84px] rounded-full bg-[#6D28D9] z-0 shadow-[0_8px_32px_rgba(109,40,217,0.3)] pointer-events-none animate-pulse" />

      {/* 3. Striped purple circle (lower-middle collage area) */}
      <div
        className="hidden lg:block absolute left-[45%] bottom-[15%] w-[100px] h-[100px] rounded-full opacity-80 z-0 pointer-events-none"
        style={{
          backgroundImage: 'repeating-linear-gradient(45deg, rgba(109, 40, 217, 0.2) 0px, rgba(109, 40, 217, 0.2) 2px, transparent 2px, transparent 8px)'
        }}
      />

      {/* 4. Dotted pattern (between left text and right collage) */}
      <div className="hidden lg:block absolute left-[41%] top-[25%] w-48 h-48 opacity-[0.35] z-0 pointer-events-none">
        <svg className="w-full h-full text-[#6D28D9]" fill="currentColor">
          <pattern id="hero-decor-dots" x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
            <circle cx="2" cy="2" r="1.5" />
          </pattern>
          <rect width="100%" height="100%" fill="url(#hero-decor-dots)" />
        </svg>
      </div>

      {/* 5. Three small X marks */}
      <div className="absolute top-[8%] left-[48%] text-[#6D28D9]/25 font-bold text-xl pointer-events-none select-none z-0">✕</div>
      <div className="hidden lg:block absolute top-[52%] left-[44%] text-[#6D28D9]/20 font-bold text-lg pointer-events-none select-none z-0">✕</div>
      <div className="absolute bottom-[14%] right-[5%] text-[#6D28D9]/25 font-bold text-xl pointer-events-none select-none z-0">✕</div>

      {/* 6. Large partial purple circle (bottom-right corner) */}
      <div className="absolute bottom-[-100px] right-[-100px] w-[200px] h-[200px] rounded-full bg-[#7C3AED]/80 z-0 pointer-events-none" />

      {/* ─── TWO-COLUMN CONTENT GRID ─── */}
      <div className="page-container relative grid min-h-[650px] grid-cols-1 lg:grid-cols-[0.92fr_1.08fr] items-center py-16 md:py-20 lg:py-24 z-10 gap-12 lg:gap-6">

        {/* LEFT COLUMN: Editorial Typography & Copy */}
        <motion.div
          className="flex flex-col text-left max-w-xl z-20 relative"
          variants={staggerContainer}
          initial="hidden"
          animate="visible"
        >
          <motion.span
            variants={fadeUp}
            className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6D28D9]/10 text-[#6D28D9] uppercase mb-6 w-fit"
          >
            Welcome to Nearle
          </motion.span>

          <motion.h1
            variants={fadeUp}
            className="font-display text-4xl sm:text-5xl lg:text-[68px] xl:text-[76px] font-black text-[#16001D] leading-[0.95] tracking-[-0.05em]"
          >
            Everything Local.
            <br />
            Everything <span className="text-[#6D28D9]">Near.</span>
          </motion.h1>

          <motion.p
            variants={fadeUp}
            className="max-w-[480px] text-base md:text-lg text-[#6D6172] leading-relaxed font-bold mt-6"
          >
            Discover verified local stores, exclusive offers, fast delivery, and a better way to shop within your neighbourhood.
          </motion.p>

          <motion.div
            variants={fadeUp}
            className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto"
          >
            <Link
              href="/people"
              className="bg-[#6D28D9] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
            >
              Explore Stores
            </Link>
            <Link
              href="/people#download-section"
              className="border-2 border-[#6D28D9]/20 hover:border-[#6D28D9]/40 text-[#6D28D9] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6D28D9]/5 active:scale-[0.98]"
            >
              Get the App
            </Link>
          </motion.div>
        </motion.div>

        {/* RIGHT COLUMN: Creative Overlapping Strips Collage */}
        <motion.div
          className="w-full z-20"
          variants={slideInRight}
          initial="hidden"
          animate="visible"
        >

          {/* DESKTOP LAYOUT (lg and above) */}
          <div className="hidden lg:block relative h-[500px] lg:h-[560px] w-full">
            {/* left image: absolute left-[10%] top-[20%] w-[170px] h-[360px] */}
            <div className="absolute left-[10%] top-[20%] w-[170px] h-[360px] rounded-[1.5rem] overflow-hidden shadow-lg border-2 border-white z-10 transition-transform duration-300 hover:scale-[1.02]">
              <Image
                src="/images/cat-daily-essentials.png"
                alt="Local grocery products"
                fill
                className="object-cover"
                sizes="170px"
              />
            </div>

            {/* middle image: central logo panel absolute left-[38%] top-[8%] */}
            <div className="absolute left-[38%] top-[8%] z-20 transition-transform duration-300 hover:scale-[1.02]">
              <div className="relative w-[180px] sm:w-[220px] h-[280px] sm:h-[340px] rounded-[24px] border-[5px] sm:border-[6px] border-white/95 shadow-[0_20px_40px_rgba(99,48,214,0.1)] bg-[#FAF8FC] overflow-hidden flex items-center justify-center p-6">
                <Image
                  src="/nearlenewlogo.png"
                  alt="Central logo panel"
                  width={160}
                  height={160}
                  className="object-contain max-h-[140px] w-auto animate-[pulse_6s_infinite]"
                  priority
                />
              </div>
            </div>

            {/* right image: absolute right-[2%] top-[18%] w-[180px] h-[390px] */}
            <div className="absolute right-[2%] top-[18%] w-[180px] h-[390px] rounded-[1.5rem] overflow-hidden shadow-lg border-2 border-white z-10 transition-transform duration-300 hover:scale-[1.02]">
              <Image
                src="/nearle people.png"
                alt="Local customer shopping"
                fill
                className="object-cover"
                sizes="180px"
              />
            </div>
          </div>

          {/* MOBILE/TABLET COLLAGE (below lg) */}
          <div className="lg:hidden flex items-center justify-center gap-2 mt-2 w-full relative h-[280px]">
            <div className="relative w-[95px] h-[200px] rounded-2xl overflow-hidden border border-white shadow-md z-10">
              <Image
                src="/images/cat-daily-essentials.png"
                alt="Grocery products"
                fill
                className="object-cover"
                sizes="95px"
              />
            </div>
            <div className="relative w-[115px] h-[240px] rounded-2xl border-4 border-white shadow-lg bg-[#FAF8FC] overflow-hidden flex items-center justify-center p-3 -mx-5 z-20">
              <Image
                src="/nearlenewlogo.png"
                alt="Central logo panel"
                width={100}
                height={100}
                className="object-contain max-h-[90px] w-auto animate-[pulse_6s_infinite]"
                priority
              />
            </div>
            <div className="relative w-[105px] h-[220px] rounded-2xl overflow-hidden border border-white shadow-md z-10">
              <Image
                src="/nearle people.png"
                alt="Customer"
                fill
                className="object-cover"
                sizes="105px"
              />
            </div>
          </div>

        </motion.div>

      </div>

      {/* ─── BOTTOM PROOF STATS ROW ─── */}
      <div className="border-t border-[#EEE7F4]/80 bg-white">
        <motion.div
          className="page-container py-8 grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-4 relative z-20"
          variants={staggerContainer}
          initial="hidden"
          whileInView="visible"
          viewport={viewport}
        >
          {PROOF_ITEMS.map((item, idx) => (
            <motion.div key={item.label} variants={fadeUp} className="flex items-center gap-4 text-left md:justify-center relative">
              {/* Subtle vertical separator for desktop, except for the first item */}
              {idx > 0 && (
                <div className="hidden md:block absolute left-0 top-1/2 -translate-y-1/2 w-[1px] h-10 bg-[#EEE7F4]" />
              )}
              <div className="w-10 h-10 rounded-full bg-[#6D28D9]/8 text-[#6D28D9] flex items-center justify-center shrink-0">
                <MaterialIcon icon={item.icon} size={18} />
              </div>
              <div>
                <div className="text-2xl md:text-3xl font-black text-[#16001D] leading-none tracking-tight">
                  {item.label}
                </div>
                <div className="text-xs text-[#6D6172] font-semibold mt-1">
                  {item.text}
                </div>
              </div>
            </motion.div>
          ))}
        </motion.div>
      </div>

    </section>
  );
}
