'use client'

import { Search, ChevronDown } from 'lucide-react'
import { Button } from '@/components/ui/button'
import type { BlogPost } from '@/components/blocks/blog-component/blog-component'
import { getMediaUrl } from '@/lib/api'
import { Icon } from '@iconify/react'

const HeroSection = ({ blogData, domain }: { blogData: BlogPost[], domain: any }) => {
  // Use domain banner if available, otherwise fallback to a high-quality real estate Unsplash image
  const backgroundImageUrl = domain?.banner 
    ? getMediaUrl(domain.banner) 
    : 'https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?q=80&w=2075&auto=format&fit=crop'

  return (
    <section id='home' className='relative -mt-16 pt-32 pb-16 md:pb-64 w-full min-h-[110vh] flex flex-col justify-end overflow-hidden'>
      {/* Background Image */}
      <div 
        className="absolute inset-0 z-0 bg-cover bg-center"
        style={{ backgroundImage: `url('${backgroundImageUrl}')` }}
      />
      {/* Overlays to ensure text readability */}
      <div className="absolute inset-0 z-0 bg-black/20" />
      <div className="absolute inset-0 z-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" />

      {/* Content Container */}
      <div className='relative z-10 mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 '>
        
        <style>{`
          @keyframes fadeInUp {
            from {
              opacity: 0;
              transform: translateY(40px);
            }
            to {
              opacity: 1;
              transform: translateY(0);
            }
          }
          .animate-fade-in-up {
            opacity: 0;
            animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
          }
          .delay-150 {
            animation-delay: 150ms;
          }
          .delay-300 {
            animation-delay: 300ms;
          }
        `}</style>

        {/* Top Text Grid */}
        <div className="flex flex-col gap-2 w-3/4">
          {/* Left Text */}
          <div>
            <h1 className="animate-fade-in-up delay-150 text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-[1.1] tracking-tight">
              {domain?.tag_line || "Helping You Find and Grow Your Dream Home"}
            </h1>
          </div>
          
          {/* Right Text */}
          <div className="pb-2">
            <p className="animate-fade-in-up delay-300 text-base sm:text-lg text-white/90 leading-relaxed  md:ml-auto">
              {domain?.short_description || "In today's ever-evolving real estate market, finding the perfect home or investment requires the right tools, insights, and strategy. Whether you're buying, selling, or renting—we're here to simplify your journey with expert guidance and verified listings tailored to your needs."}
            </p>
          </div>
           <div className='flex items-center gap-4 mt-6'>
            {domain?.whatsapp && (
              <Button asChild size="lg" className="btn_whatsapp rounded-full bg-[#25D366] hover:bg-[#128C7E] text-white px-8 shadow-lg shadow-green-500/20 transition-all hover:scale-105 active:scale-95">
                <a 
                  href={domain.whatsapp.startsWith('http') 
                    ? domain.whatsapp 
                    : `https://wa.me/${domain.whatsapp.replace(/\D/g, '').replace(/^0/, '62')}`
                  }
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="btn_whatsapp flex items-center"
                >
                  <Icon icon="ic:baseline-whatsapp" className="btn_whatsapp mr-2 h-5 w-5" />
                  <span className="btn_whatsapp">Chat Admin</span>
                </a>
              </Button>
            )}
          </div>
        </div>
      </div>
    </section>
  )
}

export default HeroSection