@extends('layouts.app')

@section('content')
<div class="space-y-24 md:space-y-32 -mt-6">

    <!-- 1. Hero Section -->
    <section class="relative -mx-4 sm:-mx-6 lg:-mx-8 min-h-[85vh] flex items-center justify-center overflow-hidden rounded-3xl">
        <!-- Background Image with Soft Gradient -->
        <div class="absolute inset-0 w-full h-full">
            <img class="w-full h-full object-cover object-center"
                 alt="Serene spa in Lombok"
                 src="{{ asset('images/product1.jpg') }}"/>
            <div class="absolute inset-0 bg-gradient-to-t from-[#fbf9f4] via-[#fbf9f4]/40 to-transparent"></div>
        </div>

        <div class="relative z-10 max-w-4xl mx-auto px-6 py-20 text-center flex flex-col items-center justify-center">
            <span class="text-xs font-bold text-[##1b1c19] tracking-[0.25em] mb-6 uppercase block font-sans">
                Beauty, Spa & Hotel Essentials
            </span>
            <h1 class="font-serif text-4xl sm:text-5xl md:text-6xl text-[#1b1c19] mb-6 max-w-3xl leading-[1.15] font-semibold">
                Lalita Bloom Store
            </h1>
            <p class="text-base sm:text-lg text-[#444840] max-w-xl mx-auto mb-10 leading-relaxed font-normal">
                Temukan berbagai pilihan produk kecantikan, kebutuhan spa, dan amenities hotel berkualitas dalam satu tempat.

            </p>

            <div class="flex flex-col sm:flex-row gap-4 w-full sm:w-auto justify-center">
                <a href="{{ route('products.index') }}"
                   class="inline-flex justify-center items-center px-8 py-4 bg-[#526048] text-white rounded-full text-xs font-bold uppercase tracking-wider hover:bg-[#6a795f] transition-all duration-300 transform hover:scale-[1.02] shadow-xs">
                    Belanja Sekarang
                </a>
                <a href="#pickup"
                   class="inline-flex justify-center items-center px-8 py-4 bg-transparent border border-[#526048] text-[#526048] rounded-full text-xs font-bold uppercase tracking-wider hover:bg-[#f0eee9] transition-all duration-300">
                    Cara Pemesanan
                </a>
            </div>
        </div>
    </section>

    <!-- 2. Curated Categories Bento Grid -->
    <section id="rituals" class="space-y-12">
        <div class="text-center md:text-left">
            <span class="text-xs font-bold text-[#526048] tracking-widest uppercase block mb-2 font-sans">Kategori Pilihan</span>
            <h2 class="font-serif text-3xl sm:text-4xl font-semibold text-[#1b1c19]">Koleksi & Peralatan Kecantikan</h2>
            <p class="text-sm text-[#444840] max-w-2xl mt-2">
                Pilihan lengkap produk skincare, perawatan rambut salon, manicure-pedicure, serta peralatan kecantikan profesional.
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-12 gap-6 auto-rows-[280px] md:auto-rows-[360px]">
            <!-- Collection 1: Skincare & Body Care (7 Cols) -->
            <a href="{{ route('products.index', ['category' => 'Skincare & Body Care']) }}" class="group col-span-1 md:col-span-7 relative rounded-3xl overflow-hidden block shadow-xs hover:-translate-y-1 transition-all duration-500">
                <img class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                     alt="Skincare & Body Care"
                     src="{{ asset('images/product2.jpg') }}"/>
                <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/25 to-transparent"></div>
                <div class="absolute bottom-0 left-0 p-8 w-full flex justify-between items-end">
                    <div class="space-y-1">
                        <span class="inline-block px-3 py-1 bg-white/20 backdrop-blur-xs text-white rounded-full text-[10px] font-bold uppercase tracking-wider mb-2">
                            Skincare & Body Care
                        </span>
                        <h3 class="font-serif text-2xl sm:text-3xl font-semibold text-white">Perawatan Wajah & Tubuh</h3>
                        <p class="text-xs text-white/80 max-w-sm hidden sm:block">
                            Serum, moisturizer, pembersih wajah, dan lotion perawatan tubuh bermutu tinggi.
                        </p>
                    </div>
                    <div class="w-12 h-12 rounded-full bg-white/20 backdrop-blur-md flex items-center justify-center text-white group-hover:bg-[#526048] transition-colors">
                        <span class="material-symbols-outlined">arrow_forward</span>
                    </div>
                </div>
            </a>

            <!-- Collection 2: Hair Care & Styling (5 Cols) -->
            <a href="{{ route('products.index', ['category' => 'Hair Care & Styling']) }}" class="group col-span-1 md:col-span-5 relative rounded-3xl overflow-hidden block shadow-xs hover:-translate-y-1 transition-all duration-500">
                <img class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                     alt="Hair Care & Styling"
                     src="{{ asset('images/product4.jpg') }}"/>
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
                <div class="absolute bottom-0 left-0 p-8">
                    <span class="inline-block px-3 py-1 bg-white/20 backdrop-blur-xs text-white rounded-full text-[10px] font-bold uppercase tracking-wider mb-2">
                        Hair Care
                    </span>
                    <h3 class="font-serif text-2xl font-semibold text-white mb-1">Perawatan Rambut</h3>
                    <p class="text-xs text-white/90">Shampoo salon, hair mask, serum keratin, dan produk styling.</p>
                </div>
            </a>

            <!-- Collection 3: Manicure & Pedicure (5 Cols) -->
            <a href="{{ route('products.index', ['category' => 'Salon & Beauty Equipment']) }}" class="group col-span-1 md:col-span-5 relative rounded-3xl overflow-hidden block shadow-xs hover:-translate-y-1 transition-all duration-500">
                <img class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                     alt="Manicure & Pedicure"
                     src="{{ asset('images/item.jpg') }}"/>
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
                <div class="absolute bottom-0 left-0 p-8">
                    <span class="inline-block px-3 py-1 bg-white/20 backdrop-blur-xs text-white rounded-full text-[10px] font-bold uppercase tracking-wider mb-2">
                        Nail Art & Care
                    </span>
                    <h3 class="font-serif text-2xl font-semibold text-white mb-1">Manicure & Pedicure</h3>
                    <p class="text-xs text-white/90">Kutek gel, nail buffer, gunting kutikula, dan scrub kaki.</p>
                </div>
            </a>

            <!-- Collection 4: Salon & Beauty Equipment (7 Cols) -->
            <div class="col-span-1 md:col-span-7 rounded-3xl bg-[#f5f3ee] p-8 sm:p-12 flex flex-col justify-center border border-[#e4e2dd]">
                <!-- <span class="material-symbols-outlined text-[#526048] mb-4" style="font-size: 36px;">content_cut</span> -->
                <h3 class="font-serif text-2xl sm:text-3xl font-semibold text-[#1b1c19] mb-3">Peralatan Salon & Kecantikan</h3>
                <p class="text-xs sm:text-sm text-[#444840] leading-relaxed mb-6 max-w-lg">
                    Menyediakan peralatan salon profesional seperti hair dryer ionik, catokan, clipper, sterilizer UV, dan perlengkapan spa dengan standar salon terbaik.
                </p>
                <a href="{{ route('products.index', ['category' => 'Salon & Beauty Equipment']) }}" class="inline-flex items-center text-[#526048] font-bold text-xs uppercase tracking-wider hover:text-[#3d4b34] transition-colors group">
                    <span>Lihat Produk</span>
                    <span class="material-symbols-outlined ml-2 text-base transform group-hover:translate-x-1 transition-transform">arrow_forward</span>
                </a>
            </div>
        </div>
    </section>

    <!-- 3. Real Live Products Grid -->
    <section class="space-y-8">
        <div class="flex flex-col sm:flex-row sm:items-end justify-between gap-4">
            <div>
                <span class="text-xs font-bold text-[#526048] tracking-widest uppercase block mb-1 font-sans">Featured Product</span>
                <h2 class="font-serif text-3xl font-semibold text-[#1b1c19]">Produk Unggulan</h2>
            </div>
            <a href="{{ route('products.index') }}" class="text-xs font-bold text-[#526048] hover:underline inline-flex items-center gap-1">
                <span>Lihat Semua Produk</span>
                <span class="material-symbols-outlined text-sm">arrow_forward</span>
            </a>
        </div>

        <div class="grid grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-6 lg:gap-8">
            @forelse ($featuredProducts as $product)
                <article class="product-card group bg-white rounded-2xl sm:rounded-3xl overflow-hidden border border-[#e4e2dd] shadow-xs flex flex-col justify-between">
                    <div>
                        <a href="{{ route('products.show', $product->slug) }}" class="block relative aspect-square sm:aspect-4/5 bg-[#f5f3ee] overflow-hidden cursor-pointer">
                            @if ($product->image_path)
                                <img src="{{ asset('storage/' . $product->image_path) }}"
                                     alt="{{ $product->name }}"
                                     class="product-image w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                            @else
                                <img src="https://lh3.googleusercontent.com/aida-public/AB6AXuCwFhjpjeG3rogQiAWlurGYjYraULEY20YWuQVNFrctSrrm89BPlmxdz2oPwXJsH5bAxAP1mUVjx03p0CU19KdSomyFnd953rTxCgjQh2E-223-osRnujS2ztBdCsQPFmqhyQgVqk0yBSyNKHhhHBuTspaBU0VcRsMVVjofla_Xs8Os5BI8MOds2BuBNX2c1yNI4sglfo-rOAt49Ev0YXRLuEtrMKmzsw8OovlQ-Inv9ovr4ubpoiepbw"
                                     alt="{{ $product->name }}"
                                     class="product-image w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                            @endif

                            <div class="absolute top-2 left-2 sm:top-4 sm:left-4 flex flex-col gap-1 pointer-events-none">
                                @if ($product->is_featured)
                                    <span class="px-2 py-0.5 sm:px-3 sm:py-1 rounded-full bg-[#526048] text-white text-[9px] sm:text-[10px] font-bold uppercase tracking-wider shadow-xs flex items-center gap-0.5">
                                        <span class="material-symbols-outlined text-[11px] sm:text-[12px]">star</span>
                                        <span>Populer</span>
                                    </span>
                                @endif
                                <span class="px-2 py-0.5 sm:px-3 sm:py-1 rounded-full bg-[#fbf9f4]/90 backdrop-blur-xs text-[#526048] text-[9px] sm:text-[10px] font-bold uppercase tracking-wider truncate max-w-[120px] sm:max-w-none">
                                    {{ $product->category ?? 'Beauty Supplies' }}
                                </span>
                                @if ($product->stock > 0 && $product->stock <= 5)
                                    <span class="px-2 py-0.5 rounded-full bg-amber-100 text-amber-900 text-[9px] sm:text-[10px] font-semibold hidden sm:inline-block">
                                        Only {{ $product->stock }} left
                                    </span>
                                @endif
                            </div>
                        </a>

                        <div class="p-3 sm:p-6 space-y-1.5 sm:space-y-2">
                            <div class="text-[10px] sm:text-[11px] text-[#75786f] uppercase tracking-wider font-semibold truncate">
                                {{ $product->weight_grams }}g • Lombok Beauty
                            </div>
                            <h3 class="font-serif text-xs sm:text-xl font-semibold text-[#1b1c19] group-hover:text-[#526048] transition-colors leading-snug line-clamp-2">
                                <a href="{{ route('products.show', $product->slug) }}">
                                    {{ $product->name }}
                                </a>
                            </h3>
                            <p class="hidden sm:block text-xs text-[#444840] line-clamp-2 leading-relaxed">
                                {{ $product->short_description ?: $product->description }}
                            </p>
                        </div>
                    </div>

                    <div class="p-3 sm:p-6 pt-0">
                        <div class="pt-2 sm:pt-4 border-t border-[#f0eee9] flex items-center justify-between gap-1">
                            <div>
                                <span class="text-[9px] sm:text-[10px] text-[#75786f] uppercase block">Price</span>
                                <span class="font-serif text-xs sm:text-lg font-bold text-[#1b1c19]">
                                    Rp {{ number_format($product->price, 0, ',', '.') }}
                                </span>
                            </div>

                            @if ($product->stock > 0)
                                <form method="POST" action="{{ route('cart.store') }}">
                                    @csrf
                                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                                    <input type="hidden" name="quantity" value="1">
                                    <button type="submit" class="inline-flex items-center justify-center p-2 sm:px-4 sm:py-2 rounded-full bg-[#526048] text-white text-xs font-semibold tracking-wide hover:bg-[#6a795f] transition-colors shadow-xs" title="Tambah ke keranjang">
                                        <span class="material-symbols-outlined text-base">add_shopping_cart</span>
                                        <span class="hidden sm:inline sm:ml-1.5">Add</span>
                                    </button>
                                </form>
                            @else
                                <span class="px-2 py-0.5 sm:px-3 sm:py-1 rounded-full bg-stone-100 text-stone-500 text-[10px] sm:text-xs font-medium">
                                    Habis
                                </span>
                            @endif
                        </div>
                    </div>
                </article>
            @empty
                <div class="col-span-full text-center py-12 bg-white rounded-3xl border border-[#e4e2dd] p-8">
                    <p class="text-sm text-[#444840]">Our master artisans are currently crafting the next harvest of botanical products.</p>
                </div>
            @endforelse
        </div>
    </section>

    <!-- 4. Immersive 'Our Story' Teaser (From DESIGN.md) -->
    <section class="rounded-3xl bg-[#ffffff] border border-[#e4e2dd] p-8 sm:p-16 overflow-hidden">
        <div class="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
            <div class="md:col-span-6">
                <div class="relative rounded-3xl overflow-hidden aspect-4/5 shadow-xs">
                    <img class="w-full h-full object-cover"
                         alt="Artisan in studio studio in Lombok"
                         src="{{ asset('images/drink water.jpg') }}"/>
                </div>
            </div>

            <div class="md:col-span-6 space-y-6">
                <span class="text-xs font-bold text-[#526048] tracking-[0.2em] uppercase block font-sans">
                    Our Roots
                </span>
                <h2 class="font-serif text-3xl sm:text-4xl font-semibold text-[#1b1c19] leading-tight">
                    Beauty, Spa & Hospitality Essentials from Lombok.
                </h2>
                <p class="text-sm sm:text-base text-[#444840] leading-relaxed">
                Laita Bloom hadir untuk menyatukan berbagai kebutuhan kecantikan, spa, dan hospitality dalam satu tempat terpercaya. Berbasis di Lombok, Indonesia, kami menyediakan pilihan produk untuk perawatan pribadi, salon, spa, hotel, vila, hingga resort.                </p>
                <p class="text-xs sm:text-sm text-[#444840] leading-relaxed">
                    Kini, koleksi Lalita Bloom mencakup produk kecantikan, kebutuhan spa, perlengkapan salon, serta hotel amenities—memudahkan pelanggan pribadi maupun pelaku bisnis hospitality mendapatkan produk berkualitas untuk perawatan, wellness, dan pengalaman terbaik bagi para tamu.
                <div class="pt-2">
                    <a href="{{ route('story') }}" class="inline-flex items-center justify-center px-8 py-3.5 bg-transparent border border-[#75786f] text-[#1b1c19] rounded-full text-xs font-bold uppercase tracking-wider hover:bg-[#f0eee9] transition-colors">
                        Discover Our Story
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 5. Dual Fulfillment: In-Store Pick-up vs Online Delivery -->
    <section id="pickup" class="rounded-3xl bg-[#ecdecb]/40 border border-[#ecdecb] p-8 sm:p-12 space-y-8">
        <div class="max-w-3xl">
            <span class="text-xs font-bold text-[#6b6153] tracking-widest uppercase block mb-1 font-sans">
                Customer Experience             </span>
            <h2 class="font-serif text-3xl font-semibold text-[#1b1c19]">
                Metode Pemesanan :  
            </h2>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- 1. Ambil di Toko (Store Pick-up) -->
            <div class="group relative rounded-3xl overflow-hidden block shadow-xs hover:-translate-y-1 transition-all duration-500 min-h-[320px] sm:min-h-[360px] flex flex-col justify-end">
                <img class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                     alt="Ambil di Toko (Store Pick-up)"
                     src="{{ asset('images/pickup.jpg') }}"/>
                <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/40 to-transparent"></div>
                <div class="relative p-6 sm:p-8 w-full flex justify-between items-end gap-4">
                    <div class="space-y-2">
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-white/20 backdrop-blur-xs text-white rounded-full text-[10px] font-bold uppercase tracking-wider mb-1">
                            <span class="material-symbols-outlined text-xs">storefront</span>
                            <span>Store Pick-up</span>
                        </span>
                        <h3 class="font-serif text-2xl sm:text-3xl font-semibold text-white leading-snug">
                            1. Ambil di Toko 
                        </h3>
                        <p class="text-xs text-white/85 leading-relaxed max-w-md">
                            Pesan produk melalui website, lalu ambil pesanan Anda langsung di <strong>Lalita Bloom Store</strong>. Pembayaran dilakukan di kasir saat pengambilan pesanan.
                        </p>
                    </div>
                    <div class="w-12 h-12 rounded-full bg-white/20 backdrop-blur-md flex items-center justify-center text-white group-hover:bg-[#526048] transition-colors shrink-0">
                        <span class="material-symbols-outlined text-xl">storefront</span>
                    </div>
                </div>
            </div>

            <!-- 2. Antar Ke Alamat Anda (Delivery) -->
            <div class="group relative rounded-3xl overflow-hidden block shadow-xs hover:-translate-y-1 transition-all duration-500 min-h-[320px] sm:min-h-[360px] flex flex-col justify-end">
                <img class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                     alt="Antar Ke Alamat Anda (Delivery)"
                     src="{{ asset('images/delivery.jpg') }}"/>
                <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/40 to-transparent"></div>
                <div class="relative p-6 sm:p-8 w-full flex justify-between items-end gap-4">
                    <div class="space-y-2">
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-white/20 backdrop-blur-xs text-white rounded-full text-[10px] font-bold uppercase tracking-wider mb-1">
                            <span class="material-symbols-outlined text-xs">local_shipping</span>
                            <span>Delivery</span>
                        </span>
                        <h3 class="font-serif text-2xl sm:text-3xl font-semibold text-white leading-snug">
                            2. Antar Ke Alamat Anda
                        <p class="font-sans text-xs text-white/85 leading-relaxed max-w-md">
                            Pesanan akan dikirim ke <strong>alamat Anda</strong>. Biaya pengiriman dihitung dan dikonfirmasi sebelum pembayaran. Setelah pesanan dikirim, Anda akan menerima <strong>bukti resi pengiriman</strong>.
                        </p>
                    </div>
                    <div class="w-12 h-12 rounded-full bg-white/20 backdrop-blur-md flex items-center justify-center text-white group-hover:bg-[#526048] transition-colors shrink-0">
                        <span class="material-symbols-outlined text-xl">local_shipping</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 6. Newsletter Signup (From DESIGN.md) -->
    <!-- <section class="py-16 text-center space-y-6 max-w-2xl mx-auto">
        <span class="material-symbols-outlined text-[#526048] text-4xl block mx-auto">local_florist</span>
        <h2 class="font-serif text-3xl font-semibold text-[#1b1c19]">Join the Sanctuary</h2>
        <p class="text-xs sm:text-sm text-[#444840] leading-relaxed">
            Subscribe to receive letters on holistic wellness, exclusive previews of new harvests, and 10% off your first ritual.
        </p>

        <form class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto" onsubmit="event.preventDefault(); alert('Thank you for joining the sanctuary.');">
            <input type="email"
                   placeholder="Your email address"
                   required
                   class="flex-1 px-5 py-3.5 rounded-full border border-[#c5c8bd] bg-white text-xs text-[#1b1c19] focus:outline-none focus:border-[#526048]">
            <button type="submit"
                    class="px-8 py-3.5 rounded-full bg-[#526048] text-white text-xs font-bold uppercase tracking-wider hover:bg-[#6a795f] transition-colors shadow-xs">
                Subscribe
            </button>
        </form>
        <p class="text-[11px] text-[#75786f]">We respect your stillness. No spam.</p>
    </section> -->
</div>
@endsection