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

const FLOW_STEPS = [
  { label: "Scan QR", icon: "qr_code_scanner" },
  { label: "Save Store", icon: "bookmark" },
  { label: "Order Anytime", icon: "shopping_bag" },
];

export function StoreQRSection() {
  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">
        <div className="grid lg:grid-cols-12 gap-16 items-center">
          {/* Left Column: Visual representation of QR Sticker/Counter */}
          <div className="lg:col-span-5 flex justify-center relative">
            <div className="relative w-full max-w-[380px] aspect-square bg-[#120217] rounded-[2.5rem] p-8 shadow-2xl border-4 border-white/10 flex flex-col justify-between items-center group overflow-hidden">
              {/* Decorative radial shine */}
              <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(224,200,247,0.15),transparent_60%)] pointer-events-none" />
              
              {/* Header inside QR Sticker */}
              <div className="text-center w-full relative z-10">
                <p className="text-xs font-black text-brand-accent tracking-[0.2em] uppercase">Order Online</p>
                <h4 className="font-display font-black text-white text-lg mt-1">Nearle Store QR</h4>
                <p className="text-xs text-white/60 font-semibold mt-1">Nearle Partner Store</p>
              </div>

              {/* Decorative QR Pattern */}
              <div className="relative w-52 h-52 bg-white rounded-2xl p-4 flex items-center justify-center shadow-lg group-hover:scale-[1.03] transition-transform duration-500 z-10">
                <Image
                  src="/QR code .png"
                  alt="Nearle Store QR Code"
                  width={200}
                  height={200}
                  className="object-contain"
                />
              </div>

              {/* Footer label on QR Sticker */}
              <div className="text-center z-10">
                <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-black tracking-wider uppercase bg-brand-accent/15 text-brand-accent">
                  <span className="w-1.5 h-1.5 rounded-full bg-brand-accent animate-pulse" />
                  Scan to Shop
                </span>
              </div>
            </div>
          </div>

          {/* Right Column: Copywriting and Steps */}
          <div className="lg:col-span-7">
            <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full border border-secondary/15">
              Instant Connections
            </span>
            <h2 className="text-display text-brand-dark mt-6 mb-6 leading-tight">
              Your Favourite Store Is <span className="text-secondary">Now Just One Scan Away.</span>
            </h2>
            <p className="text-body-lg text-on-surface-variant mb-10 max-w-xl leading-relaxed">
              See Nearle at a nearby store? Scan the QR code once, save the store, and order from it anytime.
            </p>

            {/* Visual Steps Row */}
            <div className="grid grid-cols-3 gap-6 mb-12 max-w-lg">
              {FLOW_STEPS.map((step) => (
                <div key={step.label} className="flex flex-col items-center text-center group">
                  <div className="w-14 h-14 rounded-xl bg-white border border-outline-variant/20 shadow-sm flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors duration-300 mb-3">
                    <MaterialIcon icon={step.icon} size={28} />
                  </div>
                  <span className="text-sm md:text-base font-black text-brand-dark group-hover:text-primary transition-colors">
                    {step.label}
                  </span>
                </div>
              ))}
            </div>

            <Link
              href="/people"
              className="bg-primary hover:bg-primary-container text-white font-black px-10 py-4 rounded-full text-sm md:text-base hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200 inline-block"
            >
              Find Stores Near You
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}
