'use client'

import { Link } from 'next/link'
import Image from 'next/image'
import Button from '@/components/ui/Button'
import { MapPin } from 'lucide-react'

export default function RegalWelcomeSection() {
  return (
    <section data-vula-section="regalwelcome" id="hero" className="relative min-h-screen flex items-center justify-center overflow-hidden">
      <div className="absolute inset-0">
        <Image
          src="https://images.pexels.com/photos/33613747/pexels-photo-33613747.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
          alt="KwaNtofontofo Guest House entrance with warm African sunset"
          fill
          sizes="100vw"
          className="object-cover brightness-[0.6]"
          priority
        />
      </div>
      <div className="relative z-10 text-center px-4 md:px-8 max-w-4xl">
        <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-4 drop-shadow-lg leading-tight">
          KwaNtofontofo
        </h1>
        <p className="text-lg md:text-2xl text-white/90 mb-2 font-serif italic">
          &ldquo;I am because we are&rdquo; &mdash; Ubuntu meets English grace
        </p>
        <p className="text-base md:text-xl text-white/80 mb-6 max-w-2xl mx-auto">
          A cosy home away from home with complete privacy, tranquil gardens, and royal treatment.
        </p>
        <div className="flex justify-center gap-4 mb-8">
          <a
            href="/booking"
            className="bg-[#d4af37] hover:bg-[#c49a2e] text-white font-semibold px-8 py-4 rounded-lg shadow-lg transition-all duration-200 ease-out text-lg"
          >
            ★ Book a Room
          </a>
          <a
            href="#themed-suites"
            className="border-2 border-white text-white font-semibold px-8 py-4 rounded-lg hover:bg-white hover:text-gray-900 transition-all duration-200 ease-out text-lg"
          >
            Explore Suites
          </a>
        </div>
        <div className="flex flex-wrap justify-center gap-6 text-white/70 text-sm">
          <span className="flex items-center gap-1"><MapPin className="w-4 h-4" /> 44 Rutherford Circle, Bisley</span>
          <span className="flex items-center gap-1"><MapPin className="w-4 h-4" /> 1 km from Pietermaritzburg Airport</span>
        </div>
      </div>
    </section>
  )
}