"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, fadeIn, scaleIn, staggerContainer, viewport } from "@/lib/animations";

const FEATURES = [
  {
    title: "Digital Catalogue",
    desc: "Showcase your products online and keep your catalogue updated.",
    icon: "menu_book",
    visual: "/images/nearle-merchant/catalogue-ui.webp",
    alt: "Clean grocery catalogue interface preview",
    tone: "bg-primary/8 text-primary",
  },
  {
    title: "QR Ordering",
    desc: "Let customers scan, browse, and place orders directly from your store.",
    icon: "qr_code",
    visual: "/images/nearle-merchant/qr-stand.webp",
    alt: "QR ordering stand on a local grocery store counter",
    tone: "bg-secondary/8 text-secondary",
  },
  {
    title: "Local Discovery",
    desc: "Get discovered by nearby customers searching for products you sell.",
    icon: "location_on",
    visual: "/images/nearle-merchant/local-map.webp",
    alt: "Local discovery map with purple pins and a store listing",
    tone: "bg-[#de96f9]/10 text-primary",
  },
  {
    title: "Delivery Support",
    desc: "Deliver orders easily with your own staff or trusted local delivery partners.",
    icon: "local_shipping",
    visual: "/images/nearle-merchant/delivery-support.webp",
    alt: "Local delivery partner handing a grocery bag to a customer",
    tone: "bg-rose-500/5 text-rose-600",
  },
];

const BENEFITS = [
  {
    icon: "verified_user",
    title: "Verified & Trusted",
    desc: "All stores are verified for quality and reliability.",
  },
  {
    icon: "groups",
    title: "2L+ Customers",
    desc: "Join thousands of merchants already growing with Nearle.",
  },
  {
    icon: "trending_up",
    title: "Growing Together",
    desc: "We provide the tools, you focus on your customers.",
  },
  {
    icon: "headset_mic",
    title: "Support That Cares",
    desc: "Our team is always here to help you succeed.",
  },
];

function LocalDiscoveryVisual() {
  return (
    <div className="relative h-[260px] w-full overflow-hidden bg-[#FAF8FC] sm:h-[300px]">
      {/* Map Background (SVG) */}
      <svg className="absolute inset-0 h-full w-full opacity-[0.85]" viewBox="0 0 400 300" fill="none" preserveAspectRatio="xMidYMid slice">
        <path d="M-20 50C30 40 100 45 150 70C220 105 280 95 380 60" stroke="#E6DFF0" strokeWidth="8" strokeLinecap="round" />
        <path d="M-10 220C50 190 120 200 180 230C250 260 310 255 400 220" stroke="#DDF0E3" strokeWidth="12" strokeLinecap="round" />
        <path d="M50 -20L80 320" stroke="#EBE4F2" strokeWidth="6" strokeLinecap="round" />
        <path d="M180 -20L150 320" stroke="#E5DEEF" strokeWidth="6" strokeLinecap="round" />
        <path d="M300 -20L270 320" stroke="#EBE4F2" strokeWidth="6" strokeLinecap="round" />
        <path d="M-20 100H420" stroke="#E8E1F0" strokeWidth="6" strokeLinecap="round" />
        <path d="M-20 180H420" stroke="#E2DAEC" strokeWidth="6" strokeLinecap="round" />
      </svg>

      {/* Halos around main pin */}
      <div className="absolute left-[35%] top-[45%] h-44 w-44 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/10 blur-xl" />
      <div className="absolute left-[35%] top-[45%] h-28 w-28 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/20 animate-pulse blur-md" />

      {/* Main Pin */}
      <div className="absolute left-[35%] top-[45%] z-20 -translate-x-1/2 -translate-y-1/2 drop-shadow-xl transition-transform hover:scale-110">
        <div className="relative h-11 w-11 -rotate-45 rounded-[50%_50%_50%_10%] bg-primary">
          <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 shadow-inner" />
        </div>
      </div>

      {/* Other Pins */}
      {[
        ["left-[15%] top-[25%]", "bg-primary", "scale-75"],
        ["left-[50%] top-[15%]", "bg-primary", "scale-[0.65]"],
        ["left-[22%] top-[68%]", "bg-primary", "scale-[0.70]"],
      ].map(([pos, color, scale], i) => (
        <div key={i} className={`absolute ${pos} ${scale} z-10 drop-shadow-md`}>
          <div className={`relative h-11 w-11 -rotate-45 rounded-[50%_50%_50%_10%] ${color}`}>
            <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" />
          </div>
        </div>
      ))}

      {/* Store Card (Right Side) */}
      <div className="absolute bottom-4 right-4 z-30 w-[200px] overflow-hidden rounded-[1.25rem] bg-white shadow-[0_12px_32px_rgba(22,0,29,0.12)] border border-primary/10 sm:bottom-6 sm:right-6 sm:w-[240px]">
        <div className="relative h-[90px] w-full bg-brand-accent-light sm:h-[110px]">
          <Image src="/images/nearle-merchant/success-owner.webp" alt="Owner" fill className="object-cover" />
        </div>
        <div className="p-3.5 sm:p-4">
          <h4 className="truncate text-[13px] font-black text-brand-dark sm:text-[15px]">Kumar Provision Store</h4>
          <p className="mt-0.5 truncate text-[10px] font-medium text-on-surface-variant sm:text-[11px]">Gandhi Nagar, West Delhi</p>
          
          <div className="mt-2.5 flex gap-1.5">
            <span className="rounded-full bg-brand-accent/10 px-2.5 py-1 text-[9px] font-black text-primary sm:text-[10px]">Groceries</span>
            <span className="rounded-full bg-brand-accent/10 px-2.5 py-1 text-[9px] font-black text-primary sm:text-[10px]">Essentials</span>
          </div>

          <div className="mt-3 flex items-center gap-1.5 text-[10px] font-bold sm:text-[11px]">
            <span className="text-[#006D37]">Open</span>
            <span className="text-on-surface-variant/40">•</span>
            <span className="text-on-surface-variant">Closes 10:00 PM</span>
          </div>

          <button className="mt-3.5 w-full rounded-xl bg-primary py-2 text-[11px] font-black text-white transition-colors hover:bg-primary-container sm:py-2.5 sm:text-xs">
            View Store
          </button>
        </div>
      </div>
    </div>
  );
}

