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 Store Badges */}
            <div className="grid grid-cols-2 gap-3 sm:gap-4 w-full max-w-md mx-auto lg:mx-0">
              
              {/* 1. Cafe Bazaar */}
              <a
                href="https://cafebazaar.ir/app/com.example.hoshan"
                target="_blank"
                rel="noopener noreferrer"
                className="bg-black hover:bg-neutral-900 border border-neutral-800 hover:border-neutral-700 text-white rounded-xl sm:rounded-2xl p-2.5 sm:p-3 flex items-center justify-between shadow-md hover:scale-[1.02] active:scale-[0.98] transition-all duration-150 group"
              >
                <div className="text-right flex flex-col justify-center">
                  <span className="text-[10px] sm:text-xs text-gray-300 font-medium leading-none mb-1">دریافت از</span>
                  <span className="text-xs sm:text-sm font-extrabold text-white leading-none">بازار</span>
                </div>
                <div className="w-8 h-8 sm:w-9 sm:h-9 bg-emerald-950/40 rounded-lg flex items-center justify-center p-1 group-hover:scale-105 transition-transform flex-shrink-0">
                  <svg className="w-full h-full" viewBox="0 0 24 24" fill="none">
                    <path d="M19 8H5C3.89543 8 3 8.89543 3 10V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V10C21 8.89543 20.1046 8 19 8Z" fill="#22c55e" />
                    <path d="M8 8V6C8 3.79086 9.79086 2 12 2C14.2091 2 16 3.79086 16 6V8" stroke="#ffffff" strokeWidth="2" strokeLinecap="round" />
                    <path d="M12 12V16M10 14H14" stroke="#ffffff" strokeWidth="1.5" strokeLinecap="round" />
                  </svg>
                </div>
              </a>

              {/* 2. Myket */}
              <a
                href="https://myket.ir/app/com.example.hoshan"
                target="_blank"
                rel="noopener noreferrer"
                className="bg-black hover:bg-neutral-900 border border-neutral-800 hover:border-neutral-700 text-white rounded-xl sm:rounded-2xl p-2.5 sm:p-3 flex items-center justify-between shadow-md hover:scale-[1.02] active:scale-[0.98] transition-all duration-150 group"
              >
                <div className="text-right flex flex-col justify-center">
                  <span className="text-[10px] sm:text-xs text-gray-300 font-medium leading-none mb-1">دریافت از</span>
                  <span className="text-xs sm:text-sm font-extrabold text-white leading-none">مایکت</span>
                </div>
                <div className="w-8 h-8 sm:w-9 sm:h-9 bg-sky-950/40 rounded-lg flex items-center justify-center p-1 group-hover:scale-105 transition-transform flex-shrink-0">
                  <svg className="w-full h-full" viewBox="0 0 100 100" fill="none">
                    <circle cx="50" cy="50" r="46" fill="#0091ea" />
                    <path d="M30 38C30 38 34 32 40 32C46 32 48 37 48 42V68H40V44C40 40 38 38 35 38C32 38 30 40 30 44V68H22V34H30V38Z" fill="#ffffff" />
                    <path d="M52 38C52 38 56 32 62 32C68 32 70 37 70 42V68H62V44C62 40 60 38 57 38C54 38 52 40 52 44V68H44V34H52V38Z" fill="#ffffff" />
                  </svg>
                </div>
              </a>

              {/* 3. Web App / iOS */}
              <button
                type="button"
                onClick={onOpenAuth}
                className="bg-black hover:bg-neutral-900 border border-neutral-800 hover:border-neutral-700 text-white rounded-xl sm:rounded-2xl p-2.5 sm:p-3 flex items-center justify-between shadow-md hover:scale-[1.02] active:scale-[0.98] transition-all duration-150 group cursor-pointer text-right"
              >
                <div className="text-right flex flex-col justify-center">
                  <span className="text-xs sm:text-sm font-extrabold text-white leading-tight">نسخه وب / ios</span>
                </div>
                <div className="w-8 h-8 sm:w-9 sm:h-9 bg-neutral-800 rounded-lg flex items-center justify-center p-1.5 group-hover:scale-105 transition-transform flex-shrink-0">
                  <svg className="w-full h-full text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <circle cx="12" cy="12" r="10" />
                    <line x1="2" y1="12" x2="22" y2="12" />
                    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
                  </svg>
                </div>
              </button>

              {/* 4. Direct Download (Android APK) */}
              <a
                href="/storage/app/houshan-latest.apk"
                download
                className="bg-black hover:bg-neutral-900 border border-neutral-800 hover:border-neutral-700 text-white rounded-xl sm:rounded-2xl p-2.5 sm:p-3 flex items-center justify-between shadow-md hover:scale-[1.02] active:scale-[0.98] transition-all duration-150 group cursor-pointer"
              >
                <div className="text-right flex flex-col justify-center">
                  <span className="text-xs sm:text-sm font-extrabold text-white leading-tight">دانلود مستقیم</span>
                </div>
                <div className="w-8 h-8 sm:w-9 sm:h-9 bg-emerald-950/40 rounded-lg flex items-center justify-center p-1.5 group-hover:scale-105 transition-transform flex-shrink-0">
                  <svg className="w-full h-full text-[#3ddc84]" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-4.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 2.23 12.95 2 12 2c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.73 3.26 5.5 5.01 5.5 7h13c0-1.99-1.23-3.74-2.97-4.84zM9 5c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm6 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z" />
                  </svg>
                </div>
              </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>
  );
};
