import Image from "next/image";
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="section bg-white w-full">
      <div className="page-container">
        <div id="download" className="w-full bg-gradient-to-br from-[#1A0322] to-[#0A000D] rounded-3xl md:rounded-[2rem] overflow-hidden text-white relative flex items-center py-12 md:py-16 px-6 md:px-12 lg:px-16 xl:px-20 border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.22)]">
      {/* Background ambient glowing details */}
      <div className="absolute right-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-brand-accent/5 blur-[120px] pointer-events-none" />
      <div className="absolute left-[-10%] bottom-[-10%] w-[50%] h-[50%] rounded-full bg-primary/10 blur-[120px] pointer-events-none" />

      <div className="w-full relative z-10">
        
        {/* ─── DESKTOP LAYOUT (lg and above) ─── */}
        <div className="hidden lg:grid lg:grid-cols-12 gap-20 xl:gap-24 items-center">
          
          {/* Left Column: Heading, flow steps, download buttons */}
          <div className="lg:col-span-6">
            <span className="text-xs text-brand-accent uppercase tracking-widest font-black bg-brand-accent/10 px-3.5 py-1.5 rounded-full border border-brand-accent/20">
              Instant Connections & App
            </span>
            <h2 className="text-4xl md:text-5xl lg:text-[60px] xl:text-[66px] font-display font-black text-white mt-6 mb-6 leading-[1.08] tracking-tight">
              Scan to Shop, <br />
              <span className="text-brand-accent font-black">Order in Your Pocket.</span>
            </h2>
            <p className="text-body-lg text-white/70 mb-10 max-w-xl leading-relaxed">
              Find Nearle QRs at nearby stores. Scan once to save it, then order groceries, food, or medicines from your favourite local merchant anytime.
            </p>

            {/* QR Steps row with arrows */}
            <div className="flex items-center gap-6 mb-12 max-w-md select-none">
              {FLOW_STEPS.map((step, idx) => (
                <div key={step.label} className="flex items-center gap-6 flex-1">
                  <div className="flex flex-col items-center text-center group flex-1">
                    <div className="w-14 h-14 rounded-xl bg-white/10 text-brand-accent flex items-center justify-center shadow-md mb-2 transition-transform duration-300 group-hover:-translate-y-0.5">
                      <MaterialIcon icon={step.icon} size={24} />
                    </div>
                    <span className="text-sm font-bold text-white/90">
                      {step.label}
                    </span>
                  </div>
                  {idx < FLOW_STEPS.length - 1 && (
                    <MaterialIcon icon="arrow_forward" size={16} className="text-white/30" />
                  )}
                </div>
              ))}
            </div>

            {/* TODO: Replace with real app store URLs once app is confirmed live (siteContent.app.iosUrl / androidUrl) */}
            <div className="flex flex-wrap gap-4">
              <div className="h-[60px] border border-white/20 rounded-2xl bg-white/10 text-white/60 px-8 py-2 flex items-center gap-3.5 shrink-0 cursor-not-allowed select-none">
                <svg viewBox="0 0 24 24" className="w-7 h-7 shrink-0 fill-current opacity-60" fill="currentColor">
                  <path d="M17.537 12.625c-.023-2.949 2.398-4.37 2.506-4.44-1.364-2.008-3.48-2.282-4.227-2.307-1.79-.186-3.504 1.064-4.413 1.064-.918 0-2.323-1.04-3.827-1.01-1.963.028-3.788 1.146-4.796 2.91-2.06 3.587-.526 8.9 1.466 11.808.98 1.428 2.147 3.035 3.685 2.975 1.47-.059 2.03-.964 3.807-.964 1.767 0 2.266.964 3.818.932 1.58-.03 2.58-1.453 3.536-2.89 1.116-1.628 1.57-3.21 1.596-3.29-.035-.016-3.057-1.18-3.087-4.678l.036-.002zM14.87 4.058c.821-.99 1.375-2.361 1.223-3.733-1.184.05-2.618.784-3.47 1.77-.762.875-1.43 2.28-1.25 3.623 1.327.102 2.673-.668 3.497-1.66z" />
                </svg>
                <div className="text-left leading-tight">
                  <div className="text-[10px] font-bold tracking-wider uppercase opacity-60">
                    App Store
                  </div>
                  <div className="text-sm font-black">
                    Coming Soon
                  </div>
                </div>
              </div>

              <div className="h-[60px] border border-white/20 rounded-2xl bg-white/10 text-white/60 px-8 py-2 flex items-center gap-3.5 shrink-0 cursor-not-allowed select-none">
                <svg viewBox="0 0 24 24" className="w-7 h-7 shrink-0 fill-current opacity-60" fill="currentColor">
                  <path d="M3.609 1.814L13.414 12 3.609 22.186c-.244-.178-.395-.466-.395-.786V2.6c0-.32.151-.608.395-.786zM14.244 12.83l2.705 2.688-4.073 2.276-4.073 2.276L14.244 12.83zm1-1.66l2.838-2.8 4.153 2.336c.464.26.464.688 0 .948l-4.153 2.336-2.838-2.82zM8.803 4.93l4.073 2.276 4.073 2.276-2.705 2.688L8.803 4.93z" />
                </svg>
                <div className="text-left leading-tight">
                  <div className="text-[10px] font-bold tracking-wider uppercase opacity-60">
                    Google Play
                  </div>
                  <div className="text-sm font-black">
                    Coming Soon
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Right Column: Visual components (QR Sticker & Phone Mockup) */}
          <div className="lg:col-span-6 flex items-center justify-center gap-8 relative select-none">
            {/* Small supporting visual: QR Sticker (Secondary) */}
            <div className="relative w-[210px] shrink-0 aspect-[9/11.5] bg-white rounded-[2rem] p-6 text-brand-dark flex flex-col justify-between items-center shadow-2xl border-2 border-white/20">
              <div className="text-center w-full">
                <p className="text-[10px] font-black text-primary tracking-wider uppercase">Order Online</p>
                <h4 className="font-display font-black text-brand-dark text-base mt-0.5 leading-none">Store QR</h4>
              </div>

              <div className="relative w-32 h-32 bg-white flex items-center justify-center">
                <Image
                  src="/nearle-qr-code.png"
                  alt="Nearle Store QR Code"
                  width={132}
                  height={132}
                  className="object-contain"
                />
              </div>

              <span className="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-[10px] font-black tracking-wider uppercase bg-primary/5 text-primary leading-none">
                <span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
                Scan to Shop
              </span>
            </div>

            {/* Primary large visual: Phone Mockup (Significantly Larger) */}
            <div className="relative w-[290px] shrink-0 aspect-[9/18.5] bg-[#120217] rounded-[2.75rem] border-[7px] border-brand-dark-surface shadow-2xl overflow-hidden ring-4 ring-outline-variant/10">
              <Image
                src="/mobile image.jpeg"
                alt="Nearle mobile app interface"
                width={360}
                height={760}
                className="w-full h-full object-cover"
              />
            </div>


          </div>
        </div>

        {/* ─── MOBILE & TABLET LAYOUT (below lg) ─── */}
        <div className="lg:hidden flex flex-col gap-12 text-center">
          {/* 1. Heading and description */}
          <div>
            <span className="text-xs text-brand-accent uppercase tracking-widest font-black bg-brand-accent/10 px-3.5 py-1.5 rounded-full border border-brand-accent/20 inline-block">
              Instant Connections & App
            </span>
            <h2 className="text-4xl font-display font-black text-white mt-6 mb-4 tracking-tight leading-tight">
              Scan to Shop, <br />Order in Pocket.
            </h2>
            <p className="text-body-md text-white/70 max-w-md mx-auto leading-relaxed">
              Scan Nearle QRs to instantly save local stores, and order from them anytime in one convenient app.
            </p>
          </div>

          {/* 2. QR Sticker */}
          <div className="mx-auto w-[240px] aspect-[9/11.5] bg-white rounded-[2rem] p-6 text-brand-dark flex flex-col justify-between items-center shadow-xl border-2 border-white/20 select-none">
            <div className="text-center w-full">
              <p className="text-[10px] font-black text-primary tracking-wider uppercase">Order Online</p>
              <h4 className="font-display font-black text-brand-dark text-base mt-0.5">Store QR</h4>
            </div>

            <div className="relative w-36 h-36 bg-white flex items-center justify-center">
              <Image
                src="/nearle-qr-code.png"
                alt="Nearle Store QR Code"
                width={144}
                height={144}
                className="object-contain"
              />
            </div>

            <span className="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-[10px] font-black tracking-wider uppercase bg-primary/5 text-primary">
              <span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
              Scan to Shop
            </span>
          </div>

          {/* 3. Scan → Save → Order steps */}
          <div className="flex items-center justify-center gap-4 max-w-sm mx-auto select-none">
            {FLOW_STEPS.map((step, idx) => (
              <div key={step.label} className="flex items-center gap-4 flex-1">
                <div className="flex flex-col items-center text-center">
                  <div className="w-12 h-12 rounded-xl bg-white/10 text-brand-accent flex items-center justify-center shadow-md mb-2">
                    <MaterialIcon icon={step.icon} size={22} />
                  </div>
                  <span className="text-xs font-bold text-white/90">
                    {step.label}
                  </span>
                </div>
                {idx < FLOW_STEPS.length - 1 && (
                  <MaterialIcon icon="chevron_right" size={16} className="text-white/30" />
                )}
              </div>
            ))}
          </div>

          {/* 4. Phone Mockup */}
          <div className="mx-auto w-[240px] aspect-[9/18.5] bg-[#120217] rounded-[2.5rem] border-[5px] border-brand-dark-surface shadow-xl relative overflow-hidden select-none">
            <Image
              src="/mobile image.jpeg"
              alt="Nearle mobile app interface"
              width={360}
              height={760}
              className="w-full h-full object-cover"
            />
          </div>

          {/* 5. App store buttons — TODO: replace with real URLs once app is live */}
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <div className="h-14 w-60 sm:w-auto border border-white/20 rounded-2xl bg-white/10 text-white/60 px-6 py-2 flex items-center justify-center gap-3 cursor-not-allowed select-none">
              <svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current opacity-60" fill="currentColor">
                <path d="M17.537 12.625c-.023-2.949 2.398-4.37 2.506-4.44-1.364-2.008-3.48-2.282-4.227-2.307-1.79-.186-3.504 1.064-4.413 1.064-.918 0-2.323-1.04-3.827-1.01-1.963.028-3.788 1.146-4.796 2.91-2.06 3.587-.526 8.9 1.466 11.808.98 1.428 2.147 3.035 3.685 2.975 1.47-.059 2.03-.964 3.807-.964 1.767 0 2.266.964 3.818.932 1.58-.03 2.58-1.453 3.536-2.89 1.116-1.628 1.57-3.21 1.596-3.29-.035-.016-3.057-1.18-3.087-4.678l.036-.002zM14.87 4.058c.821-.99 1.375-2.361 1.223-3.733-1.184.05-2.618.784-3.47 1.77-.762.875-1.43 2.28-1.25 3.623 1.327.102 2.673-.668 3.497-1.66z" />
              </svg>
              <div className="text-left leading-tight">
                <div className="text-[10px] font-bold tracking-wider uppercase opacity-60">
                  App Store
                </div>
                <div className="text-sm font-black">
                  Coming Soon
                </div>
              </div>
            </div>

            <div className="h-14 w-60 sm:w-auto border border-white/20 rounded-2xl bg-white/10 text-white/60 px-6 py-2 flex items-center justify-center gap-3 cursor-not-allowed select-none">
              <svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current opacity-60" fill="currentColor">
                <path d="M3.609 1.814L13.414 12 3.609 22.186c-.244-.178-.395-.466-.395-.786V2.6c0-.32.151-.608.395-.786zM14.244 12.83l2.705 2.688-4.073 2.276-4.073 2.276L14.244 12.83zm1-1.66l2.838-2.8 4.153 2.336c.464.26.464.688 0 .948l-4.153 2.336-2.838-2.82zM8.803 4.93l4.073 2.276 4.073 2.276-2.705 2.688L8.803 4.93z" />
              </svg>
              <div className="text-left leading-tight">
                <div className="text-[10px] font-bold tracking-wider uppercase opacity-60">
                  Google Play
                </div>
                <div className="text-sm font-black">
                  Coming Soon
                </div>
              </div>
            </div>
          </div>
        </div>

        </div>
      </div>
    </div>
  </section>
  );
}
