import Image from "next/image";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";

const QUICK_LINKS = [
  {
    name: "Daily Groceries",
    icon: "shopping_basket",
    label: "Fresh & On-Time",
  },

  {
    name: "Hot Meals",
    icon: "fastfood",
    label: "Quick & tasty",
  },
  {
    name: "wellness ",
    icon: "medical_services",
    label: "Essential & Trusted",
  },
  {
    name: "More Services",
    icon: "store",
    label: "Explore More",
  },
];

export function Hero() {
  return (
    <>
      <div className="hero">
        {/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
        <div className="hero-dark-panel select-none pointer-events-none">
          {/* Subtle Background Dot Texture */}
          <div className="hero-map-layer select-none">
            <Image
              src="/images/slider-glob.png"
              alt="Subtle Background"
              fill
              sizes="(max-width: 768px) 100vw, 40vw"
              className="object-contain object-left-top"
              priority
            />
          </div>


          {/* Soft purple radial glow */}
          <div className="absolute right-0 top-1/4 z-0 h-[60%] w-[45%] rounded-full bg-primary/45 blur-[120px] opacity-50 pointer-events-none" />
        </div>

        {/* ─── Main Content Wrapper ─── */}
        <div className="hero-stage relative w-full flex flex-col z-10 md:justify-center md:items-start">
          {/* Left Column: Text & Search Content */}
          <div className="hero-content text-white select-none">
            <span className="inline-block text-xs font-black tracking-widest uppercase mb-5 bg-brand-accent/15 px-4 py-1.5 rounded-full border border-brand-accent/20 text-brand-accent">
              Neighbourhood commerce, made simple
            </span>

            <h1 className="text-4xl sm:text-5xl lg:text-[52px] xl:text-[62px] 2xl:text-[74px] lg:leading-[1.15] font-display font-black tracking-tight mb-8">
              Your Favourite Local Stores,
              <br />
              <span className="text-brand-accent drop-shadow-md">
                Now at Your Doorstep.
              </span>
            </h1>

            <p className="text-body-lg md:text-[20px] md:leading-8 text-white/90 mb-10 leading-relaxed max-w-2xl">
              Order groceries, medicines, food and everyday essentials from trusted stores near you — all in one convenient app.
            </p>

            {/* CTAs */}
            <div className="flex flex-col md:flex-row md:flex-wrap gap-4 mt-8 w-full md:w-auto">
              <Link
                href="/people"
                className="bg-brand-accent hover:bg-brand-accent-light text-brand-dark font-black px-8 py-4 rounded-xl text-sm md:text-base hover:shadow-xl transition-all duration-300 active:scale-95 flex items-center justify-center gap-2 w-full md:w-auto min-h-[48px] whitespace-nowrap"
              >
                Explore Nearby Stores
              </Link>
              <Link
                href="/businesses"
                className="bg-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-8 py-4 rounded-xl text-sm md:text-base transition-all duration-300 active:scale-95 flex items-center justify-center gap-2 w-full md:w-auto min-h-[48px] whitespace-nowrap"
              >
                List Your Store
              </Link>
            </div>

            {/* Trust points */}
            <div className="flex flex-wrap gap-x-8 gap-y-3 mt-12 text-sm md:text-base text-white/90">
              <div className="flex items-center gap-2">
                <MaterialIcon icon="store" size={18} className="text-brand-accent" />
                <span>Real local shops</span>
              </div>
              <div className="flex items-center gap-2">
                <MaterialIcon icon="sell" size={18} className="text-brand-accent" />
                <span>Fair local prices</span>
              </div>
              <div className="flex items-center gap-2">
                <MaterialIcon icon="local_shipping" size={18} className="text-brand-accent" />
                <span>Neighbourhood delivery</span>
              </div>

            </div>

            {/* Mobile/Tablet Only Nearle Bag Logo with context pins */}
            <div className="hero-mobile-logo block lg:hidden mt-8 select-none pointer-events-none relative">
              <div className="relative w-[280px] h-[230px] mx-auto">
                <Image
                  src="/nearlenewlogo.png"
                  alt="Nearle delivery"
                  fill
                  sizes="(max-width: 1023px) 280px, 0px"
                  className="object-contain drop-shadow-2xl"
                  priority
                />
                

              </div>
            </div>
          </div>

          {/* Right Column: Centered Nearle bag visual with local commerce context pins and route line */}
          <div className="hero-visual-layer select-none pointer-events-none relative">
            <div className="hero-visual-panel" />
            

            <div className="hero-visual-image relative">
              <Image
                src="/nearlenewlogo.png"
                alt="Nearle delivery"
                fill
                sizes="(max-width: 768px) 95vw, 48vw"
                className="object-contain drop-shadow-2xl"
                priority
              />
            </div>
            

          </div>
        </div>
      </div>

      {/* Overlapping Quick Category Links */}
      <div className="service-cards-wrapper max-w-container-max mx-auto">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {QUICK_LINKS.map((item) => (
            <div
              key={item.name}
              className="flex items-center gap-4 bg-white p-5 rounded-2xl border border-outline-variant/15 shadow-xl hover:shadow-2xl premium-card cursor-pointer group"
            >
              <div className="flex-shrink-0 w-12 h-12 rounded-full bg-brand-accent/10 flex items-center justify-center group-hover:bg-brand-accent/20 transition-colors">
                <MaterialIcon
                  icon={item.icon}
                  size={24}
                  className="text-brand-accent"
                />
              </div>
              <div className="flex-grow">
                <h3 className="text-sm md:text-base font-extrabold text-brand-dark group-hover:text-primary transition-colors">
                  {item.name}
                </h3>
                <p className="text-xs text-on-surface-variant font-medium mt-0.5 leading-tight">
                  {item.label}
                </p>
              </div>
              <div className="flex-shrink-0 w-8 h-8 rounded-full bg-surface-container flex items-center justify-center opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-300">
                <MaterialIcon
                  icon="arrow_forward"
                  size={16}
                  className="text-primary"
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}