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

const BENEFITS = [
  {
    title: "Digital Catalogue",
    desc: "Showcase your products online easily to nearby customers.",
    icon: "menu_book",
    iconColor: "bg-primary/5 text-primary",
  },
  {
    title: "QR Ordering",
    desc: "Enable existing customers to scan and place orders directly at your counter.",
    icon: "qr_code",
    iconColor: "bg-secondary/5 text-secondary",
  },
  {
    title: "Local Discovery",
    desc: "Get discovered by residents in your neighbourhood searching for your products.",
    icon: "explore",
    iconColor: "bg-[#de96f9]/10 text-primary",
  },
  {
    title: "Delivery Support",
    desc: "Fulfill orders with your own staff or rely on Nearle's local delivery partners.",
    icon: "local_shipping",
    iconColor: "bg-rose-500/5 text-rose-600",
  },
];

export function BusinessSection() {
  return (
    <section className="pt-4 md:pt-5 lg:pt-6 pb-4 md:pb-5 lg:pb-6">
      <div className="w-full">
        
        {/* Merchant Section Grid */}
        <div className="grid lg:grid-cols-12 gap-16 items-center">
          
          {/* Left Column: Feature copywriting (7 cols) */}
          <div className="lg:col-span-7">
            <span className="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-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-6 mb-6 leading-tight tracking-tight">
              Bring Your Store Online with Nearle.
            </h2>
            <p className="text-body-lg text-on-surface-variant mb-10 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="space-y-4 mb-10 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="flex flex-wrap gap-4 mt-8">
              <Link
                href="/businesses"
                className="bg-primary hover:bg-primary-container text-white font-black px-10 py-4 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"
              >
                Partner With Nearle
              </Link>
              <Link
                href="/contact"
                className="bg-white hover:bg-surface-container-high text-brand-dark border border-outline-variant/30 font-black px-10 py-4 rounded-full text-sm md:text-base hover:shadow-md transition-all duration-300 active:scale-95 flex items-center gap-2"
              >
                Talk to Our Team
              </Link>
            </div>
          </div>

          {/* Right Column: Benefit Grid Cardless (5 cols) */}
          <div className="lg:col-span-5 grid grid-cols-1 sm:grid-cols-2 gap-8 lg:gap-10">
            {BENEFITS.map((benefit) => (
              <div key={benefit.title} className="flex flex-col items-start group">
                <div className={`w-14 h-14 rounded-2xl flex items-center justify-center mb-4 transition-transform duration-300 group-hover:-translate-y-0.5 shadow-sm ${benefit.iconColor}`}>
                  <MaterialIcon icon={benefit.icon} size={28} />
                </div>
                <h3 className="text-xl md:text-2xl font-black tracking-tight text-brand-dark mb-2">
                  {benefit.title}
                </h3>
                <p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
                  {benefit.desc}
                </p>
              </div>
            ))}
          </div>

        </div>

        {/* CURVED PROMO BANNER (Bottom CTA Block) */}
        <div className="mt-8 md:mt-10 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-10 md:p-20 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl">
          {/* Decorative background vectors */}
          <div className="absolute right-0 top-0 w-[400px] h-[400px] bg-white/10 rounded-full blur-3xl pointer-events-none" />
          <div className="absolute left-10 bottom-0 w-[200px] h-[200px] bg-brand-dark/5 rounded-full blur-2xl pointer-events-none" />

          {/* Left copy column */}
          <div className="md:w-3/5 z-10 text-brand-dark">
            <span className="text-xs font-black uppercase tracking-widest bg-brand-dark/15 px-3.5 py-1.5 rounded-full">
              Piping Hot & Fresh
            </span>
            <h3 className="text-4xl md:text-5xl lg:text-[54px] mt-6 mb-4 leading-[1.1] font-display font-black tracking-tight">
              Everything Nearby, <br />From Stores You Trust.
            </h3>
            <p className="text-body-lg text-brand-dark/80 mb-8 max-w-md font-semibold leading-relaxed">
              Groceries, medicines, food, and everyday essentials — all from your neighbourhood.
            </p>
            <Link
              href="/people"
              className="bg-brand-dark hover:bg-brand-dark/90 text-white font-black px-8 py-3.5 rounded-full text-sm md:text-base hover:shadow-2xl transition-all hover:-translate-y-0.5 active:translate-y-0 active:scale-95 duration-200 inline-block shadow-md text-center"
            >
              Explore Stores Now
            </Link>
          </div>

          {/* Right visual column */}
          <div className="md:w-2/5 relative flex justify-center items-center">
            {/* Soft background shape */}
            <div className="absolute w-[260px] h-[260px] bg-brand-dark/10 rounded-full pointer-events-none scale-110" />
            
            <div className="relative w-full max-w-[280px] aspect-square rounded-[2rem] overflow-hidden border-4 border-white shadow-2xl rotate-3 hover:rotate-0 transition-transform duration-500">
              <Image
                src="/images/cat-hot-food.png"
                alt="Hot meals from Nearle local kitchen partners"
                width={400}
                height={400}
                className="w-full h-full object-cover scale-105"
              />
            </div>
          </div>
        </div>

      </div>
    </section>
  );
}


