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

const FEATURES = [
  {
    title: "Eco-Friendly Routing",
    desc: "Our routing software matches you to stores within 2km to minimize delivery times and energy.",
    icon: "near_me",
  },
  {
    title: "Live Courier Tracking",
    desc: "See your neighborhood runner on a live map as they collect your essentials and ride to your gate.",
    icon: "map",
  },
  {
    title: "Secure Digital Payments",
    desc: "Enjoy quick checkouts via UPI, credit/debit cards, and integrated wallet coins with cashbacks.",
    icon: "payments",
  },
];

export function AppPromo() {
  return (
    <section
      id="download"
      className="py-24 px-margin-mobile md:px-margin-desktop bg-brand-cream overflow-hidden border-t border-outline-variant/10"
    >
      <div className="max-w-container-max mx-auto relative">
        {/* Background Dot pattern */}
        <div
          className="absolute inset-0 opacity-[0.03] pointer-events-none"
          style={{
            backgroundImage: "radial-gradient(#120217 2px, transparent 2px)",
            backgroundSize: "24px 24px",
          }}
        />

        <div className="grid md:grid-cols-12 gap-12 items-center relative z-10">
          
          {/* Left Column: Typography, benefits, download actions (7 cols) */}
          <div className="md:col-span-7">
            <span className="text-label-sm text-primary uppercase tracking-widest font-black bg-primary/5 px-3.5 py-1.5 rounded-full border border-primary/10">
              Download Nearle Mobile
            </span>
            
            <h2 className="text-display text-brand-dark mt-6 mb-6 leading-[1.1] tracking-tight">
              Get More With Our <br />
              <span className="text-primary font-black">Mobile Application</span>
            </h2>
            
            <p className="text-body-lg text-on-surface-variant mb-10 max-w-lg leading-relaxed">
              Experience the fastest way to order groceries, hot food, and emergency home maintenance. Download the app today for live updates and community coins.
            </p>

            {/* Benefit Bullets */}
            <div className="space-y-6 mb-10">
              {FEATURES.map((item) => (
                <div key={item.title} className="flex gap-4">
                  <div className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-accent/20 flex items-center justify-center">
                    <MaterialIcon icon={item.icon} size={18} className="text-brand-dark" />
                  </div>
                  <div>
                    <h4 className="text-label-md font-bold text-brand-dark">{item.title}</h4>
                    <p className="text-body-md text-on-surface-variant mt-0.5 leading-relaxed">
                      {item.desc}
                    </p>
                  </div>
                </div>
              ))}
            </div>

            {/* Store Badges */}
            <div className="flex flex-wrap gap-4 mt-8">
              <a
                href="https://apps.apple.com"
                target="_blank"
                rel="noopener noreferrer"
                className="h-14 border border-brand-dark/20 rounded-2xl hover:bg-brand-dark hover:text-white transition-all duration-300 px-6 py-2 flex items-center gap-3 group hover:-translate-y-1 hover:shadow-lg bg-white"
              >
                <svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current text-brand-dark group-hover:text-white transition-colors" 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-[9px] opacity-75 font-semibold tracking-wider uppercase">
                    Download on the
                  </div>
                  <div className="text-headline-md font-black -mt-0.5">
                    App Store
                  </div>
                </div>
              </a>

              <a
                href="https://play.google.com/store/apps/details?id=com.nearle.gear"
                target="_blank"
                rel="noopener noreferrer"
                className="h-14 border border-brand-dark/20 rounded-2xl hover:bg-brand-dark hover:text-white transition-all duration-300 px-6 py-2 flex items-center gap-3 group hover:-translate-y-1 hover:shadow-lg bg-white"
              >
                <svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current text-brand-dark group-hover:text-white transition-colors" 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-[9px] opacity-75 font-semibold tracking-wider uppercase">
                    GET IT ON
                  </div>
                  <div className="text-headline-md font-black -mt-0.5">
                    Google Play
                  </div>
                </div>
              </a>
            </div>
          </div>

          {/* Right Column: Phone Mockup showcase (5 cols) */}
          <div className="md:col-span-5 flex justify-center md:justify-end relative">
            {/* Background glowing circle */}
            <div className="absolute w-80 h-80 bg-brand-accent/10 rounded-full blur-2xl pointer-events-none -right-10 top-10" />

            <div className="relative w-full max-w-[270px] animate-float">
              {/* iPhone style phone container */}
              <div className="bg-[#120217] w-full aspect-[9/18.5] rounded-[3rem] border-[6px] border-brand-dark-surface shadow-2xl relative overflow-hidden ring-4 ring-outline-variant/15">
                {/* Speaker notch */}
                <div className="absolute top-2.5 left-1/2 -translate-x-1/2 w-24 h-4 bg-black rounded-full z-20 flex items-center justify-center">
                  <div className="w-12 h-1 bg-zinc-800 rounded-full" />
                </div>

                <Image
                  src="/images/app-mockup.png"
                  alt="Nearle mobile app interface showing neighborhood services"
                  width={360}
                  height={760}
                  className="w-full h-full object-cover"
                />
              </div>

              {/* Overlapping alert bubble */}
              <div className="absolute -left-10 top-1/4 bg-white/95 backdrop-blur-md p-4 rounded-2xl shadow-2xl border border-outline-variant/20 hidden lg:block hover:scale-105 transition-transform duration-300">
                <div className="flex items-center gap-3">
                  <div className="w-8 h-8 rounded-full bg-secondary-fixed flex items-center justify-center">
                    <MaterialIcon
                      icon="check_circle"
                      size={18}
                      className="text-secondary"
                    />
                  </div>
                  <div>
                    <p className="text-label-md font-black text-brand-dark">Order Dispatched</p>
                    <p className="text-[10px] text-on-surface-variant font-medium">Runner is arriving in 4 mins</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

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