"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import {
  fadeUp,
  scaleIn,
  staggerContainer,
  slideInLeft,
  slideInRight,
  viewport,
} from "@/lib/animations";

const STEPS = [
  {
    num: "01",
    icon: "storefront",
    title: "Get Online",
    desc: "Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.",
    visual: "store",
  },
  {
    num: "02",
    icon: "campaign",
    title: "Get Noticed",
    desc: "Your products get published to Nearle customers in your neighbourhood through the app. Customers search based on location, products, discounts, and promos.",
    visual: "phone",
  },
  {
    num: "03",
    icon: "auto_awesome",
    title: "Get Simplified",
    desc: "Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that help your business grow further.",
    visual: "bag",
  },
];

function OrdersCard() {
  return (
    <div className="absolute -left-4 top-6 hidden w-56 rounded-3xl border border-primary/10 bg-white/95 p-5 shadow-[0_22px_50px_rgba(22,0,29,0.16)] md:block xl:-left-6 xl:top-8">
      <p className="text-xs font-black uppercase tracking-widest text-brand-dark">
        Orders Received
      </p>
      <svg viewBox="0 0 150 46" className="mt-3 h-12 w-full" aria-hidden="true">
        <path d="M4 38 C 28 34, 34 20, 54 24 S 83 34, 102 18 S 126 8, 146 12" fill="none" stroke="#006d37" strokeWidth="5" strokeLinecap="round" />
        <circle cx="146" cy="12" r="5" fill="#006d37" />
      </svg>
      <div className="mt-3 space-y-2">
        {["Fresh groceries", "Daily essentials", "Local offers"].map((item) => (
          <div key={item} className="flex items-center gap-2 rounded-2xl bg-brand-accent-light/70 px-2.5 py-2">
            <span className="h-2.5 w-2.5 rounded-full bg-secondary" />
            <span className="text-xs font-bold text-on-surface-variant">{item}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function StorePhone() {
  return (
    <div className="absolute -right-4 bottom-4 hidden w-44 rounded-[2.2rem] border-[7px] border-brand-dark bg-white p-3 shadow-[0_26px_55px_rgba(22,0,29,0.24)] md:block xl:-right-8">
      <div className="mx-auto mb-3 h-1 w-12 rounded-full bg-brand-dark/25" />
      <div className="rounded-2xl bg-brand-accent-light p-2">
        <div className="h-7 rounded-full bg-white px-3 py-1.5 text-[9px] font-bold text-on-surface-variant">
          Search groceries
        </div>
        <div className="mt-3 grid grid-cols-4 gap-1.5">
          {["Rice", "Veg", "Milk", "Snacks"].map((label) => (
            <div key={label} className="rounded-xl bg-white px-1 py-1.5 text-center text-[7px] font-bold text-primary">
              {label}
            </div>
          ))}
        </div>
        <div className="mt-3 space-y-2">
          {["Kumar Provision", "Fresh Daily", "Neighbour Mart"].map((store, index) => (
            <div key={store} className="rounded-2xl bg-white p-2">
              <div className="flex items-center gap-2">
                <span className={`h-8 w-8 rounded-xl ${index === 1 ? "bg-secondary/15" : "bg-primary/12"}`} />
                <div className="min-w-0 flex-1">
                  <p className="truncate text-[8px] font-black text-brand-dark">{store}</p>
                  <p className="text-[7px] font-bold text-on-surface-variant">Groceries nearby</p>
                </div>
              </div>
            </div>
          ))}
        </div>
        <button className="mt-3 w-full rounded-full bg-primary py-2 text-[9px] font-black text-white">
          Cart
        </button>
      </div>
    </div>
  );
}

function GrowthPill() {
  return (
    <div className="absolute -right-8 top-10 hidden md:block xl:-right-16 xl:top-14">
      <svg className="absolute -left-32 top-9 h-12 w-36 text-primary/45" viewBox="0 0 144 44" fill="none" aria-hidden="true">
        <path d="M2 36 C 36 8, 72 36, 138 8" stroke="currentColor" strokeWidth="2.5" strokeDasharray="5 6" />
        <path d="M132 5 L140 7 L136 14" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
      <div className="rounded-full border border-primary/10 bg-white/95 px-5 py-3 text-sm font-black leading-tight text-brand-dark shadow-[0_18px_40px_rgba(22,0,29,0.13)]">
        More Customers
        <br />
        <span className="text-primary">More Growth</span>
      </div>
    </div>
  );
}

function PhoneMapVisual() {
  return (
    <div className="relative flex h-full w-full items-center justify-center">
      <div className="absolute bottom-1 h-6 w-36 rounded-full bg-brand-dark/18 blur-xl" />
      <div className="relative aspect-[9/19] h-[94%] min-h-[228px] max-h-[256px] rounded-[2.1rem] bg-[#120019] p-1.5 shadow-[0_26px_62px_rgba(22,0,29,0.25)]">
        <div className="relative h-full overflow-hidden rounded-[1.7rem] bg-[#FAF8FC]">
          <div className="absolute left-1/2 top-2.5 z-30 h-3.5 w-12 -translate-x-1/2 rounded-full bg-[#120019]" />
          <div className="absolute inset-x-0 top-0 z-20 flex items-center justify-between px-4 pt-3.5 text-[7px] font-black text-brand-dark/55">
            <span>9:41</span>
            <span className="h-1.5 w-5 rounded-full bg-brand-dark/40" />
          </div>

          <div className="absolute inset-x-1.5 bottom-1.5 top-7 overflow-hidden rounded-[1.35rem] bg-[linear-gradient(145deg,#FAF8FC,#F1E7F8)]">
            <svg className="absolute inset-0 h-full w-full" viewBox="0 0 140 255" fill="none" aria-hidden="true">
              <rect width="140" height="255" fill="#FAF8FC" />
              <path d="M-20 50C12 40 41 42 64 54C91 68 112 64 158 48" stroke="#E3D9EA" strokeWidth="8" strokeLinecap="round" />
              <path d="M-18 178C24 158 51 164 78 179C102 192 124 192 158 174" stroke="#DDF0E3" strokeWidth="14" strokeLinecap="round" opacity="0.75" />
              <path d="M24 -20L35 282" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
              <path d="M83 -24L73 280" stroke="#DED4E8" strokeWidth="5" strokeLinecap="round" />
              <path d="M126 -16L112 268" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
              <path d="M-18 72H158" stroke="#E7DFEE" strokeWidth="5" strokeLinecap="round" />
              <path d="M-18 122H158" stroke="#DED5E8" strokeWidth="5" strokeLinecap="round" />
              <path d="M-18 212H158" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
              <path d="M-12 244L150 28" stroke="#E6DEED" strokeWidth="5" strokeLinecap="round" />
              <path d="M6 180C35 155 48 130 70 117C92 104 108 91 125 70" stroke="#7C3AED" strokeWidth="1.8" strokeDasharray="3 5" strokeLinecap="round" opacity="0.55" />
              <path d="M70 117C47 103 30 92 14 73" stroke="#006D37" strokeWidth="1.6" strokeDasharray="3 5" strokeLinecap="round" opacity="0.38" />
            </svg>

            {[
              ["left-[17%] top-[30%]", "bg-primary"],
              ["right-[16%] top-[28%]", "bg-[#006D37]"],
              ["left-[20%] bottom-[33%]", "bg-[#006D37]"],
              ["right-[18%] bottom-[32%]", "bg-primary"],
              ["right-[35%] top-[20%]", "bg-primary"],
            ].map(([position, color]) => (
              <div key={position} className={`absolute ${position} z-10`}>
                <div className={`relative h-5 w-5 -rotate-45 rounded-[50%_50%_50%_10%] ${color} shadow-[0_5px_12px_rgba(22,0,29,0.12)]`}>
                  <div className="absolute left-1/2 top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
                </div>
              </div>
            ))}

            <div className="absolute left-1/2 top-[38%] z-20 -translate-x-1/2 -translate-y-1/2">
              <div className="absolute left-1/2 top-[82%] h-10 w-16 -translate-x-1/2 rounded-full bg-primary/18 blur-md" />
              <div className="relative h-16 w-16 -rotate-45 rounded-[50%_50%_50%_12%] bg-[linear-gradient(135deg,#8B5CF6,#65149A)] shadow-[0_14px_28px_rgba(101,20,154,0.30)]">
                <div className="absolute left-1/2 top-1/2 h-7 w-7 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
              </div>
            </div>

            <div className="absolute bottom-2 left-2.5 right-2.5 z-30 h-[30%] rounded-2xl bg-white/94 p-2.5 shadow-[0_10px_26px_rgba(22,0,29,0.14)] backdrop-blur">
              <p className="truncate text-[9.5px] font-black leading-none text-brand-dark">Your Store</p>
              <div className="mt-1.5 flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[7.5px] font-bold text-on-surface-variant">
                <span className="inline-flex items-center gap-0.5">
                  <MaterialIcon icon="star" size={10} fill className="text-amber-500" />
                  4.8
                </span>
                <span className="font-black text-[#006D37]">Open</span>
                <span>0.8 km</span>
              </div>
            </div>
          </div>
        </div>
        <div className="absolute -left-8 top-[29%] z-40 rounded-full bg-white px-3 py-1.5 text-[9px] font-black text-[#006D37] shadow-[0_10px_22px_rgba(22,0,29,0.14)] ring-1 ring-[#006D37]/10">
          Offers
        </div>
        <div className="absolute -right-7 top-[43%] z-40 rounded-full bg-primary px-3 py-1.5 text-[9px] font-black text-white shadow-[0_10px_22px_rgba(101,20,154,0.24)]">
          Shop
        </div>
      </div>
    </div>
  );
}

function StepVisual({ type }: { type: string }) {
  if (type === "store") {
    return (
      <div className="absolute inset-x-4 bottom-0 top-2">
        <div className="relative h-full w-full">
          <Image
            src="/images/nearle-how/how-storefront.webp"
            alt="3D local shop storefront with purple awning and now online board"
            fill
            sizes="(max-width: 768px) 80vw, 28vw"
            className="object-contain object-bottom"
          />
        </div>
      </div>
    );
  }

  if (type === "phone") {
    return (
      <div className="flex h-full items-center justify-center">
        <PhoneMapVisual />
      </div>
    );
  }

  return (
    <div className="flex h-full items-end justify-end gap-2 px-2">
      <div className="mb-4 hidden shrink-0 space-y-2 sm:block">
        {["Offers & Discounts", "Loyal Customers", "Repeat Orders"].map((chip) => (
          <div key={chip} className="rounded-full border border-primary/10 bg-white px-3 py-2 text-[11px] font-black text-brand-dark shadow-sm">
            {chip}
          </div>
        ))}
      </div>
      <div className="relative h-40 w-36 shrink-0">
        <Image
          src="/images/nearle-how/how-grocery-bag.webp"
          alt="Nearle grocery bag filled with vegetables and packaged products"
          fill
          sizes="(max-width: 768px) 60vw, 18vw"
          className="object-contain object-bottom"
        />
      </div>
    </div>
  );
}

export function HowItWorks() {
  return (
    <section className="section bg-white w-full overflow-hidden">
      {/* HERO AREA */}
      <div className="mx-auto w-[calc(100%-96px)] max-w-[1720px]">
        <div className="grid min-w-0 grid-cols-1 items-center gap-10 lg:grid-cols-[38fr_62fr]">
          <motion.div
            className="min-w-0"
            variants={slideInLeft}
            initial="hidden"
            whileInView="visible"
            viewport={viewport}
          >
            <span className="inline-flex items-center gap-2 rounded-full border border-secondary/15 bg-secondary/5 px-4 py-2 text-xs font-black uppercase tracking-widest text-secondary">
              <MaterialIcon icon="eco" size={16} />
              Together, We Grow
            </span>
            <h2 className="mt-6 max-w-3xl font-display text-[clamp(2.5rem,8vw,3.75rem)] font-black leading-[1.02] tracking-tight text-brand-dark lg:text-[64px]">
              Get set in minutes and delight the{" "}
              <span className="text-primary font-normal">Neighbourhood</span>
            </h2>
            <p className="mt-6 max-w-2xl text-base leading-relaxed text-on-surface-variant md:text-lg">
              Nearle is built to help businesses like{" "}
              <span className="font-black text-primary">Yours</span>{" "}
              establish a local online presence and empower neighbourhood customers to discover and interact with you directly.
            </p>
            <button className="mt-8 inline-flex w-full items-center justify-center gap-2 rounded-full bg-primary px-8 py-4 text-base font-black text-white shadow-[0_16px_30px_rgba(101,20,154,0.22)] transition-transform duration-200 hover:-translate-y-0.5 sm:w-auto">
              <MaterialIcon icon="forum" size={20} />
              Talk to an Expert
            </button>
          </motion.div>

          <motion.div
            className="relative flex min-h-[320px] justify-center md:min-h-[440px] xl:min-h-[400px]"
            variants={scaleIn}
            initial="hidden"
            whileInView="visible"
            viewport={viewport}
          >
            <div className="relative w-full max-w-[680px]">
              <div className="relative h-[280px] overflow-hidden rounded-[2rem] bg-brand-accent-light shadow-[0_26px_70px_rgba(22,0,29,0.16)] md:h-[440px] xl:h-[400px]">
                <Image
                  src="/images/nearle-merchant/merchant-hero.webp"
                  alt="Indian kirana-store owner using a laptop inside a grocery shop"
                  fill
                  sizes="(max-width: 1024px) 100vw, 50vw"
                  className="object-cover object-center"
                />
                <div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-brand-dark/25 to-transparent" />
              </div>
              <OrdersCard />
              <StorePhone />
              <GrowthPill />
            </div>
          </motion.div>
        </div>
      </div>

      {/* SUBTLE DIVIDER */}
      <div className="mx-auto mt-10 w-[calc(100%-96px)] max-w-[1720px] md:mt-14 xl:mt-10">
        <div className="h-px w-full bg-gradient-to-r from-transparent via-primary/10 to-transparent" />
      </div>

      {/* CARDS SECTION */}
      <div className="mx-auto w-full max-w-[2200px] px-6 lg:px-10 xl:px-12">
        <motion.div
          className="mt-10 text-center md:mt-14 xl:mt-10"
          variants={fadeUp}
          initial="hidden"
          whileInView="visible"
          viewport={viewport}
        >
          <span className="inline-flex rounded-full bg-primary/8 px-4 py-2 text-xs font-black uppercase tracking-widest text-primary">
            How It Works
          </span>
          <h2 className="mt-5 font-display text-4xl font-black leading-tight tracking-tight text-brand-dark md:text-5xl lg:text-[54px]">
            Build Your Neighbourhood Brand
          </h2>
          <p className="mx-auto mt-4 max-w-2xl text-base leading-relaxed text-on-surface-variant md:text-lg">
            Three simple milestones to scale your retail reach from offline streets straight into neighbourhood homes.
          </p>
        </motion.div>

        <motion.div
          className="mt-10 grid min-w-0 grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3"
          variants={staggerContainer}
          initial="hidden"
          whileInView="visible"
          viewport={viewport}
        >
          {STEPS.map((step) => (
            <motion.article
              key={step.num}
              variants={fadeUp}
              className="relative flex min-h-[380px] min-w-0 flex-col overflow-hidden rounded-3xl border border-primary/10 bg-white p-7 shadow-[0_18px_45px_rgba(22,0,29,0.08)] md:min-h-[420px] lg:min-h-[460px] xl:min-h-[420px] lg:p-8"
            >
              <span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-primary/[0.07]">
                {step.num}
              </span>
              <div className="relative z-10 flex h-13 w-13 items-center justify-center rounded-2xl bg-primary/7 text-primary">
                <MaterialIcon icon={step.icon} size={28} />
              </div>
              <div className="relative z-10 mt-7 max-w-[22rem] lg:mt-8">
                <h3 className="font-display text-2xl font-black text-brand-dark md:text-[28px]">
                  {step.title}
                </h3>
                <p className="mt-3 text-sm leading-relaxed text-on-surface-variant md:text-base">
                  {step.desc}
                </p>
              </div>
              <div className={`relative z-0 mt-auto w-full overflow-hidden rounded-[1.5rem] bg-brand-accent-light/60 ${step.visual === "phone" ? "h-64 lg:h-72" : "h-48 lg:h-52"}`}>
                <StepVisual type={step.visual} />
              </div>
            </motion.article>
          ))}
        </motion.div>
      </div>
    </section>
  );
}
