import React from "react";
import Image from "next/image";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Nearle for People",
  description:
    "Discover verified local stores, save your favourite merchants, and order everyday essentials with superfast local delivery from shops within your 2km neighbourhood.",
};

const OFFERINGS = [
  {
    title: "Elegant Living",
    tag: "Your 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 LOCAL_STATS = [
  { count: "Local", label: "Verified Restaurants", icon: "restaurant" },
  { count: "Fresh", label: "Green Grocers", icon: "local_mall" },
  { count: "Ready", label: "Home Stores", icon: "shopping_cart" },
  { count: "Trusted", 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"
  }
];

const HERO_STATS = [
  { title: "Verified Local Stores", icon: "store", desc: "Growing local commerce" },
  { title: "2km Neighbourhood", icon: "location_on", desc: "Hyperlocal service radius" },
  { title: "Happy Customers", icon: "mood", desc: "Growing neighbourhood community" },
  { title: "Trusted Platform", icon: "star", desc: "Loved by local shoppers" }
];

export default function PeoplePage() {
  const collageCards = [
    { text: "Discover Nearby", icon: "explore" },
    { text: "Save Favourites", icon: "favorite" },
    { text: "Order Anytime", icon: "shopping_bag" }
  ];

  return (
    <PremiumPageShell>
      {/* ─── Hero Section ─── */}
      <section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
        {/* TWO-COLUMN GRID */}
        <div className="grid grid-cols-1 lg:grid-cols-[45%_55%] items-center gap-10 lg:gap-6 px-6 md:px-12 lg:px-16 pb-12 border-b border-[#6330D6]/10">
          
          {/* Left Column: Copy & Actions */}
          <div className="flex flex-col text-left max-w-xl">
            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit">
              Nearle for People
            </span>

            <h1 className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-black text-[#16001D] leading-[1.1] tracking-tight">
              Your Neighbourhood,
              <br />
              Now in Your <span className="text-[#6330D6]">Pocket.</span>
            </h1>

            <p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
              Discover verified local stores, save your favorite merchants, and order everyday items with superfast local fulfillment.
            </p>

            <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
              <a
                href="#download-section"
                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
              >
                Get the App
              </a>
              <Link
                href="/"
                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
              >
                Explore Stores
              </Link>
            </div>
          </div>

          {/* Right Column: Visual Collage */}
          <div className="w-full">
            <HeroVisualCollage
              centerImage="/images/app-mockup.png"
              leftImage="/images/cat-hot-food.png"
              rightImage="/images/cat-health-wellness.png"
              glassCards={collageCards}
              isPhoneCenter={true}
            />
          </div>
        </div>

        {/* BOTTOM HERO STATS */}
        <div className="px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
          <FeatureStatsRow items={HERO_STATS} />
        </div>
      </section>

      {/* ─── Bento Grid of Offerings ─── */}
      <section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD] border-b border-[#6330D6]/10">
        <div className="mb-10 xl:mb-8">
          <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
            What we offer
          </span>
          <h2 className="font-display text-3xl font-black text-[#16001D] mt-4">
            Everything You Need, Just a Click Away
          </h2>
          <p className="mx-auto mt-3 max-w-xl text-sm md:text-base text-[#5E5866]">
            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${offering.isWide ? " experience-card--wide" : ""}`}
            >
              <Image
                src={offering.image}
                alt={offering.title}
                fill
                sizes={offering.isWide ? "(max-width: 1023px) 100vw, 66vw" : "(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="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
        <div className="mb-10 xl:mb-8">
          <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
            Nearle Network
          </span>
          <h2 className="font-display text-2xl font-black text-[#16001D] mt-4">
            The Neighbourhood App
          </h2>
          <p className="text-xs md:text-sm text-[#5E5866] mt-2">
            Bringing local stores to your doorstep instantly.
          </p>
        </div>

        <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
          {LOCAL_STATS.map((s) => (
            <div
              key={s.label}
              className="bg-white rounded-2xl p-6 border border-[#6330D6]/10 shadow-[0_4px_16px_rgba(99,48,214,0.01)] flex flex-col items-center text-center group hover:scale-[1.01] transition-transform duration-200"
            >
              <div className="w-10 h-10 rounded-full bg-[#6330D6]/5 text-[#6330D6] flex items-center justify-center mb-4">
                <MaterialIcon icon={s.icon} size={20} />
              </div>
              <h4 className="text-3xl font-display font-black text-[#16001D]">{s.count}</h4>
              <p className="text-[10px] font-bold text-[#5E5866] mt-1.5 uppercase tracking-wider">
                {s.label}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* ─── Ready to Download Section ─── */}
      <section className="bg-white px-2 pt-2 pb-2 md:px-3 md:pt-3 md:pb-3 lg:px-4 lg:pt-4 lg:pb-4 xl:px-5 xl:pt-4 xl:pb-4 2xl:px-6 2xl:pb-5">
      <section id="download-section" className="relative w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#16001D] to-[#25002F] p-8 text-center text-white md:p-10 lg:p-12 xl:p-10">
        {/* Subtle glow layers */}
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_-20%,rgba(99,48,214,0.15),transparent_70%)] pointer-events-none" />
        
        {/* DESKTOP LAYOUT */}
        <div className="hidden lg:grid grid-cols-12 items-center gap-10 relative z-10 w-full">
          {/* Left Column: Copy & Download badges */}
          <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-[10px] 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 />Now in Your Pocket.
              </h2>
              <p className="text-lg 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-xs text-white/75 mb-6 leading-relaxed">
                Discover groceries, medicines, food, and local offers from stores you already know and trust.
              </p>
            </div>

            <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 hover:bg-white/[0.12] transition-all duration-300 shadow-md">
                  <MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent group-hover:scale-110 transition-transform" />
                  <div className="text-left leading-tight">
                    <div className="text-[9px] uppercase font-black text-brand-accent/70">Available on</div>
                    <div className="text-sm font-black text-white">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 hover:bg-white/[0.12] transition-all duration-300 shadow-md">
                  <MaterialIcon icon="play_arrow" size={24} className="text-brand-accent group-hover:scale-110 transition-transform" />
                  <div className="text-left leading-tight">
                    <div className="text-[9px] uppercase font-black text-brand-accent/70">Available on</div>
                    <div className="text-sm font-black text-white">Google Play</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Middle Column: Benefit Cards */}
          <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] border border-white/10 rounded-2xl py-4 px-5 flex gap-4 items-center shadow-lg ${b.cardClass}`}>
                <div className={`absolute -right-4 -bottom-4 opacity-20 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 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">{b.microcopy}</p>
                  <p className="text-xs text-white/85 leading-relaxed">{b.text}</p>
                </div>
              </div>
            ))}
          </div>

          {/* Right Column: Phone Mockup */}
          <div className="relative shrink-0 lg:col-span-4 max-w-[315px] mx-auto flex justify-center lg:translate-x-[-12px]">
            <div className="absolute inset-0 bg-[#bd34fe]/10 rounded-full blur-[60px] opacity-40 -z-10" />

            <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">
              <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>

              <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>

              <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>

              <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>

              <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>

              <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>

            <div className="absolute -left-16 bottom-[15%] bg-white/95 p-3.5 rounded-2xl shadow-xl border border-outline-variant/10 flex items-center gap-3 max-w-[210px] z-20 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">Preparing your order</p>
              </div>
            </div>
          </div>
        </div>

        {/* MOBILE LAYOUT */}
        <div className="lg:hidden flex flex-col items-center text-center relative z-10 w-full">
          <span className="text-[10px] 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-sm text-white/90 font-bold mb-3 max-w-md">
            Browse nearby stores, save your favourites, and order everyday essentials with ease.
          </p>

          <div className="bg-[#120217] w-full max-w-[240px] 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">
            <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>

            <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 stores</span>
            </div>

            <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>

            <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 • Nearby</div>
                </div>
              </div>
            </div>

            <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 stores near you.</p>
            </div>

            <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>

          <div className="w-full max-w-[320px] bg-white/95 p-3 flex items-center gap-3 rounded-2xl shadow-lg border border-outline-variant/10">
            <div className="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">Order Confirmed</p>
              <p className="text-[10px] text-on-surface-variant">Preparing your order</p>
            </div>
          </div>

          <div className="flex flex-col gap-3.5 mt-6 w-full max-w-[320px]">
            {APP_BENEFITS.map((b) => (
              <div key={b.title} className="bg-white/[0.04] border border-white/5 rounded-xl p-3.5 flex gap-3.5 items-center text-left">
                <div className={`flex-shrink-0 w-[34px] h-[34px] 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>

          <div className="flex flex-col sm:flex-row gap-3 mt-8 w-full max-w-[320px] justify-center">
            <div className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white">
              <MaterialIcon icon="phone_iphone" size={18} className="text-brand-accent" />
              <div className="text-left leading-none">
                <div className="text-[7.5px] uppercase font-black text-brand-accent/70">Available on</div>
                <div className="text-xs font-black text-white">App Store</div>
              </div>
            </div>
            <div className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white">
              <MaterialIcon icon="play_arrow" size={18} className="text-brand-accent" />
              <div className="text-left leading-none">
                <div className="text-[7.5px] uppercase font-black text-brand-accent/70">Available on</div>
                <div className="text-xs font-black text-white">Google Play</div>
              </div>
            </div>
          </div>
        </div>
      </section>
      </section>
    </PremiumPageShell>
  );
}