export function BusinessSection() {
  return (
    <section className="section bg-white w-full overflow-hidden">
     <div className="mx-auto w-full max-w-[2200px] px-2 md:px-4 lg:px-5 xl:px-6">
        <div className="relative overflow-hidden rounded-[2rem] bg-[linear-gradient(135deg,#ffffff_0%,#fbf7ff_50%,#ede4f5_100%)] border border-primary/10 shadow-[0_24px_70px_rgba(22,0,29,0.08)] p-5 md:p-8 lg:p-10">
          <motion.div
            className="pointer-events-none absolute -left-16 top-24 h-64 w-64 rounded-full bg-primary/5 blur-3xl"
            animate={{ y: [0, -16, 0] }}
            transition={{ duration: 13, repeat: Infinity, ease: "easeInOut" }}
          />
          <motion.div
            className="pointer-events-none absolute -right-20 bottom-10 h-64 w-64 rounded-full bg-secondary/5 blur-3xl"
            animate={{ y: [0, 14, 0] }}
            transition={{ duration: 11, repeat: Infinity, ease: "easeInOut" }}
          />

          <div className="relative grid gap-6 grid-cols-1 md:gap-7
            xl:grid-cols-[420px_1fr] xl:gap-8 xl:items-start">

            {/* ── 1. Left text content ── */}
            <motion.div
              className="min-w-0 xl:col-start-1 xl:row-start-1"
              variants={fadeUp}
              initial="hidden"
              whileInView="visible"
              viewport={viewport}
            >
              {/* Badge */}
              <div className="flex w-fit items-center gap-2 rounded-full border border-secondary/20 bg-secondary/5 px-3 py-1.5">
                <div className="flex h-5 w-5 items-center justify-center rounded-full bg-secondary/15">
                  <MaterialIcon icon="storefront" size={13} className="text-secondary" />
                </div>
                <span className="text-[11px] font-black uppercase tracking-widest text-secondary">
                  Merchant Partnerships
                </span>
              </div>

              <h2 className="mt-5 mb-4 font-display font-black text-brand-dark leading-[1.06] tracking-tight text-[clamp(2.5rem,7vw,3.5rem)]">
                Bring Your Store Online with{" "}
                <span className="text-primary font-normal">Nearle.</span>
              </h2>

             <p className="max-w-md text-base text-on-surface-variant leading-relaxed">
                Reach more nearby customers, accept online orders, promote local offers, and grow repeat sales, while staying in control of your business.
              </p>

              <div className="mt-5 space-y-3">
                <div className="flex items-center gap-3">
                  <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-secondary/10">
                    <MaterialIcon icon="check" size={15} className="text-secondary font-bold" />
                  </div>
                  <span className="font-bold text-brand-dark text-sm md:text-base">
                    Stay in control of your pricing and orders
                  </span>
                </div>
                <div className="flex items-center gap-3">
                  <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-secondary/10">
                    <MaterialIcon icon="check" size={15} className="text-secondary font-bold" />
                  </div>
                  <span className="font-bold text-brand-dark text-sm md:text-base">
                    Build direct relationships with local families
                  </span>
                </div>
              </div>

              <div className="mt-7 flex flex-col gap-3">
                <Link
                  href="/businesses"
                  className="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-full bg-primary px-7 py-3.5 text-base font-black text-white shadow-sm transition-all duration-200 hover:bg-primary-container hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95"
                >
                  Partner With Nearle
                  <MaterialIcon icon="arrow_forward" size={18} />
                </Link>
                <Link
                  href="/contact"
                  className="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-full border border-outline-variant/40 bg-white px-7 py-3.5 text-base font-black text-brand-dark shadow-sm transition-all duration-300 hover:bg-surface-container-high hover:shadow-md active:scale-95"
                >
                  Talk to Our Team
                  <MaterialIcon icon="arrow_forward" size={18} />
                </Link>
              </div>
            </motion.div>

            {/* ── 2. Feature cards ── */}
            <motion.div
              className="min-w-0
              order-2 md:order-3
              xl:order-none xl:col-start-2 xl:row-start-1 xl:row-span-2
              grid grid-cols-1 gap-4 md:grid-cols-2"
              variants={staggerContainer}
              initial="hidden"
              whileInView="visible"
              viewport={viewport}
            >
              {FEATURES.map((feature) => (
                <motion.article
                  key={feature.title}
                  variants={fadeUp}
                  whileHover={{ y: -6, transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] } }}
                  className="merchant-feature-card flex min-w-0 flex-col overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white shadow-[0_4px_24px_rgba(22,0,29,0.07)] hover:shadow-[0_16px_40px_rgba(22,0,29,0.12)] hover:border-primary/20 transition-[box-shadow,border-color] duration-[250ms]"
                >
                  <div className="p-5">
                    <div className="flex items-start gap-3">
                      <div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl ${feature.tone}`}>
                        <MaterialIcon icon={feature.icon} size={22} />
                      </div>
                      <div className="min-w-0">
                        <h3 className="text-[1rem] font-black leading-snug tracking-tight text-brand-dark">
                          {feature.title}
                        </h3>
                        <p className="mt-1.5 text-sm leading-relaxed text-on-surface-variant">
                          {feature.desc}
                        </p>
                      </div>
                    </div>
                  </div>
                  <div className="mt-auto w-full overflow-hidden">
                    {feature.title === "Local Discovery" ? (
                      <LocalDiscoveryVisual />
                    ) : (
                      <Image
                        src={feature.visual}
                        alt={feature.alt}
                        width={900}
                        height={560}
                        sizes="(max-width: 767px) 90vw, (max-width: 1279px) 45vw, 30vw"
                        className="block h-auto w-full object-cover"
                      />
                    )}
                  </div>
                </motion.article>
              ))}
            </motion.div>

            {/* ── 3. Success story ── */}
            <motion.div
              className="min-w-0
              order-3 md:order-2
              xl:order-none xl:col-start-1 xl:row-start-2
              overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white/90 shadow-[0_4px_24px_rgba(22,0,29,0.07)]
              grid grid-cols-[100px_minmax(0,1fr)]"
              variants={scaleIn}
              initial="hidden"
              whileInView="visible"
              viewport={viewport}
            >
              <div className="relative min-h-[128px] overflow-hidden bg-brand-accent-light">
                <Image
                  src="/images/nearle-merchant/success-owner.webp"
                  alt="Indian grocery shop owner using a smartphone inside a kirana store"
                  fill
                  sizes="100px"
                  className="object-cover object-center"
                />
              </div>
              <div className="min-w-0 px-4 py-4">
                <span className="text-[10px] font-black uppercase tracking-widest text-primary">
                  Success Story
                </span>
                <h3 className="mt-1.5 text-base font-black leading-tight text-brand-dark">
                  Kumar Provision Store
                </h3>
                <p className="mt-1.5 text-sm leading-relaxed text-on-surface-variant">
                  Nearle helped us reach more customers in our area and manage orders effortlessly.
                </p>
              </div>
            </motion.div>
          </div>

          {/* ── Benefits strip ── */}
          <motion.div
            className="relative mt-6 overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white/90 shadow-[0_4px_24px_rgba(22,0,29,0.06)]"
            variants={staggerContainer}
            initial="hidden"
            whileInView="visible"
            viewport={viewport}
          >
            <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 divide-y sm:divide-y-0 sm:divide-x divide-primary/8 xl:divide-x xl:divide-y-0">
              {BENEFITS.map((b) => (
                <motion.div key={b.title} variants={fadeIn} className="flex items-start gap-3 p-5">
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-secondary/10 text-secondary">
                    <MaterialIcon icon={b.icon} size={20} />
                  </div>
                  <div>
                    <div className="text-sm font-black text-brand-dark">{b.title}</div>
                    <div className="mt-0.5 text-sm leading-relaxed text-on-surface-variant">{b.desc}</div>
                  </div>
                </motion.div>
              ))}
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}