'use client'

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'
import Image from 'next/image'
import { openWhatsAppModal } from '@/components/layout/whatsapp-modal'

const HeroSection = ({ domain }: { blogData: BlogPost[], domain: any }) => {
  const imageUrl = domain?.banner 
    ? getMediaUrl(domain.banner) 
    : 'https://images.unsplash.com/photo-1600585154340-be6199f73809?q=80&w=2070&auto=format&fit=crop'

  return (
    <section id='home' className='relative pt-24 lg:pt-32 pb-12 lg:pb-20 px-4 sm:px-6 lg:px-12 bg-background'>
      <div className='max-w-7xl mx-auto'>
        <div className='grid lg:grid-cols-2 gap-12 items-center'>
          {/* Text Content */}
          <div className='space-y-8 order-2 lg:order-1'>
            <div className='inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-semibold'>
              <span className='relative flex h-2 w-2'>
                <span className='animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75'></span>
                <span className='relative inline-flex rounded-full h-2 w-2 bg-primary'></span>
              </span>
              {domain?.name || 'Welcome'}
            </div>
            
            <h1 className='text-4xl sm:text-5xl lg:text-7xl font-extrabold tracking-tight text-foreground leading-[1.1]'>
              {domain?.tag_line || "Find Your Perfect Space with Confidence"}
            </h1>
            
            <p className='text-lg sm:text-xl text-muted-foreground leading-relaxed max-w-xl whitespace-pre-line'>
              {domain?.short_description || "Discover verified listings and expert guidance tailored to your unique needs. We simplify the journey of finding your dream property."}
            </p>
            
            <div className='flex flex-wrap gap-4 pt-4'>
              {domain?.whatsapp && (
                <Button
                  type="button"
                  size="lg"
                  onClick={openWhatsAppModal}
                  className="cursor-pointer rounded-2xl bg-[#25D366] hover:bg-[#128C7E] text-white px-8 py-7 text-lg shadow-xl shadow-green-500/20 transition-all hover:-translate-y-1 flex items-center gap-3"
                >
                  <Icon icon="ic:baseline-whatsapp" className="h-6 w-6" />
                  <span>Chat Admin</span>
                </Button>
              )}
              {/* <Button variant="outline" size="lg" className="rounded-2xl px-8 py-7 text-lg border-2 hover:bg-muted transition-all">
                Learn More
              </Button> */}
            </div>

            {/* Quick Stats or Features */}
            {/* <div className='grid grid-cols-3 gap-8 pt-10 border-t border-border'>
              <div>
                <p className='text-3xl font-bold text-foreground'>10k+</p>
                <p className='text-sm text-muted-foreground'>Verified Listings</p>
              </div>
              <div>
                <p className='text-3xl font-bold text-foreground'>500+</p>
                <p className='text-sm text-muted-foreground'>Expert Agents</p>
              </div>
              <div>
                <p className='text-3xl font-bold text-foreground'>15+</p>
                <p className='text-sm text-muted-foreground'>Years Exp.</p>
              </div>
            </div> */}
          </div>

          {/* Image Content */}
          <div className='relative order-1 lg:order-2'>
            <div className='relative aspect-[4/5] sm:aspect-square lg:aspect-[4/5] w-full overflow-hidden rounded-[2.5rem] shadow-2xl'>
              <Image 
                src={imageUrl}
                alt="Hero Image"
                fill
                className='object-cover hover:scale-105 transition-transform duration-1000'
                priority
              />
              {/* Floating Badge */}
              {/* <div className='absolute bottom-8 left-8 right-8 p-6 glass-card rounded-3xl border border-white/20 shadow-2xl animate-fade-in-up'>
                 <div className='flex items-center gap-4'>
                    <div className='w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white'>
                       <Icon icon="mdi:home-search" className='w-6 h-6' />
                    </div>
                    <div>
                       <p className='text-sm font-bold text-foreground'>Verified Properties</p>
                       <p className='text-xs text-muted-foreground'>Updated 2 minutes ago</p>
                    </div>
                 </div>
              </div> */}
            </div>
            
            {/* Decorative circles */}
            <div className='absolute -top-6 -right-6 w-32 h-32 bg-primary/10 rounded-full blur-3xl -z-10' />
            <div className='absolute -bottom-10 -left-10 w-48 h-48 bg-secondary/20 rounded-full blur-3xl -z-10' />
          </div>
        </div>
      </div>
    </section>
  )
}

export default HeroSection