import React from 'react'
import { motion } from 'framer-motion'
import Rating from '@mui/material/Rating'
import phoneImage from '../../assets/images/phone-left.avif'
import appstoreBadge from '../../assets/images/appstore-badge.svg'
import googleplayBadge from '../../assets/images/googleplay-badge.svg'

const PromoPanel = () => {
  return (
    <>


    <motion.div
      initial={{ opacity: 0, x: -30 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ duration: 0.6 }}
      className="relative p-4"
    >
      

      <h2 className="text-2xl lg:text-3xl font-semibold text-gray-900 leading-tight">
        To speed up your partner search, download <span className='text-[#A70710]'>Thirukalyanam  App</span>
      </h2>

<div style={{boxShadow:"0px 6px 20px 2px #f1f1f1"}}  className='mt-6 grid grid-cols-1 md:grid-cols-2 gap-2 pb-4 rounded-[15px] bg-[ffff] border border-1 border-[#f1f1f1] '>


<div className='w-[260px] h-[100%]] md:h-[290px] overflow-show'>
     <div className="relative mt-8 lg:mt-10">
        <img
          src={phoneImage}
          alt="TamilMatrimony App preview on mobile"
          className="w-full max-w-md sm:max-w-lg lg:max-w-xl drop-shadow-xl mx-auto"
        />
      </div>
</div>


<div className='p-4'>
<div className="mt-6 flex items-center gap-4">
        <a href="#" aria-label="Download on the App Store">
          <img
            src={appstoreBadge}
            alt="Download on the App Store"
            className="h-10 w-auto hover:scale-[1.02] transition-transform"
          />
        </a>
        <a href="#" aria-label="Get it on Google Play">
          <img
            src={googleplayBadge}
            alt="Get it on Google Play"
            className="h-10 w-auto hover:scale-[1.02] transition-transform"
          />
        </a>
      </div>
 <div className="mt-6 flex flex-col  gap-2">
       
          <span className="text-[18px] font-semibold text-gray-800">ThirukalyanamMatrimony®</span>
          <span className="text-[16px] text-gray-600">Trusted Matrimony App</span>
       
      </div>

      <div className="mt-4 flex items-center gap-3">
        <Rating value={4.3} precision={0.1} readOnly />
        <span className="text-sm text-gray-700">4.3</span>
       
      </div>

       <span className=" text-[14px] text-gray-500">10M+ Downloads | Based on Customer Reviews</span>


</div>

</div>


     
     
    </motion.div>
  
    </>
  )
}

export default PromoPanel
