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

const FEATURES = [
  {
    title: "Direct Customer Relationship",
    desc: "Build long-term direct ties with nearby families. Own your neighborhood presence.",
  },
  {
    title: "Managed Instant Delivery Fleet",
    desc: "We supply professional, verified moped couriers. Focus on your business, not hiring drivers.",
  },
  {
    title: "Neighborhood Demand Trends",
    desc: "Use Nearle's analytic insights to track demand, optimize your stock, and launch promos.",
  },
];

const STATS = [
  {
    value: "40%+",
    label: "Average Revenue Rise",
    icon: "trending_up",
    style: "bg-primary text-white",
  },
  {
    value: "12k+",
    label: "Daily Neighborhood Orders",
    icon: "shopping_bag",
    style: "bg-brand-accent text-brand-dark",
  },
  {
    value: "5k+",
    label: "Verified Retail Partners",
    icon: "storefront",
    style: "bg-[#faf8f5] border border-outline-variant/20 text-primary",
  },
  {
    value: "24/7",
    label: "Partner Helpdesk Support",
    icon: "support_agent",
    style: "bg-[#de96f9]/20 text-primary border border-primary/10",
  },
];

export function BusinessSection() {
  return (
    <section className="py-24 px-margin-mobile md:px-margin-desktop bg-white">
      <div className="max-w-container-max mx-auto">
        
        {/* 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-label-sm 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-display text-brand-dark mt-6 mb-6 leading-tight">
              Grow your local brand in the <span className="text-secondary">Neighborhood.</span>
            </h2>
            <p className="text-body-lg text-on-surface-variant mb-12 max-w-xl leading-relaxed">
              Unlock delivery, loyalty programs, and localized promotions. Join over 5,000 neighborhood partners who are digitizing their community sales channels.
            </p>

            <div className="space-y-8 mb-12">
              {FEATURES.map((feat) => (
                <div key={feat.title} className="flex gap-4 group">
                  <div className="flex-shrink-0 w-8 h-8 rounded-full bg-secondary/10 border border-secondary/20 flex items-center justify-center group-hover:bg-secondary group-hover:text-white transition-all duration-300">
                    <MaterialIcon
                      icon="check"
                      size={18}
                      className="text-secondary group-hover:text-white transition-colors"
                    />
                  </div>
                  <div>
                    <h4 className="text-headline-md font-black text-brand-dark group-hover:text-primary transition-colors">
                      {feat.title}
                    </h4>
                    <p className="text-body-md text-on-surface-variant mt-1.5 leading-relaxed">
                      {feat.desc}
                    </p>
                  </div>
                </div>
              ))}
            </div>

            <button className="bg-primary hover:bg-primary-container text-white font-black px-10 py-4 rounded-full text-label-md hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200 cursor-pointer">
              Register as Merchant Partner
            </button>
          </div>

          {/* Right Column: Premium Bento Stats Grid (5 cols) */}
          <div className="lg:col-span-5 grid grid-cols-2 gap-6">
            {STATS.map((stat, idx) => (
              <div
                key={stat.value}
                className={`p-6 rounded-[2rem] flex flex-col justify-between aspect-square hover:-translate-y-2 hover:shadow-xl transition-all duration-300 ${stat.style} ${idx % 2 === 1 ? "translate-y-6 md:translate-y-8" : ""}`}
              >
                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
                  <MaterialIcon icon={stat.icon} size={22} />
                </div>
                <div>
                  <p className="text-4xl font-display font-black tracking-tight">
                    {stat.value}
                  </p>
                  <p className="text-label-sm font-semibold mt-1 opacity-90 leading-tight">
                    {stat.label}
                  </p>
                </div>
              </div>
            ))}
          </div>

        </div>

        {/* CURVED PROMO BANNER: Inspired by GoMoto Hottest Pizza Banner */}
        <div className="mt-32 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-8 md:p-16 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-[10px] font-black uppercase tracking-widest bg-brand-dark/15 px-3.5 py-1.5 rounded-full">
              Piping Hot & Fresh
            </span>
            <h3 className="text-display mt-6 mb-4 leading-[1.1] font-black">
              Always the Hottest Meals <br />& Freshest Groceries.
            </h3>
            <p className="text-body-lg text-brand-dark/80 mb-8 max-w-md font-semibold leading-relaxed">
              Our advanced insulation packs guarantee your hot food stays steaming, and frozen goods stay completely frozen until handed to you.
            </p>
            <a
              href="#"
              className="bg-brand-dark hover:bg-brand-dark/90 text-white font-black px-8 py-3.5 rounded-full text-label-md hover:shadow-2xl transition-all hover:-translate-y-0.5 active:translate-y-0 active:scale-95 duration-200 inline-block shadow-md"
            >
              Order Meals Now
            </a>
          </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>
  );
}
