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 { BrandsHero } from "@/components/heroes/BrandsHero";
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 { NetworkBackground } from "@/components/brands/NetworkBackground";
import { PartnershipConnector } from "@/components/brands/PartnershipConnector";
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",
  },
  alternates: { canonical: "/brands" },
};

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 AI catalogue by ProductLLM 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() {
  return (
    <PremiumPageShell>
      {/* ─── Hero Section ─── */}
      <BrandsHero />

      {/* ─── What We Offer ─── */}
      <section className="relative overflow-hidden py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
        <NetworkBackground />
        <div className="relative z-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24">
          <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 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>
          </AnimatedSection>

          <AnimatedGrid className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {WHAT_WE_OFFER.map((item) => (
              <AnimatedCard
                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>
                  <p className="text-base font-black text-[#16001D] leading-tight mb-2">{item.title}</p>
                  <p className="text-m text-[#5E5866] leading-relaxed">{item.desc}</p>
                </div>
              </AnimatedCard>
            ))}
          </AnimatedGrid>
        </div>
      </section>

      {/* ─── Industries ─── */}
      <section className="relative overflow-hidden py-10 md:py-14 xl:py-12 bg-[#FAF7FD] border-b border-[#6330D6]/10">
        <Image
          src="/d2c bg1.png"
          alt=""
          fill
          priority={false}
          sizes="100vw"
          className="absolute inset-0 z-0 object-cover"
          aria-hidden="true"
        />
        <div className="absolute inset-0 z-[1] bg-white/40" />
        <div className="relative z-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24">
          <div className="grid grid-cols-1 lg:grid-cols-[30%_1fr] gap-10 xl:gap-16 items-center">
            {/* Real product collage */}
            <AnimatedSection className="order-2 lg:order-1" variant="fadeUp">
              <div className="relative mx-auto h-[280px] w-full max-w-[420px] sm:h-[360px] lg:mx-0 lg:h-[440px]">
                <div className="absolute left-0 top-0 h-[62%] w-[72%] overflow-hidden rounded-[28px] border-4 border-white shadow-[0_20px_50px_rgba(22,0,29,0.16)]">
                  <Image
                    src="/images/cat-daily-essentials.webp"
                    alt="Daily essentials like milk, bread, and fresh produce stocked on Nearle stores"
                    fill
                    sizes="(max-width: 1023px) 300px, 22vw"
                    className="object-cover"
                  />
                </div>
                <div className="absolute right-0 top-[6%] h-[42%] w-[52%] overflow-hidden rounded-[22px] border-4 border-white shadow-[0_16px_40px_rgba(22,0,29,0.14)]">
                  <Image
                    src="/images/cat-health-wellness.webp"
                    alt="Health and personal care products stocked on Nearle stores"
                    fill
                    sizes="(max-width: 1023px) 220px, 16vw"
                    className="object-cover"
                  />
                </div>
                <div className="absolute bottom-0 left-[10%] h-[38%] w-[54%] overflow-hidden rounded-[22px] border-4 border-white shadow-[0_16px_40px_rgba(22,0,29,0.14)]">
                  <Image
                    src="/images/cat-pet-essentials.webp"
                    alt="Pet essentials brand stocked on Nearle stores"
                    fill
                    sizes="(max-width: 1023px) 220px, 16vw"
                    className="object-cover"
                  />
                </div>
              </div>
            </AnimatedSection>

            {/* Content */}
            <div className="order-1 lg:order-2">
              <AnimatedSection>
                <div className="mb-10 text-left">
                  <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 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>
              </AnimatedSection>

              <AnimatedGrid className="grid grid-cols-3 gap-4">
                {INDUSTRIES.map((industry) => (
                  <AnimatedCard
                    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-[16px] font-black text-[#16001D] text-center leading-tight">{industry.label}</span>
                  </AnimatedCard>
                ))}
              </AnimatedGrid>
            </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 2xl:px-24">
          <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">
                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>
          </AnimatedSection>

          <PartnershipConnector steps={PARTNERSHIP_STEPS.length} />

          <AnimatedGrid className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
            {PARTNERSHIP_STEPS.map((step) => (
              <AnimatedCard
                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>
                <p className="font-display text-xl font-black text-[#16001D] leading-tight mb-2">
                  {step.title}
                </p>
                <p className="text-md text-[#5E5866] leading-relaxed">{step.desc}</p>
              </AnimatedCard>
            ))}
          </AnimatedGrid>
        </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 2xl:px-24">
          <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">
                <div className="relative mb-6">
                  <div className="absolute -left-6 -top-6 h-28 w-28 rounded-full bg-[#6330D6]/25 blur-3xl -z-10" />
                  <div className="absolute -right-4 -bottom-4 h-24 w-24 rounded-full bg-secondary/20 blur-3xl -z-10" />
                  <div className="relative h-[220px] sm:h-[260px] rounded-[28px] overflow-hidden shadow-[0_20px_50px_rgba(22,0,29,0.16)]">
                    <Image
                      src="/images/nearle-merchant/success-owner.webp"
                      alt="Neighbourhood store owner reviewing brand orders on his phone"
                      fill
                      sizes="(max-width: 1023px) 90vw, 360px"
                      className="object-cover"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-[#16001D]/70 via-[#6330D6]/20 to-transparent" />
                  </div>
                </div>
                <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>
            </AnimatedSection>

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

      {/* ─── CTA Banner ─── */}
      <CTABanner
        badge={{ icon: "hub", label: "Brand Partnership" }}
        heading={<>Ready to Grow in<br />Neighbourhood Commerce</>}
        body="Let's talk about what a Nearle brand partnership looks like for your products. Our sales team will design a custom plan for your brand."
        primary={{ href: "/contact", icon: "forum", label: "Talk to Sales" }}
        secondary={{ href: "/contact", icon: "mail", label: "Send an Enquiry" }}
        decorations={[
          "circle at 70% 30%, rgba(99,48,214,0.2), transparent 50%",
          "circle at 20% 70%, rgba(0,109,55,0.12), transparent 45%",
        ]}
        backgroundImage="/brand part.png"
      />
    </PremiumPageShell>
  );
}