import React from "react";
import Image from "next/image";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
import { BusinessFeaturesGrid } from "@/components/businesses/BusinessFeaturesGrid";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Nearle for Business",
  description:
    "Grow your local business with Nearle. Get discovered by nearby customers, manage online orders, run local offers, and build repeat sales — all from one simple hyperlocal platform.",
};


const HERO_BENEFITS = [
  { title: "More Visibility Across Nearle", icon: "visibility", desc: "Get discovered by locals" },
  { title: "Easy Order Management", icon: "assignment", desc: "Track and fulfill cleanly" },
  { title: "Grow Repeat Customers", icon: "trending_up", desc: "Build neighborhood loyalty" },
  { title: "Local Delivery Support", icon: "local_shipping", desc: "Deliver fast & verified" }
];

function PhoneMapVisual() {
  return (
    <div className="relative flex h-full w-full items-center justify-center">
      <div className="absolute bottom-1 h-6 w-36 rounded-full bg-[#16001D]/18 blur-xl" />
      <div className="relative aspect-[9/19] h-[94%] min-h-[228px] max-h-[264px] rounded-[2.1rem] bg-[#120019] p-1.5 shadow-[0_26px_62px_rgba(22,0,29,0.25)]">
        <div className="relative h-full overflow-hidden rounded-[1.7rem] bg-[#FAF8FC]">
          <div className="absolute left-1/2 top-2.5 z-30 h-3.5 w-12 -translate-x-1/2 rounded-full bg-[#120019]" />
          <div className="absolute inset-x-0 top-0 z-20 flex items-center justify-between px-4 pt-3.5 text-[7px] font-black text-[#16001D]/55">
            <span>9:41</span>
            <span className="h-1.5 w-5 rounded-full bg-[#16001D]/40" />
          </div>

          <div className="absolute inset-x-1.5 bottom-1.5 top-7 overflow-hidden rounded-[1.35rem] bg-[linear-gradient(145deg,#FAF8FC,#F1E7F8)]">
            <svg className="absolute inset-0 h-full w-full" viewBox="0 0 140 255" fill="none" aria-hidden="true">
              <rect width="140" height="255" fill="#FAF8FC" />
              <path d="M-20 50C12 40 41 42 64 54C91 68 112 64 158 48" stroke="#E3D9EA" strokeWidth="8" strokeLinecap="round" />
              <path d="M-18 178C24 158 51 164 78 179C102 192 124 192 158 174" stroke="#DDF0E3" strokeWidth="14" strokeLinecap="round" opacity="0.75" />
              <path d="M24 -20L35 282" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
              <path d="M83 -24L73 280" stroke="#DED4E8" strokeWidth="5" strokeLinecap="round" />
              <path d="M126 -16L112 268" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
              <path d="M-18 72H158" stroke="#E7DFEE" strokeWidth="5" strokeLinecap="round" />
              <path d="M-18 122H158" stroke="#DED5E8" strokeWidth="5" strokeLinecap="round" />
              <path d="M-18 212H158" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
              <path d="M-12 244L150 28" stroke="#E6DEED" strokeWidth="5" strokeLinecap="round" />
              <path d="M6 180C35 155 48 130 70 117C92 104 108 91 125 70" stroke="#7C3AED" strokeWidth="1.8" strokeDasharray="3 5" strokeLinecap="round" opacity="0.55" />
              <path d="M70 117C47 103 30 92 14 73" stroke="#006D37" strokeWidth="1.6" strokeDasharray="3 5" strokeLinecap="round" opacity="0.38" />
            </svg>

            {[
              ["left-[17%] top-[30%]", "bg-[#6330D6]"],
              ["right-[16%] top-[28%]", "bg-[#006D37]"],
              ["left-[20%] bottom-[33%]", "bg-[#006D37]"],
              ["right-[18%] bottom-[32%]", "bg-[#6330D6]"],
              ["right-[35%] top-[20%]", "bg-[#6330D6]"],
            ].map(([position, color]) => (
              <div key={position} className={`absolute ${position} z-10`}>
                <div className={`relative h-5 w-5 -rotate-45 rounded-[50%_50%_50%_10%] ${color} shadow-[0_5px_12px_rgba(22,0,29,0.12)]`}>
                  <div className="absolute left-1/2 top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
                </div>
              </div>
            ))}

            <div className="absolute left-1/2 top-[38%] z-20 -translate-x-1/2 -translate-y-1/2">
              <div className="absolute left-1/2 top-[82%] h-10 w-16 -translate-x-1/2 rounded-full bg-[#6330D6]/18 blur-md" />
              <div className="relative h-16 w-16 -rotate-45 rounded-[50%_50%_50%_12%] bg-[linear-gradient(135deg,#8B5CF6,#6330D6)] shadow-[0_14px_28px_rgba(99,48,214,0.30)]">
                <div className="absolute left-1/2 top-1/2 h-7 w-7 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
              </div>
            </div>

            <div className="absolute bottom-2 left-2.5 right-2.5 z-30 h-[30%] rounded-2xl bg-white/94 p-2.5 shadow-[0_10px_26px_rgba(22,0,29,0.14)] backdrop-blur">
              <p className="truncate text-[9.5px] font-black leading-none text-[#16001D]">Your Store</p>
              <div className="mt-1.5 flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[7.5px] font-bold text-[#5E5866]">
                <span className="inline-flex items-center gap-0.5">
                  <MaterialIcon icon="star" size={10} fill className="text-amber-500" />
                  4.8
                </span>
                <span className="font-black text-[#006D37]">Open</span>
                <span>0.8 km</span>
              </div>
            </div>
          </div>
        </div>
        <div className="absolute -left-8 top-[29%] z-40 rounded-full bg-white px-3 py-1.5 text-[9px] font-black text-[#006D37] shadow-[0_10px_22px_rgba(22,0,29,0.14)] ring-1 ring-[#006D37]/10">
          Offers
        </div>
        <div className="absolute -right-7 top-[43%] z-40 rounded-full bg-[#6330D6] px-3 py-1.5 text-[9px] font-black text-white shadow-[0_10px_22px_rgba(99,48,214,0.24)]">
          Shop
        </div>
      </div>
    </div>
  );
}

