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: "Direct-to-Customer Brands",
  description:
    "Expand your brand across neighbourhood stores with Nearle. FMCG brands, food startups, and local manufacturers reach customers through India's hyperlocal commerce network.",
  openGraph: {
    title: "Direct-to-Customer Brands | Nearle",
    description:
      "Partner with Nearle to get your brand into neighbourhood stores. Distribution, retail visibility, marketing campaigns, and real-time analytics — all in one platform.",
    url: "https://nearle.in/brands",
  },
};

const HERO_STATS = [
  { title: "Distribution Network", icon: "hub", desc: "Neighbourhood stores across city" },
  { title: "Retail Visibility", icon: "visibility", desc: "Premium shelf positioning" },
  { title: "Brand Campaigns", icon: "campaign", desc: "Hyperlocal promotions" },
  { title: "Real-Time Analytics", icon: "analytics", desc: "Sales & reach data" },
];

const WHAT_WE_OFFER = [
  {
    icon: "hub",
    title: "Hyperlocal Distribution",
    desc: "Get your products into verified neighbourhood stores across Coimbatore. Nearle's merchant network means your brand reaches the street-level — where most daily purchases actually happen.",
    tone: "bg-[#6330D6]/8 text-[#6330D6]",
    badge: "Distribution",
  },
  {
    icon: "storefront",
    title: "Retail Shelf Visibility",
    desc: "Premium placement in Nearle's digital catalogue and in-store QR listings. Customers browsing nearby stores see your brand first, creating daily brand touchpoints at zero extra cost.",
    tone: "bg-secondary/8 text-secondary",
    badge: "Visibility",
  },
  {
    icon: "local_offer",
    title: "Hyperlocal Marketing Campaigns",
    desc: "Run time-bound offers, festive promotions, and exclusive deals targeted to customers within specific neighbourhoods. Precision marketing that feels personal, not generic.",
    tone: "bg-rose-500/8 text-rose-600",
    badge: "Marketing",
  },
  {
    icon: "analytics",
    title: "Brand & Retail Analytics",
    desc: "See real-time sell-through rates, customer purchase frequency, geographic demand patterns, and campaign ROI — all in your brand dashboard.",
    tone: "bg-[#6330D6]/8 text-[#6330D6]",
    badge: "Analytics",
  },
  {
    icon: "inventory_2",
    title: "Inventory & Replenishment",
    desc: "Nearle connects your supply chain to local store inventory. Get alerts when stock is low, automate replenishment orders, and reduce out-of-stock situations.",
    tone: "bg-secondary/8 text-secondary",
    badge: "Inventory",
  },
  {
    icon: "handshake",
    title: "Dedicated Partner Support",
    desc: "A brand partner manager works with you to design your catalogue listings, plan campaigns, onboard new store locations, and report on performance.",
    tone: "bg-[#6330D6]/8 text-[#6330D6]",
    badge: "Support",
  },
];

const INDUSTRIES = [
  { icon: "restaurant", label: "Food & Snacks" },
  { icon: "shopping_basket", label: "Grocery & FMCG" },
  { icon: "health_and_safety", label: "Health & Wellness" },
  { icon: "spa", label: "Beauty & Personal Care" },
  { icon: "home", label: "Home & Cleaning" },
  { icon: "pets", label: "Pet Products" },
  { icon: "child_care", label: "Baby & Parenting" },
  { icon: "eco", label: "Organic & Natural" },
  { icon: "devices", label: "Electronics & Accessories" },
];

const PARTNERSHIP_STEPS = [
  {
    num: "01",
    icon: "contact_support",
    title: "Talk to Our Sales Team",
    desc: "Share your brand story, product categories, and distribution goals. Our team will assess the best approach for your brand on Nearle.",
    color: "bg-[#6330D6]/7 text-[#6330D6]",
  },
  {
    num: "02",
    icon: "description",
    title: "Design Your Brand Partnership",
    desc: "Together we define your store coverage, catalogue listings, promotional calendar, and performance targets. We customise every brand partnership.",
    color: "bg-secondary/7 text-secondary",
  },
  {
    num: "03",
    icon: "inventory",
    title: "Onboard Products to the Network",
    desc: "Your products are listed across relevant neighbourhood stores, QR catalogues, and the Nearle app. Customers start seeing and buying your brand.",
    color: "bg-[#6330D6]/7 text-[#6330D6]",
  },
  {
    num: "04",
    icon: "bar_chart",
    title: "Track, Optimise, and Grow",
    desc: "Monitor your brand's reach and sell-through in real-time. Work with your partner manager to run campaigns and expand to more localities.",
    color: "bg-secondary/7 text-secondary",
  },
];

