'use client'

export function Download() {
  return (
    <section id="download" className="py-24 sm:py-32 bg-white relative overflow-hidden px-5 sm:px-8 border-t border-purple-soft">
      {/* Background soft glowing blur elements */}
      <div className="absolute top-1/2 left-0 -translate-y-1/2 w-96 h-96 bg-purple-soft/60 rounded-full blur-3xl -z-10 pointer-events-none" />
      <div className="absolute top-1/3 right-0 -translate-y-1/2 w-[500px] h-[500px] bg-purple-lavender/25 rounded-full blur-3xl -z-10 pointer-events-none" />

      <div className="max-w-7xl mx-auto">
        <div className="grid lg:grid-cols-12 gap-12 lg:gap-16 items-center">
          
          {/* Left Column: Interactive Mobile Mockup Showcase */}
          <div className="lg:col-span-5 flex justify-center items-center relative">
            
            {/* Glowing Backdrop Lights */}
            <div className="absolute -inset-4 bg-gradient-purple rounded-[40px] opacity-10 blur-xl pointer-events-none" />
            
            {/* Floating UI Elements */}
            <div className="absolute left-[-20px] top-[15%] bg-white/90 backdrop-blur-md border border-purple-lavender/50 rounded-2xl p-3 shadow-nearle-md flex items-center gap-3 z-20 animate-float">
              <span className="text-2xl">🥦</span>
              <div>
                <div className="text-[10px] font-bold text-nearle-mid uppercase tracking-wide">Residents</div>
                <div className="text-xs font-extrabold text-nearle-dark">Fresh Greens Delivered</div>
              </div>
            </div>

            <div className="absolute right-[-20px] bottom-[20%] bg-white/90 backdrop-blur-md border border-purple-lavender/50 rounded-2xl p-3 shadow-nearle-md flex items-center gap-3 z-20 animate-float" style={{ animationDelay: '2s' }}>
              <span className="text-2xl">🛵</span>
              <div>
                <div className="text-[10px] font-bold text-nearle-mid uppercase tracking-wide">Rider Network</div>
                <div className="text-xs font-extrabold text-nearle-dark">Optimized Delivery Routes</div>
              </div>
            </div>

            {/* Phone Mockup Frame */}
            <div className="w-[280px] h-[560px] rounded-[48px] border-[12px] border-nearle-dark bg-[#0F1115] shadow-2xl relative overflow-hidden flex flex-col justify-between">
              
              {/* Camera Notch */}
              <div className="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-6 bg-nearle-dark rounded-b-2xl z-30" />
              
              {/* Inner Screen Content */}
              <div className="w-full h-full bg-gradient-to-b from-[#1E1129] via-[#0F0916] to-[#0A060E] p-5 pt-8 flex flex-col justify-between relative overflow-hidden select-none">
                
                {/* Micro glowing backgrounds inside the phone */}
                <div className="absolute top-[20%] left-[10%] w-32 h-32 bg-purple-primary/20 rounded-full blur-2xl pointer-events-none" />
                
                {/* Header */}
                <div className="flex justify-between items-center z-10">
                  <div className="text-[11px] font-mono text-purple-lavender">Nearle App</div>
                  <div className="text-[11px] font-mono text-white/50">4G LTE</div>
                </div>

                {/* Main Content inside Mockup */}
                <div className="my-auto flex flex-col gap-5 z-10">
                  <div className="text-center">
                    <span className="inline-block bg-purple-primary/20 text-purple-accent border border-purple-primary/30 rounded-full px-3 py-1 text-[11px] font-bold tracking-widest uppercase mb-2">
                      Hyperlocal Suite
                    </span>
                    <h4 className="font-display font-extrabold text-xl text-white tracking-tight leading-tight">
                      Your World,<br />Inside Your Pocket
                    </h4>
                  </div>

                  {/* Inside App Preview Cards */}
                  <div className="flex flex-col gap-2.5">
                    
                    {/* App item 1 */}
                    <div className="bg-white/5 border border-white/10 rounded-2xl p-3 flex items-center gap-3 backdrop-blur-sm">
                      <div className="w-9 h-9 rounded-xl bg-purple-deep flex items-center justify-center text-base">
                        🏪
                      </div>
                      <div className="flex-1">
                        <div className="text-[11px] font-bold text-white/40 uppercase">Nearle Partner</div>
                        <div className="text-[13px] font-extrabold text-white">Local Merchant App</div>
                      </div>
                    </div>

                    {/* App item 2 */}
                    <div className="bg-white/5 border border-white/10 rounded-2xl p-3 flex items-center gap-3 backdrop-blur-sm">
                      <div className="w-9 h-9 rounded-xl bg-purple-deep flex items-center justify-center text-base">
                        🔮
                      </div>
                      <div className="flex-1">
                        <div className="text-[11px] font-bold text-white/40 uppercase">Nearle Admin</div>
                        <div className="text-[13px] font-extrabold text-white">Community Coordinator</div>
                      </div>
                    </div>

                  </div>
                </div>

                {/* Footer UI inside Phone */}
                <div className="border-t border-white/10 pt-3 text-center z-10">
                  <div className="text-[10px] text-white/40 uppercase tracking-widest">Coimbatore, India</div>
                </div>

              </div>
            </div>
          </div>

          {/* Right Column: Premium Text & Direct CTA Layout */}
          <div className="lg:col-span-7 flex flex-col justify-center">
            
            <div className="inline-flex items-center gap-2 bg-purple-soft border border-purple-lavender rounded-full px-4 py-1.5 text-purple-deep font-bold text-xs uppercase tracking-wide mb-6 w-fit select-none">
              <span className="w-2 h-2 rounded-full bg-purple-primary animate-ping" />
              <span>Get the Nearle App</span>
            </div>

            <h2 className="font-display font-extrabold text-3xl sm:text-4xl lg:text-5xl text-nearle-dark tracking-tight leading-[1.1] mb-6">
              Redefine Your<br />
              <span className="bg-gradient-purple bg-clip-text text-transparent">
                Neighbourhood Living
              </span>
            </h2>

            <p className="font-body text-nearle-mid text-sm sm:text-base leading-relaxed mb-8 max-w-xl">
              Experience the ease of having all local amenities, stores, daily fresh goods, and customized neighborhood home services compiled inside India's #1 hyperlocal platform. Download directly to activate your neighborhood Living.
            </p>

            {/* Quick Benefits Grid */}
            <div className="grid sm:grid-cols-2 gap-4 mb-10 max-w-lg">
              {[
                { title: 'Nearle Deal', desc: 'Instantly shop daily goods and fresh groceries.', emoji: '🥦' },
                { title: 'Nearle Partner', desc: 'Manage catalog products and instant store setups.', emoji: '🏪' },
                { title: 'Nearle Gear', desc: 'Optimized rider log and route mappings.', emoji: '🛵' },
                { title: 'Nearle Admin', desc: 'Operate local hubs and coordinate logistics.', emoji: '🔮' },
              ].map((b) => (
                <div key={b.title} className="flex gap-3 p-3.5 bg-nearle-bgsoft/60 border border-nearle-border/40 rounded-2xl hover:border-purple-lavender/60 transition duration-300">
                  <span className="text-2xl">{b.emoji}</span>
                  <div>
                    <h5 className="font-display font-extrabold text-sm text-nearle-dark">{b.title}</h5>
                    <p className="font-body text-xs text-nearle-mid leading-normal mt-0.5">{b.desc}</p>
                  </div>
                </div>
              ))}
            </div>

            {/* Store Badges */}
            <div className="flex flex-col gap-4 pt-6 border-t border-nearle-border/40 max-w-md">
              <h3 className="font-display font-extrabold text-lg text-nearle-dark">
                Download Nearle App
              </h3>

              <div className="flex flex-col sm:flex-row items-center gap-3">
                <a
                  href="https://play.google.com/store/apps/details?id=com.nearle.gear"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2.5 px-5 py-2.5 rounded-[10px] border border-[#E2E8F0] bg-white hover:bg-[#F8FAFC] hover:border-[#CBD5E1] active:bg-[#F1F5F9] transition-all duration-200"
                >
                  <svg viewBox="0 0 24 24" className="w-5 h-5 shrink-0" fill="#111827">
                    <path d="M1.22 0c-.132.087-.22.246-.22.432v23.136c0 .186.088.345.22.432l12.064-12.086L1.22 0zm12.79 12.386l3.64 3.614-5.484 3.066s-5.482 3.07-8.624 4.82l10.468-11.5zm1.346-1.35l3.822-3.768 5.592 3.144c.624.35.624.926 0 1.276l-5.592 3.144-3.822-3.796V11.036zM1.22 24c.132.087.22.246.22.432v-3.094c0-.186-.088-.345-.22-.432l.22 3.094zm-.22-7.314v-9.372c0-.186.088-.345.22-.432l-.22 9.804c-.132-.087-.22-.246-.22-.432v.432z" />
                  </svg>
                  <div className="text-left leading-tight">
                    <div className="text-[8px] text-[#475569] font-medium tracking-wide">GET IT ON</div>
                    <div className="text-[12px] font-semibold text-[#111827] -mt-0.5">Google Play</div>
                  </div>
                </a>

                <a
                  href="https://apps.apple.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2.5 px-5 py-2.5 rounded-[10px] border border-[#E2E8F0] bg-white hover:bg-[#F8FAFC] hover:border-[#CBD5E1] active:bg-[#F1F5F9] transition-all duration-200"
                >
                  <svg viewBox="0 0 24 24" className="w-5 h-5 shrink-0" fill="#111827">
                    <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-[8px] text-[#475569] font-medium tracking-wide">Download on the</div>
                    <div className="text-[12px] font-semibold text-[#111827] -mt-0.5">App Store</div>
                  </div>
                </a>
              </div>

              <p className="font-body text-xs text-nearle-light">
                Available on Android and iOS
              </p>
            </div>

          </div>

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