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

export const metadata: Metadata = {
  title: "Delivery Partners",
  description:
    "Deliver locally and earn daily with Nearle. Flexible hours, weekly payouts, and short-distance hyperlocal deliveries. Join Nearle's growing delivery network today.",
  openGraph: {
    title: "Delivery Partners | Nearle",
    description:
      "Join Nearle's local delivery network. Deliver within your neighbourhood, earn on your schedule, and get weekly payouts.",
    url: "https://nearle.in/delivery-partners",
  },
};

const HERO_STATS = [
  { title: "Flexible Hours", icon: "schedule", desc: "Work when it suits you" },
  { title: "Weekly Payouts", icon: "payments", desc: "Earnings settled every week" },
  { title: "Short Distances", icon: "near_me", desc: "Deliver within 2km radius" },
  { title: "Local Support", icon: "support_agent", desc: "Our team is always there" },
];

const BENEFITS = [
  {
    icon: "access_time",
    title: "Flexible Hours",
    desc: "Choose your own shifts — morning, afternoon, or evening. Take a day off whenever you need. No fixed schedule, no minimum hours.",
    tone: "bg-[#6330D6]/8 text-[#6330D6]",
  },
  {
    icon: "payments",
    title: "Weekly Payouts",
    desc: "Your earnings are settled every week, directly to your bank account. No waiting for month-end.",
    tone: "bg-secondary/8 text-secondary",
  },
  {
    icon: "near_me",
    title: "Short Local Deliveries",
    desc: "Deliver within a 2km radius of your neighbourhood. No long-distance trips. No highway runs. Stay close to home.",
    tone: "bg-[#6330D6]/8 text-[#6330D6]",
  },
  {
    icon: "electric_scooter",
    title: "Low Fuel, High Efficiency",
    desc: "Short distances mean lower fuel costs and more deliveries per hour — which means more money in your pocket.",
    tone: "bg-secondary/8 text-secondary",
  },
  {
    icon: "headset_mic",
    title: "Dedicated Support Team",
    desc: "Our local support team is available throughout the day to help with any issues, route changes, or customer questions.",
    tone: "bg-[#6330D6]/8 text-[#6330D6]",
  },
  {
    icon: "workspace_premium",
    title: "Performance Bonuses",
    desc: "Deliver more, earn more. Nearle rewards high-performing delivery partners with weekly bonuses and peak-hour incentives.",
    tone: "bg-secondary/8 text-secondary",
  },
];

const REQUIREMENTS = [
  {
    icon: "cake",
    title: "Age 18 or Above",
    desc: "You must be at least 18 years old to join the Nearle delivery network.",
  },
  {
    icon: "two_wheeler",
    title: "A Two-Wheeler Vehicle",
    desc: "A bicycle, scooter, or motorcycle in good working condition. Electric vehicles are welcome.",
  },
  {
    icon: "badge",
    title: "Valid Documents",
    desc: "Aadhaar card, PAN card, and a valid driving licence (for scooter/motorcycle riders).",
  },
  {
    icon: "smartphone",
    title: "A Smartphone",
    desc: "An Android or iOS smartphone to use the Nearle Delivery Partner app for order tracking and navigation.",
  },
];

const TIMELINE = [
  {
    step: "01",
    title: "Sign Up & Submit Documents",
    desc: "Register through the Nearle Delivery Partner app. Upload your documents for a quick background verification.",
    time: "Day 1",
  },
  {
    step: "02",
    title: "Complete a Short Orientation",
    desc: "Attend a 1-hour orientation session (online or in-person) to understand how deliveries, payouts, and customer service work.",
    time: "Day 2",
  },
  {
    step: "03",
    title: "Activate and Go Online",
    desc: "Once approved, go online anytime from the app. Orders come to you automatically based on your location.",
    time: "Day 3",
  },
  {
    step: "04",
    title: "Pick Up Orders",
    desc: "When you accept an order, you navigate to the store, pick up the package, and deliver it to the customer — usually within 30 minutes.",
    time: "Every Shift",
  },
  {
    step: "05",
    title: "Get Paid Weekly",
    desc: "Earnings are totalled at the end of each week and credited directly to your bank account every Monday.",
    time: "Every Week",
  },
];

