"use client";

import React, { useState, useEffect } from "react";
import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon";

const ROTATOR_SLIDES = [
  "Enjoy your Neighbourhood Living.",
  "Just a Click – For all your needs.",
  "Convenient & safe shopping locally."
];

const OFFERINGS = [
  {
    title: "Elegant Living",
    tag: "Join the #1 Neighbourhood App",
    descr: "Enjoy the comfort of elegant living. Nearle is India's first hyper-local managed platform bringing all amenities and requirements directly to your fingertips.",
    icon: "local_florist",
    color: "from-purple-500/10 to-indigo-500/10 text-primary border-purple-100",
    image: "/nearle people.png",
    isWide: false
  },
  {
    title: "Awareness at a Touch",
    tag: "Hot Deals",
    descr: "Pick hot deals within your neighbourhood. Stay updated on localized sales, discounts, and flash promotions happening today.",
    icon: "local_activity",
    color: "from-amber-500/10 to-orange-500/10 text-amber-700 border-amber-100",
    image: "/images/app-mockup.png",
    isWide: false
  },
  {
    title: "Best of Both Worlds",
    tag: "Convenience & Speed",
    descr: "Enjoy the ease of the World Wide Web, fulfilled entirely by trusted local businesses. Avoid traffic lights, parking hassles, and pollution.",
    icon: "travel_explore",
    color: "from-green-500/10 to-emerald-500/10 text-secondary border-green-100",
    image: "/images/slider-courier-mask-purple-v5.png",
    isWide: false
  },
  {
    title: "Lifestyle Shopping",
    tag: "Exclusive Privileges",
    descr: "Enjoy safe, convenient shopping with custom pricing, resident promotions, and bulk order discounts negotiated for your community.",
    icon: "shopping_bag",
    color: "from-rose-500/10 to-pink-500/10 text-rose-700 border-rose-100",
    image: "/images/cat-pet-essentials.png",
    isWide: false
  },
  {
    title: "Just a Click away",
    tag: "Instant Delivery",
    descr: "Order everything you need in your neighborhood with a single tap. A fast, organized last-mile delivery network ensures prompt fulfillment.",
    icon: "touch_app",
    color: "from-sky-500/10 to-blue-500/10 text-sky-700 border-sky-100",
    image: "/about.png",
    isWide: true
  },
  {
    title: "Amazingly Fresh",
    tag: "Daily Essentials",
    descr: "Get your fresh fruits, farm-fresh vegetables, dairy, and grocery items delivered instantly from verified local green grocers.",
    icon: "eco",
    color: "from-emerald-500/10 to-teal-500/10 text-emerald-700 border-emerald-100",
    image: "/images/cat-daily-essentials.png",
    isWide: false
  },
  {
    title: "Restaurants & Takeaways",
    tag: "Hot Food Nearby",
    descr: "Choose from the best local restaurants and neighborhood eateries close to your home. Hot food delivered with relevance and speed.",
    icon: "restaurant",
    color: "from-orange-500/10 to-red-500/10 text-orange-700 border-orange-100",
    image: "/images/cat-hot-food.png",
    isWide: false
  },
  {
    title: "Never Before Experience",
    tag: "Custom Services",
    descr: "Access custom-tailored local neighborhood services designed to integrate convenience directly into residential society living.",
    icon: "stars",
    color: "from-violet-500/10 to-purple-500/10 text-violet-700 border-violet-100",
    image: "/images/cat-health-wellness.png",
    isWide: false
  },
  {
    title: "Home Services @ Ease",
    tag: "Unified Local Partner",
    descr: "Book certified local service providers at your convenience. From handymen to laundry, pet care to pharmacy delivery, all in one place.",
    icon: "construction",
    color: "from-cyan-500/10 to-blue-500/10 text-cyan-700 border-cyan-100",
    image: "/images/cat-home-services.png",
    isWide: false
  }
];

const STATS = [
  { count: "100+", label: "Verified Restaurants", icon: "restaurant" },
  { count: "100+", label: "Green Grocers", icon: "local_mall" },
  { count: "100+", label: "Home Etailers", icon: "shopping_cart" },
  { count: "100+", label: "Service Providers", icon: "handyman" }
];

