'use client'
import Image from 'next/image'
import Link from 'next/link'
import Button from '@/components/ui/Button'

export default function BushEscapeBookingSection() {
  return (
    <section data-vula-section="bushescapebooking" id="bush-escape-booking" className="relative py-24 overflow-hidden">
      <div className="absolute inset-0">
        <Image
          src="https://images.pexels.com/photos/18611231/pexels-photo-18611231.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
          alt="Golden savannah at sunset with acacia trees"
          fill
          sizes="100vw"
          className="object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-[#211c0d]/80 to-[#211c0d]/50" />
      </div>
      <div className="relative container mx-auto px-4 text-center text-white">
        <p className="text-[#d4af37] font-semibold tracking-wider uppercase mb-4">
          Your suite awaits
        </p>
        <h2 className="text-4xl md:text-5xl font-bold mb-6 leading-tight">
          <span className="text-[#d4af37]">One night</span> under a canopy of stars
        </h2>
        <p className="text-lg max-w-2xl mx-auto mb-8 opacity-90">
          Reserve your exclusive suite at Zulu Lodge — where the rhythms of the bush
          lull you to sleep and the dawn brings a chorus of birdsong. Each booking
          includes a private game drive and a traditional Zulu dinner.
        </p>
        <Link href="/booking">
          <Button variant="default" size="lg">
            Secure Your Stay
          </Button>
        </Link>
      </div>
    </section>
  )
}