nearle_web_nextjs/src/app/merchants/page.tsx

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 { FAQAccordion } from "@/components/ui/FAQAccordion";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Merchant Partners",
  description:
    "Bring your neighbourhood store online with Nearle. Get discovered by nearby customers, manage orders, run local offers, and build repeat sales — all from one simple platform.",
  openGraph: {
    title: "Merchant Partners | Nearle",
    description:
      "Join thousands of neighbourhood merchants growing with Nearle. Digital catalogue, QR ordering, local discovery, and order management — all in one place.",
    url: "https://nearle.in/merchants",
  },
};

const HERO_STATS = [
  { title: "Digital Catalogue", icon: "menu_book", desc: "Showcase your products" },
  { title: "QR Ordering", icon: "qr_code", desc: "Scan & order from your store" },
  { title: "Local Discovery", icon: "location_on", desc: "Get found by nearby customers" },
  { title: "Order Management", icon: "assignment", desc: "Track every order live" },
];

const BENEFITS = [
  {
    icon: "menu_book",
    title: "Digital Catalogue",
    desc: "Upload your entire product range with photos, pricing, and availability. Keep it updated in minutes — no technical skills needed.",
    tone: "bg-[#6330D6]/8 text-[#6330D6]",
  },
  {
    icon: "qr_code",
    title: "QR Ordering",
    desc: "Place a Nearle QR stand on your counter. Customers scan, browse your menu, and place orders right from their phone.",
    tone: "bg-secondary/8 text-secondary",
  },
  {
    icon: "location_on",
    title: "Hyperlocal Discovery",
    desc: "Appear in local searches for products you sell. Nearby customers find you first — before they find a big delivery app.",
    tone: "bg-[#6330D6]/8 text-[#6330D6]",
  },
  {
    icon: "receipt_long",
    title: "Order Management",
    desc: "Accept, track, and fulfil orders from a single dashboard. Get notified instantly when a new order comes in.",
    tone: "bg-secondary/8 text-secondary",
  },
  {
    icon: "campaign",
    title: "Promotions & Offers",
    desc: "Run flash sales, festive offers, and loyalty deals that reach customers in your neighbourhood automatically.",
    tone: "bg-rose-500/8 text-rose-600",
  },
  {
    icon: "repeat",
    title: "Repeat Customers",
    desc: "Customers who order once keep coming back. Build a loyal neighbourhood following that chooses you over big platforms.",
    tone: "bg-[#6330D6]/8 text-[#6330D6]",
  },
  {
    icon: "bar_chart",
    title: "Sales Dashboard",
    desc: "See what's selling, when your peak hours are, and which offers work. Make smarter decisions for your store.",
    tone: "bg-secondary/8 text-secondary",
  },
  {
    icon: "people_nearby",
    title: "Nearby Customer Reach",
    desc: "Connect with families and residents living within 2km of your store — your most valuable, loyal customer base.",
    tone: "bg-[#6330D6]/8 text-[#6330D6]",
  },
];

const HOW_STEPS = [
  {
    num: "01",
    icon: "app_registration",
    title: "Register Your Store",
    desc: "Sign up with your phone number, business name, and store address. Our team verifies and activates your profile within 24 hours.",
    color: "bg-[#6330D6]/7 text-[#6330D6]",
  },
  {
    num: "02",
    icon: "add_photo_alternate",
    title: "Upload Your Catalogue",
    desc: "Add your products with photos, prices, and stock levels. Our onboarding team helps you get set up fast — even if you're starting from scratch.",
    color: "bg-secondary/7 text-secondary",
  },
  {
    num: "03",
    icon: "notifications_active",
    title: "Receive Orders",
    desc: "When a nearby customer places an order, you get notified instantly. Accept, prepare, and hand off — it's that simple.",
    color: "bg-[#6330D6]/7 text-[#6330D6]",
  },
  {
    num: "04",
    icon: "trending_up",
    title: "Grow Locally",
    desc: "Run offers, build a loyal customer base, and watch your neighbourhood sales grow month on month. Your store. Your terms.",
    color: "bg-secondary/7 text-secondary",
  },
];

