import React from 'react';
import { Head, Link } from '@inertiajs/react';
import { PublicLayout } from '@/Layouts/PublicLayout';
import { MapPin, Compass, Utensils, Music, ShoppingBag, Shield } from 'lucide-react';

interface Props {
    posts: any[];
}

export default function KampalaGuide({ posts = [] }: Props) {
    const highlights = [
        {
            title: 'Naalya & Kampala Outskirts',
            desc: 'Serene residential neighbourhood with easy access to major roads, embassies, and business districts.',
            icon: Shield,
        },
        {
            title: 'Bugolobi Dining & Nightlife (5 Mins)',
            desc: 'Vibrant cocktail bars, artisan coffee shops, and international restaurants on Village Mall & Bandali Rise.',
            icon: Utensils,
        },
        {
            title: 'Nakasero Business District (15 Mins)',
            desc: 'Government ministries, multinational headquarters, and commercial banks.',
            icon: Compass,
        },
        {
            title: 'Arts & Cultural Heritage',
            desc: 'Uganda National Museum, Ndere Cultural Centre, and artisanal craft markets.',
            icon: Music,
        },
    ];

    return (
        <PublicLayout>
            <Head title="Kampala Destination & Naalya Guide — Primon Hotel" />

            <section className="relative py-28 bg-[#1A1A1A] text-[#FBF9F5] text-center border-b border-[#C5A880]/20">
                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-4">
                    <span className="text-xs uppercase tracking-[0.3em] text-[#C5A880] font-semibold">
                        Destination Uganda
                    </span>
                    <h1 className="font-serif text-4xl sm:text-6xl font-light text-white">
                        The Kampala & Naalya Guide
                    </h1>
                    <p className="text-sm sm:text-base text-gray-300 font-light max-w-2xl mx-auto leading-relaxed">
                        An insider guide for international business leaders, diplomats, and vacationers navigating the Pearl of Africa.
                    </p>
                </div>
            </section>

            <section className="py-20 bg-[#FBF9F5]">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-16">
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                        {highlights.map((h, i) => {
                            const Icon = h.icon;
                            return (
                                <div key={i} className="bg-[#F3EFEA] p-8 rounded-3xl border border-[#C5A880]/20 space-y-3 shadow-sm">
                                    <Icon className="h-6 w-6 text-[#C5A880]" />
                                    <h3 className="font-serif text-xl font-medium text-[#1A1A1A]">{h.title}</h3>
                                    <p className="text-xs text-gray-600 font-light leading-relaxed">{h.desc}</p>
                                </div>
                            );
                        })}
                    </div>

                    <div className="space-y-8 pt-8 border-t border-gray-200">
                        <h2 className="font-serif text-3xl font-light text-[#1A1A1A]">
                            Curated Neighborhood Guides
                        </h2>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                            {posts.map((post) => (
                                <Link
                                    key={post.id}
                                    href={`/journal/${post.slug}`}
                                    className="group bg-[#F3EFEA] rounded-3xl overflow-hidden border border-[#C5A880]/20 shadow-md hover:shadow-xl transition-all flex flex-col sm:flex-row"
                                >
                                    <div className="sm:w-1/2 h-56 sm:h-auto 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 sm:w-1/2 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 font-light line-clamp-3 leading-relaxed mt-2">
                                                {post.excerpt}
                                            </p>
                                        </div>
                                        <span className="text-xs font-semibold text-[#1A1A1A]">Read Guide →</span>
                                    </div>
                                </Link>
                            ))}
                        </div>
                    </div>
                </div>
            </section>
        </PublicLayout>
    );
}
