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 { BusinessFeaturesGrid } from "@/components/businesses/BusinessFeaturesGrid";
import { BusinessHero } from "@/components/heroes/BusinessHero";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
import { CTABanner } from "@/components/ui/CTABanner";
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.",
};



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() {
  return (
    <PremiumPageShell>
      {/* ─── Hero Section ─── */}
      <BusinessHero />

      {/* ─── Intro Highlight Banner ─── */}
      <AnimatedSection>
        <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>
      </AnimatedSection>

      {/* ─── 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 */}
          <AnimatedSection>
          <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>
          </AnimatedSection>

          {/* Cards grid */}
          <AnimatedGrid className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-7">
            {/* Card 1 - Get Online */}
            <AnimatedCard 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>
            </AnimatedCard>

            {/* Card 2 - Get Noticed */}
            <AnimatedCard 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>
            </AnimatedCard>

            {/* Card 3 - Get Simplified */}
            <AnimatedCard 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>
            </AnimatedCard>
          </AnimatedGrid>
        </div>
      </section>

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

      {/* ─── Join/Download Call to Action ─── */}
      <CTABanner
        heading="Nearle is Essential for Business Growth"
        body="Leverage the full potential of your neighborhood. Stand above the rest, increase customers, and scale your brand today."
        primary={{ href: "/contact", icon: "bolt", label: "Register Interest" }}
        secondary={{ href: "/contact", icon: "phone", label: "Contact Experts" }}
        decorations={[
          "circle at 70% 20%, rgba(99,48,214,0.15), transparent 50%",
        ]}
      />
    </PremiumPageShell>
  );
}