const WHY_REASONS = [
  { icon: "verified_user", title: "Trusted by the Community", desc: "Nearle is built for neighbourhood trust — we verify stores and protect customers so your reputation matters." },
  { icon: "savings", title: "Lower Commission Than Big Platforms", desc: "Keep more of what you earn. Nearle charges fair, transparent rates — no hidden fees, no nasty surprises." },
  { icon: "support_agent", title: "Dedicated Onboarding Support", desc: "Your own Nearle partner manager helps you get online, upload your catalogue, and answer every question." },
  { icon: "local_fire_department", title: "Built for Indian Kirana Culture", desc: "From vegetable vendors to cloth merchants — Nearle is designed around how Indian neighbourhood stores actually work." },
  { icon: "schedule", title: "You Control Your Hours", desc: "Set your opening hours, manage stock, and pause orders whenever you need. No pressure. No locked-in contracts." },
  { icon: "groups", title: "Local Customer Community", desc: "Join a platform where customers genuinely care about supporting neighbourhood stores over large national brands." },
];

const FAQ_ITEMS = [
  {
    question: "Is Nearle free to join as a merchant?",
    answer: "Getting started on Nearle is free. We charge a small, fair commission only when you successfully complete an order. There are no monthly fees, no listing fees, and no setup charges.",
  },
  {
    question: "How long does it take to go live on Nearle?",
    answer: "Most merchants go live within 24 to 48 hours of registration. Our onboarding team reaches out to verify your store, help you upload your catalogue, and activate your listing.",
  },
  {
    question: "Do I need a smartphone or computer?",
    answer: "You just need a smartphone. The Nearle Merchant app works on Android and iOS. You can manage orders, update your catalogue, and track earnings from your phone.",
  },
  {
    question: "What kind of stores can join Nearle?",
    answer: "Nearle welcomes all neighbourhood stores — grocery and kirana shops, bakeries, medical stores, fruit vendors, cloth merchants, stationery shops, pet stores, electronics retailers, and more. If you serve your local community, you belong on Nearle.",
  },
  {
    question: "How do customers pay for their orders?",
    answer: "Customers can pay online through UPI, debit/credit cards, or wallets — or choose cash on delivery. You receive payouts to your bank account on a weekly settlement cycle.",
  },
  {
    question: "Can I run offers and discounts for my customers?",
    answer: "Absolutely. You can set up item-level discounts, minimum order offers, festive deals, and loyalty rewards through your merchant dashboard. Nearle also runs platform-wide promotions where you can opt in.",
  },
  {
    question: "What if I don't have a digital catalogue ready?",
    answer: "Our onboarding team will help you build your catalogue from scratch. Just give us a price list or let us visit your store, and we'll get your products uploaded.",
  },
  {
    question: "Does Nearle provide delivery partners?",
    answer: "Yes. Nearle has a growing network of local delivery partners who can fulfil orders for your store. You can also use your own delivery staff for short-distance orders if you prefer.",
  },
  {
    question: "How are disputes or refunds handled?",
    answer: "Our customer support team handles all customer disputes. For genuine quality or delivery issues, we work with both you and the customer to find a fair resolution. We protect merchants from fraudulent claims.",
  },
  {
    question: "Is my business data secure with Nearle?",
    answer: "Yes. Your store data, customer information, and earnings are protected with industry-standard security practices. We never share your business data with third parties.",
  },
];

