import { Link } from '@inertiajs/react';
import { ArrowRight, Facebook, Instagram, Twitter, X, Youtube } from 'lucide-react';
import { useEffect, useState } from 'react';

export default function Homepage() {
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const [isScrolled, setIsScrolled] = useState(false);

    useEffect(() => {
        const handleScroll = () => {
            setIsScrolled(window.scrollY > 20);
        };
        window.addEventListener('scroll', handleScroll);

        // Smooth scroll for anchor links
        const observerOptions = {
            threshold: 0.1
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('opacity-100', 'translate-y-0');
                    entry.target.classList.remove('opacity-0', 'translate-y-10');
                }
            });
        }, observerOptions);

        document.querySelectorAll('section').forEach(section => {
            section.classList.add('transition-all', 'duration-1000', 'opacity-0', 'translate-y-10');
            observer.observe(section);
        });

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

    const scrollToSection = (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
        e.preventDefault();
        const element = document.querySelector(id);
        if (element) {
            element.scrollIntoView({ behavior: 'smooth' });
            setIsMenuOpen(false);
        }
    };

    return (
        <>
            <style>{`
                html { 
                    scroll-behavior: smooth; 
                    scroll-padding-top: 54px;
                }
            `}</style>
            <div className="min-h-screen scroll-smooth bg-[#f7f3eb] font-serif text-[#1e4a6d] selection:bg-[#1e4a6d] selection:text-white">
                {/* Navbar */}
                <header className={`sticky top-0 z-50 border-b border-[#1e4a6d]/10 transition-all duration-300 ${isScrolled ? 'bg-[#f7f3eb]/80 py-3 backdrop-blur-md' : 'bg-transparent py-5'
                    }`}>
                    <div className="mx-auto flex max-w-7xl items-center justify-between px-6 lg:px-12">
                        <div className="flex items-center gap-2 text-xl font-bold uppercase tracking-tighter">
                            VN Grup
                        </div>

                        <nav className="hidden items-center gap-10 text-[10px] font-bold uppercase tracking-[0.2em] md:flex">
                            <a href="#homepage" onClick={(e) => scrollToSection(e, '#homepage')} className="hover:opacity-70 transition-opacity">Beranda</a>
                            <a href="#product" onClick={(e) => scrollToSection(e, '#product')} className="hover:opacity-70 transition-opacity">Produk</a>
                            <a href="#howToOrder" onClick={(e) => scrollToSection(e, '#howToOrder')} className="hover:opacity-70 transition-opacity">Cara Pesan</a>
                            <a href="#aboutUs" onClick={(e) => scrollToSection(e, '#aboutUs')} className="hover:opacity-70 transition-opacity">Tentang Kami</a>
                        </nav>

                        <div className="flex items-center gap-4">
                            <button className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest hover:opacity-70" onClick={() => setIsMenuOpen(!isMenuOpen)}>
                                Menu
                                <div className="flex flex-col gap-1">
                                    <div className="h-[1px] w-5 bg-[#1e4a6d]"></div>
                                    <div className="h-[1px] w-5 bg-[#1e4a6d]"></div>
                                </div>
                            </button>
                        </div>
                    </div>
                </header>

                {/* Hero Section */}
                <section id="homepage" className="border-b border-[#1e4a6d]/20">
                    <div className="mx-auto max-w-7xl px-6 py-12 lg:px-12">
                        <div className="grid grid-cols-1 gap-12 lg:grid-cols-12 lg:items-center">

                            {/* Categories List */}
                            <div className="order-2 flex flex-col justify-center lg:order-1 lg:col-span-3">
                                <div className="relative mb-8">
                                    <div className="flex flex-col border-y border-[#1e4a6d]/20">
                                        {['Kenyamanan Terpilih', 'Kemewahan Harian', 'Gaya Berkelanjutan', 'Seri Oxford', 'Seri Flanel'].map((cat) => (
                                            <button key={cat} className="group flex items-center justify-between border-b border-[#1e4a6d]/10 px-4 py-4 text-left text-xs font-bold uppercase tracking-wider transition-all hover:bg-[#1e4a6d] hover:text-white last:border-0">
                                                {cat}
                                                <ArrowRight size={14} className="opacity-0 transition-all group-hover:translate-x-1 group-hover:opacity-100" />
                                            </button>
                                        ))}
                                    </div>
                                    {/* Diagonal decorative lines like in the image */}
                                    <div className="absolute -right-4 top-0 hidden h-full w-20 lg:block">
                                        <div className="absolute h-full w-[1px] origin-top rotate-[15deg] bg-[#1e4a6d]/40"></div>
                                        <div className="absolute right-0 h-full w-[1px] origin-top rotate-[15deg] bg-[#1e4a6d]/40"></div>
                                    </div>
                                </div>

                                <div className="mt-8">
                                    <p className="mb-4 text-[10px] font-bold uppercase tracking-widest opacity-60">Ikuti Kami</p>
                                    <div className="flex gap-4">
                                        <Facebook size={16} className="cursor-pointer hover:opacity-50" />
                                        <Twitter size={16} className="cursor-pointer hover:opacity-50" />
                                        <Instagram size={16} className="cursor-pointer hover:opacity-50" />
                                        <Youtube size={16} className="cursor-pointer hover:opacity-50" />
                                    </div>
                                </div>
                            </div>

                            {/* Hero Image */}
                            <div className="order-1 lg:order-2 lg:col-span-4">
                                <div className="relative aspect-[3/4] overflow-hidden bg-white shadow-xl">
                                    <img src="https://images.unsplash.com/photo-1605763240000-7e93b172d754?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGRyZXNzfGVufDB8fDB8fHww" alt="Model" className="h-full w-full object-cover" />
                                </div>
                            </div>

                            {/* Hero Text */}
                            <div className="order-3 lg:col-span-5">
                                <div className="max-w-md">
                                    <h1 className="mb-6 text-4xl font-medium leading-[1.1] text-[#1e4a6d] lg:text-6xl">
                                        Keahlian <br /> Yang Abadi
                                    </h1>
                                    <p className="mb-8 text-sm leading-relaxed opacity-70">
                                        Tingkatkan gaya harian Anda dengan koleksi esensial yang dibuat dengan ketelitian dan kualitas tinggi. Mulai dari bahan berkelanjutan hingga desain yang tak lekang oleh waktu.
                                    </p>
                                    <button className="bg-[#1e4a6d] px-8 py-3 text-[10px] font-bold uppercase tracking-[0.2em] text-white transition-all hover:bg-[#15344e]">
                                        Jelajahi Sekarang
                                    </button>

                                    <div className="mt-16 flex gap-4">
                                        {[
                                            'https://images.unsplash.com/photo-1718871716580-117417d490f6?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzJ8fGRyZXNzfGVufDB8fDB8fHww',
                                            'https://plus.unsplash.com/premium_photo-1676234842565-bc1df0bfd45a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDh8fHxlbnwwfHx8fHw%3D',
                                            'https://images.unsplash.com/photo-1718871729636-887b3d2359ae?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE0fHx8ZW58MHx8fHx8'
                                        ].map((url, i) => (
                                            <div key={i} className="h-24 w-20 overflow-hidden rounded-t-full border border-[#1e4a6d]/20 bg-white">
                                                <img src={url} alt="Shirt Preview" className="h-full w-full object-cover" />
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* Best Sellers Section */}
                <section id="product" className="border-b border-[#1e4a6d]/20">
                    <div className="mx-auto max-w-7xl">
                        <div className="flex items-center justify-between border-x border-[#1e4a6d]/20 px-6 py-6 lg:px-12">
                            <h2 className="text-xl font-medium">Produk Terlaris</h2>
                            <a href="#product" onClick={(e) => scrollToSection(e, '#product')} className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest hover:opacity-70 transition-all">
                                Semua Produk <ArrowRight size={14} />
                            </a>
                        </div>
                    </div>

                    {/* Full-width borders wrapper */}
                    <div className="border-y border-[#1e4a6d]/20">
                        <div className="mx-auto max-w-7xl">
                            <div className="grid grid-cols-1 border-x border-[#1e4a6d]/20 sm:grid-cols-2 lg:grid-cols-4">
                                {[
                                    { name: 'Kenyamanan Terpilih', price: 'Rp 450.000', img: 'https://plus.unsplash.com/premium_photo-1661432689064-89feeaa63025?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDI0fHx8ZW58MHx8fHx8' },
                                    { name: 'Kemewahan Harian', price: 'Rp 520.000', img: 'https://images.unsplash.com/photo-1718871828963-450573c7b76f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDI3fHx8ZW58MHx8fHx8' },
                                    { name: 'Seri Oxford', price: 'Rp 425.000', img: 'https://images.unsplash.com/photo-1583333001978-8c57d752ce5b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDM0fHx8ZW58MHx8fHx8' },
                                    { name: 'Gaya Berkelanjutan', price: 'Rp 380.000', img: 'https://images.unsplash.com/photo-1594179056536-dc8714fc8fdf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDU3fHx8ZW58MHx8fHx8' }
                                ].map((item, idx) => (
                                    <div key={idx} className="group border-b border-[#1e4a6d]/20 p-8 last:border-b-0 sm:border-r sm:even:border-r-0 lg:border-b-0 lg:border-r lg:last:border-r-0">
                                        <div className="mb-8 aspect-square overflow-hidden bg-white">
                                            <img 
                                                src={item.img} 
                                                alt={item.name} 
                                                className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" 
                                            />
                                        </div>
                                        <div className="text-center">
                                            <p className="mb-2 text-[10px] font-bold uppercase tracking-widest group-hover:text-indigo-600">
                                                {item.name} <ArrowRight size={12} className="inline ml-1" />
                                            </p>
                                            <p className="text-sm font-medium opacity-60">{item.price}</p>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </section>

                {/* How To Order Section */}
                <section id="howToOrder" className="border-b border-[#1e4a6d]/20 bg-[#f7f3eb]">
                    <div className="mx-auto max-w-7xl border-x border-[#1e4a6d]/20">
                        <div className="grid grid-cols-1 md:grid-cols-3">
                            {[
                                { step: "01", title: "Pilih Product", desc: "Temukan koleksi kemeja terbaik kami yang sesuai dengan gaya Anda." },
                                { step: "02", title: "Hubungi Kami", desc: "Konfirmasi pesanan melalui WhatsApp dengan detail ukuran dan warna." },
                                { step: "03", title: "Pengiriman", desc: "Pesanan akan dikemas eksklusif dan dikirim langsung ke alamat Anda." }
                            ].map((item, idx) => (
                                <div key={idx} className="group border-b border-[#1e4a6d]/20 p-12 last:border-b-0 md:border-b-0 md:border-r md:last:border-r-0">
                                    <div className="mb-8 flex h-12 w-12 items-center justify-center rounded-full border border-[#1e4a6d]/20 text-xs font-bold transition-all group-hover:bg-[#1e4a6d] group-hover:text-white">
                                        {item.step}
                                    </div>
                                    <h3 className="mb-4 text-xl font-medium">{item.title}</h3>
                                    <p className="text-sm leading-relaxed opacity-60">
                                        {item.desc}
                                    </p>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>

                {/* Brand Section */}
                <section id="aboutUs" className="border-b border-[#1e4a6d]/20 bg-[#f7f3eb]">
                    <div className="mx-auto max-w-7xl">
                        <div className="grid grid-cols-1 gap-20 border-x border-[#1e4a6d]/20 px-6 py-20 lg:grid-cols-2 lg:px-12">
                            <div className="flex flex-col justify-center">
                                <h2 className="mb-8 text-3xl font-medium">Tentang Kami</h2>
                                <p className="mb-6 text-sm leading-relaxed opacity-70">
                                    Menghadirkan produk esensial untuk setiap momen berharga Anda. Dibuat dengan penuh perhatian, dirancang untuk bertahan lama. Menghargai kesederhanaan, mendefinisikan ulang gaya hidup.
                                </p>
                                <p className="mb-10 text-sm leading-relaxed opacity-70">
                                    Keahlian tangan terbaik dalam setiap jahitan. Kain berkualitas yang memanjakan, daya tarik abadi sepanjang masa. Bagi mereka yang menghargai seni berpakaian yang sesungguhnya.
                                </p>
                                <a href="#aboutUs" onClick={(e) => scrollToSection(e, '#aboutUs')} className="text-[10px] font-bold uppercase tracking-widest underline underline-offset-8 hover:opacity-70 transition-all">
                                    Baca Selengkapnya...
                                </a>
                            </div>
                            <div className="relative">
                                <div className="aspect-[4/3] overflow-hidden rounded-xl border border-[#1e4a6d]/20 shadow-2xl">
                                    <img src="https://images.unsplash.com/photo-1615102731632-9978cdec7764?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDY3fHx8ZW58MHx8fHx8" alt="Brand" className="h-full w-full object-cover" />
                                </div>
                                {/* Decorative shirt at bottom right like in image */}
                                <div className="absolute -bottom-10 -right-4 h-32 w-32 rotate-12 overflow-hidden rounded-lg border border-[#1e4a6d]/20 shadow-xl lg:-left-10">
                                    <img src="https://images.unsplash.com/photo-1733098033886-16454aef70a4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDcwfHx8ZW58MHx8fHx8" alt="Shirt detail" className="h-full w-full object-cover" />
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* Footer */}
                <footer className="border-t border-[#1e4a6d]/20 bg-[#f7f3eb]">
                    <div className="mx-auto max-w-7xl border-x border-[#1e4a6d]/20">
                        <div className="grid grid-cols-1 gap-12 border-b border-[#1e4a6d]/10 px-6 py-16 lg:grid-cols-4 lg:px-12">
                            {/* Brand Info */}
                            <div className="lg:col-span-1">
                                <div className="mb-6 flex items-center gap-2 text-xl font-bold uppercase tracking-tighter">
                                    VN Grup
                                </div>
                                <p className="mb-8 text-sm leading-relaxed opacity-60">
                                    Menghadirkan produk esensial yang tak lekang oleh waktu dengan fokus pada kualitas, keberlanjutan, dan gaya yang abadi sejak 2026.
                                </p>
                                <div className="flex gap-4">
                                    <Facebook size={18} className="cursor-pointer hover:opacity-50" />
                                    <Twitter size={18} className="cursor-pointer hover:opacity-50" />
                                    <Instagram size={18} className="cursor-pointer hover:opacity-50" />
                                </div>
                            </div>

                            {/* Quick Links */}
                            <div>
                                <h3 className="mb-6 text-[10px] font-bold uppercase tracking-[0.2em]">Navigation</h3>
                                <ul className="flex flex-col gap-3 text-sm opacity-60">
                                    <li><Link href="#" className="hover:underline">Beranda</Link></li>
                                    <li><Link href="#" className="hover:underline">Produk</Link></li>
                                    <li><Link href="#" className="hover:underline">Cara Pesan</Link></li>
                                    <li><Link href="#" className="hover:underline">Tentang Kami</Link></li>
                                </ul>
                            </div>

                            {/* Collections */}
                            <div>
                                <h3 className="mb-6 text-[10px] font-bold uppercase tracking-[0.2em]">Koleksi</h3>
                                <ul className="flex flex-col gap-3 text-sm opacity-60">
                                    <li><Link href="#" className="hover:underline">Kemeja Casual</Link></li>
                                    <li><Link href="#" className="hover:underline">Kemeja Flanel</Link></li>
                                    <li><Link href="#" className="hover:underline">Kemeja Oxford</Link></li>
                                    <li><Link href="#" className="hover:underline">Kemeja Polos</Link></li>
                                </ul>
                            </div>

                            {/* Newsletter */}
                            <div>
                                <h3 className="mb-6 text-[10px] font-bold uppercase tracking-[0.2em]">Buletin</h3>
                                <p className="mb-4 text-sm opacity-60 text-zinc-500">Dapatkan penawaran eksklusif dan berita terbaru.</p>
                                <div className="flex border-b border-[#1e4a6d]">
                                    <input
                                        type="email"
                                        placeholder="Alamat email Anda"
                                        className="w-full bg-transparent py-2 text-sm outline-none placeholder:text-[#1e4a6d]/30"
                                    />
                                    <button className="px-2 hover:opacity-50">
                                        <ArrowRight size={18} />
                                    </button>
                                </div>
                            </div>
                        </div>

                        {/* Bottom Bar */}
                        <div className="px-6 py-6 text-center text-[10px] font-bold uppercase tracking-widest lg:px-12 lg:text-left">
                            <p className="opacity-50">© 2026 VN Grup.</p>
                        </div>
                    </div>
                </footer>

                {/* Mobile Menu Overlay */}
                {isMenuOpen && (
                    <div className="fixed inset-0 z-[60] flex flex-col items-center justify-center bg-[#f7f3eb] p-6 text-center animate-in fade-in slide-in-from-top-full duration-500">
                        <button className="absolute top-8 right-8 text-[#1e4a6d] transition-transform  hover:rotate-90" onClick={() => setIsMenuOpen(false)}>
                            <X size={32} />
                        </button>
                        <div className="flex flex-col gap-8 text-3xl font-medium">
                            <a href="#homepage" onClick={(e) => scrollToSection(e, '#homepage')} className="hover:italic transition-all">Beranda</a>
                            <a href="#product" onClick={(e) => scrollToSection(e, '#product')} className="hover:italic transition-all">Produk</a>
                            <a href="#howToOrder" onClick={(e) => scrollToSection(e, '#howToOrder')} className="hover:italic transition-all">Cara Pesan</a>
                            <a href="#aboutUs" onClick={(e) => scrollToSection(e, '#aboutUs')} className="hover:italic transition-all">Tentang Kami</a>
                        </div>
                        <div className="mt-20 flex gap-6">
                            <Facebook size={24} className="hover:opacity-50 cursor-pointer" />
                            <Twitter size={24} className="hover:opacity-50 cursor-pointer" />
                            <Instagram size={24} className="hover:opacity-50 cursor-pointer" />
                        </div>
                    </div>
                )}
            </div>
        </>
    );
}