import React, { useState, useEffect } from 'react';
import { Head, Link, router } from '@inertiajs/react';
import { PublicLayout } from '@/Layouts/PublicLayout';
import { CurrencyPrice } from '@/Components/CurrencyPrice';
import { 
    Calendar, Users, Sparkles, Check, ArrowRight, 
    Star, MapPin, Wine, Utensils, Flower2, Shield, 
    ChevronRight, Wifi, Coffee, Award, Compass, ChevronLeft 
} from 'lucide-react';

interface Props {
    roomTypes: any[];
    packages: any[];
    diningOutlets: any[];
    spaTreatments: any[];
    testimonials: any[];
    journalPosts: any[];
    venues: any[];
}

export default function Home({
    roomTypes = [],
    packages = [],
    diningOutlets = [],
    spaTreatments = [],
    testimonials = [],
    journalPosts = [],
    venues = [],
}: Props) {
    const today = new Date().toISOString().split('T')[0];
    const tomorrowDate = new Date();
    tomorrowDate.setDate(tomorrowDate.getDate() + 1);
    const tomorrow = tomorrowDate.toISOString().split('T')[0];

    const heroImages = [
        { url: '/images/hero/hero_1.jpg', caption: 'Primon Hotel Facade & Grounds' },
        { url: '/images/hero/hero_2.jpg', caption: 'Grand Golden Onyx Reception' },
        { url: '/images/hero/hero_3.jpg', caption: 'Executive Suite & City Horizon' },
        { url: '/images/hero/hero_4.jpg', caption: 'The Heights Rooftop Lounge' },
        { url: '/images/hero/hero_5.jpg', caption: 'Holistic Spa & Thermal Sanctuary' },
    ];

    const [currentHeroIndex, setCurrentHeroIndex] = useState(0);

    useEffect(() => {
        const timer = setInterval(() => {
            setCurrentHeroIndex((prev) => (prev + 1) % heroImages.length);
        }, 5500);
        return () => clearInterval(timer);
    }, [heroImages.length]);

    const [searchParams, setSearchParams] = useState({
        check_in: today,
        check_out: tomorrow,
        adults: 1,
        children: 0,
        promo: '',
    });

    const handleSearch = (e: React.FormEvent) => {
        e.preventDefault();
        router.get('/booking', searchParams);
    };

    return (
        <PublicLayout transparentHeader={true}>
            <Head title="Primon Hotel — Luxury Boutique Hotel & Spa | Naalya, Kampala" />

            {/* 1. Cinematic Hero Section with Cross-fading Image Slider */}
            <section className="relative min-h-[90vh] lg:min-h-screen flex items-center justify-center bg-[#1A1A1A] text-[#FBF9F5] overflow-hidden">
                {/* Background image slider */}
                {heroImages.map((item, idx) => (
                    <div 
                        key={idx}
                        className={`absolute inset-0 bg-cover bg-center transition-all duration-1000 ease-in-out ${
                            idx === currentHeroIndex 
                                ? 'opacity-60 scale-105 z-0' 
                                : 'opacity-0 scale-100 -z-10 pointer-events-none'
                        }`}
                        style={{ backgroundImage: `url('${item.url}')` }}
                    />
                ))}

                {/* Darkish moody luxury gradient overlay */}
                <div className="absolute inset-0 bg-gradient-to-t from-[#1A1A1A] via-[#1A1A1A]/40 to-black/60 z-0 pointer-events-none" />

                {/* Slider pagination dots */}
                <div className="absolute top-28 right-6 sm:right-12 z-20 hidden sm:flex flex-col gap-2.5">
                    {heroImages.map((_, i) => (
                        <button
                            key={i}
                            onClick={() => setCurrentHeroIndex(i)}
                            className={`w-2 rounded-full transition-all duration-500 ${
                                i === currentHeroIndex 
                                    ? 'h-8 bg-[#C5A880] shadow-[0_0_8px_rgba(197,168,128,0.8)]' 
                                    : 'h-2 bg-white/40 hover:bg-white/70'
                            }`}
                            aria-label={`Slide ${i + 1}`}
                        />
                    ))}
                </div>

                <div className="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center pt-24 pb-32">
                    <span className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-[#C5A880]/60 bg-[#1A1A1A]/70 text-[#C5A880] text-xs uppercase tracking-[0.3em] mb-6 backdrop-blur-sm">
                        <Sparkles className="h-3.5 w-3.5" />
                        Naalya • Kampala, Uganda
                    </span>

                    <h1 className="font-serif text-4xl sm:text-6xl lg:text-7xl font-light tracking-tight leading-[1.1] mb-6 text-white">
                        Stay Above <span className="italic font-normal text-[#C5A880]">Kampala</span>.
                    </h1>

                    <p className="max-w-2xl mx-auto text-base sm:text-lg text-gray-200 font-light leading-relaxed mb-10">
                        An intimate 4-star boutique sanctuary where contemporary luxury meets panoramic hilltop horizons, refined rooftop mixology, and restorative wellness.
                    </p>

                    <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
                        <Link
                            href="/booking"
                            className="w-full sm:w-auto bg-[#C5A880] hover:bg-[#DFC7A5] text-[#1A1A1A] px-8 py-3.5 rounded-full font-semibold uppercase tracking-widest text-xs transition-all shadow-xl hover:scale-105 flex items-center justify-center gap-2"
                        >
                            <Calendar className="h-4 w-4" />
                            Book Direct & Save
                        </Link>
                        <Link
                            href="/rooms"
                            className="w-full sm:w-auto bg-white/10 hover:bg-white/20 border border-white/30 text-white px-8 py-3.5 rounded-full font-medium uppercase tracking-widest text-xs transition-all backdrop-blur-sm"
                        >
                            Explore Rooms & Suites
                        </Link>
                    </div>
                </div>

                {/* Floating Availability Search Widget */}
                <div className="absolute bottom-6 left-0 right-0 z-20 px-4 sm:px-6 lg:px-8">
                    <div className="max-w-5xl mx-auto bg-[#1A1A1A]/95 backdrop-blur-md rounded-2xl p-4 sm:p-5 border border-[#C5A880]/40 shadow-2xl">
                        <form onSubmit={handleSearch} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3 sm:gap-4 items-center">
                            {/* Check-In */}
                            <div className="flex flex-col">
                                <label className="text-[10px] uppercase tracking-wider text-[#C5A880] font-semibold mb-1">
                                    Check In
                                </label>
                                <input
                                    type="date"
                                    min={today}
                                    value={searchParams.check_in}
                                    onChange={(e) => setSearchParams({ ...searchParams, check_in: e.target.value })}
                                    className="bg-white/10 border border-white/20 text-white rounded-lg px-3 py-2 text-xs focus:outline-none focus:border-[#C5A880]"
                                />
                            </div>

                            {/* Check-Out */}
                            <div className="flex flex-col">
                                <label className="text-[10px] uppercase tracking-wider text-[#C5A880] font-semibold mb-1">
                                    Check Out
                                </label>
                                <input
                                    type="date"
                                    min={searchParams.check_in}
                                    value={searchParams.check_out}
                                    onChange={(e) => setSearchParams({ ...searchParams, check_out: e.target.value })}
                                    className="bg-white/10 border border-white/20 text-white rounded-lg px-3 py-2 text-xs focus:outline-none focus:border-[#C5A880]"
                                />
                            </div>

                            {/* Guests */}
                            <div className="flex flex-col">
                                <label className="text-[10px] uppercase tracking-wider text-[#C5A880] font-semibold mb-1">
                                    Guests
                                </label>
                                <select
                                    value={searchParams.adults}
                                    onChange={(e) => setSearchParams({ ...searchParams, adults: parseInt(e.target.value) })}
                                    className="bg-white/10 border border-white/20 text-white rounded-lg px-3 py-2 text-xs focus:outline-none focus:border-[#C5A880]"
                                >
                                    <option value={1} className="bg-[#1A1A1A]">1 Adult</option>
                                    <option value={2} className="bg-[#1A1A1A]">2 Adults</option>
                                    <option value={3} className="bg-[#1A1A1A]">3 Adults</option>
                                    <option value={4} className="bg-[#1A1A1A]">4 Adults</option>
                                </select>
                            </div>

                            {/* Promo Code */}
                            <div className="flex flex-col">
                                <label className="text-[10px] uppercase tracking-wider text-[#C5A880] font-semibold mb-1">
                                    Promo Code
                                </label>
                                <input
                                    type="text"
                                    placeholder="e.g. PRIMONVIP"
                                    value={searchParams.promo}
                                    onChange={(e) => setSearchParams({ ...searchParams, promo: e.target.value.toUpperCase() })}
                                    className="bg-white/10 border border-white/20 text-white rounded-lg px-3 py-2 text-xs uppercase placeholder-gray-400 focus:outline-none focus:border-[#C5A880]"
                                />
                            </div>

                            {/* Search Button */}
                            <div className="flex flex-col justify-end pt-1 sm:pt-0">
                                <button
                                    type="submit"
                                    className="w-full bg-[#C5A880] hover:bg-[#DFC7A5] text-[#1A1A1A] py-2.5 rounded-lg text-xs font-bold uppercase tracking-widest transition-all shadow-md flex items-center justify-center gap-1.5"
                                >
                                    <span>Check Rates</span>
                                    <ArrowRight className="h-3.5 w-3.5" />
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </section>

            {/* 2. Introduction to Primon & Mbuya Ridge */}
            <section className="py-24 bg-[#FBF9F5] text-[#1A1A1A]">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
                        <div className="lg:col-span-6 space-y-6">
                            <span className="text-xs uppercase tracking-[0.25em] text-[#C5A880] font-semibold">
                                The Primon Philosophy
                            </span>
                            <h2 className="font-serif text-3xl sm:text-5xl font-light leading-tight">
                                Serenity, Discretion & Bespoke Hospitality.
                            </h2>
                            <p className="text-sm sm:text-base text-gray-700 leading-relaxed font-light">
                                Situated atop the historic and diplomatic ridge of Naalya, Primon Hotel was conceived as a private retreat from the vibrant pace of Kampala. We combine European hospitality precision with authentic Ugandan warmth.
                            </p>
                            <p className="text-sm sm:text-base text-gray-700 leading-relaxed font-light">
                                Whether you are an international diplomat attending high-level summits, a corporate leader closing regional partnerships, or a couple seeking a weekend skyline staycation, every touchpoint at Primon is personalized to your rhythm.
                            </p>

                            <div className="grid grid-cols-3 gap-6 pt-4 border-t border-[#C5A880]/30">
                                <div>
                                    <span className="font-serif text-3xl sm:text-4xl text-[#C5A880] font-light">24</span>
                                    <p className="text-xs uppercase tracking-wider text-gray-600 mt-1">Bespoke Suites</p>
                                </div>
                                <div>
                                    <span className="font-serif text-3xl sm:text-4xl text-[#C5A880] font-light">360°</span>
                                    <p className="text-xs uppercase tracking-wider text-gray-600 mt-1">Skyline Views</p>
                                </div>
                                <div>
                                    <span className="font-serif text-3xl sm:text-4xl text-[#C5A880] font-light">100%</span>
                                    <p className="text-xs uppercase tracking-wider text-gray-600 mt-1">Direct Support</p>
                                </div>
                            </div>
                        </div>

                        <div className="lg:col-span-6 grid grid-cols-2 gap-4">
                            <img
                                src="/images/rooms/standard_room.jpg"
                                alt="Primon Hotel Deluxe Suite"
                                className="rounded-2xl shadow-xl w-full h-72 sm:h-88 object-cover"
                            />
                            <img
                                src="/images/rooms/presidential_suite.jpg"
                                alt="Primon Presidential Lounge"
                                className="rounded-2xl shadow-xl w-full h-72 sm:h-88 object-cover mt-8"
                            />
                        </div>
                    </div>
                </div>
            </section>

            {/* 3. Featured Rooms & Suites Showcase */}
            <section className="py-24 bg-[#F3EFEA]">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="flex flex-col md:flex-row md:items-end justify-between mb-12">
                        <div className="space-y-2">
                            <span className="text-xs uppercase tracking-[0.25em] text-[#C5A880] font-semibold">
                                Private Sanctuaries
                            </span>
                            <h2 className="font-serif text-3xl sm:text-5xl font-light">
                                Rooms & Executive Suites
                            </h2>
                        </div>
                        <Link
                            href="/rooms"
                            className="mt-4 md:mt-0 inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-[#1A1A1A] hover:text-[#C5A880] transition-colors"
                        >
                            <span>View All Room Tiers</span>
                            <ArrowRight className="h-4 w-4" />
                        </Link>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        {roomTypes.slice(0, 3).map((room) => (
                            <div 
                                key={room.id}
                                className="group bg-[#FBF9F5] rounded-2xl overflow-hidden border border-[#C5A880]/20 shadow-lg hover:shadow-2xl transition-all duration-300 flex flex-col"
                            >
                                <div className="relative h-64 overflow-hidden">
                                    <img
                                        src={room.featured_image || '/images/rooms/standard_room.jpg'}
                                        alt={room.name}
                                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                                    />
                                    <div className="absolute top-4 right-4 bg-[#1A1A1A]/80 backdrop-blur-md px-3.5 py-1.5 rounded-full border border-[#C5A880]/40 text-xs font-medium text-[#FBF9F5]">
                                        <CurrencyPrice amountUsd={room.base_price_usd} /> / night
                                    </div>
                                </div>

                                <div className="p-6 flex-1 flex flex-col justify-between space-y-4">
                                    <div>
                                        <div className="text-[10px] uppercase tracking-wider text-[#C5A880] font-semibold mb-1">
                                            {room.size_sqm} m² • {room.bed_type} • Up to {room.max_occupancy} Guests
                                        </div>
                                        <h3 className="font-serif text-2xl font-normal text-[#1A1A1A]">
                                            {room.name}
                                        </h3>
                                        <p className="text-xs text-gray-600 line-clamp-2 mt-2 leading-relaxed font-light">
                                            {room.short_description}
                                        </p>
                                    </div>

                                    <div className="pt-4 border-t border-gray-200 flex items-center justify-between">
                                        <Link
                                            href={`/rooms/${room.slug}`}
                                            className="text-xs font-semibold uppercase tracking-wider text-[#1A1A1A] hover:text-[#C5A880] transition-colors"
                                        >
                                            Room Details
                                        </Link>
                                        <Link
                                            href={`/booking?room_type_id=${room.id}`}
                                            className="bg-[#1A1A1A] hover:bg-[#C5A880] hover:text-[#1A1A1A] text-[#FBF9F5] px-4 py-2 rounded-full text-xs font-medium uppercase tracking-wider transition-all"
                                        >
                                            Book Room
                                        </Link>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* 4. Direct Booking Advantages */}
            <section className="py-20 bg-[#1A1A1A] text-[#FBF9F5] border-y border-[#C5A880]/20">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="text-center max-w-2xl mx-auto mb-16 space-y-2">
                        <span className="text-xs uppercase tracking-[0.3em] text-[#C5A880] font-semibold">
                            Direct Booking Privileges
                        </span>
                        <h2 className="font-serif text-3xl sm:text-4xl font-light text-white">
                            Why Book Directly With Primon
                        </h2>
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                        <div className="p-6 rounded-2xl bg-white/5 border border-white/10 space-y-3">
                            <div className="w-10 h-10 rounded-full bg-[#C5A880]/20 border border-[#C5A880] flex items-center justify-center text-[#C5A880]">
                                <Coffee className="h-5 w-5" />
                            </div>
                            <h3 className="font-serif text-lg font-medium text-white">Breakfast Privileges</h3>
                            <p className="text-xs text-gray-400 leading-relaxed font-light">
                                Access exclusive Bed & Breakfast rates and artisan breakfast buffet inclusion.
                            </p>
                        </div>

                        <div className="p-6 rounded-2xl bg-white/5 border border-white/10 space-y-3">
                            <div className="w-10 h-10 rounded-full bg-[#C5A880]/20 border border-[#C5A880] flex items-center justify-center text-[#C5A880]">
                                <Sparkles className="h-5 w-5" />
                            </div>
                            <h3 className="font-serif text-lg font-medium text-white">Priority Room Allocation</h3>
                            <p className="text-xs text-gray-400 leading-relaxed font-light">
                                Guaranteed highest available floor with panoramic sunset skyline views.
                            </p>
                        </div>

                        <div className="p-6 rounded-2xl bg-white/5 border border-white/10 space-y-3">
                            <div className="w-10 h-10 rounded-full bg-[#C5A880]/20 border border-[#C5A880] flex items-center justify-center text-[#C5A880]">
                                <Shield className="h-5 w-5" />
                            </div>
                            <h3 className="font-serif text-lg font-medium text-white">Flexible Cancellation</h3>
                            <p className="text-xs text-gray-400 leading-relaxed font-light">
                                Modify or cancel without penalties up to 24 hours before your arrival.
                            </p>
                        </div>

                        <div className="p-6 rounded-2xl bg-white/5 border border-white/10 space-y-3">
                            <div className="w-10 h-10 rounded-full bg-[#C5A880]/20 border border-[#C5A880] flex items-center justify-center text-[#C5A880]">
                                <Compass className="h-5 w-5" />
                            </div>
                            <h3 className="font-serif text-lg font-medium text-white">Dedicated WhatsApp Concierge</h3>
                            <p className="text-xs text-gray-400 leading-relaxed font-light">
                                Direct line to reception for seamless airport transfers and table reservations.
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            {/* 5. Culinary & Rooftop Lounge */}
            <section className="py-24 bg-[#FBF9F5]">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
                        <div className="lg:col-span-6 relative">
                            <img
                                src="/images/hero/hero_4.jpg"
                                alt="The Heights Rooftop Lounge"
                                className="rounded-3xl shadow-2xl w-full h-[460px] object-cover"
                            />
                            <div className="absolute -bottom-6 -right-6 bg-[#1A1A1A] text-[#FBF9F5] p-6 rounded-2xl shadow-xl max-w-xs border border-[#C5A880]/40 hidden sm:block">
                                <span className="text-[10px] uppercase tracking-widest text-[#C5A880] font-semibold">
                                    Kampala Sunsets
                                </span>
                                <h4 className="font-serif text-lg font-medium mt-1">The Heights Rooftop Lounge</h4>
                                <p className="text-xs text-gray-300 font-light mt-1">Craft mixology & tapas above Naalya.</p>
                            </div>
                        </div>

                        <div className="lg:col-span-6 space-y-6">
                            <span className="text-xs uppercase tracking-[0.25em] text-[#C5A880] font-semibold">
                                Gastronomic Excellence
                            </span>
                            <h2 className="font-serif text-3xl sm:text-5xl font-light">
                                The Primon Restaurant & Rooftop Lounge
                            </h2>
                            <p className="text-sm sm:text-base text-gray-700 font-light leading-relaxed">
                                Experience fine dining rooted in the rich soils of Uganda and elevated by international technique. From morning espresso and artisan bakery to dry-aged steaks and botanical gin infusions under the sunset sky.
                            </p>

                            <div className="space-y-3 pt-2">
                                <div className="flex items-start gap-3">
                                    <div className="p-1 rounded-full bg-[#C5A880]/20 text-[#C5A880] mt-0.5">
                                        <Check className="h-3.5 w-3.5" />
                                    </div>
                                    <div>
                                        <h4 className="text-sm font-semibold text-[#1A1A1A]">The Primon Restaurant</h4>
                                        <p className="text-xs text-gray-600 font-light">Fine indoor dining & garden terrace open all day.</p>
                                    </div>
                                </div>

                                <div className="flex items-start gap-3">
                                    <div className="p-1 rounded-full bg-[#C5A880]/20 text-[#C5A880] mt-0.5">
                                        <Check className="h-3.5 w-3.5" />
                                    </div>
                                    <div>
                                        <h4 className="text-sm font-semibold text-[#1A1A1A]">The Heights Rooftop Lounge</h4>
                                        <p className="text-xs text-gray-600 font-light">Sunset cocktails, champagne by the glass & ambient jazz.</p>
                                    </div>
                                </div>
                            </div>

                            <div className="pt-4 flex items-center gap-4">
                                <Link
                                    href="/dining"
                                    className="bg-[#1A1A1A] hover:bg-[#C5A880] hover:text-[#1A1A1A] text-[#FBF9F5] px-6 py-3 rounded-full text-xs font-semibold uppercase tracking-widest transition-all"
                                >
                                    View Digital Menus
                                </Link>
                                <Link
                                    href="/dining"
                                    className="text-xs uppercase tracking-wider font-semibold text-[#1A1A1A] hover:text-[#C5A880] transition-colors"
                                >
                                    Reserve a Table →
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* 6. Primon Spa & Wellness Sanctuary */}
            <section className="py-24 bg-[#1A1A1A] text-[#FBF9F5] relative overflow-hidden">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                    <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
                        <div className="lg:col-span-6 space-y-6">
                            <span className="text-xs uppercase tracking-[0.25em] text-[#C5A880] font-semibold">
                                Holistic Restoration
                            </span>
                            <h2 className="font-serif text-3xl sm:text-5xl font-light text-white">
                                Primon Spa Sanctuary
                            </h2>
                            <p className="text-sm sm:text-base text-gray-300 font-light leading-relaxed">
                                Step into an oasis of tranquility designed to dissolve the fatigue of global travel and executive routines. Our certified therapists utilize organic botanical balms, volcanic stones, and deep tissue acupressure.
                            </p>

                            <div className="grid grid-cols-2 gap-4 pt-2">
                                <div className="p-4 rounded-xl bg-white/5 border border-white/10">
                                    <h4 className="font-serif text-base font-medium text-[#C5A880]">Couples Harmony</h4>
                                    <p className="text-xs text-gray-400 mt-1 font-light">Dual side-by-side aromatherapy rituals.</p>
                                </div>
                                <div className="p-4 rounded-xl bg-white/5 border border-white/10">
                                    <h4 className="font-serif text-base font-medium text-[#C5A880]">Deep Muscle Release</h4>
                                    <p className="text-xs text-gray-400 mt-1 font-light">Targeted pressure therapy for travelers.</p>
                                </div>
                            </div>

                            <div className="pt-2">
                                <Link
                                    href="/spa"
                                    className="inline-flex items-center gap-2 bg-[#C5A880] hover:bg-[#DFC7A5] text-[#1A1A1A] px-7 py-3 rounded-full text-xs font-semibold uppercase tracking-widest transition-all shadow-lg"
                                >
                                    <Flower2 className="h-4 w-4" />
                                    <span>Explore Spa Menu & Book</span>
                                </Link>
                            </div>
                        </div>

                        <div className="lg:col-span-6">
                            <img
                                src="https://images.unsplash.com/photo-1544161515-4ab6ce6db874?auto=format&fit=crop&w=1000&q=80"
                                alt="Primon Spa Wellness"
                                className="rounded-3xl shadow-2xl w-full h-[420px] object-cover border border-[#C5A880]/30"
                            />
                        </div>
                    </div>
                </div>
            </section>

            {/* 7. Guest Testimonials */}
            <section className="py-24 bg-[#FBF9F5]">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="text-center max-w-2xl mx-auto mb-16 space-y-2">
                        <span className="text-xs uppercase tracking-[0.3em] text-[#C5A880] font-semibold">
                            Guest Impressions
                        </span>
                        <h2 className="font-serif text-3xl sm:text-4xl font-light">
                            Unforgettable Stays
                        </h2>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        {testimonials.map((t) => (
                            <div 
                                key={t.id}
                                className="bg-[#F3EFEA] p-8 rounded-2xl border border-[#C5A880]/20 flex flex-col justify-between space-y-6 shadow-sm"
                            >
                                <div className="space-y-4">
                                    <div className="flex text-[#C5A880] gap-1">
                                        {[...Array(t.rating)].map((_, i) => (
                                            <Star key={i} className="h-4 w-4 fill-current" />
                                        ))}
                                    </div>
                                    <p className="text-xs sm:text-sm text-gray-700 italic font-serif leading-relaxed">
                                        "{t.comment}"
                                    </p>
                                </div>

                                <div className="pt-4 border-t border-gray-300/60 flex items-center justify-between">
                                    <div>
                                        <h4 className="text-xs font-bold text-[#1A1A1A]">{t.guest_name}</h4>
                                        <p className="text-[10px] text-gray-500">{t.guest_location}</p>
                                    </div>
                                    <span className="text-[9px] uppercase tracking-wider text-[#C5A880] font-medium bg-[#1A1A1A] px-2 py-0.5 rounded">
                                        {t.source}
                                    </span>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* 8. Editorial Destination Section — Kampala Guide */}
            <section className="py-24 bg-[#F3EFEA] border-t border-gray-200">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="flex flex-col md:flex-row md:items-end justify-between mb-12">
                        <div className="space-y-2">
                            <span className="text-xs uppercase tracking-[0.25em] text-[#C5A880] font-semibold">
                                The Kampala Guide
                            </span>
                            <h2 className="font-serif text-3xl sm:text-5xl font-light">
                                Stories & Destination Insights
                            </h2>
                        </div>
                        <Link
                            href="/journal/kampala-guide"
                            className="mt-4 md:mt-0 inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-[#1A1A1A] hover:text-[#C5A880] transition-colors"
                        >
                            <span>Explore Destination Guide</span>
                            <ArrowRight className="h-4 w-4" />
                        </Link>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        {journalPosts.slice(0, 3).map((post) => (
                            <Link
                                key={post.id}
                                href={`/journal/${post.slug}`}
                                className="group bg-[#FBF9F5] rounded-2xl overflow-hidden border border-[#C5A880]/20 shadow-md hover:shadow-xl transition-all flex flex-col"
                            >
                                <div className="h-48 overflow-hidden">
                                    <img
                                        src={post.featured_image || 'https://images.unsplash.com/photo-1547471080-7cc2caa01a7e?auto=format&fit=crop&w=800&q=80'}
                                        alt={post.title}
                                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                                    />
                                </div>
                                <div className="p-6 flex-1 flex flex-col justify-between space-y-3">
                                    <div>
                                        <span className="text-[10px] uppercase tracking-wider text-[#C5A880] font-semibold">
                                            {post.category}
                                        </span>
                                        <h3 className="font-serif text-xl font-normal text-[#1A1A1A] group-hover:text-[#C5A880] transition-colors mt-1">
                                            {post.title}
                                        </h3>
                                        <p className="text-xs text-gray-600 line-clamp-2 mt-2 font-light leading-relaxed">
                                            {post.excerpt}
                                        </p>
                                    </div>
                                    <span className="text-xs font-semibold text-[#1A1A1A] inline-flex items-center gap-1 group-hover:gap-2 transition-all">
                                        Read Story →
                                    </span>
                                </div>
                            </Link>
                        ))}
                    </div>
                </div>
            </section>

            {/* 9. Final Booking Call to Action */}
            <section className="py-20 bg-[#1A1A1A] text-[#FBF9F5] text-center border-t border-[#C5A880]/20">
                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
                    <span className="text-xs uppercase tracking-[0.3em] text-[#C5A880] font-semibold">
                        Your Stay In Kampala Begins Here
                    </span>
                    <h2 className="font-serif text-3xl sm:text-5xl font-light text-white leading-tight">
                        Reserve Your Boutique Experience at Primon Hotel.
                    </h2>
                    <p className="text-sm sm:text-base text-gray-300 max-w-xl mx-auto font-light leading-relaxed">
                        Best rate guarantee, complimentary priority high-floor allocation, and bespoke concierge assistance on every direct reservation.
                    </p>
                    <div className="pt-4 flex flex-col sm:flex-row items-center justify-center gap-4">
                        <Link
                            href="/booking"
                            className="w-full sm:w-auto bg-[#C5A880] hover:bg-[#DFC7A5] text-[#1A1A1A] px-10 py-4 rounded-full font-bold uppercase tracking-widest text-xs transition-all shadow-xl hover:scale-105"
                        >
                            Check Availability & Book Direct
                        </Link>
                        <Link
                            href="/hotel/contact"
                            className="w-full sm:w-auto border border-white/30 hover:border-white text-white px-8 py-4 rounded-full font-medium uppercase tracking-widest text-xs transition-all"
                        >
                            Contact Concierge
                        </Link>
                    </div>
                </div>
            </section>
        </PublicLayout>
    );
}