export default function BusinessesPage() {
  const collageCards = [
    { text: "Nearby Customers", icon: "people" },
    { text: "Orders & Offers", icon: "local_offer" },
    { text: "Local Delivery Support", icon: "local_shipping" }
  ];

  return (
    <PremiumPageShell>
      {/* ─── Hero Section ─── */}
      <section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
        {/* TWO-COLUMN GRID */}
        <div className="border-b border-[#6330D6]/10">
          <div className="grid grid-cols-1 lg:grid-cols-[45%_55%] items-center gap-10 lg:gap-6 px-6 md:px-12 lg:px-16 pb-12 max-w-[1600px] mx-auto">

          {/* Left Column: Copy & Actions */}
          <div className="flex flex-col text-left max-w-xl">
            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit">
              Nearle for Business
            </span>

            <h1 className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-black text-[#16001D] leading-[1.1] tracking-tight">
              Grow Your Local Business,
              <br />
              <span className="text-[#6330D6]">Neighbourhood by Neighbourhood.</span>
            </h1>

            <p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
              Get discovered by nearby customers, manage orders, and build repeat business from one simple platform.
            </p>

            <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
              {/* TODO: Replace with real merchant onboarding URL once confirmed */}
              <Link
                href="/contact"
                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
              >
                List Your Store
              </Link>
              <Link
                href="/contact"
                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
              >
                Explore Solutions
              </Link>
            </div>
          </div>

          {/* Right Column: Visual Collage */}
          <div className="w-full">
            <HeroVisualCollage
              centerImage="/nearlenewlogo.png"
              leftImage="/images/cat-daily-essentials.png"
              rightImage="/Nearle Business.png"
              glassCards={collageCards}
              isPhoneCenter={false}
            />
          </div>
          </div>
        </div>

        {/* BOTTOM HERO BENEFITS */}
        <div className="bg-[#FAF7FD] border-b border-[#6330D6]/10">
          <div className="px-6 md:px-12 lg:px-16 max-w-[1600px] mx-auto">
            <FeatureStatsRow items={HERO_BENEFITS} />
          </div>
        </div>
      </section>

      {/* ─── Intro Highlight Banner ─── */}
      <section className="py-7 px-6 md:py-9 md:px-12 lg:px-16 xl:px-20 xl:py-8 2xl:px-24 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 border-b border-[#6330D6]/10 bg-white">
        <div className="max-w-2xl text-left">
          <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3 py-1 rounded-full">
            Together, we grow
          </span>
          <h2 className="font-display text-2xl md:text-3xl font-black text-[#16001D] mt-4 mb-3 leading-tight">
            Get set in minutes and delight the Neighborhood
          </h2>
          <p className="text-sm md:text-base text-[#5E5866] leading-relaxed">
            Nearle is built to help businesses like <strong className="text-[#6330D6]">Yours</strong> establish a local online presence and empower neighborhood customers to discover and interact with you directly.
          </p>
        </div>
        <div className="flex gap-4 shrink-0">
          <Link
            href="/contact"
            className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm shadow-md active:scale-95 transition-all flex items-center gap-2"
          >
            <MaterialIcon icon="chat" size={18} />
            <span>Talk to an Expert</span>
          </Link>
        </div>
      </section>

      {/* ─── Build Your Neighborhood Brand ─── */}
      <section className="py-10 md:py-14 lg:py-16 xl:py-12 border-b border-[#6330D6]/10 bg-white overflow-hidden">
        <div className="w-[calc(100%-32px)] lg:w-[calc(100%-64px)] max-w-[1800px] mx-auto">
          {/* Header */}
          <div className="text-center mb-10 lg:mb-12 xl:mb-10">
            <span className="inline-flex items-center rounded-full bg-[#6330D6]/5 px-4 py-1.5 text-xs font-black uppercase tracking-widest text-[#6330D6]">
              How it works
            </span>
            <h2 className="font-display text-[30px] md:text-4xl lg:text-[44px] font-black text-[#16001D] mt-4 leading-tight tracking-tight">
              Build Your Neighborhood Brand
            </h2>
            <p className="mx-auto mt-3 max-w-[700px] text-base md:text-lg text-[#5E5866] leading-relaxed">
              Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
            </p>
          </div>

          {/* Cards grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-7">
            {/* Card 1 - Get Online */}
            <article className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
              <span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-[#6330D6]/[0.07] select-none">
                01
              </span>
              <div className="relative z-10 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#6330D6]/7 text-[#6330D6]">
                <MaterialIcon icon="storefront" size={28} />
              </div>
              <div className="relative z-10 mt-6 max-w-[260px]">
                <h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
                  Get Online
                </h3>
                <p className="mt-3 text-base leading-relaxed text-[#5E5866]">
                  Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.
                </p>
              </div>
              <div className="relative z-0 mt-auto pt-5 h-[170px] lg:h-[185px] flex items-end justify-center">
                <div className="relative h-[150px] w-[220px] lg:h-[175px] lg:w-[255px]">
                  <Image
                    src="/images/nearle-how/how-storefront.webp"
                    alt="Local shop storefront with purple awning and now online board"
                    fill
                    sizes="(max-width: 768px) 50vw, 25vw"
                    className="object-contain object-center"
                  />
                </div>
              </div>
            </article>

            {/* Card 2 - Get Noticed */}
            <article className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
              <span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-[#6330D6]/[0.07] select-none">
                02
              </span>
              <div className="relative z-10 flex h-14 w-14 items-center justify-center rounded-2xl bg-secondary/7 text-secondary">
                <MaterialIcon icon="campaign" size={28} />
              </div>
              <div className="relative z-10 mt-6 max-w-[260px]">
                <h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
                  Get Noticed
                </h3>
                <p className="mt-3 text-base leading-relaxed text-[#5E5866]">
                  Your products get published to Nearle customers in your neighborhood through the app. Customers search based on location, products, discounts, and promos.
                </p>
              </div>
              <div className="relative z-0 mt-auto h-[270px] lg:h-[290px] flex items-center justify-center">
                <PhoneMapVisual />
              </div>
            </article>

            {/* Card 3 - Get Simplified */}
            <article className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
              <span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-[#6330D6]/[0.07] select-none">
                03
              </span>
              <div className="relative z-10 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#6330D6]/7 text-[#6330D6]">
                <MaterialIcon icon="auto_awesome" size={28} />
              </div>
              <div className="relative z-10 mt-6 max-w-[260px]">
                <h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
                  Get Simplified
                </h3>
                <p className="mt-3 text-base leading-relaxed text-[#5E5866]">
                  Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that will take your business further.
                </p>
              </div>
              <div className="relative z-0 mt-auto pt-5 h-[170px] lg:h-[185px] flex items-end justify-center gap-4">
                <div className="hidden sm:flex flex-col gap-2 pb-2">
                  {["Offers & Discounts", "Loyal Customers", "Repeat Orders"].map((chip) => (
                    <div key={chip} className="rounded-full border border-primary/10 bg-white px-3 py-2 text-[11px] font-black text-brand-dark shadow-sm whitespace-nowrap">
                      {chip}
                    </div>
                  ))}
                </div>
                <div className="relative h-[150px] w-[190px] lg:h-[175px] lg:w-[215px] shrink-0">
                  <Image
                    src="/images/nearle-how/how-grocery-bag.webp"
                    alt="Nearle grocery bag filled with vegetables and packaged products"
                    fill
                    sizes="(max-width: 768px) 50vw, 25vw"
                    className="object-contain object-center"
                  />
                </div>
              </div>
            </article>
          </div>
        </div>
      </section>

      {/* ─── Our Features / Business Grid ─── */}
      <BusinessFeaturesGrid />

      {/* ─── Join/Download Call to Action ─── */}
      <section className="bg-white px-2 pt-2 pb-2 md:px-3 md:pt-3 md:pb-3 lg:px-4 lg:pt-4 lg:pb-4 xl:px-5 xl:pt-4 xl:pb-4 2xl:px-6 2xl:pb-5">
        <div className="w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#1A0322] to-[#0A000D] text-white">
          <div className="px-6 py-10 md:px-10 md:py-12 lg:px-14 lg:py-14 xl:py-12 text-center relative">
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(99,48,214,0.15),transparent_50%)] pointer-events-none" />
            <div className="relative z-10 max-w-2xl mx-auto">
              <h2 className="font-display text-3xl md:text-4xl font-black mb-4 tracking-tight">
                Nearle is Essential for Business Growth
              </h2>
              <p className="text-xs md:text-sm text-white/70 mb-8 leading-relaxed max-w-lg mx-auto">
                Leverage the full potential of your neighborhood. Stand above the rest, increase customers, and scale your brand today.
              </p>
              <div className="flex flex-wrap justify-center gap-3.5">
                {/* TODO: Replace with real merchant onboarding URL once confirmed */}
                <Link
                  href="/contact"
                  className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm hover:shadow-xl transition-all duration-200 active:scale-95 flex items-center gap-2"
                >
                  <MaterialIcon icon="bolt" size={18} />
                  <span>Register Interest</span>
                </Link>
                <Link
                  href="/contact"
                  className="bg-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-8 py-3.5 rounded-xl text-sm transition-all duration-200 active:scale-95 flex items-center gap-2"
                >
                  <MaterialIcon icon="phone" size={18} />
                  <span>Contact Experts</span>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>
    </PremiumPageShell>
  );
}