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

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/5 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/5 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 = [
  "No Commission on your orders",
  "Full Control on pricing",
  "Dedicated Support for your business",
  "Grow Your Sales in your area",
];

export function BusinessSection() {
  return (
    <section className="section bg-white w-full overflow-hidden">
      <div className="page-container">
        <div className="relative overflow-hidden rounded-[2rem] bg-[linear-gradient(135deg,#ffffff_0%,#fbf7ff_48%,#f3e8f6_100%)] border border-primary/10 shadow-[0_24px_70px_rgba(22,0,29,0.08)] p-5 md:p-8 lg:p-10">
          <div className="pointer-events-none absolute -left-16 top-24 h-56 w-56 rounded-full bg-primary/5 blur-3xl" />
          <div className="pointer-events-none absolute -right-20 bottom-10 h-64 w-64 rounded-full bg-secondary/5 blur-3xl" />

          <div className="relative grid min-w-0 grid-cols-1 gap-6 md:gap-8 xl:grid-cols-[minmax(0,30fr)_minmax(0,28fr)_minmax(0,42fr)] xl:items-stretch">
            <div className="min-w-0 xl:col-start-1 xl:row-start-1">
              <span className="w-fit text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full border border-secondary/15">
                Merchant Partnerships
              </span>
              <h2 className="text-[clamp(2.25rem,10vw,2.625rem)] md:text-5xl xl:text-[52px] font-display font-black text-brand-dark mt-6 mb-5 leading-tight tracking-tight">
                Bring Your Store Online <br className="hidden md:block" />
                with <span className="text-primary font-normal">Nearle.</span>
              </h2>
              <p className="text-body-lg text-on-surface-variant max-w-xl 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-7 space-y-3 text-sm md:text-base">
                <div className="flex items-center gap-3">
                  <div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center shrink-0">
                    <MaterialIcon icon="check" size={16} className="text-secondary font-bold" />
                  </div>
                  <span className="font-bold text-brand-dark">Stay in control of your pricing and orders</span>
                </div>
                <div className="flex items-center gap-3">
                  <div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center shrink-0">
                    <MaterialIcon icon="check" size={16} className="text-secondary font-bold" />
                  </div>
                  <span className="font-bold text-brand-dark">Build direct relationships with local families</span>
                </div>
              </div>

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

            <div className="relative h-[clamp(280px,78vw,340px)] min-w-0 overflow-hidden rounded-[2rem] bg-brand-accent-light shadow-[0_26px_60px_rgba(22,0,29,0.14)] md:h-[420px] md:max-h-[420px] xl:col-start-2 xl:row-span-2 xl:row-start-1 xl:h-auto xl:max-h-none xl:min-h-full">
              <Image
                src="/images/nearle-merchant/merchant-hero.webp"
                alt="Indian local grocery shop owner managing store orders on a laptop"
                fill
                sizes="(max-width: 767px) 100vw, (max-width: 1279px) 100vw, 28vw"
                className="object-cover object-center"
              />
              <div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-brand-dark/25 to-transparent" />
            </div>

            <div className="grid min-w-0 grid-cols-[104px_minmax(0,1fr)] gap-4 rounded-[1.5rem] xl:col-start-1 xl:row-start-2">
              <div className="relative min-h-32 overflow-hidden rounded-[1.5rem] bg-brand-accent-light shadow-[0_18px_35px_rgba(22,0,29,0.10)]">
                <Image
                  src="/images/nearle-merchant/success-owner.webp"
                  alt="Indian grocery shop owner using a smartphone inside a kirana store"
                  fill
                  sizes="104px"
                  className="object-cover"
                />
              </div>
              <div className="min-w-0 rounded-[1.5rem] border border-primary/10 bg-white/90 p-4 shadow-[0_18px_40px_rgba(22,0,29,0.08)] md:p-5">
                <span className="text-[11px] font-black uppercase tracking-widest text-primary">
                  Success Story
                </span>
                <h3 className="mt-2 text-lg font-black leading-tight text-brand-dark md:text-xl">
                  Kumar Provision Store
                </h3>
                <p className="mt-2 text-sm leading-relaxed text-on-surface-variant">
                  Nearle helped us reach more customers in our area and manage orders effortlessly.
                </p>
              </div>
            </div>

            <div className="grid min-w-0 grid-cols-1 gap-4 md:grid-cols-[repeat(2,minmax(0,1fr))] xl:col-start-3 xl:row-span-2 xl:row-start-1">
              {FEATURES.map((feature) => (
                <div
                  key={feature.title}
                  className="flex min-h-[180px] min-w-0 flex-col overflow-hidden rounded-[1.75rem] border border-primary/10 bg-white/92 p-4 shadow-[0_18px_40px_rgba(22,0,29,0.08)] md:min-h-[300px] xl:h-full"
                >
                  <div className="flex items-start gap-3">
                    <div className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl ${feature.tone}`}>
                      <MaterialIcon icon={feature.icon} size={25} />
                    </div>
                    <div>
                      <h3 className="text-xl font-black tracking-tight text-brand-dark">
                        {feature.title}
                      </h3>
                      <p className="mt-2 text-sm leading-relaxed text-on-surface-variant md:max-w-[24ch] xl:max-w-none">
                        {feature.desc}
                      </p>
                    </div>
                  </div>
                  <div className="relative mt-auto aspect-[16/8] w-full self-end overflow-hidden rounded-[1.25rem] bg-brand-accent-light md:aspect-[16/10]">
                    <Image
                      src={feature.visual}
                      alt={feature.alt}
                      fill
                      sizes="(max-width: 767px) 100vw, (max-width: 1279px) 50vw, 21vw"
                      className="object-cover"
                    />
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="relative mt-6 flex snap-x snap-mandatory gap-3 overflow-x-auto rounded-[1.75rem] border border-primary/10 bg-white/88 p-4 shadow-[0_18px_40px_rgba(22,0,29,0.07)] md:grid md:grid-cols-[repeat(2,minmax(0,1fr))] md:overflow-visible xl:grid-cols-[repeat(4,minmax(0,1fr))]">
            {BENEFITS.map((benefit) => (
              <div key={benefit} className="flex min-w-[230px] snap-start items-center gap-3 px-2 py-2 md:min-w-0">
                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-secondary/10 text-secondary">
                  <MaterialIcon icon="check_circle" size={20} />
                </div>
                <span className="text-sm font-black leading-snug text-brand-dark">
                  {benefit}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
