<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- ================= SEO & META TAGS ================= -->
    <title>Empal Gentong Haji Apud | Oleh-oleh Resmi Khas Cirebon</title>
    <meta name="description" content="Beli Empal Gentong Haji Apud asli Cirebon dalam kemasan kaleng premium. Awet, tanpa pengawet, dan siap dikirim ke seluruh Indonesia. Pesan sekarang!">
    <meta name="keywords" content="empal gentong, empal gentong haji apud, oleh-oleh khas cirebon, empal gentong kaleng, makanan khas cirebon, kuliner cirebon, beli empal gentong online">
    <meta name="author" content="Haji Apud Cirebon">
    <meta name="robots" content="index, follow">

    <!-- Open Graph / WhatsApp / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="<?php echo e(url('/')); ?>">
    <meta property="og:title" content="Empal Gentong Haji Apud | Oleh-oleh Khas Cirebon">
    <meta property="og:description" content="Kelezatan legendaris Empal Gentong Haji Apud kini dalam kemasan kaleng premium. Siap dikirim ke seluruh Indonesia tanpa pengawet!">
    <!-- Catatan: Ganti URL gambar di bawah ini dengan link gambar banner asli Anda nanti -->
    <meta property="og:image" content="https://images.unsplash.com/photo-1548943487-a2e4143fa9ce?q=80&w=1200&auto=format&fit=crop"> 

    <!-- Twitter Card -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="<?php echo e(url('/')); ?>">
    <meta property="twitter:title" content="Empal Gentong Haji Apud | Oleh-oleh Khas Cirebon">
    <meta property="twitter:description" content="Kelezatan legendaris Empal Gentong Haji Apud kini dalam kemasan kaleng premium. Siap dikirim ke seluruh Indonesia!">
    <meta property="twitter:image" content="https://images.unsplash.com/photo-1548943487-a2e4143fa9ce?q=80&w=1200&auto=format&fit=crop">
    <!-- ================= END SEO ================= -->

    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'terracotta': { 50: '#fff7f5', 500: '#f85333', 600: '#e03a1d', 700: '#bc2e16' }
                    },
                    fontFamily: {
                        serif: ['Playfair Display', 'serif'],
                        sans: ['Plus Jakarta Sans', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Plus+Jakarta+Sans:wght@300;400;600;700&display=swap');
        html { scroll-behavior: smooth; }
        .hero-pattern { background-color: #fafaf9; }
    </style>
</head>
<body class="bg-stone-50 text-gray-800 font-sans relative">

    <nav class="bg-white/95 backdrop-blur-sm shadow-sm fixed w-full z-50 top-0 border-b border-stone-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-24 items-center">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 bg-amber-700 rounded-full flex items-center justify-center text-white font-bold text-xl shadow-inner">H</div>
                    <span class="font-serif text-3xl font-bold text-amber-800">Haji Apud.</span>
                </div>
                <div class="hidden md:flex space-x-10">
                    <a href="#" class="text-gray-900 font-semibold">Beranda</a>
                    <a href="#shop" class="text-gray-600 hover:text-terracotta-600 font-medium">Produk Kaleng</a>
                </div>
                <div class="flex items-center gap-6">
                    <a href="<?php echo e(route('cart.index')); ?>" class="relative text-gray-600 hover:text-terracotta-600 transition-colors">
                        <i class="fas fa-shopping-cart text-2xl"></i>
                        <?php $cartCount = session('cart') ? count(session('cart')) : 0; ?>
                        
                        <span class="absolute -top-3 -right-3 bg-terracotta-600 text-white text-xs font-bold w-6 h-6 rounded-full flex items-center justify-center">
                            <?php echo e($cartCount); ?>

                        </span>
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <div class="relative pt-32 pb-20 hero-pattern">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h1 class="font-serif text-5xl md:text-6xl font-bold text-gray-950 mb-6">
                Cita Rasa Otentik Cirebon, Kini Hadir di <span class="text-terracotta-600">Rumah Anda.</span>
            </h1>
            <p class="text-xl text-stone-600 max-w-2xl mx-auto mb-10">
                Kelezatan legendaris Empal Gentong Haji Apud tersedia dalam kemasan kaleng premium. Siap dikirim ke seluruh Indonesia tanpa pengawet.
            </p>
            <a href="#shop" class="inline-block bg-terracotta-600 hover:bg-terracotta-700 text-white px-10 py-4 rounded-full font-bold text-lg shadow-xl">
                Belanja Sekarang
            </a>
        </div>
    </div>

    <section id="shop" class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="font-serif text-4xl font-bold text-gray-950">Oleh-oleh Resmi</h2>
                <p class="text-stone-600 mt-4">Pilih produk favorit Anda.</p>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
                
                <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="bg-white rounded-3xl border border-stone-100 shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden flex flex-col">
                    
                    <div class="h-64 bg-stone-100 flex items-center justify-center text-stone-400 overflow-hidden relative">
                        <?php if($product->image): ?>
                            <img src="<?php echo e(asset('storage/' . $product->image)); ?>" alt="<?php echo e($product->name); ?>" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
                        <?php else: ?>
                            <i class="fas fa-image text-5xl"></i> 
                        <?php endif; ?>
                    </div>

                    <div class="p-8 flex flex-col flex-grow">
                        <h3 class="text-2xl font-extrabold text-gray-950 mb-2"><?php echo e($product->name); ?></h3>
                        <p class="text-stone-500 text-sm mb-6">Berat: <?php echo e($product->weight); ?> gram | Stok: <?php echo e($product->stock); ?></p>
                        
                        <div class="mt-auto flex justify-between items-center pt-6 border-t border-stone-100">
                            <span class="text-2xl font-bold text-terracotta-600">Rp <?php echo e(number_format($product->price, 0, ',', '.')); ?></span>
                            
                            <form action="<?php echo e(route('cart.add', $product->id)); ?>" method="POST">
                                <?php echo csrf_field(); ?>
                                <button type="submit" class="bg-gray-950 hover:bg-terracotta-600 text-white px-5 py-3 rounded-xl font-semibold transition-colors cursor-pointer">
                                    + Keranjang
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                
            </div>
        </div>
    </section>

    <?php if(session('success')): ?>
        <div id="toast" class="fixed bottom-5 right-5 bg-green-600 text-white px-6 py-4 rounded-xl shadow-2xl z-50 flex items-center gap-3 transition-opacity duration-500">
            <i class="fas fa-check-circle text-xl"></i>
            <span class="font-medium"><?php echo e(session('success')); ?></span>
        </div>
        <script>
            setTimeout(() => {
                document.getElementById('toast').style.opacity = '0';
                setTimeout(() => document.getElementById('toast').remove(), 500);
            }, 3000);
        </script>
    <?php endif; ?>

</body>
</html><?php /**PATH C:\Users\USER\Documents\web\hapudstore\haji-apud-store\resources\views/home.blade.php ENDPATH**/ ?>