export default function MerchantsPage() {
  const collageCards = [
    { text: "Digital Catalogue", icon: "menu_book" },
    { text: "Local Orders", icon: "receipt_long" },
    { text: "Nearby Customers", icon: "people_nearby" },
  ];

  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]">
        <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">
            <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">
                Merchant Partners
              </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">
                Bring Your Store Online
                <br />
                <span className="text-[#6330D6]">with Nearle.</span>
              </h1>

              <p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
                Your neighbourhood customers are already looking for you online. Get discovered, take orders, and grow your business — without leaving your store.
              </p>

              <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
                <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]"
                >
                  Become a Merchant Partner
                </Link>
                <a
                  href="#how-it-works"
                  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]"
                >
                  See How It Works
                </a>
              </div>
            </div>

            <div className="w-full">
              <HeroVisualCollage
                centerImage="/nearlenewlogo.png"
                leftImage="/images/nearle-merchant/catalogue-ui.webp"
                rightImage="/Nearle Business.png"
                glassCards={collageCards}
                isPhoneCenter={false}
              />
            </div>
          </div>
        </div>

        <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_STATS} />
          </div>
        </div>
      </section>

      {/* ─── Merchant Benefits Grid ─── */}
      <section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
        <div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
          <div className="text-center mb-10 md:mb-12">
            <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
              What You Get
            </span>
            <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
              Everything Your Store Needs to Grow
            </h2>
            <p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
              Nearle gives your neighbourhood store the same tools that big online retailers have — without the complexity.
            </p>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
            {BENEFITS.map((benefit) => (
              <div
                key={benefit.title}
                className="rounded-2xl border border-[#6330D6]/10 bg-[#FAF7FD] p-5 flex flex-col gap-3 hover:shadow-[0_8px_28px_rgba(22,0,29,0.08)] transition-shadow duration-300"
              >
                <div className={`w-11 h-11 rounded-2xl flex items-center justify-center shrink-0 ${benefit.tone}`}>
                  <MaterialIcon icon={benefit.icon} size={22} />
                </div>
                <div>
                  <h3 className="text-base font-black text-[#16001D] leading-tight">{benefit.title}</h3>
                  <p className="mt-1.5 text-xs md:text-sm text-[#5E5866] leading-relaxed">{benefit.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── How It Works ─── */}
      <section id="how-it-works" className="py-10 md:py-14 xl:py-12 bg-[#FAF7FD] border-b border-[#6330D6]/10">
        <div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
          <div className="text-center mb-10 md:mb-12">
            <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
              Simple Steps
            </span>
            <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
              Up and Running in 24 Hours
            </h2>
            <p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
              From registration to your first order, we&apos;ve made the process as simple as possible.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
            {HOW_STEPS.map((step) => (
              <article
                key={step.num}
                className="relative flex flex-col rounded-[28px] border border-[#6330D6]/10 bg-white p-7 shadow-[0_8px_32px_rgba(22,0,29,0.06)]"
              >
                <span className="absolute right-5 top-4 font-display text-5xl font-black leading-none text-[#6330D6]/[0.07] select-none">
                  {step.num}
                </span>
                <div className={`w-12 h-12 rounded-2xl flex items-center justify-center ${step.color} mb-5`}>
                  <MaterialIcon icon={step.icon} size={24} />
                </div>
                <h3 className="font-display text-xl font-black text-[#16001D] leading-tight mb-2">
                  {step.title}
                </h3>
                <p className="text-sm text-[#5E5866] leading-relaxed">{step.desc}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ─── Why Merchants Choose Nearle ─── */}
      <section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10 overflow-hidden">
        <div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-[1fr_1.1fr] gap-10 lg:gap-16 items-start">
            <div>
              <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
                Why Nearle
              </span>
              <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4 tracking-tight leading-tight">
                Your Neighbourhood&apos;s
                <br />
                <span className="text-[#6330D6]">Best Business Partner</span>
              </h2>
              <p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-8 max-w-lg">
                Nearle isn&apos;t built like a big delivery platform that squeezes margins. We&apos;re built for neighbourhood stores like yours — where community and trust come first.
              </p>

              {/* Stats row */}
              <div className="grid grid-cols-3 gap-5">
                {[
                  { stat: "2km", label: "Hyperlocal Coverage" },
                  { stat: "24h", label: "Time to Go Live" },
                  { stat: "Fair", label: "Commission Model" },
                ].map((s) => (
                  <div key={s.label} className="text-center p-4 rounded-2xl bg-[#6330D6]/5 border border-[#6330D6]/8">
                    <div className="text-2xl md:text-3xl font-display font-black text-[#6330D6]">{s.stat}</div>
                    <div className="text-[10px] md:text-xs font-bold text-[#5E5866] mt-1 leading-tight">{s.label}</div>
                  </div>
                ))}
              </div>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              {WHY_REASONS.map((reason) => (
                <div key={reason.title} className="flex gap-3.5 p-4 rounded-2xl border border-[#6330D6]/8 bg-[#FAF7FD]">
                  <div className="w-10 h-10 shrink-0 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center">
                    <MaterialIcon icon={reason.icon} size={20} />
                  </div>
                  <div>
                    <h4 className="text-sm font-black text-[#16001D] leading-tight">{reason.title}</h4>
                    <p className="mt-1 text-xs text-[#5E5866] leading-relaxed">{reason.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ─── Success Story ─── */}
      <section className="py-10 md:py-14 xl:py-12 bg-[#FAF7FD] border-b border-[#6330D6]/10">
        <div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
          <div className="text-center mb-8">
            <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
              Merchant Story
            </span>
            <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 tracking-tight">
              Real Results from Real Stores
            </h2>
          </div>

          <div className="relative overflow-hidden rounded-[2rem] bg-[linear-gradient(135deg,#ffffff_0%,#F4ECFA_100%)] border border-[#6330D6]/10 shadow-[0_18px_50px_rgba(22,0,29,0.08)] p-8 md:p-10 lg:p-12">
            <div className="pointer-events-none absolute -right-20 -top-20 h-64 w-64 rounded-full bg-[#6330D6]/5 blur-3xl" />
            <div className="relative z-10 grid grid-cols-1 lg:grid-cols-[1fr_1.5fr] gap-8 lg:gap-12 items-center">
              <div>
                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-secondary/10 text-secondary text-xs font-black uppercase tracking-wider mb-5">
                  <MaterialIcon icon="store" size={14} />
                  Success Story
                </div>
                <blockquote className="text-xl md:text-2xl font-black text-[#16001D] leading-snug mb-6">
                  &ldquo;In three months, my daily orders doubled. Customers who used to call now just scan the QR and order. Even my evening rush feels calmer.&rdquo;
                </blockquote>
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 rounded-full bg-[#6330D6]/10 flex items-center justify-center">
                    <MaterialIcon icon="person" size={22} className="text-[#6330D6]" />
                  </div>
                  <div>
                    <div className="text-sm font-black text-[#16001D]">Ramesh Kumar</div>
                    <div className="text-xs text-[#5E5866] font-semibold">R.K. Provision Store, R.S. Puram, Coimbatore</div>
                  </div>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                {[
                  { value: "2.1×", label: "Daily Orders Growth", icon: "trending_up", color: "text-[#006D37]" },
                  { value: "340+", label: "Repeat Customers Built", icon: "people", color: "text-[#6330D6]" },
                  { value: "3 hrs", label: "Saved per Day on Calls", icon: "schedule", color: "text-[#006D37]" },
                  { value: "4.9 ★", label: "Average Store Rating", icon: "star", color: "text-amber-500" },
                ].map((m) => (
                  <div key={m.label} className="rounded-2xl bg-white border border-[#6330D6]/8 p-5 text-center shadow-sm">
                    <MaterialIcon icon={m.icon} size={22} className={`${m.color} mx-auto`} />
                    <div className={`text-2xl font-display font-black mt-2 ${m.color}`}>{m.value}</div>
                    <div className="text-xs text-[#5E5866] font-semibold mt-1 leading-tight">{m.label}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ─── FAQ ─── */}
      <section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
        <div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-[360px_1fr] gap-10 lg:gap-16 items-start">
            <div className="lg:sticky lg:top-28">
              <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
                FAQs
              </span>
              <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4 tracking-tight leading-tight">
                Questions Merchants Ask
              </h2>
              <p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-6">
                Everything you need to know before joining Nearle. Still have questions? Our team is a call away.
              </p>
              <Link
                href="/contact"
                className="inline-flex items-center gap-2 text-sm font-black text-[#6330D6] hover:text-[#5225b8] transition-colors"
              >
                <span>Talk to our team</span>
                <MaterialIcon icon="arrow_forward" size={16} />
              </Link>
            </div>

            <FAQAccordion items={FAQ_ITEMS} />
          </div>
        </div>
      </section>

      {/* ─── CTA Banner ─── */}
      <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] via-[#2B0040] to-[#0A000D] text-white">
          <div className="px-6 py-12 md:px-10 md:py-14 lg:px-14 xl:py-12 text-center relative">
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(99,48,214,0.18),transparent_50%)] pointer-events-none" />
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_80%,rgba(0,109,55,0.10),transparent_45%)] pointer-events-none" />
            <div className="relative z-10 max-w-2xl mx-auto">
              <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-white/15 text-white/70 text-xs font-black uppercase tracking-widest mb-6">
                <MaterialIcon icon="storefront" size={14} />
                Ready to Grow?
              </span>
              <h2 className="font-display text-3xl md:text-4xl xl:text-5xl font-black mb-4 tracking-tight leading-tight">
                Become a Merchant Partner
              </h2>
              <p className="text-sm md:text-base text-white/70 mb-8 leading-relaxed max-w-lg mx-auto">
                Join neighbourhood stores across Coimbatore already selling online with Nearle. Registration takes under 10 minutes.
              </p>
              <div className="flex flex-wrap justify-center gap-3.5">
                <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 Your Store</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>Talk to Our Team</span>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>
    </PremiumPageShell>
  );
}