'use client'
import Image from 'next/image'
import { useVulaContent } from '@/hooks/useVulaContent'

export default function HeroSection() {
  const { items, loading } = useVulaContent('hero_banners')
  if (loading) return <div className="flex justify-center py-16"><div className="w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin" /></div>
  if (items.length === 0) return null

  return (
    <section id="hero" data-vula-section="hero" data-vula-cms="hero_banners" className="relative overflow-hidden bg-gray-900 text-white">
      {items.slice(0, 1).map((item) => {
        const d = item.data as { title?: string; subtitle?: string; cta_text?: string; cta_url?: string; image?: string }
        return (
          <div key={item.id} className="relative min-h-[480px] flex items-center">
            {d.image && <Image src={d.image} alt={d.title || ''} fill className="object-cover opacity-40" />}
            <div className="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
              {d.title && <h2 className="text-4xl sm:text-5xl font-bold mb-4 max-w-2xl">{d.title}</h2>}
              {d.subtitle && <p className="text-xl text-gray-200 mb-8 max-w-xl">{d.subtitle}</p>}
              {d.cta_text && (
                d.cta_url
                  ? <a href={d.cta_url} className="inline-flex items-center px-8 py-3 bg-white text-gray-900 font-bold rounded-full hover:bg-gray-100 transition-colors">{d.cta_text}</a>
                  : <button className="inline-flex items-center px-8 py-3 bg-white text-gray-900 font-bold rounded-full hover:bg-gray-100 transition-colors">{d.cta_text}</button>
              )}
            </div>
          </div>
        )
      })}
    </section>
  )
}