'use client'

import { useEmDashContent } from '@/hooks/useEmDashContent'
import Image from 'next/image'
import Button from '@/components/ui/Button'

export default function RoyalRetreatCampaignSection() {
  const { items, loading } = useEmDashContent('campaigns')

  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

  // Show only the first campaign for spotlight
  const campaign = items[0]
  const d = campaign.data as { title?: string; headline?: string; body?: string; cta_text?: string; image?: string }

  if (!d.image) return null

  return (
    <section id="campaign-highlight" data-vula-section="royalretreatcampaign" data-vula-cms="campaigns" className="relative min-h-[70vh] flex items-center overflow-hidden">
      <div className="absolute inset-0">
        <Image
          src={d.image}
          alt={d.headline || 'Campaign'}
          fill
          sizes="100vw"
          className="object-cover"
          priority
        />
        <div className="absolute inset-0 bg-gradient-to-r from-black/70 via-black/40 to-transparent" />
      </div>
      <div className="relative z-10 max-w-7xl mx-auto px-6 py-20 w-full">
        <div className="max-w-xl">
          {d.headline && (
            <h2 className="text-4xl md:text-5xl font-bold text-white mb-4 leading-tight">
              {d.headline}
            </h2>
          )}
          {d.body && (
            <p className="text-lg text-white/80 mb-8 max-w-lg">
              {d.body}
            </p>
          )}
          {d.cta_text && (
            <Button
              variant="default"
              size="lg"
              className="bg-[#d4af37] hover:bg-[#d4af37]/90 text-white px-8 py-4 text-lg"
            >
              {d.cta_text}
            </Button>
          )}
        </div>
      </div>
    </section>
  )
}