import React from "react";
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 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 PROCESS_STEPS = [
  {
    step: "01",
    title: "Get Online",
    descr: "Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.",
    icon: "storefront",
    color: "bg-[#6330D6]/5 text-[#6330D6] border-[#6330D6]/10"
  },
  {
    step: "02",
    title: "Get Noticed",
    descr: "Your products get published to Nearle customers in your neighborhood through the app. Customers search based on location, products, discounts, and promos.",
    icon: "campaign",
    color: "bg-secondary/5 text-secondary border-secondary/10"
  },
  {
    step: "03",
    title: "Get Simplified",
    descr: "Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that will take your business further.",
    icon: "auto_awesome",
    color: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20"
  }
];

const FEATURES = [
  {
    title: "Direct Customer Access",
    descr: "Build direct relationships and trust with residents in your immediate vicinity."
  },
  {
    title: "Become a Partner",
    descr: "Be part of a strong community of like-minded people. A unified partner for neighborhood needs."
  },
  {
    title: "Build Your Brand",
    descr: "Brand your business on Nearle and reach out to your community with ease."
  },
  {
    title: "Huge Opportunity",
    descr: "Unlock revenue opportunities and marketing strategies that will take your business further."
  },
  {
    title: "Delight Your Customers",
    descr: "Delight customers in the neighborhood with a personalized online shopping experience."
  },
  {
    title: "Unique Model",
    descr: "Hyperlocal commerce is an effective, sustainable model to meet today's consumer needs."
  },
  {
    title: "Reach Right Audience",
    descr: "We target your ideal customers — people in your neighborhood search for what you offer."
  },
  {
    title: "Increase Your Customers",
    descr: "Increase walk-in and online customers by targeting local demand."
  }
];

const STATS = [
  { value: "More", label: "Revenue From Local Reach", icon: "trending_up", bg: "bg-[#FAF7FD]" },
  { value: "Fast", label: "Reliable Order Fulfillment", icon: "groups", bg: "bg-[#6330D6] text-white" },
  { value: "Easy", label: "Direct Customer Access", icon: "storefront", bg: "bg-white border border-[#6330D6]/10" },
  { value: "24/7", label: "Merchant Support", icon: "support_agent", bg: "bg-[#FAF7FD]" }
];

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" }
];

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="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 border-b border-[#6330D6]/10">
          
          {/* 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>

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

      {/* ─── Intro Highlight Banner ─── */}
      <section className="p-8 md:p-12 px-6 md:px-12 lg:px-16 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>

      {/* ─── Timeline / Core Process Steps ─── */}
      <section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 border-b border-[#6330D6]/10 bg-white">
        <div className="text-center mb-12">
          <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
            How it works
          </span>
          <h2 className="font-display text-3xl font-black text-[#16001D] mt-4">
            Build Your Neighborhood Brand
          </h2>
          <p className="mx-auto mt-3 max-w-xl text-sm md:text-base text-[#5E5866]">
            Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {PROCESS_STEPS.map((ps) => (
            <div
              key={ps.step}
              className="bg-white rounded-3xl p-8 border border-[#6330D6]/10 shadow-[0_4px_20px_rgba(99,48,214,0.02)] flex flex-col relative overflow-hidden group hover:scale-[1.01] transition-transform duration-300"
            >
              <div className="absolute top-4 right-6 text-5xl font-black text-[#6330D6]/5">
                {ps.step}
              </div>
              <div className={`w-12 h-12 rounded-2xl flex items-center justify-center border mb-6 shrink-0 ${ps.color}`}>
                <MaterialIcon icon={ps.icon} size={22} />
              </div>
              <h3 className="font-display text-lg font-black text-[#16001D] mb-3 text-left">
                {ps.title}
              </h3>
              <p className="text-xs md:text-sm text-[#5E5866] leading-relaxed text-left">
                {ps.descr}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* ─── Grid Stats & Value Prop ─── */}
      <section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
        <div className="grid lg:grid-cols-12 gap-12 lg:gap-16 items-center">
          {/* Left side: features block (7 cols) */}
          <div className="lg:col-span-7 text-left">
            <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
              Our features
            </span>
            <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4">
              Move Your Business Forward
            </h2>
            <p className="text-sm md:text-base text-[#5E5866] mb-8 max-w-xl">
              Be a part of a community of like-minded people. Brand your business on Nearle and reach out to your neighborhood with ease.
            </p>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
              {FEATURES.map((feat) => (
                <div key={feat.title} className="flex gap-3">
                  <div className="w-[22px] h-[22px] rounded-full bg-secondary-container text-secondary flex items-center justify-center shrink-0 mt-0.5">
                    <MaterialIcon icon="check" size={14} className="font-black" />
                  </div>
                  <div>
                    <h4 className="font-display text-sm font-black text-[#16001D] mb-1">
                      {feat.title}
                    </h4>
                    <p className="text-xs text-[#5E5866] leading-relaxed">
                      {feat.descr}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Right side: stats quadrant (5 cols) */}
          <div className="lg:col-span-5 grid grid-cols-2 gap-4 lg:gap-6 text-left">
            {STATS.map((stat, i) => (
              <div
                key={stat.label}
                className={`p-6 rounded-2xl flex flex-col justify-between aspect-square shadow-sm ${stat.bg} ${
                  i % 2 === 1 ? "lg:mt-4" : ""
                }`}
              >
                <div className="flex items-center justify-between">
                  <div className={`w-[34px] h-[34px] rounded-xl flex items-center justify-center ${
                    stat.bg.includes("#6330D6") ? "bg-white/10 text-white" : "bg-[#6330D6]/5 text-[#6330D6]"
                  }`}>
                    <MaterialIcon icon={stat.icon} size={18} />
                  </div>
                </div>
                <div className="mt-6">
                  <p className="text-3xl md:text-4xl font-display font-black tracking-tight">{stat.value}</p>
                  <p className={`text-[10px] font-bold mt-1 uppercase tracking-wider ${
                    stat.bg.includes("#6330D6") ? "text-white/80" : "text-[#5E5866]"
                  }`}>
                    {stat.label}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── Join/Download Call to Action ─── */}
      <section className="p-12 md:p-16 text-center bg-gradient-to-br from-[#1A0322] to-[#0A000D] text-white 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>
      </section>
    </PremiumPageShell>
  );
}
