"use client";

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

const FEATURES = [
  {
    title: "Trusted Nearby Stores",
    icon: "store",
    desc: "Connect directly with the local merchants you already know.",
  },
  {
    title: "Short-Distance Delivery",
    icon: "local_shipping",
    desc: "Delivered quickly from nearby shops to keep items fresh.",
  },
  {
    title: "Easy Reorders",
    icon: "replay",
    desc: "Save your favourite stores and reorder in seconds.",
  },
  {
    title: "Support Local Businesses",
    icon: "favorite",
    desc: "Help local neighbourhood stores thrive digitally.",
  },
];

export function HyperlocalFeatures() {
  return (
    <section className="relative bg-white w-full py-1 lg:py-1">
      {/* Subtle background radial glows */}
      <div className="absolute left-[15%] top-1/2 -translate-x-1/2 -translate-y-1/2 w-[55%] h-[55%] rounded-full bg-brand-accent/[0.03] blur-[130px] pointer-events-none z-0" />
      <div className="absolute right-[15%] top-1/2 translate-x-1/2 -translate-y-1/2 w-[55%] h-[55%] rounded-full bg-primary/[0.03] blur-[130px] pointer-events-none z-0" />

      {/* Inner container */}
     <div className="relative z-10 mx-auto w-full max-w-[2200px] px-2 md:px-4 lg:px-5 xl:px-6">
        <div className="grid grid-cols-1 lg:grid-cols-[0.95fr_1.05fr] gap-8 lg:gap-10 items-center">

          {/* Left Column: Visual Storytelling */}
          <motion.div
            className="w-full max-w-[880px] justify-self-center relative rounded-[2rem] border border-outline-variant/25 bg-[#F8F3FC] z-10 overflow-hidden aspect-[10/11] lg:h-[580px] shadow-[0_24px_80px_rgba(101,20,154,0.10)]"
            variants={slideInLeft}
            initial="hidden"
            whileInView="visible"
            viewport={viewport}
          >
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_52%_42%,rgba(124,58,237,0.12),transparent_34%),linear-gradient(145deg,rgba(255,255,255,0.94),rgba(243,232,246,0.62))]" />
            <div className="absolute inset-6 rounded-[1.5rem] overflow-hidden bg-white/55 ring-1 ring-white/80 shadow-[inset_0_1px_0_rgba(255,255,255,0.9)]">
              <svg
                className="absolute inset-0 h-full w-full"
                viewBox="0 0 640 700"
                fill="none"
                aria-hidden="true"
              >
                <rect width="640" height="700" fill="#FAF8FC" />
                <path d="M-26 184C70 156 159 154 245 192C328 229 407 229 487 193C563 159 628 153 690 178" stroke="#E2DAE9" strokeWidth="18" strokeLinecap="round" opacity="0.9" />
                <path d="M-14 520C92 480 181 482 255 524C352 579 440 581 546 531C603 504 654 490 704 496" stroke="#E8E0EF" strokeWidth="24" strokeLinecap="round" opacity="0.8" />
                <path d="M100 -40L162 742" stroke="#E5DEEC" strokeWidth="12" strokeLinecap="round" />
                <path d="M300 -42L258 744" stroke="#E9E1F0" strokeWidth="10" strokeLinecap="round" />
                <path d="M510 -30L462 740" stroke="#E5DEEC" strokeWidth="12" strokeLinecap="round" />
                <path d="M-26 84H690" stroke="#EDE7F3" strokeWidth="10" strokeLinecap="round" />
                <path d="M-26 328H690" stroke="#E1D9E8" strokeWidth="12" strokeLinecap="round" />
                <path d="M-26 628H690" stroke="#E9E2F0" strokeWidth="10" strokeLinecap="round" />
                <path d="M-8 680L658 22" stroke="#E7DFEE" strokeWidth="10" strokeLinecap="round" />
                <path d="M52 736L700 240" stroke="#EEE8F4" strokeWidth="8" strokeLinecap="round" />
                <path d="M-62 296L614 -30" stroke="#E9E3F0" strokeWidth="10" strokeLinecap="round" />
                <path d="M74 246L197 182L350 238L502 166L615 218" stroke="#D9EFDF" strokeWidth="46" strokeLinecap="round" opacity="0.45" />
                <path d="M30 594L156 546L272 594L389 532L540 576" stroke="#DDF2E3" strokeWidth="50" strokeLinecap="round" opacity="0.42" />
                <path d="M210 470C254 421 285 375 320 350C369 316 422 302 484 268" stroke="#7C3AED" strokeWidth="3" strokeLinecap="round" strokeDasharray="4 11" opacity="0.58" />
                <path d="M320 350C271 319 229 293 174 286C123 279 89 252 55 225" stroke="#7C3AED" strokeWidth="3" strokeLinecap="round" strokeDasharray="4 11" opacity="0.45" />
                <path d="M320 350C377 385 431 429 500 430" stroke="#006D37" strokeWidth="3" strokeLinecap="round" strokeDasharray="4 11" opacity="0.42" />
                <path d="M320 350C335 281 367 227 430 190" stroke="#7C3AED" strokeWidth="3" strokeLinecap="round" strokeDasharray="4 11" opacity="0.45" />
              </svg>

              <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(255,255,255,0.52),rgba(255,255,255,0.14)_44%,rgba(255,255,255,0.48))]" />
            </div>

            <div className="absolute top-[22%] left-[14%] z-50 rounded-full bg-white/88 backdrop-blur-xl px-4 py-3 shadow-[0_16px_42px_rgba(23,0,31,0.10)] border border-white/80 flex items-center gap-2">
              <MaterialIcon icon="sell" size={18} className="text-[#006D37]" />
              <span className="text-xs md:text-sm font-black text-[#006D37]">Offers Nearby</span>
            </div>

            <div className="absolute top-[33%] left-[12%] z-50 rounded-full bg-white/86 backdrop-blur-xl px-4 py-3 shadow-[0_14px_38px_rgba(23,0,31,0.09)] border border-white/80 flex items-center gap-2">
              <MaterialIcon icon="schedule" size={18} className="text-primary" />
              <span className="text-xs md:text-sm font-black text-primary">Open Now</span>
            </div>

            {[
              ["left-[31%] top-[24%]", "bg-primary", "scale-90"],
              ["right-[20%] top-[22%]", "bg-[#006D37]", "scale-100"],
              ["right-[13%] top-[39%]", "bg-primary", "scale-90"],
              ["left-[20%] top-[52%]", "bg-primary", "scale-80"],
              ["left-[37%] bottom-[31%]", "bg-[#006D37]", "scale-95"],
              ["right-[31%] top-[33%]", "bg-primary", "scale-100"],
            ].map(([position, color, scale]) => (
              <div key={position} className={`absolute ${position} ${scale} z-20`}>
                <div className={`relative h-11 w-11 -rotate-45 rounded-[50%_50%_50%_10%] ${color} shadow-[0_14px_28px_rgba(101,20,154,0.22)]`}>
                  <div className="absolute left-1/2 top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white/92" />
                </div>
              </div>
            ))}

            <div className="absolute left-1/2 top-[41%] z-30 -translate-x-1/2 -translate-y-1/2">
              <div className="absolute left-1/2 top-[78%] h-20 w-36 -translate-x-1/2 rounded-full bg-primary/15 blur-md" />
              <div className="absolute left-1/2 top-[87%] h-8 w-24 -translate-x-1/2 rounded-full bg-primary/30" />
              <div className="relative h-28 w-28 -rotate-45 rounded-[50%_50%_50%_12%] bg-[linear-gradient(135deg,#8B5CF6,#65149A)] shadow-[0_30px_60px_rgba(101,20,154,0.30)] md:h-32 md:w-32">
                <div className="absolute left-1/2 top-1/2 h-12 w-12 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white/94 shadow-inner md:h-14 md:w-14" />
              </div>
            </div>

            <div className="absolute left-[30%] right-[4%] top-[49%] z-40 rounded-[1.35rem] border border-white/80 bg-white/88 p-2.5 shadow-[0_24px_70px_rgba(23,0,31,0.16)] backdrop-blur-xl md:left-[45%] md:right-[5%] md:top-[52%] md:p-4">
              <div className="flex items-center gap-3">
                <div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-2xl bg-brand-accent/40 ring-1 ring-outline-variant/20 md:h-20 md:w-20">
                  <Image src="/images/cat-daily-essentials.webp" alt="Sri Krishna Groceries storefront" fill sizes="80px" className="object-cover" />
                </div>
                <div className="min-w-0 flex-1">
                  <div className="truncate text-sm font-black text-brand-dark md:text-base">Sri Krishna Groceries</div>
                  <p className="mt-0.5 truncate text-xs font-medium text-on-surface-variant md:text-sm">Fresh Harvest & Daily Needs</p>
                  <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs md:text-sm">
                    <span className="inline-flex items-center gap-1 font-bold text-on-surface-variant">
                      <MaterialIcon icon="star" size={15} fill className="text-amber-500" />
                      4.8
                    </span>
                    <span className="inline-flex items-center gap-1 font-black text-[#006D37]">
                      <span className="h-2 w-2 rounded-full bg-[#16A34A]" />
                      Open Now
                    </span>
                    <span className="font-bold text-on-surface-variant">0.8 km away</span>
                  </div>
                </div>
              </div>
            </div>

            <div className="absolute bottom-[8%] left-[7%] right-[7%] z-40 flex items-center gap-4 rounded-[1.35rem] border border-white/15 bg-[linear-gradient(135deg,#7C3AED,#65149A)] px-5 py-4 text-white shadow-[0_24px_60px_rgba(101,20,154,0.28)]">
              <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-white shadow-[0_10px_24px_rgba(23,0,31,0.12)]">
                <MaterialIcon icon="check" size={24} className="text-primary" />
              </div>
              <div className="min-w-0">
                <p className="text-sm font-black md:text-base">Order Confirmed</p>
                <p className="mt-0.5 text-xs font-medium text-white/82 md:text-sm">Your local store is preparing your order</p>
              </div>
            </div>

          </motion.div>

          {/* Right Column: Feature Panel directly on page background */}
          <div className="w-full py-6 md:py-8 lg:py-10 pl-4 md:pl-8 lg:pl-12 xl:pl-44 relative z-10 text-[#16001D]">
            <motion.span
              className="text-xs text-primary uppercase tracking-widest font-black bg-primary/10 px-3.5 py-1.5 rounded-full border border-primary/20"
              variants={fadeUp}
              initial="hidden"
              whileInView="visible"
              viewport={viewport}
            >
              Community & Trust
            </motion.span>

            <motion.h2
              className="text-4xl md:text-5xl lg:text-[44px] font-display font-black text-brand-dark mt-4 mb-6 leading-tight tracking-tight"
              variants={fadeUp}
              initial="hidden"
              whileInView="visible"
              viewport={viewport}
            >
              Built Around Your<br />
              <span className="text-primary font-black">Neighbourhood</span>
            </motion.h2>

            <motion.p
              className="text-body-lg text-on-surface-variant mb-10 max-w-lg leading-relaxed"
              variants={fadeUp}
              initial="hidden"
              whileInView="visible"
              viewport={viewport}
            >
              Nearle brings the convenience of an app to the stores you already know and trust, making it easy to support local shops.
            </motion.p>

            {/* Features List with vertical connector line */}
            <motion.div
              className="relative space-y-8"
              variants={staggerContainer}
              initial="hidden"
              whileInView="visible"
              viewport={viewport}
            >
              {/* Vertical connector line */}
              <div className="absolute left-6 top-6 bottom-6 w-0.5 bg-primary/20 -translate-x-1/2 z-0" />

              {FEATURES.map((item) => (
                <motion.div key={item.title} variants={fadeUp} className="flex gap-5 group relative z-10">

                  {/* Icon circle */}
                  <div className="flex-shrink-0 w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center shadow-md relative z-10 group-hover:scale-105 transition-transform duration-300">
                    <MaterialIcon
                      icon={item.icon}
                      className="text-white"
                      size={22}
                    />
                  </div>

                  <div>
                    <h3 className="text-lg md:text-xl font-black text-brand-dark group-hover:text-primary transition-colors">
                      {item.title}
                    </h3>
                    <p className="text-sm md:text-base text-on-surface-variant mt-1 leading-relaxed">
                      {item.desc}
                    </p>
                  </div>
                </motion.div>
              ))}
            </motion.div>

            {/* Divider Line above CTA Area */}
            <hr className="border-t border-[#EEE7F4] my-6 relative z-10" />

            {/* Onboarding Call to Action */}
            <motion.div
              className="mt-2 flex flex-wrap gap-6 items-center relative z-10"
              variants={fadeUp}
              initial="hidden"
              whileInView="visible"
              viewport={viewport}
            >
              <Link
                href="/#download"
                className="bg-primary hover:bg-primary-container text-white font-black px-8 py-3.5 rounded-full text-sm md:text-base hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200"
              >
                Get Nearle App
              </Link>
              <Link
                href="/businesses"
                className="text-[#6D28D9] hover:text-[#5225b8] font-black text-sm md:text-base flex items-center gap-1 group py-2"
              >
                <span>Learn How to Partner</span>
                <MaterialIcon
                  icon="arrow_forward"
                  size={16}
                  className="transition-transform group-hover:translate-x-1"
                />
              </Link>
            </motion.div>

          </div>
        </div>

      </div>
    </section>
  );
}