import { Check, Star } from "lucide-react";
import phoneMockup from "@assets/image_1768676819622.png";

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

const appHighlights = [
  "100K+ Downloads",
  "Free to Download",
  "No Subscription Fees",
  "Setup in Under 1 Minute",
  "Free Data on Telkom SIM"
];

export default function DownloadSection() {
  return (
    <section id="download" className="py-20 bg-white relative overflow-hidden">
      <div className="max-w-7xl mx-auto px-4 relative z-10">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <div>
            <div className="inline-flex items-center gap-2 bg-primary/10 rounded-full px-4 py-2 mb-6">
              <Star className="w-4 h-4 text-secondary" />
              <span className="text-sm font-medium text-gray-700">Rated 4.5+ on Google Play</span>
            </div>
            
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-gray-900">
              Download T-kash Soko Today
            </h2>
            
            <p className="text-xl text-gray-600 mb-8 leading-relaxed">
              Join thousands of Kenyan merchants and consumers already growing with T-kash Soko. One app for shopping, selling, and managing your business.
            </p>
            
            <div className="flex flex-wrap gap-3 mb-8">
              {appHighlights.map((highlight, index) => (
                <div 
                  key={index} 
                  className="flex items-center gap-2 bg-gray-100 rounded-full px-4 py-2"
                >
                  <Check className="w-4 h-4 text-green-500" />
                  <span className="text-sm text-gray-700">{highlight}</span>
                </div>
              ))}
            </div>
            
            <a
              href="https://play.google.com/store/apps/details?id=com.Blipply.Merchant&hl=en"
              target="_blank"
              rel="noopener noreferrer"
              data-testid="link-download-main"
            >
              <img 
                src={GOOGLE_PLAY_BADGE} 
                alt="Get it on Google Play" 
                className="h-20 w-auto"
              />
            </a>
          </div>
          
          <div className="flex justify-center">
            <img 
              src={phoneMockup} 
              alt="T-kash Soko app on phone" 
              className="h-[520px] w-auto rounded-[2.5rem]"
            />
          </div>
        </div>
      </div>
    </section>
  );
}