const APP_BENEFITS = [
  {
    icon: "store",
    title: "Nearby Stores",
    microcopy: "Support local shopkeepers",
    text: "Find and explore the unique shops in your immediate area.",
    iconClass: "bg-amber-500/10 border-amber-500/20 text-amber-300",
    cardClass: "lg:translate-x-[-10px] lg:-translate-y-2 lg:rotate-[-1deg]",
    bgVisual: "store",
    bgVisualClass: "text-amber-500/5"
  },
  {
    icon: "favorite",
    title: "Save Favourites",
    microcopy: "Your daily picks, one tap away",
    text: "Keep your trusted local merchants always within reach.",
    iconClass: "bg-rose-500/10 border-rose-500/20 text-rose-300",
    cardClass: "lg:translate-x-[10px] lg:translate-y-0 lg:rotate-[1deg]",
    bgVisual: "favorite",
    bgVisualClass: "text-rose-500/5"
  },
  {
    icon: "local_offer",
    title: "Local Offers",
    microcopy: "Deals from people you know",
    text: "Unlock exclusive deals directly from nearby neighbourhood shops.",
    iconClass: "bg-emerald-500/10 border-emerald-500/20 text-emerald-300",
    cardClass: "lg:translate-x-[-5px] lg:translate-y-2 lg:rotate-[-0.5deg]",
    bgVisual: "local_offer",
    bgVisualClass: "text-emerald-500/5"
  }
];

