import { Play, Star, Users, ShoppingBag } from "lucide-react";
import heroImage from "@assets/image_1768676156904.png";

const GOOGLE_PLAY_BADGE = "https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png";

export default function HeroSection() {
  return (
    <section id="hero" className="relative overflow-hidden bg-gradient-to-br from-gray-50 via-white to-gray-100 min-h-[90vh] flex items-center">
      <div className="absolute inset-0 opacity-30">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_40%,rgba(255,107,0,0.15),transparent_50%)]" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_60%,rgba(0,168,225,0.1),transparent_50%)]" />
      </div>
      
      <div className="max-w-7xl mx-auto px-4 py-16 lg:py-24 relative z-10">
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
          <div className="space-y-8 text-center lg:text-left flex flex-col items-center lg:items-start">
            <div className="flex flex-wrap items-center gap-3">
              <div className="inline-flex items-center gap-2 bg-telkom-turquoise/10 border border-telkom-turquoise/30 rounded-full px-4 py-2">
                <span className="text-sm font-medium text-gray-800">A Telkom Kenya Product</span>
              </div>
              <div className="inline-flex items-center gap-2 bg-telkom-orange/10 border border-telkom-orange/30 rounded-full px-4 py-2">
                <Star className="w-4 h-4 text-telkom-orange" />
                <span className="text-sm font-medium text-gray-800">100K+ Downloads on Google Play</span>
              </div>
            </div>
            
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight text-gray-900">
              One Powerful Business App for{" "}
              <span className="text-telkom-orange">Merchants</span> and{" "}
              <span className="text-telkom-turquoise">Everyday Users</span>
            </h1>
            
            <p className="text-xl text-gray-600 leading-relaxed max-w-xl">
              <span className="text-telkom-orange font-semibold">Sell, manage your business, shop and pay</span>, all in one place. Accept payments from T-kash, M-PESA, bank apps, or cash.
            </p>
            
            <div className="flex flex-wrap items-center gap-4 lg:gap-6">
              <a
                href="https://play.google.com/store/apps/details?id=com.Blipply.Merchant&hl=en"
                target="_blank"
                rel="noopener noreferrer"
                data-testid="link-hero-download"
              >
                <img 
                  src={GOOGLE_PLAY_BADGE} 
                  alt="Get it on Google Play" 
                  className="h-14 w-auto"
                />
              </a>
              <div className="flex items-center gap-2">
                <div className="w-10 h-10 rounded-full bg-telkom-turquoise/20 flex items-center justify-center">
                  <Users className="w-5 h-5 text-telkom-turquoise" />
                </div>
                <div>
                  <div className="text-lg font-bold text-gray-900">40,000+</div>
                  <div className="text-xs text-gray-500">Agent Locations</div>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-10 h-10 rounded-full bg-telkom-orange/20 flex items-center justify-center">
                  <ShoppingBag className="w-5 h-5 text-telkom-orange" />
                </div>
                <div>
                  <div className="text-lg font-bold text-gray-900">Zero Fees</div>
                  <div className="text-xs text-gray-500">T-kash Payments</div>
                </div>
              </div>
            </div>
          </div>
          
          <div className="relative flex justify-center">
            <div className="absolute -inset-4 bg-gradient-to-r from-telkom-orange/20 to-telkom-turquoise/20 rounded-[2rem] blur-2xl" />
            <div className="relative max-w-md mx-auto">
              <img
                src={heroImage}
                alt="Happy young black Kenyan person smiling using T-kash Soko app"
                className="w-[400px] h-[400px] object-cover object-top rounded-[2rem] shadow-2xl"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-gray-900/60 via-transparent to-transparent rounded-[2rem]" />
              <div className="absolute top-4 left-4">
                <div className="inline-flex items-center gap-2 bg-white/90 backdrop-blur-sm rounded-full px-4 py-2 shadow-lg">
                  <Star className="w-4 h-4 text-telkom-orange fill-telkom-orange" />
                  <span className="text-sm font-semibold text-gray-800">4.5 on Google Play</span>
                </div>
              </div>
              <button 
                onClick={() => {
                  const element = document.getElementById("how-to-start");
                  if (element) {
                    element.scrollIntoView({ behavior: "smooth" });
                  }
                }}
                className="absolute bottom-6 left-6 right-6 bg-white/10 backdrop-blur-md rounded-2xl p-4 border border-white/20 hover:bg-white/20 transition-colors cursor-pointer text-left"
                data-testid="button-how-to-start"
              >
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-white font-semibold">Setup in Under 1 Minute</p>
                    <p className="text-gray-300 text-sm">No paperwork or branch visits</p>
                  </div>
                  <div className="w-12 h-12 rounded-full bg-telkom-orange flex items-center justify-center">
                    <Play className="w-5 h-5 text-white ml-1" />
                  </div>
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
