import { Head } from '@inertiajs/react';

export default function CoffeeHouseLanding() {
    return (
        <>
            <Head title="House of Coffee" />
            
            {/* Main coffee house landing section with the coffee-themed background */}
            <div className="relative min-h-screen bg-[#f7f3ed] text-[#5c4033]">
                {/* Background image */}
                <img
                    src="https://images.unsplash.com/photo-1513373319109-a5f1ae4b27e1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80"
                    alt="Coffee background"
                    className="absolute inset-0 h-full w-full object-cover opacity-30"
                />
                {/* Overlay tint */}
                <div className="absolute inset-0 bg-[#f7f3ed]/70"></div>
                
                {/* Header/Navigation */}
                <header className="relative z-20 border-b border-[#5c4033]/20 bg-[#f7f3ed]/90 px-6 py-4 shadow-sm">
                    <div className="mx-auto flex max-w-7xl items-center justify-between">
                        <div className="flex items-center">
                            <h1 className="text-3xl font-bold text-[#4b2e1a]">House of Coffee</h1>
                        </div>
                        <nav>
                            <ul className="flex space-x-6">
                                <li><a href="#" className="text-lg font-medium text-[#5c4033] hover:text-[#8c6c5c]">Menu</a></li>
                                <li><a href="#" className="text-lg font-medium text-[#5c4033] hover:text-[#8c6c5c]">About</a></li>
                                <li><a href="#" className="text-lg font-medium text-[#5c4033] hover:text-[#8c6c5c]">Location</a></li>
                                <li><a href="#" className="text-lg font-medium text-[#5c4033] hover:text-[#8c6c5c]">Contact</a></li>
                            </ul>
                        </nav>
                    </div>
                </header>

                {/* Main content container */}
                <div className="relative z-10 px-4 py-16 sm:px-6 lg:px-8">
                    <div className="mx-auto max-w-7xl">
                        {/* Hero section */}
                        <div className="mb-16 text-center">
                            <h2 className="mb-4 text-5xl font-bold text-[#4b2e1a]">Welcome to our Coffee House</h2>
                            <p className="mx-auto mb-8 max-w-2xl text-xl text-[#5c4033]">
                                Discover the finest artisanal coffee and a warm, inviting atmosphere
                            </p>
                            <button className="rounded-md bg-[#8b5a2b] px-6 py-3 text-lg font-semibold text-white transition hover:bg-[#6b4521]">
                                View Our Menu
                            </button>
                        </div>

                        {/* Featured products */}
                        <div className="grid gap-8 md:grid-cols-3">
                            {[
                                {
                                    title: "Specialty Coffee",
                                    description: "Single-origin beans, expertly roasted in-house",
                                    image: "https://images.unsplash.com/photo-1515694346937-94d85e41e6f0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
                                },
                                {
                                    title: "Fresh Pastries",
                                    description: "Baked daily using traditional recipes",
                                    image: "https://images.unsplash.com/photo-1517433367423-c7e5b0f35086?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
                                },
                                {
                                    title: "Cozy Atmosphere",
                                    description: "The perfect place to relax or work",
                                    image: "https://images.unsplash.com/photo-1554118811-1e0d58224f24?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
                                }
                            ].map((item, i) => (
                                <div key={i} className="overflow-hidden rounded-lg bg-white/90 shadow-md transition hover:shadow-lg">
                                    <img 
                                        src={item.image} 
                                        alt={item.title} 
                                        className="h-48 w-full object-cover"
                                    />
                                    <div className="p-6">
                                        <h3 className="mb-2 text-xl font-semibold text-[#4b2e1a]">{item.title}</h3>
                                        <p className="text-[#5c4033]">{item.description}</p>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}