// File: /data/html/HouseOfCoffee/resources/js/Pages/CoffeeHouseLanding.jsx

import React, { useEffect } from 'react';
import { Head, Link } from '@inertiajs/react';
import { motion } from 'framer-motion';
// Using react-icons for FontAwesome icons instead of lucide-react for proper exports.
import { FaCoffee, FaMapMarkerAlt, FaPhone, FaInstagram, FaFacebook, FaTwitter } from 'react-icons/fa';

export default function CoffeeHouseLanding() {
    // Animation variants for staggered animations
    const containerVariants = {
        hidden: { opacity: 0 },
        visible: { 
            opacity: 1,
            transition: { 
                staggerChildren: 0.2,
                delayChildren: 0.3,
            },
        },
    };

    const itemVariants = {
        hidden: { y: 20, opacity: 0 },
        visible: { 
            y: 0, 
            opacity: 1,
            transition: { type: 'spring', stiffness: 100 },
        },
    };

    const featureCardVariants = {
        hidden: { scale: 0.8, opacity: 0 },
        visible: { 
            scale: 1, 
            opacity: 1,
            transition: { type: 'spring', damping: 12 },
        },
        hover: { 
            scale: 1.05,
            boxShadow: "0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)",
            transition: { type: 'spring', stiffness: 400, damping: 10 },
        },
    };

    // Parallax effect for background
    useEffect(() => {
        const handleScroll = () => {
            const scrollValue = window.scrollY;
            const parallaxBg = document.querySelector('.parallax-bg');
            if (parallaxBg) {
                parallaxBg.style.transform = `translateY(${scrollValue * 0.4}px)`;
            }
        };

        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    return (
        <>
            <Head title="House of Coffee | Artisanal Brews & Pastries" />

            <div className="relative min-h-screen overflow-hidden bg-[#f8f5f1] text-[#5c4033]">
                {/* Parallax Background */}
                <div className="absolute inset-0 parallax-bg">
                    <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="h-full w-full object-cover opacity-30"
                    />
                </div>
                
                {/* Overlay tint with gradient */}
                <div className="absolute inset-0 bg-gradient-to-b from-[#f8f5f1]/90 via-[#f8f5f1]/70 to-[#f8f5f1]/90" />

                {/* Header with glass effect */}
                <header className="sticky top-0 z-50 border-b border-[#5c4033]/10 bg-[#f8f5f1]/80 px-6 py-4 backdrop-blur-md">
                    <div className="mx-auto flex max-w-7xl items-center justify-between">
                        <motion.div 
                            initial={{ opacity: 0, x: -20 }}
                            animate={{ opacity: 1, x: 0 }}
                            transition={{ duration: 0.5 }}
                            className="flex items-center gap-2"
                        >
                            <FaCoffee size={28} className="text-[#8b5a2b]" />
                            <h1 className="text-3xl font-bold text-[#4b2e1a]">
                                House of Coffee
                            </h1>
                        </motion.div>
                        
                        <nav>
                            <motion.ul 
                                initial={{ opacity: 0 }}
                                animate={{ opacity: 1 }}
                                transition={{ delay: 0.3, staggerChildren: 0.1 }}
                                className="flex items-center gap-8"
                            >
                                {[
                                    { name: 'Menu', href: '#menu' },
                                    { name: 'About', href: '#about' },
                                    { name: 'Location', href: '#location' },
                                    { name: 'Contact', href: '#contact' }
                                ].map((item, index) => (
                                    <motion.li 
                                        key={index}
                                        initial={{ opacity: 0, y: -10 }}
                                        animate={{ opacity: 1, y: 0 }}
                                        transition={{ delay: 0.3 + (index * 0.1) }}
                                    >
                                        <a
                                            href={item.href}
                                            className="relative text-lg font-medium text-[#5c4033] transition after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-[#8b5a2b] after:transition-all hover:text-[#8b5a2b] hover:after:w-full"
                                        >
                                            {item.name}
                                        </a>
                                    </motion.li>
                                ))}

                                {/* Admin Login link */}
                                <motion.li
                                    initial={{ opacity: 0, y: -10 }}
                                    animate={{ opacity: 1, y: 0 }}
                                    transition={{ delay: 0.7 }}
                                >
                                    <Link
                                        href={route('login')} 
                                        className="rounded-full border-2 border-[#8b5a2b] px-4 py-2 text-sm font-semibold text-[#8b5a2b] transition-all hover:bg-[#8b5a2b] hover:text-white"
                                    >
                                        Admin Login
                                    </Link>
                                </motion.li>
                            </motion.ul>
                        </nav>
                    </div>
                </header>

                {/* Hero Section */}
                <section className="relative z-10 pt-16 lg:pt-24">
                    <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                        <motion.div 
                            initial="hidden"
                            animate="visible"
                            variants={containerVariants}
                            className="mx-auto mb-24 max-w-3xl text-center"
                        >
                            <motion.h2 
                                variants={itemVariants}
                                className="mb-6 text-5xl font-bold leading-tight text-[#4b2e1a] md:text-6xl"
                            >
                                Artisanal Coffee
                                <span className="block text-[#8b5a2b]">
                                    Expertly Crafted
                                </span>
                            </motion.h2>
                            
                            <motion.p 
                                variants={itemVariants}
                                className="mx-auto mb-10 max-w-2xl text-xl text-[#5c4033]/90"
                            >
                                Experience the perfect blend of tradition and innovation in every cup.
                                Our carefully sourced beans and skilled baristas create moments worth savoring.
                            </motion.p>
                            
                            <motion.div 
                                variants={itemVariants}
                                className="flex flex-col gap-4 sm:flex-row sm:justify-center"
                            >
                                {/* Updated "View Our Menu" button to use the 'pricemenu' route */}
                                <Link
                                    href={route('pricemenu')}
                                    className="rounded-full bg-[#8b5a2b] px-8 py-3 text-lg font-semibold text-white shadow-lg transition-all hover:bg-[#6b4521] hover:shadow-xl"
                                >
                                    View Our Menu
                                </Link>
                                <a 
                                    href="#location" 
                                    className="rounded-full border-2 border-[#8b5a2b] bg-transparent px-8 py-3 text-lg font-semibold text-[#8b5a2b] transition-all hover:bg-[#8b5a2b] hover:text-white"
                                >
                                    Find Our Location
                                </a>
                            </motion.div>
                        </motion.div>
                    </div>
                </section>

                {/* Stats Section */}
                <motion.div 
                    initial={{ opacity: 0, y: 40 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.7, delay: 0.8 }}
                    className="mx-auto mb-24 grid max-w-4xl grid-cols-2 gap-8 rounded-2xl bg-white/80 p-8 shadow-lg backdrop-blur-sm md:grid-cols-3 lg:grid-cols-4"
                >
                    {[
                        { value: '12+', label: 'Bean Varieties' },
                        { value: '20', label: 'Years Experience' },
                        { value: '3', label: 'Locations' },
                        { value: '1000+', label: 'Happy Customers' }
                    ].map((stat, index) => (
                        <div key={index} className="text-center">
                            <div className="text-2xl font-bold text-[#8b5a2b] md:text-3xl">
                                {stat.value}
                            </div>
                            <div className="text-sm text-[#5c4033] md:text-base">
                                {stat.label}
                            </div>
                        </div>
                    ))}
                </motion.div>

                {/* Featured Products Section */}
                <section id="menu" className="relative z-10 py-16">
                    <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                        <motion.div 
                            initial={{ opacity: 0, y: 20 }}
                            whileInView={{ opacity: 1, y: 0 }}
                            viewport={{ once: true }}
                            transition={{ duration: 0.5 }}
                            className="mb-12 text-center"
                        >
                            <h2 className="mb-4 text-4xl font-bold text-[#4b2e1a]">Our Specialties</h2>
                            <p className="mx-auto max-w-2xl text-lg text-[#5c4033]">
                                Discover our signature offerings, meticulously prepared with the finest ingredients
                            </p>
                        </motion.div>

                        <motion.div 
                            initial="hidden"
                            whileInView="visible"
                            viewport={{ once: true, amount: 0.2 }}
                            variants={containerVariants}
                            className="grid gap-8 md:grid-cols-3"
                        >
                            {[
                                {
                                    title: 'Specialty Coffee',
                                    description: 'Single-origin beans, expertly roasted in-house for a distinctively rich flavor profile',
                                    image: 'https://images.unsplash.com/photo-1515694346937-94d85e41e6f0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
                                },
                                {
                                    title: 'Artisanal Pastries',
                                    description: 'Handcrafted daily using traditional recipes and premium locally-sourced ingredients',
                                    image: 'https://images.unsplash.com/photo-1517433367423-c7e5b0f35086?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
                                },
                                {
                                    title: 'Inviting Atmosphere',
                                    description: 'A thoughtfully designed space that balances comfort, aesthetics, and functionality',
                                    image: 'https://images.unsplash.com/photo-1554118811-1e0d58224f24?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
                                },
                            ].map((item, index) => (
                                <motion.div
                                    key={index}
                                    variants={featureCardVariants}
                                    whileHover="hover"
                                    className="overflow-hidden rounded-xl bg-white/90 shadow-md"
                                >
                                    <div className="relative h-56 overflow-hidden">
                                        <img
                                            src={item.image}
                                            alt={item.title}
                                            className="h-full w-full object-cover transition-transform duration-700 hover:scale-110"
                                        />
                                    </div>
                                    <div className="p-6">
                                        <h3 className="mb-3 text-2xl font-semibold text-[#4b2e1a]">
                                            {item.title}
                                        </h3>
                                        <p className="text-[#5c4033]/90">
                                            {item.description}
                                        </p>
                                    </div>
                                </motion.div>
                            ))}
                        </motion.div>
                    </div>
                </section>
                
                {/* Testimonials Section */}
                <section className="relative z-10 bg-[#4b2e1a]/5 py-20">
                    <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                        <motion.div 
                            initial={{ opacity: 0, y: 20 }}
                            whileInView={{ opacity: 1, y: 0 }}
                            viewport={{ once: true }}
                            transition={{ duration: 0.5 }}
                            className="mb-12 text-center"
                        >
                            <h2 className="mb-4 text-4xl font-bold text-[#4b2e1a]">What Our Customers Say</h2>
                        </motion.div>
                        
                        <div className="mx-auto grid max-w-5xl gap-8 md:grid-cols-2">
                            {[
                                {
                                    quote: "The atmosphere is perfect for both casual get-togethers and focused work sessions. Their signature blend is my daily essential.",
                                    author: "Sarah Johnson",
                                    role: "Freelance Designer"
                                },
                                {
                                    quote: "As a coffee enthusiast, I've tried cafés all over the city. House of Coffee consistently serves the most flavorful, perfectly prepared cups.",
                                    author: "Michael Chen",
                                    role: "Coffee Blogger"
                                }
                            ].map((testimonial, index) => (
                                <motion.div 
                                    key={index}
                                    initial={{ opacity: 0, y: 30 }}
                                    whileInView={{ opacity: 1, y: 0 }}
                                    viewport={{ once: true }}
                                    transition={{ duration: 0.5, delay: index * 0.2 }}
                                    className="rounded-xl bg-white p-6 shadow-lg"
                                >
                                    <div className="mb-4 text-4xl text-[#8b5a2b]">"</div>
                                    <p className="mb-6 text-lg italic text-[#5c4033]">{testimonial.quote}</p>
                                    <div>
                                        <p className="font-semibold text-[#4b2e1a]">{testimonial.author}</p>
                                        <p className="text-sm text-[#5c4033]/70">{testimonial.role}</p>
                                    </div>
                                </motion.div>
                            ))}
                        </div>
                    </div>
                </section>
                
                {/* Location Section */}
                <section id="location" className="relative z-10 py-16">
                    <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                        <motion.div 
                            initial={{ opacity: 0, y: 20 }}
                            whileInView={{ opacity: 1, y: 0 }}
                            viewport={{ once: true }}
                            transition={{ duration: 0.5 }}
                            className="mb-12 text-center"
                        >
                            <h2 className="mb-4 text-4xl font-bold text-[#4b2e1a]">Visit Us</h2>
                            <p className="mx-auto max-w-2xl text-lg text-[#5c4033]">
                                We're conveniently located in the heart of downtown
                            </p>
                        </motion.div>
                        
                        <div className="mx-auto grid max-w-6xl gap-8 md:grid-cols-2">
                            <motion.div 
                                initial={{ opacity: 0, x: -30 }}
                                whileInView={{ opacity: 1, x: 0 }}
                                viewport={{ once: true }}
                                transition={{ duration: 0.6 }}
                                className="h-full rounded-xl bg-white p-6 shadow-lg"
                            >
                                <h3 className="mb-6 text-2xl font-semibold text-[#4b2e1a]">Our Location</h3>
                                <div className="flex items-center gap-4 text-lg">
                                    <FaMapMarkerAlt className="text-[#8b5a2b]" />
                                    <span>123 Coffee Street, Downtown</span>
                                </div>
                                <div className="mt-4 flex items-center gap-4 text-lg">
                                    <FaPhone className="text-[#8b5a2b]" />
                                    <span>(555) 123-4567</span>
                                </div>
                                
                                <h4 className="mb-3 mt-8 text-xl font-semibold text-[#4b2e1a]">Hours</h4>
                                <div className="space-y-2">
                                    <div className="flex justify-between">
                                        <span>Monday - Friday</span>
                                        <span>7:00 AM - 7:00 PM</span>
                                    </div>
                                    <div className="flex justify-between">
                                        <span>Saturday - Sunday</span>
                                        <span>8:00 AM - 6:00 PM</span>
                                    </div>
                                </div>
                            </motion.div>
                            
                            <motion.div 
                                initial={{ opacity: 0, x: 30 }}
                                whileInView={{ opacity: 1, x: 0 }}
                                viewport={{ once: true }}
                                transition={{ duration: 0.6 }}
                                className="h-80 overflow-hidden rounded-xl bg-[#e0d6c8] shadow-lg md:h-auto"
                            >
                                {/* This would be a map in a real implementation */}
                                <div className="flex h-full items-center justify-center p-4 text-center">
                                    <p className="text-lg">
                                        Interactive map would be displayed here.
                                        <br />
                                        (Requires Google Maps API or similar)
                                    </p>
                                </div>
                            </motion.div>
                        </div>
                    </div>
                </section>

                {/* Footer */}
                <footer className="relative z-10 bg-[#4b2e1a] py-12 text-white">
                    <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                        <div className="grid gap-8 md:grid-cols-3">
                            <div>
                                <h3 className="mb-4 text-xl font-bold">House of Coffee</h3>
                                <p className="mb-4 max-w-xs text-gray-300">
                                    Artisanal coffee and pastries crafted with passion and precision.
                                </p>
                                <div className="flex gap-4">
                                    <FaInstagram className="cursor-pointer text-gray-300 transition hover:text-white" size={20} />
                                    <FaFacebook className="cursor-pointer text-gray-300 transition hover:text-white" size={20} />
                                    <FaTwitter className="cursor-pointer text-gray-300 transition hover:text-white" size={20} />
                                </div>
                            </div>
                            
                            <div>
                                <h3 className="mb-4 text-xl font-bold">Quick Links</h3>
                                <ul className="space-y-2">
                                    {['Menu', 'About', 'Location', 'Contact', 'Admin'].map((item, i) => (
                                        <li key={i}>
                                            <a href="#" className="text-gray-300 transition hover:text-white">{item}</a>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                            
                            <div>
                                <h3 className="mb-4 text-xl font-bold">Newsletter</h3>
                                <p className="mb-4 text-gray-300">
                                    Subscribe to receive updates and special offers.
                                </p>
                                <form className="flex gap-2">
                                    <input 
                                        type="email" 
                                        placeholder="Your email" 
                                        className="w-full rounded-md px-3 py-2 text-[#4b2e1a]" 
                                    />
                                    <button 
                                        type="submit"
                                        className="rounded-md bg-[#8b5a2b] px-4 py-2 font-medium text-white transition hover:bg-[#a06c3b]"
                                    >
                                        Join
                                    </button>
                                </form>
                            </div>
                        </div>
                        
                        <div className="mt-8 border-t border-gray-700 pt-8 text-center text-gray-400">
                            <p>
                                © {new Date().getFullYear()} House of Coffee. All rights reserved.
                            </p>
                        </div>
                    </div>
                </footer>
            </div>
        </>
    );
}
