<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Elvara Shop - Premium Minimalist E-Commerce</title>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Alpine JS -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    colors: {
                        primary: '#0f172a', /* Slate 900 */
                        secondary: '#475569', /* Slate 600 */
                        accent: '#3b82f6', /* Blue 500 */
                        accentDark: '#2563eb', /* Blue 600 */
                    }
                }
            }
        }
    </script>

    <style>
        body { scroll-behavior: smooth; }
        .glass-nav {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        .hero-pattern {
            background-color: #f8fafc;
            background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
            background-size: 32px 32px;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;  
            overflow: hidden;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans antialiased overflow-x-hidden">

<!-- NAVBAR -->
<nav x-data="{ mobileMenuOpen: false }" class="sticky top-0 z-50 glass-nav shadow-sm">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-20">
            <!-- Logo -->
            <div class="flex items-center gap-2">
                <div class="w-10 h-10 bg-accent text-white flex items-center justify-center rounded-xl shadow-lg shadow-blue-500/30">
                    <i class="bi bi-bag-heart-fill text-xl"></i>
                </div>
                <a href="/" class="text-2xl font-extrabold text-primary tracking-tight">Elvara<span class="text-accent">Shop</span></a>
            </div>

            <!-- Search (Desktop) -->
            <form action="#katalog" method="GET" class="hidden md:flex flex-1 max-w-lg mx-12">
                <div class="relative w-full">
                    <input type="text" name="q" value="<?php echo e(request('q')); ?>" class="w-full bg-gray-100 border-transparent text-sm rounded-full py-2.5 pl-12 pr-4 focus:bg-white focus:border-accent focus:ring-2 focus:ring-accent/20 transition shadow-inner" placeholder="Cari kemeja, sepatu, elektronik...">
                    <button type="submit" class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-accent">
                        <i class="bi bi-search"></i>
                    </button>
                </div>
            </form>

            <!-- Navigation Extras / Auth -->
            <div class="hidden md:flex items-center gap-6">
                <?php if(Auth::check()): ?>
                    <!-- Is Logged In -->
                    <a href="<?php echo e(route('keranjang.index')); ?>" class="relative text-gray-500 hover:text-accent transition">
                        <i class="bi bi-cart3 text-2xl"></i>
                        <?php
                            $cartCount = \App\Models\Keranjang::where('user_id', Auth::id())->count();
                        ?>
                        <?php if($cartCount > 0): ?>
                            <span class="absolute -top-1 -right-2 bg-red-500 text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center border border-white">
                                <?php echo e($cartCount); ?>

                            </span>
                        <?php endif; ?>
                    </a>
                    
                    <?php if(Auth::user()->role === 'admin'): ?>
                        <a href="<?php echo e(route('admin.dashboard')); ?>" class="text-sm font-semibold text-gray-600 hover:text-primary transition">Panel Admin</a>
                    <?php else: ?>
                        <a href="<?php echo e(route('customer.dashboard')); ?>" class="text-sm font-semibold text-gray-600 hover:text-primary transition">Dashboard Ku</a>
                    <?php endif; ?>
                <?php else: ?>
                    <!-- Not Logged In -->
                    <a href="<?php echo e(route('login')); ?>" class="text-sm font-bold text-gray-600 hover:text-primary transition">Masuk</a>
                    <a href="<?php echo e(route('register')); ?>" class="text-sm font-bold bg-primary text-white px-6 py-2.5 rounded-full hover:bg-gray-800 transition shadow-lg shadow-gray-900/20">Daftar Akun</a>
                <?php endif; ?>
            </div>

            <!-- Mobile Menu Button -->
            <div class="md:hidden flex items-center">
                <button @click="mobileMenuOpen = !mobileMenuOpen" class="text-gray-600 hover:text-primary focus:outline-none focus:ring-2 focus:ring-inset focus:ring-accent rounded-md p-2">
                    <i class="bi" :class="mobileMenuOpen ? 'bi-x-lg text-2xl' : 'bi-list text-3xl'"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- Mobile Menu dropdown -->
    <div x-show="mobileMenuOpen" class="md:hidden bg-white border-t border-gray-100 shadow-xl" x-transition>
        <div class="px-4 pt-4 pb-6 space-y-4">
            <!-- Mobile Search -->
            <form action="#katalog" method="GET" class="relative w-full">
                <input type="text" name="q" value="<?php echo e(request('q')); ?>" class="w-full bg-gray-100 border-transparent text-sm rounded-full py-3 pl-12 pr-4 focus:bg-white focus:border-accent focus:ring-2 focus:ring-accent/20 transition" placeholder="Cari produk...">
                <button type="submit" class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-accent">
                    <i class="bi bi-search"></i>
                </button>
            </form>
            
            <?php if(Auth::check()): ?>
                <div class="border-t border-gray-100 pt-4">
                    <a href="<?php echo e(route('keranjang.index')); ?>" class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-50 text-gray-700 font-medium">
                        <i class="bi bi-cart3 text-xl"></i> Keranjang Beli (<?php echo e($cartCount ?? 0); ?>)
                    </a>
                    <?php if(Auth::user()->role === 'admin'): ?>
                        <a href="<?php echo e(route('admin.dashboard')); ?>" class="block px-3 py-2 rounded-lg hover:bg-gray-50 text-gray-700 font-medium">Panel Admin</a>
                    <?php else: ?>
                        <a href="<?php echo e(route('customer.dashboard')); ?>" class="block px-3 py-2 rounded-lg hover:bg-gray-50 text-gray-700 font-medium">Profil & Pesanan</a>
                    <?php endif; ?>
                </div>
            <?php else: ?>
                <div class="flex flex-col gap-3 border-t border-gray-100 pt-4">
                    <a href="<?php echo e(route('login')); ?>" class="w-full text-center text-sm font-bold border-2 border-gray-200 text-gray-600 px-6 py-3 rounded-full hover:bg-gray-50 transition">Masuk Akun</a>
                    <a href="<?php echo e(route('register')); ?>" class="w-full text-center text-sm font-bold bg-primary text-white px-6 py-3 rounded-full hover:bg-gray-800 transition">Daftar Sekarang</a>
                </div>
            <?php endif; ?>
        </div>
    </div>
</nav>

<!-- HERO SECTION -->
<section class="relative pt-12 pb-24 lg:pt-20 lg:pb-32 overflow-hidden hero-pattern border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="text-center max-w-3xl mx-auto">
            <h1 class="text-5xl md:text-6xl font-extrabold text-primary tracking-tight leading-tight mb-6">
                Belanja Jadi Lebih <br/>
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-accent to-indigo-600">Mudah & Menyenangkan</span>
            </h1>
            <p class="text-lg md:text-xl text-secondary mb-10 leading-relaxed px-4">
                Temukan ribuan produk pilihan dengan kualitas terbaik, garansi resmi, dan pengiriman super cepat langsung ke rumah Anda. Belanja cerdas mulai dari sini.
            </p>
            <div class="flex flex-col sm:flex-row justify-center gap-4 px-4">
                <a href="#katalog" class="bg-primary text-white text-base font-bold py-4 px-8 rounded-full shadow-xl shadow-gray-900/20 hover:bg-gray-800 hover:scale-105 transition duration-300 flex items-center justify-center gap-2">
                    Mulai Belanja <i class="bi bi-arrow-right"></i>
                </a>
                <a href="#kategori" class="bg-white text-primary border-2 border-gray-200 text-base font-bold py-4 px-8 rounded-full shadow-sm hover:bg-gray-50 hover:border-gray-300 transition duration-300">
                    Jelajahi Kategori
                </a>
            </div>
            
            <!-- Trust badges -->
            <div class="mt-12 pt-8 border-t border-gray-200 flex flex-wrap justify-center gap-8 md:gap-12 opacity-60 grayscale hover:grayscale-0 transition duration-500">
                <div class="flex items-center gap-2 font-bold text-gray-500"><i class="bi bi-shield-check text-2xl"></i> Pembayaran Aman</div>
                <div class="flex items-center gap-2 font-bold text-gray-500"><i class="bi bi-truck text-2xl"></i> Pengiriman Cepat</div>
                <div class="flex items-center gap-2 font-bold text-gray-500"><i class="bi bi-arrow-return-left text-2xl"></i> Retur 7 Hari</div>
            </div>
        </div>
    </div>
    
    <!-- Decorative Blurs -->
    <div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 rounded-full bg-blue-400 opacity-20 blur-[100px] pointer-events-none"></div>
    <div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-96 h-96 rounded-full bg-purple-400 opacity-20 blur-[100px] pointer-events-none"></div>
</section>

<!-- CATEGORY HIGHLIGHT -->
<section id="kategori" class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-end justify-between mb-10">
            <div>
                <h2 class="text-3xl font-extrabold text-primary tracking-tight">Kategori Pilihan</h2>
                <p class="text-secondary mt-2">Klasifikasi barang paling dicari minggu ini</p>
            </div>
            <a href="/?#katalog" class="hidden sm:inline-flex items-center font-semibold text-accent hover:text-accentDark transition">Lihat Semua <i class="bi bi-chevron-right ml-1 text-xs"></i></a>
        </div>

        <div class="flex overflow-x-auto pb-8 -mx-4 px-4 sm:mx-0 sm:px-0 gap-6 snap-x hide-scroll">
            <?php if(isset($kategoris) && $kategoris->count() > 0): ?>
                <?php $__currentLoopData = $kategoris; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $kat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php
                        // Memberikan gaya warna berbeda secara dinamis
                        $colors = ['bg-orange-100 text-orange-600', 'bg-blue-100 text-blue-600', 'bg-pink-100 text-pink-600', 'bg-green-100 text-green-600', 'bg-purple-100 text-purple-600'];
                        $iconColor = $colors[$index % count($colors)];
                    ?>
                    <a href="/?kategori=<?php echo e($kat->id); ?>#katalog" class="flex flex-col items-center gap-4 min-w-[120px] snap-center group">
                        <div class="w-24 h-24 rounded-full <?php echo e($iconColor); ?> flex items-center justify-center text-4xl shadow-sm group-hover:shadow-md group-hover:scale-110 transition duration-300">
                            <!-- Fallback Icon jika tidak ada foto kategori -->
                            <i class="bi bi-tag-fill"></i>
                        </div>
                        <span class="font-bold text-gray-700 group-hover:text-primary"><?php echo e($kat->nama); ?></span>
                    </a>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            <?php else: ?>
            <?php endif; ?>
        </div>
    </div>
</section>



<!-- TRENDING PRODUCTS -->
<section id="katalog" class="py-20 bg-gray-50 border-t border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-3xl font-extrabold text-primary tracking-tight">Rekomendasi Untukmu</h2>
            <p class="text-secondary mt-3 max-w-2xl mx-auto">Dipilih khusus berdasarkan popularitas dan nilai rating terbaik dari pelanggan kami.</p>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">
            <?php if(isset($produks) && $produks->count() > 0): ?>
                <?php $__currentLoopData = $produks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $produk): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <a href="<?php echo e(route('customer.produk.show', $produk->id)); ?>" class="group bg-white rounded-2xl border border-gray-100 overflow-hidden card-hover block relative">
                        <!-- Badge -->
                        <?php if($produk->kategori): ?>
                            <div class="absolute top-3 left-3 bg-white/90 backdrop-blur text-[10px] font-bold px-2 py-1 rounded text-primary z-10 shadow-sm uppercase tracking-wider">
                                <?php echo e($produk->kategori->nama); ?>

                            </div>
                        <?php endif; ?>
                        
                        <!-- Image -->
                        <div class="aspect-w-1 aspect-h-1 w-full overflow-hidden bg-gray-100 relative">
                            <?php if($produk->foto): ?>
                                <img src="<?php echo e(asset('storage/' . $produk->foto)); ?>" alt="<?php echo e($produk->nama); ?>" class="w-full h-48 object-cover object-center group-hover:scale-105 transition duration-500">
                            <?php else: ?>
                                <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?q=80&w=800&auto=format&fit=crop" alt="Placeholder" class="w-full h-48 object-cover object-center group-hover:scale-105 transition duration-500">
                            <?php endif; ?>
                            <div class="absolute inset-0 bg-black/5 group-hover:bg-transparent transition duration-300"></div>
                        </div>
                        
                        <!-- Info -->
                        <div class="p-5">
                            <h3 class="text-sm font-semibold text-gray-800 line-clamp-2 mb-2 group-hover:text-accent transition"><?php echo e($produk->nama); ?></h3>
                            
                            <!-- Rating Bintang Placeholder -->
                            <div class="flex items-center gap-1 text-yellow-400 text-xs mb-3">
                                <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i>
                                <span class="text-gray-400 ml-1">(4.8)</span>
                            </div>

                            <div class="flex items-end justify-between">
                                <div>
                                    <span class="text-lg font-bold text-gray-900"><?php echo e($produk->harga_range ?? 'Rp ' . number_format($produk->harga, 0, ',', '.')); ?></span>
                                </div>
                                <button class="w-8 h-8 rounded-full bg-gray-100 text-primary flex items-center justify-center group-hover:bg-accent group-hover:text-white transition shadow-sm">
                                    <i class="bi bi-cart-plus font-bold"></i>
                                </button>
                            </div>
                        </div>
                    </a>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            <?php else: ?>
            <?php endif; ?>
        </div>
        
        <div class="mt-12 text-center">
            <a href="/?#katalog" class="inline-block bg-white border-2 border-gray-200 text-primary font-bold py-3 px-8 rounded-full hover:border-gray-300 hover:bg-gray-50 transition shadow-sm">
                Lihat Semua Produk
            </a>
        </div>
    </div>
</section>

<!-- FEATURES HIGHLIGHT -->
<section class="border-t border-gray-200 bg-white py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center md:text-left divide-y md:divide-y-0 md:divide-x divide-gray-100">
            <div class="flex flex-col md:flex-row items-center gap-4 pt-6 md:pt-0">
                <i class="bi bi-box-seam text-4xl text-accent"></i>
                <div>
                    <h4 class="font-bold text-primary">Original 100%</h4>
                    <p class="text-xs text-gray-500 mt-1">Jaminan barang asli</p>
                </div>
            </div>
            <div class="flex flex-col md:flex-row items-center gap-4 pt-6 md:pt-0 md:pl-8">
                <i class="bi bi-arrow-repeat text-4xl text-accent"></i>
                <div>
                    <h4 class="font-bold text-primary">Retur Mudah</h4>
                    <p class="text-xs text-gray-500 mt-1">Bebas kembalikan 7 hari</p>
                </div>
            </div>
            <div class="flex flex-col md:flex-row items-center gap-4 pt-6 md:pt-0 md:pl-8">
                <i class="bi bi-headset text-4xl text-accent"></i>
                <div>
                    <h4 class="font-bold text-primary">CS 24/7 </h4>
                    <p class="text-xs text-gray-500 mt-1">Siap membantu Anda</p>
                </div>
            </div>
            <div class="flex flex-col md:flex-row items-center gap-4 pt-6 md:pt-0 md:pl-8">
                <i class="bi bi-credit-card text-4xl text-accent"></i>
                <div>
                    <h4 class="font-bold text-primary">Pembayaran Aman</h4>
                    <p class="text-xs text-gray-500 mt-1">Standar Midtrans Keamanan</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- FOOTER -->
<footer class="bg-primary text-white pt-16 pb-10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-12">

            <!-- Brand -->
            <div>
                <h2 class="text-2xl font-extrabold mb-4">Elvara<span class="text-accent">Shop</span></h2>
                <p class="text-gray-400 text-sm leading-relaxed mb-6">
                    Platform belanja modern dengan produk berkualitas, harga terbaik, dan pengiriman cepat.
                </p>

                <div class="flex gap-3">
                    <a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-white/10 hover:bg-accent transition">
                        <i class="bi bi-instagram"></i>
                    </a>
                    <a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-white/10 hover:bg-accent transition">
                        <i class="bi bi-facebook"></i>
                    </a>
                    <a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-white/10 hover:bg-accent transition">
                        <i class="bi bi-twitter-x"></i>
                    </a>
                </div>
            </div>

            <!-- Navigation -->
            <div>
                <h3 class="font-bold mb-4">Navigasi</h3>
                <ul class="space-y-2 text-sm text-gray-400">
                    <li><a href="#" class="hover:text-white">Beranda</a></li>
                    <li><a href="#" class="hover:text-white">Kategori</a></li>
                    <li><a href="#" class="hover:text-white">Produk</a></li>
                </ul>
            </div>

            <!-- Support -->
            <div>
                <h3 class="font-bold mb-4">Bantuan</h3>
                <ul class="space-y-2 text-sm text-gray-400">
                    <li><a href="#" class="hover:text-white">FAQ</a></li>
                    <li><a href="#" class="hover:text-white">Kebijakan Privasi</a></li>
                    <li><a href="#" class="hover:text-white">Syarat & Ketentuan</a></li>
                    <li><a href="#" class="hover:text-white">Kontak</a></li>
                </ul>
            </div>

            <!-- Contact -->
            <div>
                <h3 class="font-bold mb-4">Kontak</h3>
                <ul class="space-y-3 text-sm text-gray-400">
                    <li class="flex items-center gap-2">
                        <i class="bi bi-geo-alt"></i> Indonesia
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="bi bi-envelope"></i> elvarashop@gmail.com
                    </li>
                    <li class="flex items-center gap-2">
                        <i class="bi bi-telephone"></i> +62 812-3456-7890
                    </li>
                </ul>
            </div>
        </div>

        <!-- Divider -->
        <div class="border-t border-white/10 pt-6 flex flex-col md:flex-row justify-between items-center gap-4">
            <p class="text-xs text-gray-400">
                © 2026 ElvaraShop. All rights reserved.
            </p>
            <div class="flex gap-4 text-gray-400 text-sm">
                <span class="flex items-center gap-1"><i class="bi bi-shield-check"></i> Aman</span>
                <span class="flex items-center gap-1"><i class="bi bi-truck"></i> Cepat</span>
                <span class="flex items-center gap-1"><i class="bi bi-arrow-repeat"></i> Retur</span>
            </div>
        </div>

    </div>
</footer>

<style>
    /* Hiding minimal scrollbars utility */
    .hide-scroll::-webkit-scrollbar {
        display: none;
    }
    .hide-scroll {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
</style>

</body>
</html><?php /**PATH C:\laragon\www\Toko-miftah\resources\views/welcome.blade.php ENDPATH**/ ?>