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 { 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: "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="hidden md:flex md:flex-row md:gap-3.5 mt-8">
                <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.webp"
                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">
          <AnimatedSection>
            <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>
          </AnimatedSection>

          <AnimatedGrid className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
            {BENEFITS.map((benefit) => (
              <AnimatedCard
                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>
              </AnimatedCard>
            ))}
          </AnimatedGrid>
        </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">
          <AnimatedSection>
            <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>
          </AnimatedSection>

          <AnimatedGrid className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
            {HOW_STEPS.map((step) => (
              <AnimatedCard
                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>
              </AnimatedCard>
            ))}
          </AnimatedGrid>
        </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">
            <AnimatedSection>
              <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>
            </AnimatedSection>

            <AnimatedGrid className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              {WHY_REASONS.map((reason) => (
                <AnimatedCard 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>
                </AnimatedCard>
              ))}
            </AnimatedGrid>
          </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">
          <AnimatedSection>
            <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>

                <AnimatedGrid 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) => (
                    <AnimatedCard 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>
                    </AnimatedCard>
                  ))}
                </AnimatedGrid>
              </div>
            </div>
          </AnimatedSection>
        </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">
            <AnimatedSection>
              <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>
            </AnimatedSection>

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

      {/* ─── CTA Banner ─── */}
      <CTABanner
        badge={{ icon: "storefront", label: "Ready to Grow?" }}
        heading="Become a Merchant Partner"
        body="Join neighbourhood stores across Coimbatore already selling online with Nearle. Registration takes under 10 minutes."
        primary={{ href: "/contact", icon: "bolt", label: "Register Your Store" }}
        secondary={{ href: "/contact", icon: "phone", label: "Talk to Our Team" }}
        decorations={[
          "circle at 70% 20%, rgba(99,48,214,0.18), transparent 50%",
          "circle at 30% 80%, rgba(0,109,55,0.10), transparent 45%",
        ]}
      />
    </PremiumPageShell>
  );
}