import { useNavigate } from "react-router-dom";
import girlchat from "../../assets/images/girlchat.webp"
const AstroChatUI = () => {
  const navigate = useNavigate();
  return (
    <>
    
     <div className="flex items-center justify-center py-4">
      <div className="w-full max-w-[690px] h-full max-h-[690px] md:max-h-[600px] sm:max-h-[500px] pt-6 sm:pt-8 md:pt-12 bg-gradient-to-br from-red-50 to-green-50 rounded-2xl sm:rounded-3xl p-4 sm:p-6 md:p-8 relative overflow-hidden">
        
        {/* Logo Section */}
        <div className="mb-4 sm:mb-6 md:mb-8">
          <div className="flex items-center gap-2 mb-2">

            <div className="relative">
              {/* Planet Icon */}
              <svg className="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md: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-xl sm:text-2xl md:text-3xl font-bold">
                <span className="text-gray-900">Astro</span>
                <span className="text-[#A70710]">Horoscope</span>
              </h1>
            </div>
          </div>
          <p className="text-xs sm:text-sm md:text-[16px] text-gray-700 ml-1">
            From <span className="text-xs sm:text-sm md:text-[16px] text-[#A70710] font-semibold">Thirukalyanam Matrimony</span> Group
          </p>
        </div>

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

        {/* Subheading */}
        <p className="text-sm sm:text-base md:text-[16px] text-gray-700 mb-3 sm:mb-4">
          Connect instantly with expert astrologers on AstroFreeChat.
        </p>

        {/* Features List */}
        <div className="space-y-1.5 sm:space-y-2 mb-6 sm:mb-8">
          <div className="flex items-center gap-2 sm:gap-3">
            <span className="text-[#A70710] text-lg sm:text-xl mt-1 flex-shrink-0">✓</span>
            <p className="text-xs sm:text-sm md:text-[16px] text-gray-900 font-medium">
              Instant Astrology Insights
            </p>
          </div>

          <div className="flex items-center gap-2 sm:gap-3">
            <span className="text-[#A70710] text-lg sm:text-xl mt-1 flex-shrink-0">✓</span>
            <p className="text-xs sm:text-sm md:text-[16px] text-gray-900 font-medium">
              Chat Anytime, Anywhere
            </p>
          </div>

          <div className="flex items-center gap-2 sm:gap-3">
            <span className="text-[#A70710] text-lg sm:text-xl mt-1 flex-shrink-0">✓</span>
            <p className="text-xs sm:text-sm md:text-[16px] text-gray-900 font-medium">
              First 5 Minutes <span className="font-bold">FREE</span>
            </p>
          </div>
        </div>

        {/* CTA Button */}
        <button onClick={()=>{
          navigate("/horoscoper-generate")
        }} className="relative z-[99] w-[fit-content] bg-[#034E08] hover:bg-[#A70710] text-white font-bold text-xs sm:text-sm md:text-[16px] py-2.5 sm:py-3 md:py-4 px-4 sm:px-5 md:px-6 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">
          Upload Horoscope
        </button>

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

export default AstroChatUI