import React from 'react';

interface HeroProps {
  onOpenAuth: () => void;
}

export const Hero: React.FC<HeroProps> = ({ onOpenAuth }) => {
  return (
    <section className="relative pt-24 sm:pt-32 pb-16 sm:pb-24 bg-white overflow-hidden select-none">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
          
          {/* Right Column (RTL Start): Main Titles & Download Store Badges */}
          <div className="lg:col-span-6 order-2 lg:order-1 text-center lg:text-right flex flex-col items-center lg:items-start justify-center">
            
            {/* Main Brand Title */}
            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-black text-[#5cbbe2] tracking-tight leading-tight font-vazir">
              هوشان؛
            </h1>

            {/* Subtitle */}
            <p className="text-xl sm:text-2xl lg:text-3xl font-bold text-[#5cbbe2] mt-2 sm:mt-3 mb-8 lg:mb-10 font-vazir">
              دستیار هوش مصنوعی شما
            </p>

            {/* 2x2 Grid of Authentic Store Badges */}
            <div className="grid grid-cols-2 gap-3 sm:gap-4 w-full max-w-[420px] mx-auto lg:mx-0">
              
              {/* 1. Cafe Bazaar */}
              <a
                href="https://cafebazaar.ir/app/com.example.hoshan"
                target="_blank"
                rel="noopener noreferrer"
                className="block transition-transform duration-200 hover:scale-[1.03] active:scale-[0.98] drop-shadow-sm"
              >
                <img 
                  src="/storage/banner/badge-bazaar.png" 
                  alt="دریافت از بازار" 
                  className="w-full h-auto object-contain rounded-lg sm:rounded-xl"
                />
              </a>

              {/* 2. Myket */}
              <a
                href="https://myket.ir/app/com.example.hoshan"
                target="_blank"
                rel="noopener noreferrer"
                className="block transition-transform duration-200 hover:scale-[1.03] active:scale-[0.98] drop-shadow-sm"
              >
                <img 
                  src="/storage/banner/badge-myket.png" 
                  alt="دریافت از مایکت" 
                  className="w-full h-auto object-contain rounded-lg sm:rounded-xl"
                />
              </a>

              {/* 3. Web App / iOS */}
              <button
                type="button"
                onClick={onOpenAuth}
                className="block w-full transition-transform duration-200 hover:scale-[1.03] active:scale-[0.98] drop-shadow-sm cursor-pointer"
              >
                <img 
                  src="/storage/banner/badge-web-ios.png" 
                  alt="نسخه وب / ios" 
                  className="w-full h-auto object-contain rounded-lg sm:rounded-xl"
                />
              </button>

              {/* 4. Direct Android Download */}
              <a
                href="/storage/app/houshan-latest.apk"
                download
                className="block transition-transform duration-200 hover:scale-[1.03] active:scale-[0.98] drop-shadow-sm"
              >
                <img 
                  src="/storage/banner/badge-direct.png" 
                  alt="دانلود مستقیم" 
                  className="w-full h-auto object-contain rounded-lg sm:rounded-xl"
                />
              </a>

            </div>

          </div>

          {/* Left Column (Artwork): Authentic Statue holding Laptop & Phone */}
          <div className="lg:col-span-6 order-1 lg:order-2 flex items-center justify-center relative">
            <div className="relative max-w-md sm:max-w-lg lg:max-w-xl w-full flex items-center justify-center">
              <img 
                src="/storage/banner/herosection-1.png" 
                alt="هوشان؛ دستیار هوش مصنوعی شما" 
                className="w-full h-auto object-contain max-h-[580px] drop-shadow-xl select-none transition-transform duration-300 hover:scale-[1.01]" 
              />
            </div>
          </div>

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