export default function PeoplePage() {
  const [slideIndex, setSlideIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSlideIndex((prev) => (prev + 1) % ROTATOR_SLIDES.length);
    }, 3000);
    return () => clearInterval(timer);
  }, []);

  return (
    <main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-20 md:pt-24 lg:pt-28 pb-4 md:pb-6 lg:pb-8">
      <div className="page-frame">
        {/* ─── Hero Section ─── */}
        <section className="hero-section relative overflow-hidden rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] px-6 md:px-12 py-24 md:py-32 text-center">
          {/* Background Image with Overlay */}
          <div className="hero-background select-none pointer-events-none">
            <Image
              src="/nearle people.png"
              alt="Nearle People Background"
              fill
              sizes="100vw"
              className="object-cover object-right"
              priority
            />
          </div>

          <div className="hero-content relative z-10 mx-auto max-w-container-max">
            <p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
              Nearle for People
            </p>

            <h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight max-w-4xl mx-auto">
              <span>Redefining Local Living.</span>
              <br />
              <span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
                {ROTATOR_SLIDES[slideIndex]}
              </span>
            </h1>
          </div>
        </section>

        {/* ─── 9 Core Offerings Bento Grid ─── */}
        <section className="experience-section bg-[#F3E8F6] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20 text-center">
          <div className="mb-16">
            <span className="text-label-sm font-black text-primary uppercase tracking-widest">
              What we offer
            </span>
            <h2 className="font-display text-3xl font-black text-brand-dark mt-2">
              Everything You Need, Just a Click Away
            </h2>
            <p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
              Discover fresh produce, delicious meals, and daily home services from trusted neighborhood businesses.
            </p>
          </div>

          <div className="experience-grid">
            {OFFERINGS.map((offering) => (
              <article
                key={offering.title}
                className="experience-card"
              >
                <Image
                  src={offering.image}
                  alt={offering.title}
                  fill
                  sizes="(max-width: 1023px) 100vw, 33vw"
                  className="experience-card__image"
                />
                <div className="experience-card__overlay" />
                <div className="experience-card__content text-left">
                  <div className="experience-card__icon">
                    <MaterialIcon icon={offering.icon} size={22} className="text-white" />
                  </div>
                  <h3>{offering.title}</h3>
                  <p>{offering.descr}</p>
                </div>
              </article>
            ))}
          </div>
        </section>

        {/* ─── Localized Stats Block ─── */}
        <section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20 text-center">
          <div className="mb-12">
            <span className="text-label-sm font-black text-primary uppercase tracking-widest">
              Nearle Network
            </span>
            <h2 className="font-display text-2xl font-black text-brand-dark mt-1">
              Join the #1 Neighbourhood App
            </h2>
            <p className="text-body-sm text-on-surface-variant mt-2">
              Bringing local stores to your doorstep instantly.
            </p>
          </div>

          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
            {STATS.map((s) => (
              <div
                key={s.label}
                className="bg-white rounded-2xl p-6 border border-outline-variant/10 shadow-sm flex flex-col items-center text-center"
              >
                <div className="w-10 h-10 rounded-full bg-primary/5 text-primary flex items-center justify-center mb-4">
                  <MaterialIcon icon={s.icon} size={20} />
                </div>
                <h4 className="text-3xl font-display font-black text-brand-dark">{s.count}</h4>
                <p className="text-[11px] font-bold text-on-surface-variant/80 mt-1 uppercase tracking-wider">
                  {s.label}
                </p>
              </div>
            ))}
          </div>
        </section>

        {/* ─── Ready to Download Section ─── */}
        <section id="download-section" className="bg-gradient-to-br from-[#4d046a] via-[#1c0228] to-[#0d0114] rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden p-8 md:p-12 lg:p-14 relative text-center">
          {/* Subtle ambient light gradient overlays */}
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_-20%,rgba(224,200,247,0.15),transparent_70%)] pointer-events-none" />
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_80%,rgba(123,248,161,0.06),transparent_50%)] pointer-events-none" />

          {/* Background dot pattern */}
          <div
            className="absolute inset-0 opacity-[0.015] pointer-events-none"
            style={{
              backgroundImage: "radial-gradient(circle at 50% 50%, white 1px, transparent 1px)",
              backgroundSize: "20px 20px",
            }}
          />

          {/* Background layered glow effects */}
          <div className="absolute -left-20 -top-20 w-96 h-96 bg-[#bd34fe]/10 rounded-full blur-[100px] pointer-events-none -z-0" />
          <div className="absolute right-10 bottom-10 w-96 h-96 bg-brand-accent/5 rounded-full blur-[100px] pointer-events-none -z-0" />
          
          {/* Soft blurred glow behind middle cards */}
          <div className="absolute left-[35%] top-[15%] w-96 h-96 bg-[#bd34fe]/10 rounded-full blur-[90px] pointer-events-none -z-0 hidden lg:block" />

          {/* Subtle route connector dotted line */}
          <svg className="absolute inset-0 w-full h-full pointer-events-none stroke-white/5 fill-none -z-0 hidden lg:block" viewBox="0 0 1200 600" preserveAspectRatio="none">
            <path d="M 100,130 C 250,60 380,120 480,180 C 580,240 680,180 820,130 C 950,80 1100,130 1100,220" strokeDasharray="5,5" strokeWidth="1.5" />
          </svg>

          {/* Decorative human local-commerce elements */}
          <div className="absolute left-[8%] top-[22%] text-white/5 pointer-events-none select-none -z-0 animate-pulse [animation-duration:8s] hidden lg:block">
            <div className="flex items-center gap-1.5 bg-white/[0.02] border border-white/5 px-2.5 py-1 rounded-full backdrop-blur-sm">
              <MaterialIcon icon="location_on" size={16} className="text-brand-accent/40" />
              <span className="text-[10px] font-bold text-white/30 tracking-wider">Nearby</span>
            </div>
          </div>
          <div className="absolute left-[42%] top-[8%] text-white/4 pointer-events-none select-none -z-0 animate-pulse [animation-duration:9s] hidden lg:block">
            <div className="flex items-center gap-1.5 bg-white/[0.02] border border-white/5 px-2.5 py-1 rounded-full backdrop-blur-sm">
              <MaterialIcon icon="shopping_basket" size={16} className="text-amber-300/40" />
              <span className="text-[10px] font-bold text-white/30 tracking-wider">Grocery</span>
            </div>
          </div>
          <div className="absolute right-[44%] bottom-[12%] text-white/4 pointer-events-none select-none -z-0 animate-pulse [animation-duration:10s] hidden lg:block">
            <div className="flex items-center gap-1.5 bg-white/[0.02] border border-white/5 px-2.5 py-1 rounded-full backdrop-blur-sm">
              <MaterialIcon icon="restaurant" size={16} className="text-orange-400/40" />
              <span className="text-[10px] font-bold text-white/30 tracking-wider">Eats</span>
            </div>
          </div>


          {/* ──────────────────────────────────────────────────────── */}
          {/* 🖥️ DESKTOP LAYOUT (lg and above) */}
          {/* ──────────────────────────────────────────────────────── */}
          <div className="hidden lg:grid grid-cols-12 items-center gap-10 relative z-10 w-full">
            {/* Left Column: Copy & Download badges (Desktop) */}
            <div className="lg:col-span-5 text-left flex flex-col justify-between h-full lg:border-r lg:border-white/10 lg:pr-10">
              <div>
                <span className="text-label-sm font-black text-brand-accent uppercase tracking-[0.2em]">
                  NEARLE APP
                </span>
                <h2 className="font-display text-3xl md:text-5xl font-black mt-2 mb-4 tracking-tight text-white leading-tight">
                  Your Neighbourhood, <br className="hidden lg:block"/>Now in Your Pocket.
                </h2>
                <p className="text-lg md:text-xl text-white/90 font-bold mb-3 leading-relaxed">
                  Browse nearby stores, save your favourites, and order everyday essentials with ease.
                </p>
                <p className="text-sm md:text-base text-white/75 mb-6 leading-relaxed">
                  Discover groceries, medicines, food, and local offers from stores you already know and trust.
                </p>
              </div>

              {/* App badges (Desktop Only) */}
              <div className="flex flex-col gap-2 mt-8">
                <div className="flex flex-wrap gap-4">
                  <div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white select-none hover:bg-white/[0.12] hover:border-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer shadow-md">
                    <MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent group-hover:scale-110 transition-transform duration-300" />
                    <div className="text-left leading-tight">
                      <div className="text-[9px] uppercase font-black tracking-wider text-brand-accent/70">Coming Soon</div>
                      <div className="text-sm font-black text-white group-hover:text-brand-accent transition-colors duration-300">App Store</div>
                    </div>
                  </div>
                  <div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white select-none hover:bg-white/[0.12] hover:border-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer shadow-md">
                    <MaterialIcon icon="play_arrow" size={24} className="text-brand-accent group-hover:scale-110 transition-transform duration-300" />
                    <div className="text-left leading-tight">
                      <div className="text-[9px] uppercase font-black tracking-wider text-brand-accent/70">Coming Soon</div>
                      <div className="text-sm font-black text-white group-hover:text-brand-accent transition-colors duration-300">Google Play</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Middle Column: Benefit Cards (Desktop Only - staggered layout) */}
            <div className="lg:col-span-3 flex flex-col justify-center gap-5">
              {APP_BENEFITS.map((b) => (
                <div key={b.title} className={`relative overflow-hidden bg-white/[0.06] backdrop-blur-md border border-white/10 rounded-2xl py-4 px-5 flex gap-4 items-center hover:bg-white/[0.1] hover:border-white/20 hover:scale-[1.02] transition-all duration-300 shadow-lg shadow-black/10 ${b.cardClass}`}>
                  <div className={`absolute -right-4 -bottom-4 opacity-40 pointer-events-none select-none ${b.bgVisualClass}`}>
                    <MaterialIcon icon={b.bgVisual} size={72} />
                  </div>
                  <div className={`flex-shrink-0 w-11 h-11 rounded-xl flex items-center justify-center border shadow-inner ${b.iconClass}`}>
                    <MaterialIcon icon={b.icon} size={20} />
                  </div>
                  <div className="text-left relative z-10">
                    <h4 className="text-base md:text-lg font-black text-white leading-none">{b.title}</h4>
                    <p className="text-[9px] text-white/50 font-bold tracking-wider uppercase mt-1 mb-1.5">{b.microcopy}</p>
                    <p className="text-xs text-white/85 font-semibold leading-relaxed">{b.text}</p>
                  </div>
                </div>
              ))}
            </div>

            {/* Right Column: Phone Mockup (Desktop Only) */}
            <div className="relative shrink-0 lg:col-span-4 max-w-[315px] mx-auto flex justify-center lg:translate-x-[-12px]">
              {/* Subtle soft glow behind phone */}
              <div className="absolute inset-0 bg-[#bd34fe]/25 rounded-full blur-[60px] opacity-40 -z-10 animate-pulse [animation-duration:5s]" />

              {/* Label above phone */}
              <div className="absolute -top-6 left-1/2 -translate-x-1/2 bg-brand-accent/20 border border-brand-accent/30 text-brand-accent text-[9px] font-black uppercase tracking-[0.2em] px-3 py-1 rounded-full whitespace-nowrap z-20">
                Made for your neighbourhood
              </div>

              {/* iPhone style phone container */}
              <div className="bg-[#120217] w-full aspect-[9/19] rounded-[2.5rem] border-[6px] border-white/10 shadow-2xl relative overflow-hidden flex flex-col justify-between p-4 ring-4 ring-white/5">
                {/* Status Bar */}
                <div className="flex justify-between items-center text-white/70 text-[10px] font-bold px-1 mb-2">
                  <span>Good evening 👋</span>
                  <div className="flex items-center gap-1 opacity-60">
                    <MaterialIcon icon="signal_cellular_alt" size={12} />
                    <MaterialIcon icon="battery_full" size={12} />
                  </div>
                </div>

                {/* Mock Search Field */}
                <div className="bg-white/10 border border-white/10 rounded-xl px-3 py-2 flex items-center gap-2 text-white/60 text-xs mt-1">
                  <MaterialIcon icon="search" size={14} className="text-white/40" />
                  <span>Search nearby stores</span>
                </div>

                {/* Mock Category Icons */}
                <div className="grid grid-cols-3 gap-2 mt-4">
                  <div className="bg-white/5 border border-white/5 rounded-xl p-2 flex flex-col items-center text-center">
                    <MaterialIcon icon="shopping_basket" size={18} className="text-brand-accent" />
                    <span className="text-[9px] font-bold text-white/80 mt-1">Grocery</span>
                  </div>
                  <div className="bg-white/5 border border-white/5 rounded-xl p-2 flex flex-col items-center text-center">
                    <MaterialIcon icon="medical_services" size={18} className="text-purple-400" />
                    <span className="text-[9px] font-bold text-white/80 mt-1">Pharmacy</span>
                  </div>
                  <div className="bg-white/5 border border-white/5 rounded-xl p-2 flex flex-col items-center text-center">
                    <MaterialIcon icon="restaurant" size={18} className="text-orange-400" />
                    <span className="text-[9px] font-bold text-white/80 mt-1">Food</span>
                  </div>
                </div>

                {/* Mock Store Cards */}
                <div className="space-y-2 mt-4 my-auto">
                  <div className="bg-white/10 border border-white/10 rounded-xl p-2.5 flex items-center gap-3">
                    <div className="w-8 h-8 rounded-lg bg-brand-accent/20 flex items-center justify-center shrink-0">
                      <MaterialIcon icon="store" size={16} className="text-brand-accent" />
                    </div>
                    <div className="text-left leading-tight">
                      <div className="text-xs font-black text-white">Daily Groceries</div>
                      <div className="text-[9px] text-white/60">Verified Store • Nearby</div>
                    </div>
                  </div>
                  
                  <div className="bg-white/10 border border-white/10 rounded-xl p-2.5 flex items-center gap-3">
                    <div className="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center shrink-0">
                      <MaterialIcon icon="health_and_safety" size={16} className="text-purple-300" />
                    </div>
                    <div className="text-left leading-tight">
                      <div className="text-xs font-black text-white">Health & Care</div>
                      <div className="text-[9px] text-white/60">Verified Pharmacy • Nearby</div>
                    </div>
                  </div>
                </div>

                {/* Subtitle / Nearle App Label */}
                <div className="mt-4 pt-2 border-t border-white/5 text-center">
                  <p className="text-[9px] text-brand-accent font-black tracking-wide uppercase">Nearle App</p>
                  <p className="text-[10px] text-white/80 mt-0.5">Your nearby stores, all in one place.</p>
                </div>

                {/* Mock Bottom Navigation */}
                <div className="flex justify-around items-center text-white/40 pt-2 pb-1 border-t border-white/5 mt-2">
                  <MaterialIcon icon="home" size={14} className="text-brand-accent" />
                  <MaterialIcon icon="search" size={14} />
                  <MaterialIcon icon="favorite" size={14} />
                  <MaterialIcon icon="person" size={14} />
                </div>

                <div className="h-1 w-1/3 bg-white/20 rounded-full mx-auto mt-2 shrink-0" />
              </div>

              {/* Overlapping alert bubble */}
              <div className="absolute -left-16 bottom-[15%] bg-white/95 backdrop-blur-md p-3.5 rounded-2xl shadow-xl border border-outline-variant/10 flex items-center gap-3 animate-float max-w-[210px] z-20 hover:scale-105 transition-transform duration-300 pointer-events-none">
                <div className="flex-shrink-0 w-7 h-7 rounded-full bg-secondary/10 flex items-center justify-center">
                  <MaterialIcon
                    icon="check_circle"
                    size={16}
                    className="text-secondary"
                  />
                </div>
                <div className="text-left text-brand-dark">
                  <p className="text-xs font-black leading-tight">Order Confirmed</p>
                  <p className="text-[10px] text-on-surface-variant font-semibold mt-0.5 leading-tight">Your local store is preparing your order</p>
                </div>
              </div>
            </div>
          </div>

          {/* ──────────────────────────────────────────────────────── */}
          {/* 📱 MOBILE / TABLET LAYOUT (below lg) */}
          {/* ──────────────────────────────────────────────────────── */}
          <div className="lg:hidden flex flex-col items-center text-center relative z-10 w-full">
            {/* Heading and Description */}
            <span className="text-label-sm font-black text-brand-accent uppercase tracking-[0.2em]">
              NEARLE APP
            </span>
            <h2 className="font-display text-3xl md:text-4xl font-black mt-2 mb-4 tracking-tight text-white leading-tight">
              Your Neighbourhood, <br />Now in Your Pocket.
            </h2>
            <p className="text-base md:text-lg text-white/90 font-bold mb-3 max-w-md">
              Browse nearby stores, save your favourites, and order everyday essentials with ease.
            </p>
            <p className="text-xs md:text-sm text-white/70 mb-6 max-w-md">
              Discover groceries, medicines, food, and local offers from stores you already know and trust.
            </p>

            {/* Made for your neighbourhood eyebrow */}
            <div className="mb-4 mt-6 bg-brand-accent/20 border border-brand-accent/30 text-brand-accent text-[9px] font-black uppercase tracking-[0.2em] px-3 py-1 rounded-full whitespace-nowrap">
              Made for your neighbourhood
            </div>

            {/* Compact Phone Preview */}
            <div className="bg-[#120217] w-full max-w-[250px] md:max-w-[280px] aspect-[9/15.5] rounded-[2.2rem] border-[5px] border-white/10 shadow-2xl relative overflow-hidden flex flex-col justify-between p-3 ring-4 ring-white/5 my-4">
              {/* Status Bar */}
              <div className="flex justify-between items-center text-white/70 text-[9px] font-bold px-1 mb-1">
                <span>Good evening 👋</span>
                <div className="flex items-center gap-1 opacity-60">
                  <MaterialIcon icon="signal_cellular_alt" size={10} />
                  <MaterialIcon icon="battery_full" size={10} />
                </div>
              </div>

              {/* Mock Search Field */}
              <div className="bg-white/10 border border-white/10 rounded-xl px-2.5 py-1.5 flex items-center gap-2 text-white/60 text-[10px] mt-0.5">
                <MaterialIcon icon="search" size={12} className="text-white/40" />
                <span>Search nearby stores</span>
              </div>

              {/* Mock Category Icons */}
              <div className="grid grid-cols-3 gap-1 mt-2">
                <div className="bg-white/5 border border-white/5 rounded-xl p-1.5 flex flex-col items-center text-center">
                  <MaterialIcon icon="shopping_basket" size={14} className="text-brand-accent" />
                  <span className="text-[7.5px] font-bold text-white/80 mt-0.5">Grocery</span>
                </div>
                <div className="bg-white/5 border border-white/5 rounded-xl p-1.5 flex flex-col items-center text-center">
                  <MaterialIcon icon="medical_services" size={14} className="text-purple-400" />
                  <span className="text-[7.5px] font-bold text-white/80 mt-0.5">Pharmacy</span>
                </div>
                <div className="bg-white/5 border border-white/5 rounded-xl p-1.5 flex flex-col items-center text-center">
                  <MaterialIcon icon="restaurant" size={14} className="text-orange-400" />
                  <span className="text-[7.5px] font-bold text-white/80 mt-0.5">Food</span>
                </div>
              </div>

              {/* Mock Store Cards (Only One Card on Mobile) */}
              <div className="space-y-1.5 mt-2 my-auto">
                <div className="bg-white/10 border border-white/10 rounded-xl p-2 flex items-center gap-2.5">
                  <div className="w-7 h-7 rounded-lg bg-brand-accent/20 flex items-center justify-center shrink-0">
                    <MaterialIcon icon="store" size={12} className="text-brand-accent" />
                  </div>
                  <div className="text-left leading-tight">
                    <div className="text-[10px] font-black text-white">Daily Groceries</div>
                    <div className="text-[8px] text-white/60">Verified Store • Nearby</div>
                  </div>
                </div>
              </div>

              {/* Subtitle / Nearle App Label */}
              <div className="mt-2 pt-1 border-t border-white/5 text-center">
                <p className="text-[8px] text-brand-accent font-black tracking-wide uppercase">Nearle App</p>
                <p className="text-[8.5px] text-white/80 mt-0.5">Your nearby stores, all in one place.</p>
              </div>

              {/* Mock Bottom Navigation */}
              <div className="flex justify-around items-center text-white/40 pt-1.5 pb-0.5 border-t border-white/5 mt-1">
                <MaterialIcon icon="home" size={12} className="text-brand-accent" />
                <MaterialIcon icon="search" size={12} />
                <MaterialIcon icon="favorite" size={12} />
                <MaterialIcon icon="person" size={12} />
              </div>

              <div className="h-0.5 w-1/3 bg-white/20 rounded-full mx-auto mt-1 shrink-0" />
            </div>

            {/* Order Confirmation Card */}
            <div className="w-full max-w-[320px] bg-white/95 backdrop-blur-md p-3.5 rounded-2xl shadow-xl border border-outline-variant/10 flex items-center gap-3 mt-4">
              <div className="flex-shrink-0 w-7 h-7 rounded-full bg-secondary/10 flex items-center justify-center">
                <MaterialIcon
                  icon="check_circle"
                  size={16}
                  className="text-secondary"
                />
              </div>
              <div className="text-left text-brand-dark">
                <p className="text-xs font-black leading-tight">Order Confirmed</p>
                <p className="text-[10px] text-on-surface-variant font-semibold mt-0.5 leading-tight">Your local store is preparing your order</p>
              </div>
            </div>

            {/* Compact Benefits List */}
            <div className="w-full max-w-[340px] md:max-w-[400px] flex flex-col gap-3 mt-6">
              {APP_BENEFITS.map((b) => (
                <div key={b.title} className="bg-white/[0.04] border border-white/5 rounded-xl p-3 flex gap-3 items-center text-left">
                  <div className={`flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center border shadow-inner ${b.iconClass}`}>
                    <MaterialIcon icon={b.icon} size={16} />
                  </div>
                  <div>
                    <h4 className="text-sm font-black text-white leading-tight">{b.title}</h4>
                    <p className="text-xs text-white/70 leading-relaxed mt-0.5">{b.text}</p>
                  </div>
                </div>
              ))}
            </div>

            {/* Coming Soon Download Buttons */}
            <div className="flex flex-col items-center gap-2 mt-8 w-full">
              <div className="flex flex-col sm:flex-row gap-4 justify-center w-full max-w-[320px] sm:max-w-none">
                <div className="group h-13 w-full sm:w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center sm:justify-start gap-3 bg-white/[0.06] backdrop-blur-md text-white select-none hover:bg-white/[0.12] hover:border-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer shadow-md">
                  <MaterialIcon icon="phone_iphone" size={20} className="text-brand-accent group-hover:scale-110 transition-transform duration-300" />
                  <div className="text-left leading-tight">
                    <div className="text-[8px] uppercase font-black tracking-wider text-brand-accent/70">Coming Soon</div>
                    <div className="text-xs font-black text-white group-hover:text-brand-accent transition-colors duration-300">App Store</div>
                  </div>
                </div>
                <div className="group h-13 w-full sm:w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center sm:justify-start gap-3 bg-white/[0.06] backdrop-blur-md text-white select-none hover:bg-white/[0.12] hover:border-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer shadow-md">
                  <MaterialIcon icon="play_arrow" size={20} className="text-brand-accent group-hover:scale-110 transition-transform duration-300" />
                  <div className="text-left leading-tight">
                    <div className="text-[8px] uppercase font-black tracking-wider text-brand-accent/70">Coming Soon</div>
                    <div className="text-xs font-black text-white group-hover:text-brand-accent transition-colors duration-300">Google Play</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </main>
  );
}
