import girlchat from "../../assets/images/girlchat.webp"
const AstroChatUI = () => {
  return (
    <>
    
     <div className="flex items-center justify-center py-4">
      <div className="w-full max-w-[550px] pt-12 bg-gradient-to-br from-red-50 to-green-50 rounded-3xl shadow-2xl p-8 relative overflow-hidden">
        
        {/* Logo Section */}
        <div className="mb-8">
          <div className="flex items-center gap-2 mb-2">
            <div className="relative">
              {/* Planet Icon */}
              <svg className="w-16 h-16" viewBox="0 0 64 64" fill="none">
                <circle cx="32" cy="32" r="20" fill="#A70710" opacity="0.9"/>
                <ellipse cx="32" cy="32" rx="35" ry="8" fill="none" stroke="#A70710" strokeWidth="3" transform="rotate(-20 32 32)"/>
                {/* Chat dots */}
                <circle cx="26" cy="32" r="2" fill="white"/>
                <circle cx="32" cy="32" r="2" fill="white"/>
                <circle cx="38" cy="32" r="2" fill="white"/>
                {/* Stars */}
                <circle cx="12" cy="20" r="2" fill="#A70710"/>
                <circle cx="16" cy="12" r="1.5" fill="#A70710"/>
              </svg>
            </div>
            <div>
              <h1 className="text-3xl font-bold">
                <span className="text-gray-900">Astro</span>
                <span className="text-[#A70710]">FreeChart</span>
              </h1>
            </div>
          </div>
          <p className="text-sm text-gray-700 ml-1">
            From <span className="text-[#A70710] font-semibold">Thirukalyanam Matrimony</span> Group
          </p>
        </div>

        {/* Main Heading */}
        <h2 className="text-[18px] font-bold text-gray-900 mb-4 leading-tight">
          Looking for astrology guidance in love, relationships, career, or health?
        </h2>

        {/* Subheading */}
        <p className="text-gray-700 mb-4">
          Connect instantly with expert astrologers on AstroFreeChat.
        </p>

        {/* Features List */}
        <div className="space-y-2 mb-8">
          <div className="flex items-center gap-3">
            <span className="text-[#A70710] text-xl mt-1">✓</span>
            <p className="text-gray-900 font-medium text-[14px]">
              Instant Astrology Insights
            </p>
          </div>

          <div className="flex items-center gap-3">
            <span className="text-[#A70710] text-xl mt-1">✓</span>
            <p className="text-gray-900 font-medium text-[14px]">
              Chat Anytime, Anywhere
            </p>
          </div>

          <div className="flex items-center gap-3">
            <span className="text-[#A70710] text-xl mt-1">✓</span>
            <p className="text-gray-900 font-medium text-[14px]">
              First 5 Minutes <span className="font-bold">FREE</span>
            </p>
          </div>
        </div>

        {/* CTA Button */}
        <button className="relative z-[99] w-[fit-content] bg-[#034E08]  hover:bg-[#A70710] text-white font-bold text-[16px] py-4    px-6 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">
          Download AstroFreeChart
        </button>

        {/* Girl Image - Positioned at bottom right */}
        <div className="absolute bottom-0 right-0  z-[1]">
          <img 
            src={girlchat} 
            alt="Woman using chat"
            className="w-full h-full object-cover object-top"
          />
          
          
        </div>
      </div>
    </div>
    
    </>
  )
}

export default AstroChatUI