const EARNINGS = [
  {
    profile: "Part-Time (2–3 hrs/day)",
    deliveries: "8–12 deliveries",
    daily: "₹450 – ₹700",
    monthly: "₹9,000 – ₹14,000",
    icon: "hourglass_empty",
    color: "border-[#6330D6]/15 bg-[#FAF7FD]",
    accent: "text-[#6330D6]",
  },
  {
    profile: "Full-Time (6–8 hrs/day)",
    deliveries: "22–32 deliveries",
    daily: "₹1,100 – ₹1,600",
    monthly: "₹22,000 – ₹32,000",
    icon: "bolt",
    color: "border-[#006D37]/15 bg-[#F0FAF4]",
    accent: "text-[#006D37]",
  },
  {
    profile: "Peak Hours + Bonuses",
    deliveries: "Varies",
    daily: "+ ₹200 – ₹400",
    monthly: "Up to ₹5,000 extra",
    icon: "trending_up",
    color: "border-amber-500/15 bg-amber-50",
    accent: "text-amber-600",
  },
];

const FAQ_ITEMS = [
  {
    question: "Do I need to own a vehicle to join?",
    answer: "Yes, you need your own two-wheeler — a bicycle, scooter, or motorcycle in good working condition. Electric scooters and bikes are also welcome. We don't provide vehicles, but delivery earnings usually cover running costs easily given the short distances.",
  },
  {
    question: "How are earnings calculated?",
    answer: "You earn a base delivery fee per order, plus surge pricing during peak hours. High-performing delivery partners also receive weekly performance bonuses. Your earnings are visible in real-time on the app.",
  },
  {
    question: "Can I work in multiple areas?",
    answer: "You are assigned a home zone based on your registration address. You can accept deliveries within and around your zone. If you want to expand to another area, you can update your preferred zones in the app.",
  },
  {
    question: "How quickly do I get paid?",
    answer: "Your earnings are settled every Monday for the previous week's work. There's no minimum earnings threshold — even a single delivery is paid out.",
  },
  {
    question: "Is there a minimum number of deliveries I have to do?",
    answer: "No. Nearle is fully flexible. You can go online whenever you want and go offline whenever you want. There are no minimums — though performance bonuses reward consistency.",
  },
  {
    question: "What if a customer cancels after I've picked up the order?",
    answer: "If a cancellation happens after you've reached the store or picked up the order, you still receive a partial fee for the trip. Nearle's policy protects delivery partners from bad-faith cancellations.",
  },
  {
    question: "What happens if I have an accident during a delivery?",
    answer: "Safety is our priority. All active delivery partners on Nearle are covered by a delivery protection plan during active delivery slots. We also have an emergency support line available 24 hours a day.",
  },
  {
    question: "How do I handle customer complaints?",
    answer: "You don't need to handle complaints directly. If a customer has an issue, they contact Nearle support. Your job is to deliver — we handle the communication, refund decisions, and dispute resolution.",
  },
];

