import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon";

const STEPS = [
  {
    num: "01",
    title: "Choose Your Area",
    desc: "See stores available around your neighbourhood.",
    icon: "location_on",
    color: "bg-primary/5 text-primary border-primary/10",
    image: "/images/nearle-redesign/choose-area.webp",
    alt: "Hand holding a smartphone with a local map and purple location pins",
  },
  {
    num: "02",
    title: "Pick Your Favourite Store",
    desc: "Browse groceries, medicines, and daily essentials nearby.",
    icon: "storefront",
    color: "bg-secondary/5 text-secondary border-secondary/10",
    image: "/images/nearle-redesign/pick-store.webp",
    alt: "Customer selecting groceries from a nearby store shelf",
  },
  {
    num: "03",
    title: "Place Order & Get Delivery",
    desc: "Order easily and get swift delivery from local partners.",
    icon: "local_shipping",
    color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
    image: "/images/nearle-redesign/delivery-doorstep.webp",
    alt: "Nearle delivery partner handing a grocery bag to a customer",
  },
];

export function HowItWorks() {
  return (
    <section className="section bg-white w-full overflow-hidden">
      <div className="page-container">
        {/* Header Section */}
        <div className="text-center mb-10 md:mb-14">
          <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/10 px-3.5 py-1.5 rounded-full">
            Simple Process
          </span>
          <h2 className="text-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-4 leading-tight tracking-tight">
            From Your Neighbourhood Store <span className="text-secondary font-normal">to Your Doorstep</span>
          </h2>
        </div>

        {/* Steps Layout - Timeline style */}
        <div className="relative mt-8 md:mt-10">
          {/* Connecting Line (Desktop Only) */}
          <div className="hidden lg:block absolute top-[32px] left-[8%] right-[8%] h-[1px] bg-primary/20 -z-0" />

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-10 lg:gap-12 relative z-10">
            {STEPS.map((step) => (
              <div key={step.num} className="flex flex-col items-center lg:items-start text-center lg:text-left group relative">
                {/* Icon Container with watermark number */}
                <div className="flex items-center justify-center w-16 h-16 rounded-2xl bg-white border border-primary/10 text-primary shadow-sm mb-6 relative z-10 transition-transform duration-300 group-hover:-translate-y-1">
                  <MaterialIcon icon={step.icon} size={32} />
                  <span className="absolute -top-3.5 -right-3.5 w-9 h-9 rounded-full bg-primary text-white font-display font-black text-sm flex items-center justify-center shadow-md">
                    {step.num}
                  </span>
                </div>

                <div className="flex w-full max-w-md flex-col items-center gap-5 sm:flex-row sm:text-left lg:items-start">
                  <div className="relative h-32 w-32 shrink-0 overflow-hidden rounded-[1.5rem] bg-brand-accent-light shadow-[0_18px_35px_rgba(22,0,29,0.10)] ring-1 ring-primary/10">
                    <Image
                      src={step.image}
                      alt={step.alt}
                      fill
                      sizes="128px"
                      className="object-cover"
                    />
                  </div>
                  <div>
                    <h3 className="font-display text-2xl md:text-[28px] font-black text-brand-dark mb-3 leading-tight">
                      {step.title}
                    </h3>
                    <p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
                      {step.desc}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}