import { Star, StarBorder } from '@mui/icons-material';
import apppromo from "../../assets/images/apppromo.png";
import LazyImage from '../common/LazyImage';
const AppQRCode = () => {
  return (
    <>
      <div className="relative z-9 bg-[#034f08] text-white ">
      <div className="container mx-auto max-w-[1400px] px-2 md:px-0 py-8  lg:py-16">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-center">
          {/* Left Content Section */}
          <div className="space-y-6 lg:space-y-8">
            {/* QR Code */}
            <div className="w-32 h-32 lg:w-40 lg:h-40 bg-white p-3 rounded-lg">
              <img 
                src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://tamilmatrimony.com" 
                alt="QR Code" 
                className="w-full h-full"
              />
            </div>

            {/* Heading */}
            <div>
              <h1 className="text-[25px]  font-bold leading-tight mb-2">
                To speed up your partner<br />search, download
              </h1>
              <h2 className="text-[20px] font-bold text-white">
                Thirukalyanam App
              </h2>
            </div>

            {/* App Store Buttons */}
            <div className="flex flex-wrap gap-4">
              <a href="#" className="inline-block">
                <img 
                  src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Download_on_the_App_Store_Badge.svg" 
                  alt="Download on App Store" 
                  className="h-12 lg:h-14"
                />
              </a>
              <a href="#" className="inline-block">
                <img 
                  src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" 
                  alt="Get it on Google Play" 
                  className="h-12 lg:h-14"
                />
              </a>
            </div>

            {/* App Info */}
            <div className="space-y-3 pt-4">
              <p className="text-lg lg:text-xl font-semibold">
                Thirukalyanam Matrimony® - Official & Trusted Matrimony App
              </p>
              <p className="text-base lg:text-lg text-gray-200">
                1M+ Downloads
              </p>
              
              {/* Rating */}
              <div className="flex items-center gap-3">
                <span className="text-4xl lg:text-5xl font-bold">4.2</span>
                <div className="flex gap-1">
                  {[...Array(4)].map((_, i) => (
                    <Star key={i} className="text-yellow-400" sx={{ fontSize: 32 }} />
                  ))}
                  <StarBorder className="text-yellow-400" sx={{ fontSize: 32 }} />
                </div>
              </div>
              <p className="text-sm lg:text-base text-gray-300">
                Based on Customer Reviews
              </p>
            </div>
          </div>

          {/* Right Mobile Mockup Section */}
          {/* <div className="flex justify-center lg:justify-end items-center relative">
            <div className="absolute w-64 h-64 lg:w-96 lg:h-96 bg-purple-700 rounded-full opacity-30 blur-3xl"></div>
            
            <div className="relative flex items-center justify-center gap-4">
              <div className="relative z-10 bg-gray-900 rounded-3xl p-3 shadow-2xl w-64 lg:w-80">
                <div className="bg-white rounded-2xl overflow-hidden">
                  <div className="relative">
                    <img 
                      src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=500&fit=crop" 
                      alt="Profile" 
                      className="w-full h-80 object-cover"
                    />
                    <div className="absolute top-4 right-4 flex flex-col gap-2">
                      <button className="w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center text-sm">
                        😊
                      </button>
                      <button className="w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center text-sm">
                        👤
                      </button>
                      <button className="w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center text-sm">
                        ℹ️
                      </button>
                      <div className="w-10 h-10 bg-white rounded-full shadow-lg overflow-hidden">
                        <img 
                          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=50&h=50&fit=crop" 
                          alt="Thumb" 
                          className="w-full h-full object-cover"
                        />
                      </div>
                    </div>
                  </div>
                  <div className="p-4 bg-white">
                    <h3 className="text-gray-900 font-bold text-lg">Pragati Ram</h3>
                    <p className="text-gray-600 text-sm">27 Yrs, 5 ft 5 in</p>
                    <p className="text-gray-600 text-sm">B.Sc, Computer Science</p>
                    <p className="text-gray-600 text-sm">Administrative Professional</p>
                    <div className="flex gap-2 mt-3">
                      <button className="flex-1 px-4 py-2 border border-orange-500 text-orange-500 rounded-md text-sm">
                        📨 Send Message
                      </button>
                      <button className="flex-1 px-4 py-2 bg-orange-500 text-white rounded-md text-sm">
                        ❤️ Send Interest
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              <div className="absolute -right-8 lg:-right-12 top-12 bg-gray-900 rounded-3xl p-2.5 shadow-2xl w-48 lg:w-60 opacity-90">
                <div className="bg-gradient-to-b from-purple-900 to-purple-800 rounded-2xl p-4 text-white">
                  <div className="flex justify-between items-start mb-4">
                    <div>
                      <span className="text-xs bg-white text-purple-900 px-2 py-1 rounded">Regular</span>
                      <span className="text-xs bg-purple-700 px-2 py-1 rounded ml-1">PRIME</span>
                    </div>
                    <button className="text-white">☰</button>
                  </div>
                  <div className="flex items-center gap-2 mb-4">
                    <div className="w-10 h-10 bg-purple-600 rounded-full"></div>
                    <div>
                      <p className="text-sm font-semibold">Arjun</p>
                      <p className="text-xs">Mahadewan</p>
                    </div>
                  </div>
                  <div className="mb-4">
                    <p className="text-xs mb-2">All matches (9524)</p>
                    <div className="grid grid-cols-2 gap-2">
                      <div className="bg-purple-700 rounded-lg p-2">
                        <img 
                          src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=100&h=100&fit=crop" 
                          alt="Match 1" 
                          className="w-full h-16 object-cover rounded mb-1"
                        />
                        <p className="text-xs">Priyanka Sani...</p>
                        <p className="text-xs text-gray-300">28 Yrs, 5'7"</p>
                      </div>
                      <div className="bg-purple-700 rounded-lg p-2">
                        <img 
                          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop" 
                          alt="Match 2" 
                          className="w-full h-16 object-cover rounded mb-1"
                        />
                        <p className="text-xs">Karthika</p>
                        <p className="text-xs text-gray-300">26 Yrs, 5'4"</p>
                      </div>
                    </div>
                  </div>
                  <div>
                    <p className="text-xs mb-2">New matches (524)</p>
                    <div className="grid grid-cols-2 gap-2">
                      <div className="bg-purple-700 rounded-lg h-16"></div>
                      <div className="bg-purple-700 rounded-lg h-16"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div> */}

<div className='flex justify-center lg:justify-end'>

     <LazyImage
                        src={apppromo}
                        className="w-full  "
                        
                      />
</div>

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

    </>
  )
}

export default AppQRCode