export default function DeliveryPartnersPage() {
  const collageCards = [
    { text: "Flexible Hours", icon: "access_time" },
    { text: "Weekly Payouts", icon: "payments" },
    { text: "Local Deliveries", icon: "near_me" },
  ];

  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">
                Delivery 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">
                Deliver Locally.
                <br />
                <span className="text-[#6330D6]">Earn Daily.</span>
              </h1>

              <p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
                Join the Nearle delivery network and earn by making short, local deliveries in your neighbourhood — on your own schedule, at your own pace.
              </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]"
                >
                  Join the Delivery Network
                </Link>
                <a
                  href="#earnings"
                  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 Earnings
                </a>
              </div>
            </div>

            <div className="w-full">
              <HeroVisualCollage
                centerImage="/nearlenewlogo.png"
                leftImage="/nearle people.png"
                rightImage="/images/nearle-merchant/delivery-support.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>

      {/* ─── 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">
                Partner Benefits
              </span>
              <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
                More Than Just Delivery
              </h2>
              <p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
                Nearle is designed around your life — not the other way around.
              </p>
            </div>
          </AnimatedSection>

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

      {/* ─── Requirements ─── */}
      <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-[1.1fr_1fr] gap-10 lg:gap-16 items-center">
            <AnimatedSection>
              <div>
                <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
                  To Get Started
                </span>
                <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4 tracking-tight leading-tight">
                  What You Need to Join
                </h2>
                <p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-8 max-w-lg">
                  No experience needed. If you have a vehicle, a smartphone, and a desire to earn — you&apos;re more than qualified.
                </p>
                <Link
                  href="/contact"
                  className="inline-flex items-center gap-2 bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-7 py-3.5 rounded-xl text-sm shadow-md transition-all duration-200 active:scale-95"
                >
                  <MaterialIcon icon="how_to_reg" size={18} />
                  <span>Apply Now</span>
                </Link>
              </div>
            </AnimatedSection>

            <AnimatedGrid className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              {REQUIREMENTS.map((req) => (
                <AnimatedCard key={req.title} className="flex flex-col gap-3 p-5 rounded-2xl bg-white border border-[#6330D6]/10 shadow-[0_4px_18px_rgba(22,0,29,0.05)]">
                  <div className="w-11 h-11 rounded-2xl bg-[#6330D6]/8 text-[#6330D6] flex items-center justify-center">
                    <MaterialIcon icon={req.icon} size={22} />
                  </div>
                  <div>
                    <h4 className="text-sm font-black text-[#16001D]">{req.title}</h4>
                    <p className="mt-1 text-xs text-[#5E5866] leading-relaxed">{req.desc}</p>
                  </div>
                </AnimatedCard>
              ))}
            </AnimatedGrid>
          </div>
        </div>
      </section>

      {/* ─── How Delivery Works (Timeline) ─── */}
      <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">
                Your Journey
              </span>
              <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
                From Sign-Up to First Earnings
              </h2>
              <p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
                Most delivery partners are out earning within 3 days of applying.
              </p>
            </div>
          </AnimatedSection>

          <AnimatedTimeline items={TIMELINE} />
        </div>
      </section>

      {/* ─── Earnings Illustration ─── */}
      {/* <section id="earnings" 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">
              Realistic Earnings
            </span>
            <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
              What You Can Earn with Nearle
            </h2>
            <p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
              These are realistic estimates based on current delivery volumes in Coimbatore. Actual earnings depend on your hours, location, and delivery performance.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {EARNINGS.map((tier) => (
              <div
                key={tier.profile}
                className={`rounded-[28px] border-2 p-7 flex flex-col gap-5 ${tier.color}`}
              >
                <div className={`w-12 h-12 rounded-2xl bg-white flex items-center justify-center shadow-sm ${tier.accent}`}>
                  <MaterialIcon icon={tier.icon} size={24} />
                </div>
                <div>
                  <h3 className={`text-base font-black leading-tight ${tier.accent}`}>{tier.profile}</h3>
                  <p className="text-xs text-[#5E5866] mt-1">{tier.deliveries} per day</p>
                </div>
                <div className="border-t border-[#6330D6]/10 pt-4 space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="text-xs text-[#5E5866] font-semibold">Daily Estimate</span>
                    <span className={`text-base font-black ${tier.accent}`}>{tier.daily}</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-xs text-[#5E5866] font-semibold">Monthly Estimate</span>
                    <span className={`text-base font-black ${tier.accent}`}>{tier.monthly}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <p className="text-center text-xs text-[#5E5866] mt-6 max-w-xl mx-auto">
            Estimates include base delivery fees only. Peak-hour surge pricing, performance bonuses, and festive incentives are additional. Earnings vary by zone.
          </p>
        </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">
                  Common Questions
                </h2>
                <p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-6">
                  Everything you want to know before joining the Nearle delivery network.
                </p>
                <Link
                  href="/contact"
                  className="inline-flex items-center gap-2 text-sm font-black text-[#6330D6] hover:text-[#5225b8] transition-colors"
                >
                  <span>Contact support</span>
                  <MaterialIcon icon="arrow_forward" size={16} />
                </Link>
              </div>
            </AnimatedSection>

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

      {/* ─── CTA Banner ─── */}
      <CTABanner
        badge={{ icon: "electric_scooter", label: "Start Earning Today" }}
        heading={<>Join the Nearle<br />Delivery Network</>}
        body="Delivery partners in Coimbatore are already earning with Nearle. Sign up today and start delivering in your neighbourhood within days."
        primary={{ href: "/contact", icon: "how_to_reg", label: "Apply Now" }}
        secondary={{ href: "/contact", icon: "phone", label: "Talk to Us" }}
        decorations={[
          "circle at 30% 30%, rgba(0,109,55,0.15), transparent 50%",
          "circle at 70% 70%, rgba(99,48,214,0.12), transparent 45%",
        ]}
      />
    </PremiumPageShell>
  );
}
