vula-178c5c77/src/components/sections/BookYourRoyalStaySection.tsx

'use client'

import Button from '@/components/ui/Button'
import { Shield } from 'lucide-react'

export default function BookYourRoyalStaySection() {
  return (
    <section
      id="book-royal-stay"
      data-vula-section="book-royal-stay"
      className="relative bg-[#8b5a3c] py-20 px-6 overflow-hidden"
    >
      {/* Decorative golden accent bar */}
      <div className="absolute top-0 left-0 w-full h-1 bg-[#d4af37]" />

      <div className="max-w-3xl mx-auto text-center">
        <h2 className="text-4xl md:text-5xl font-bold text-white mb-4">
          Ready for Your Regal Retreat?
        </h2>
        <p className="text-lg md:text-xl text-white/80 mb-6 max-w-2xl mx-auto">
          Every booking with KwaNtofoNtofo is secured with peace of mind – your private
          en-suite, traditional breakfast, and tranquil garden views await.
        </p>

        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-8">
          <Button
            variant="default"
            size="lg"
            className="bg-[#d4af37] hover:bg-[#c39d2e] text-white px-10 py-4 rounded-lg font-semibold shadow-[var(--shadow-lifted)] transition-all duration-200"
            asChild
          >
            <a href="/booking">
              Book Your Royal Stay
            </a>
          </Button>
        </div>

        <div className="flex items-center justify-center gap-2 text-white/70 text-sm">
          <Shield className="w-4 h-4" />
          <span>Secure booking &middot; Free cancellation up to 24h before arrival</span>
        </div>
      </div>
    </section>
  )
}