"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.",
  },
];

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}
                  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)]"
                >
                  <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">
                    <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-xs leading-relaxed text-on-surface-variant">{b.desc}</div>
                  </div>
                </motion.div>
              ))}
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}
