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",
  },
  {
    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",
  },
  {
    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",
  },
];

export function HowItWorks() {
  return (
    <section className="bg-[#EEDDF3] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden pt-12 md:pt-16 pb-8 md:pb-10 px-6 md:px-12 lg:px-20 xl:px-24">
      <div className="max-w-container-max mx-auto">
        {/* Header Section */}
        <div className="text-center mb-8 md:mb-10">
          <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-12">
          {/* 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-12 lg:gap-16 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>

                <h3 className="font-display text-2xl md:text-3xl font-black text-brand-dark mb-3">
                  {step.title}
                </h3>
                <p className="text-sm md:text-base text-on-surface-variant leading-relaxed max-w-sm">
                  {step.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}