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

const QUICK_LINKS = [
  {
    name: "Hot Meals",
    icon: "fastfood",
    label: "Quick & tasty",
  },
  {
    name: "Daily Groceries",
    icon: "shopping_basket",
    label: "Fresh & On-Time",
  },
  {
    name: "Health & Care",
    icon: "medical_services",
    label: "Essential & Trusted",
  },
  {
    name: "More Services",
    icon: "grid_view",
    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 (Minimal, barely visible) */}
        <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>

        {/* Minimal Route Animation (2-3 thin lines only, very subtle) */}
        <svg
          className="absolute inset-0 w-full h-full pointer-events-none"
          viewBox="0 0 1000 800"
          preserveAspectRatio="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <defs>
            <filter
              id="heroRouteGlow"
              x="-50%"
              y="-50%"
              width="200%"
              height="200%"
            >
              <feGaussianBlur stdDeviation="3" result="blur" />
              <feMerge>
                <feMergeNode in="blur" />
                <feMergeNode in="SourceGraphic" />
              </feMerge>
            </filter>
          </defs>
          {/* Minimal glow nodes - only 2 small ones at top */}
          <circle
            cx="140"
            cy="100"
            r="5"
            className="fill-[#bd34fe] opacity-20 animate-pulse"
            filter="url(#heroRouteGlow)"
          />
          <circle cx="140" cy="100" r="1.5" className="fill-white" />

          <circle
            cx="300"
            cy="80"
            r="5"
            className="fill-[#bd34fe] opacity-20 animate-pulse"
            filter="url(#heroRouteGlow)"
          />
          <circle cx="300" cy="80" r="1.5" className="fill-white" />

          {/* Only 2 very thin route lines at top - staying clear of text area */}
          <path
            d="M140,100 Q220,85 300,80"
            fill="none"
            stroke="#c02cff"
            strokeWidth="1"
            strokeDasharray="4,4"
            className="animate-route opacity-15"
            filter="url(#heroRouteGlow)"
          />
          <path
            d="M300,80 Q370,110 420,140"
            fill="none"
            stroke="#c02cff"
            strokeWidth="1"
            strokeDasharray="4,4"
            className="animate-route opacity-12"
            filter="url(#heroRouteGlow)"
          />
        </svg>

        {/* Soft purple radial glow behind the bike near the diagonal edge (clipped) */}
        <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-label-sm text-brand-accent font-black tracking-widest uppercase mb-4 bg-brand-accent/10 px-4 py-1.5 rounded-full border border-brand-accent/20">
            Express Services
          </span>

          <h1 className="text-5xl lg:text-[82px] font-display font-black leading-[0.98] tracking-tight mb-7">
            Express
            <br />
            <span className="text-brand-accent drop-shadow-md">
              Neighborhood
            </span>
          </h1>

          <p className="text-body-lg md:text-[20px] md:leading-8 text-white/80 mb-11 leading-relaxed max-w-2xl">
            Get groceries, hot meals, daily essentials, and local professional
            services delivered from trusted partners within{" "}
            <span className="text-brand-accent font-bold">25-30 minutes</span>.
          </p>

          {/* Search Input Bar */}
          <div className="flex flex-col gap-4">
            <div className="flex items-center bg-white p-2 rounded-full shadow-2xl border border-white/10 focus-within:ring-4 focus-within:ring-brand-accent/30 transition-all duration-300 max-w-[620px]">
              <MaterialIcon
                icon="location_on"
                size={22}
                className="ml-4 text-brand-accent animate-pulse-subtle"
              />
              <input
                type="text"
                placeholder="Enter your neighbourhood or delivery location..."
                className="w-full border-none focus:ring-0 focus:outline-none text-body-md text-on-surface font-semibold placeholder-on-surface-variant/50 px-3 py-2 bg-transparent"
              />
              <button className="bg-brand-accent hover:bg-brand-accent/90 text-brand-dark font-black px-6 py-3 rounded-full text-label-sm hover:shadow-lg transition-all active:scale-95 duration-200 whitespace-nowrap cursor-pointer">
                Find Shops
              </button>
            </div>

            {/* Popular tags below */}
            <div className="flex gap-3 items-center flex-wrap px-4 mt-2">
              <span className="text-label-sm text-white/40 uppercase tracking-widest font-black text-[10px]">
                Popular:
              </span>
              {["Fresh Produce", "African Bakery", "Pet Care"].map((tag) => (
                <a
                  key={tag}
                  href="#"
                  className="text-label-sm text-brand-accent-light hover:text-brand-accent transition-colors font-bold"
                >
                  {tag}
                </a>
              ))}
            </div>
          </div>
        </div>

        {/* Right Column: Dominant delivery image (Overlapping) */}
        <div className="hero-visual-layer select-none pointer-events-none">
          <div className="hero-visual-panel" />
          <div className="hero-visual-image">
            <Image
              src="/nearlenewlogo.png"
              alt="Nearle delivery"
              fill
              sizes="(max-width: 768px) 95vw, 48vw"
              className="object-contain object-bottom drop-shadow-2xl"
              priority
            />
          </div>
        </div>
      </div>

      {/* Overlapping Quick Category Links (Anchored at the bottom edge) */}
      <div className="hero-cards">
        <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-label-md font-extrabold text-brand-dark group-hover:text-primary transition-colors">
                  {item.name}
                </h3>
                <p className="text-[11px] 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>
    </div>
  );
}