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, food, and daily essentials from nearby shops.",
    icon: "storefront",
    color: "bg-secondary/5 text-secondary border-secondary/10",
  },
  {
    num: "03",
    title: "Place Order & Get Delivery",
    desc: "Order easily and get it delivered by the store or a Nearle delivery partner.",
    icon: "local_shipping",
    color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
  },
];

export function HowItWorks() {
  return (
    <section className="bg-background py-16 px-6 md:px-12 lg:px-20 xl:px-24 border-t border-outline-variant/10">
      <div className="max-w-container-max mx-auto">
        {/* Header Section */}
        <div className="text-center mb-12">
          <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full">
            Simple Process
          </span>
          <h2 className="text-display text-brand-dark mt-3 leading-tight">
            From Your Neighbourhood Store <span className="text-secondary font-normal">to Your Doorstep</span>
          </h2>
        </div>

        {/* Steps Layout */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 relative">
          {/* Connector Line (Desktop Only) */}
          <div className="hidden lg:block absolute top-[44px] left-[15%] right-[15%] h-[2px] bg-dashed border-t border-dashed border-outline-variant/30 -z-10" />

          {STEPS.map((step) => (
            <div
              key={step.num}
              className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-lg flex flex-col h-full relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300"
            >
              {/* Step number watermark */}
              <div className="absolute top-4 right-6 text-4xl font-black text-brand-dark/10 select-none">
                {step.num}
              </div>

              {/* Step Circle with Icon */}
              <div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-6 shadow-sm ${step.color}`}>
                <MaterialIcon icon={step.icon} size={28} />
              </div>

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