const FAQ_ITEMS = [
  {
    question: "What types of brands does Nearle work with?",
    answer: "Nearle works with FMCG brands, local food manufacturers, packaged goods startups, health and wellness companies, beauty brands, organic product makers, and household goods producers. If your product fits on a neighbourhood store shelf, there's a place for it on Nearle.",
  },
  {
    question: "How does distribution through Nearle work?",
    answer: "Nearle's merchant network consists of verified neighbourhood stores. Your products are made available through these stores' digital catalogues and QR ordering systems. Customers who order from nearby stores can choose and buy your brand through Nearle's platform.",
  },
  {
    question: "Do I need to handle logistics and delivery?",
    answer: "Nearle handles last-mile delivery to customers through its local delivery partner network. You coordinate stock replenishment with our merchant partners or through our supply chain integration. You don't need to manage individual customer deliveries.",
  },
  {
    question: "Can I run promotions specifically for my brand?",
    answer: "Yes. Nearle supports brand-specific promotions including buy-one-get-one offers, minimum purchase discounts, festive deals, and new product launch campaigns. Promotions can be targeted by neighbourhood, store type, or customer segment.",
  },
  {
    question: "How is my brand's performance reported?",
    answer: "Your brand dashboard shows real-time sales volumes, store-level sell-through rates, geographic demand maps, promotion performance, and customer purchase patterns. Weekly and monthly reports are also available on request.",
  },
  {
    question: "How quickly can my brand go live on Nearle?",
    answer: "After the initial partnership agreement, most brands are listed and selling within 2 to 4 weeks. This includes catalogue creation, store onboarding, and initial inventory setup.",
  },
  {
    question: "Does Nearle work with small and emerging brands?",
    answer: "Absolutely. Nearle actively works with local manufacturers and emerging brands to help them build neighbourhood-level distribution before scaling. We believe in growing together.",
  },
  {
    question: "What does brand partnership cost?",
    answer: "Nearle brand partnerships are structured around a combination of listing fees and sales commissions, tailored to your scale and distribution goals. Contact our sales team for a customised quote.",
  },
];

export default function BrandsPage() {
  const collageCards = [
    { text: "Local Distribution", icon: "hub" },
    { text: "Brand Campaigns", icon: "campaign" },
    { text: "Retail Analytics", icon: "analytics" },
  ];

  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">
                Brand Partnerships
              </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">
                Expand Your Brand Across
                <br />
                <span className="text-[#6330D6]">Local Communities.</span>
              </h1>

              <p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
                Nearle connects FMCG brands, food companies, and local manufacturers with verified neighbourhood stores and their loyal customer communities.
              </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]"
                >
                  Talk to Sales
                </Link>
                <a
                  href="#partnership"
                  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 Partnership Process
                </a>
              </div>
            </div>

            <div className="w-full">
              <HeroVisualCollage
                centerImage="/nearlenewlogo.png"
                leftImage="/images/cat-daily-essentials.png"
                rightImage="/images/nearle-merchant/local-map.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>

      {/* ─── What We Offer ─── */}
      <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 Nearle Offers Brands
            </span>
            <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
              The Full Stack of Neighbourhood Commerce
            </h2>
            <p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
              From your first store listing to city-wide distribution — Nearle builds the infrastructure so you can focus on your product.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {WHAT_WE_OFFER.map((item) => (
              <div
                key={item.title}
                className="rounded-[28px] border border-[#6330D6]/10 bg-[#FAF7FD] p-7 flex flex-col gap-4 hover:shadow-[0_10px_32px_rgba(22,0,29,0.09)] transition-shadow duration-300"
              >
                <div className="flex items-start gap-3">
                  <div className={`w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 ${item.tone}`}>
                    <MaterialIcon icon={item.icon} size={24} />
                  </div>
                  <span className={`px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wide mt-1 ${item.tone} bg-opacity-[0.08]`}>
                    {item.badge}
                  </span>
                </div>
                <div>
                  <h3 className="text-base font-black text-[#16001D] leading-tight mb-2">{item.title}</h3>
                  <p className="text-sm text-[#5E5866] leading-relaxed">{item.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── Industries ─── */}
      <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-10">
            <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
              Industries We Serve
            </span>
            <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
              Your Category Has a Place on Nearle
            </h2>
            <p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
              Nearle&apos;s neighbourhood store network stocks a wide range of everyday product categories. If customers buy it daily, it belongs here.
            </p>
          </div>

          <div className="grid grid-cols-3 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-9 gap-4">
            {INDUSTRIES.map((industry) => (
              <div
                key={industry.label}
                className="flex flex-col items-center gap-2.5 p-4 rounded-2xl bg-white border border-[#6330D6]/8 hover:border-[#6330D6]/20 hover:shadow-md transition-all duration-200 cursor-default"
              >
                <div className="w-10 h-10 rounded-full bg-[#6330D6]/8 text-[#6330D6] flex items-center justify-center">
                  <MaterialIcon icon={industry.icon} size={20} />
                </div>
                <span className="text-[10px] font-black text-[#16001D] text-center leading-tight">{industry.label}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── Partnership Process ─── */}
      <section id="partnership" 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">
              How It Works
            </span>
            <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
              The Partnership Process
            </h2>
            <p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
              From first conversation to city-wide brand presence in four structured steps.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
            {PARTNERSHIP_STEPS.map((step) => (
              <article
                key={step.num}
                className="relative flex flex-col rounded-[28px] border border-[#6330D6]/10 bg-[#FAF7FD] p-7 shadow-[0_8px_32px_rgba(22,0,29,0.05)]"
              >
                <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>

      {/* ─── FAQ ─── */}
      <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="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">
                Brand Partner Questions
              </h2>
              <p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-6">
                What brand managers usually ask before starting their Nearle partnership.
              </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 sales 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%_30%,rgba(99,48,214,0.2),transparent_50%)] pointer-events-none" />
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_70%,rgba(0,109,55,0.12),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="hub" size={14} />
                Brand Partnership
              </span>
              <h2 className="font-display text-3xl md:text-4xl xl:text-5xl font-black mb-4 tracking-tight leading-tight">
                Ready to Grow in
                <br />Every Neighbourhood?
              </h2>
              <p className="text-sm md:text-base text-white/70 mb-8 leading-relaxed max-w-lg mx-auto">
                Let&apos;s talk about what a Nearle brand partnership looks like for your products. Our sales team will design a custom plan for your brand.
              </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="forum" size={18} />
                  <span>Talk to Sales</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="mail" size={18} />
                  <span>Send an Enquiry</span>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>
    </PremiumPageShell>
  );
}
