<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LokaFurniture | Premium Home Living</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        :root {
            --wood-darkest: #1A0D05;
            --wood-dark:    #2D1B0E;
            --wood-mid:     #4A2C19;
            --amber:        #D97706;
            --amber-light:  #F59E0B;
            --cream:        #FDF8F2;
            --cream-warm:   #F5EAD8;
        }

        body { font-family: 'DM Sans', sans-serif; background: var(--cream); color: var(--wood-darkest); overflow-x: hidden; }
        .serif { font-family: 'Cormorant Garamond', serif; }

        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--cream-warm); }
        ::-webkit-scrollbar-thumb { background: var(--amber); border-radius: 99px; }

        /* NAV */
        nav {
            background: rgba(253,248,242,0.88);
            backdrop-filter: blur(28px) saturate(200%);
            border-bottom: 1px solid rgba(74,44,25,0.08);
        }

        /* HERO */
        .hero-section {
            background: linear-gradient(140deg, var(--wood-darkest) 0%, var(--wood-mid) 60%, #6B3A1F 100%);
            border-radius: 40px;
            position: relative;
            overflow: hidden;
            min-height: 380px;
        }
        .hero-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                repeating-linear-gradient(92deg, transparent, transparent 80px, rgba(255,255,255,0.012) 80px, rgba(255,255,255,0.012) 82px),
                repeating-linear-gradient(175deg, transparent, transparent 40px, rgba(255,255,255,0.008) 40px, rgba(255,255,255,0.008) 41px);
            pointer-events: none;
        }
        .hero-dots {
            position: absolute; inset: 0;
            background-image: radial-gradient(rgba(217,119,6,0.18) 1.5px, transparent 1.5px);
            background-size: 28px 28px;
            pointer-events: none;
            mask-image: radial-gradient(ellipse 60% 80% at 80% 50%, black 40%, transparent 100%);
        }
        .hero-glow {
            position: absolute; right: 10%; top: 20%;
            width: 260px; height: 260px; border-radius: 50%;
            background: radial-gradient(circle, rgba(217,119,6,0.18) 0%, transparent 70%);
            filter: blur(40px);
            pointer-events: none;
        }
        .hero-arc {
            position: absolute; right: -60px; top: 50%;
            transform: translateY(-50%);
            width: 500px; height: 500px;
            pointer-events: none;
        }

        /* STAT CARD */
        .stat-card {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.09);
            border-radius: 24px;
            backdrop-filter: blur(10px);
            transition: all 0.3s;
        }
        .stat-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(217,119,6,0.3); }

        /* MARQUEE */
        .marquee-outer { overflow: hidden; }
        .marquee-track {
            display: flex;
            width: max-content;
            animation: marquee 24s linear infinite;
        }
        @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

        /* SECTION LABEL */
        .section-label {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); margin-bottom: 10px;
        }
        .section-label::before, .section-label::after { content: ''; width: 24px; height: 1.5px; background: var(--amber); opacity: 0.4; }

        /* CATEGORY */
        .cat-card {
            background: white; border-radius: 28px;
            border: 1px solid rgba(74,44,25,0.07);
            padding: 28px 20px; text-align: center;
            position: relative; overflow: hidden;
            transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
        }
        .cat-card .cat-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--wood-mid), #8B4513); opacity: 0; transition: opacity 0.35s; }
        .cat-card:hover .cat-bg { opacity: 1; }
        .cat-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(74,44,25,0.14); }
        .cat-icon-wrap { width:64px; height:64px; border-radius:18px; background:#FEF3E2; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; transition:background 0.35s; position:relative; z-index:1; }
        .cat-card:hover .cat-icon-wrap { background: rgba(255,255,255,0.18); }
        .cat-icon { color: var(--amber); font-size: 22px; transition: color 0.35s; }
        .cat-card:hover .cat-icon { color: white; }
        .cat-name { font-weight:600; font-size:13px; color: var(--wood-dark); transition: color 0.35s; position:relative; z-index:1; }
        .cat-card:hover .cat-name { color: white; }

        /* PRODUCT CARD (latest) */
        .prod-card {
            background: white; border-radius: 28px;
            border: 1px solid rgba(74,44,25,0.06); overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
        }
        .prod-card:hover { transform: translateY(-10px); box-shadow: 0 24px 50px rgba(74,44,25,0.1); }
        .prod-img-wrap { aspect-ratio: 1; background: #FEF3E2; overflow: hidden; position: relative; }
        .prod-img-wrap img { width:100%; height:100%; object-fit:cover; transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); }
        .prod-card:hover .prod-img-wrap img { transform: scale(1.1); }
        .prod-badge { position:absolute; top:14px; left:14px; background:white; color:var(--wood-mid); font-size:9px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; padding:5px 12px; border-radius:99px; }
        .cart-btn { width:44px; height:44px; background:var(--wood-dark); border-radius:14px; display:flex; align-items:center; justify-content:center; color:white; transition:all 0.3s; flex-shrink:0; }
        .cart-btn:hover { background: var(--amber); transform: scale(1.08); }
        .cart-btn-sm { width:36px; height:36px; background:var(--wood-dark); border-radius:10px; display:flex; align-items:center; justify-content:center; color:white; transition:all 0.3s; flex-shrink:0; }
        .cart-btn-sm:hover { background: var(--amber); }

        /* TOP RATED CARD */
        .rated-card {
            background: white; border-radius: 28px;
            border: 1px solid rgba(74,44,25,0.06); overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
            display: flex; flex-direction: column;
        }
        .rated-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(74,44,25,0.1); }
        .rank-badge { position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; font-family:'Cormorant Garamond',serif; }
        .rank-1 { background: #FCD34D; color: #7C2D12; }
        .rank-2 { background: #E5E7EB; color: #374151; }
        .rank-3 { background: #D97706; color: white; }
        .rank-other { background: var(--cream-warm); color: var(--wood-mid); }

        /* BANNER */
        .banner-strip {
            background: linear-gradient(90deg, var(--wood-dark), #6B3A1F);
            border-radius: 32px; overflow: hidden; position: relative;
        }
        .banner-strip::after { content:''; position:absolute; right:0; top:0; bottom:0; width:40%; background:linear-gradient(90deg, transparent, rgba(217,119,6,0.12)); pointer-events:none; }

        /* ANIMATIONS */
        @keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
        .fade-up { animation: fadeUp 0.7s ease both; }
        .delay-1 { animation-delay: 0.1s; }
        .delay-2 { animation-delay: 0.22s; }
        .delay-3 { animation-delay: 0.34s; }
        .delay-4 { animation-delay: 0.46s; }

        @keyframes bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
        .bob { animation: bob 4s ease-in-out infinite; }

        @keyframes ring-pulse { 0%,100% { opacity:0.2; } 50% { opacity:0.55; } }
        .ring-1 { animation: ring-pulse 3.5s ease-in-out infinite; }
        .ring-2 { animation: ring-pulse 3.5s ease-in-out infinite 0.8s; }
        .ring-3 { animation: ring-pulse 3.5s ease-in-out infinite 1.6s; }

        .btn-shine { position:relative; overflow:hidden; }
        .btn-shine::after { content:''; position:absolute; top:-50%; left:-75%; width:50%; height:200%; background:rgba(255,255,255,0.18); transform:skewX(-20deg); transition:left 0.5s; }
        .btn-shine:hover::after { left:125%; }
    </style>
</head>
<body class="antialiased">

<!-- NAV -->
<nav class="fixed w-full z-50 top-0">
    <div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
        <a href="<?php echo e(route('home')); ?>" class="flex items-center gap-3 group">
            <div class="w-10 h-10 bg-amber-700 rounded-xl flex items-center justify-center text-white shadow-lg shadow-amber-900/20 group-hover:rotate-6 transition-transform duration-300">
                <i class="fas fa-couch text-sm"></i>
            </div>
            <span class="serif text-[1.7rem] font-bold tracking-tight text-amber-950">Loka<span class="text-amber-600">Furniture</span></span>
        </a>

        <div class="flex items-center gap-3">
            <a href="<?php echo e(route('login')); ?>" class="text-sm font-semibold text-amber-900 hover:text-amber-600 transition-colors px-4 py-2.5 rounded-xl hover:bg-amber-50">
                Masuk
            </a>
            <?php if(Route::has('register')): ?>
            <a href="<?php echo e(route('register')); ?>" class="btn-shine text-sm font-bold text-white px-5 py-2.5 rounded-xl shadow-lg shadow-amber-700/25"
               style="background: linear-gradient(135deg, var(--amber), #B45309);">
                Daftar Gratis
            </a>
            <?php endif; ?>
        </div>
    </div>
</nav>


<main class="max-w-7xl mx-auto px-6 pt-28 pb-24">

    <!-- ===== HERO ===== -->
    <section class="hero-section flex items-center px-8 md:px-16 mb-8 fade-up">
        <div class="hero-dots"></div>
        <div class="hero-glow"></div>
        <svg class="hero-arc" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
            <circle class="ring-1" cx="250" cy="250" r="220" fill="none" stroke="rgba(217,119,6,0.22)" stroke-width="1.5"/>
            <circle class="ring-2" cx="250" cy="250" r="160" fill="none" stroke="rgba(217,119,6,0.18)" stroke-width="1.5"/>
            <circle class="ring-3" cx="250" cy="250" r="100" fill="none" stroke="rgba(217,119,6,0.14)" stroke-width="1.5"/>
        </svg>

        <div class="relative z-10 grid md:grid-cols-5 gap-10 items-center w-full py-8">
            <!-- Left -->
            <div class="md:col-span-3">
                <span class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-[10px] font-bold tracking-[0.18em] uppercase text-amber-400 mb-4"
                      style="background:rgba(217,119,6,0.15); border:1px solid rgba(217,119,6,0.2);">
                    <span class="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse"></span>
                    Limited Collection 2026
                </span>
                <h1 class="serif text-white leading-[1.05] mb-4" style="font-size:clamp(2rem,4.5vw,3.8rem);">
                    Furniture <br>
                    <em class="text-amber-400">Jiwa Rumah</em><br>
                    <span style="opacity:0.5; font-size:0.62em; font-style:normal;">Anda</span>
                </h1>
                <p class="text-orange-100/55 text-base leading-relaxed mb-6 max-w-sm">
                    Ubah setiap sudut rumah menjadi mahakarya bersama furniture pilihan pengrajin terbaik Indonesia.
                </p>
                <div class="flex flex-wrap items-center gap-4">
                    <a href="<?php echo e(route('products.index')); ?>"
                       class="btn-shine inline-flex items-center gap-2 bg-white text-amber-900 font-bold px-7 py-3.5 rounded-2xl hover:bg-amber-50 transition-colors shadow-xl shadow-black/20">
                        Belanja Sekarang <i class="fas fa-arrow-right text-sm"></i>
                    </a>
                    <div class="flex items-center gap-3">
                        <div class="flex -space-x-2.5">
                            <div class="w-9 h-9 rounded-full border-2 border-amber-900/60 bg-amber-200/20 backdrop-blur"></div>
                            <div class="w-9 h-9 rounded-full border-2 border-amber-900/60 bg-amber-300/20 backdrop-blur"></div>
                            <div class="w-9 h-9 rounded-full border-2 border-amber-900/60 bg-amber-500 flex items-center justify-center text-[9px] font-black text-white">2k+</div>
                        </div>
                        <span class="text-orange-100/45 text-xs">pelanggan puas</span>
                    </div>
                </div>
            </div>

            <!-- Right: Stats -->
            <div class="md:col-span-2 grid grid-cols-2 gap-4">
                <?php
                    $totalProducts   = \App\Models\Product::count();
                    $totalCategories = \App\Models\Category::count();
                ?>
                <div class="stat-card p-4 bob" style="animation-delay:0s">
                    <div class="w-9 h-9 rounded-xl flex items-center justify-center mb-3" style="background:rgba(217,119,6,0.2);">
                        <i class="fas fa-box-open text-amber-400 text-sm"></i>
                    </div>
                    <p class="serif text-amber-400 font-bold mb-1" style="font-size:1.8rem;line-height:1;"><?php echo e($totalProducts); ?>+</p>
                    <p class="text-orange-100/40 text-[10px] font-semibold uppercase tracking-widest">Koleksi Produk</p>
                </div>
                <div class="stat-card p-4 mt-6 bob" style="animation-delay:0.6s">
                    <div class="w-9 h-9 rounded-xl flex items-center justify-center mb-3" style="background:rgba(217,119,6,0.2);">
                        <i class="fas fa-leaf text-amber-400 text-sm"></i>
                    </div>
                    <p class="serif text-amber-400 font-bold mb-1" style="font-size:1.8rem;line-height:1;">100%</p>
                    <p class="text-orange-100/40 text-[10px] font-semibold uppercase tracking-widest">Kayu Jati Asli</p>
                </div>
                <div class="stat-card p-4 bob" style="animation-delay:1.2s">
                    <div class="w-9 h-9 rounded-xl flex items-center justify-center mb-3" style="background:rgba(217,119,6,0.2);">
                        <i class="fas fa-th-large text-amber-400 text-sm"></i>
                    </div>
                    <p class="serif text-amber-400 font-bold mb-1" style="font-size:1.8rem;line-height:1;"><?php echo e($totalCategories); ?></p>
                    <p class="text-orange-100/40 text-[10px] font-semibold uppercase tracking-widest">Kategori</p>
                </div>
                <div class="stat-card p-4 mt-6 bob" style="animation-delay:1.8s">
                    <div class="w-9 h-9 rounded-xl flex items-center justify-center mb-3" style="background:rgba(217,119,6,0.2);">
                        <i class="fas fa-star text-amber-400 text-sm"></i>
                    </div>
                    <p class="serif text-amber-400 font-bold mb-1" style="font-size:1.8rem;line-height:1;">4.9</p>
                    <p class="text-orange-100/40 text-[10px] font-semibold uppercase tracking-widest">Rating Rata-rata</p>
                </div>
            </div>
        </div>
    </section>


    <!-- ===== MARQUEE (kategori dari DB, looping 3x biar smooth) ===== -->
    <div class="marquee-outer mb-0 py-4 rounded-2xl" style="background:var(--cream-warm);">
        <div class="marquee-track">
            <?php
                $marqueeCats = $categories->isNotEmpty() ? $categories : collect([]);
                // Duplikat 3x supaya marquee terlihat mulus
                $marqueeDup = $marqueeCats->concat($marqueeCats)->concat($marqueeCats);
            ?>
            <?php $__currentLoopData = $marqueeDup; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $mCat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php
                    $mIcon = match($mCat->name) {
                        'Kursi'        => 'chair',
                        'Meja'         => 'table',
                        'Lemari'       => 'archive',
                        'Tempat Tidur' => 'bed',
                        'Sofa'         => 'couch',
                        default        => 'tree'
                    };
                ?>
                <a href="<?php echo e(route('categories.show', $mCat->id)); ?>"
                   class="inline-flex items-center gap-2.5 px-7 text-sm font-semibold whitespace-nowrap hover:text-amber-600 transition-colors"
                   style="color:rgba(74,44,25,0.5);">
                    <i class="fas fa-<?php echo e($mIcon); ?> text-xs" style="color:rgba(217,119,6,0.55);"></i>
                    <?php echo e($mCat->name); ?>

                </a>
                <span class="text-amber-300/40 select-none">·</span>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>


    <div class="mb-20"></div>

    <!-- ===== CATEGORIES ===== -->
    <section class="mb-16 fade-up delay-1">
        <div class="flex items-end justify-between mb-10">
            <div>
                <div class="section-label">Jelajahi Koleksi</div>
                <h2 class="serif font-bold leading-tight" style="font-size:clamp(2rem,4vw,3rem);">
                    Pilih Berdasarkan <span class="text-amber-600 italic">Ruang</span>
                </h2>
                <p class="text-sm mt-1" style="color:rgba(74,44,25,0.4);">Kategori furniture paling dicari minggu ini</p>
            </div>
            <a href="<?php echo e(route('categories.index')); ?>" class="hidden md:inline-flex items-center gap-2 text-sm font-bold text-amber-700 hover:text-amber-500 transition-colors group">
                Semua Kategori <i class="fas fa-arrow-right group-hover:translate-x-1.5 transition-transform"></i>
            </a>
        </div>

        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-5">
            <?php $__empty_1 = true; $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
            <a href="<?php echo e(route('categories.show', $cat->id)); ?>" class="cat-card group">
                <div class="cat-bg"></div>
                <div class="cat-icon-wrap">
                    <?php
                        $icon = match($cat->name) {
                            'Kursi'        => 'chair',
                            'Meja'         => 'table',
                            'Lemari'       => 'archive',
                            'Tempat Tidur' => 'bed',
                            'Sofa'         => 'couch',
                            default        => 'tree'
                        };
                    ?>
                    <i class="fas fa-<?php echo e($icon); ?> cat-icon"></i>
                </div>
                <h4 class="cat-name"><?php echo e($cat->name); ?></h4>
            </a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
            <div class="col-span-full py-12 text-center border-2 border-dashed border-amber-200 rounded-3xl">
                <i class="fas fa-box-open text-3xl mb-3" style="color:rgba(217,119,6,0.4);"></i>
                <p class="text-sm italic" style="color:rgba(74,44,25,0.35);">Kategori belum tersedia</p>
            </div>
            <?php endif; ?>
        </div>
    </section>

    <!-- Connector arrow dari kategori ke produk teratas -->
    <div class="flex flex-col items-center my-8">
        <div class="w-px h-8 bg-gradient-to-b from-amber-200 to-amber-400"></div>
        <div class="w-8 h-8 rounded-full bg-amber-400 flex items-center justify-center shadow-lg shadow-amber-400/30">
            <i class="fas fa-chevron-down text-white text-xs"></i>
        </div>
        <div class="w-px h-8 bg-gradient-to-b from-amber-400 to-transparent"></div>
    </div>

    <!-- ===== TOP RATED ===== -->
    <section class="mb-24 fade-up delay-2">
        <div class="flex items-end justify-between mb-10">
            <div>
                <div class="section-label">Pilihan Pelanggan</div>
                <h2 class="serif font-bold leading-tight" style="font-size:clamp(2rem,4vw,3rem);">
                    Produk <span class="text-amber-600 italic">Teratas</span>
                </h2>
                <p class="text-sm mt-1" style="color:rgba(74,44,25,0.4);">Berdasarkan rating tertinggi dari pelanggan kami</p>
            </div>
            <a href="<?php echo e(route('products.index')); ?>" class="hidden md:inline-flex items-center gap-2 text-sm font-bold text-amber-700 hover:text-amber-500 transition-colors group">
                Lihat Semua <i class="fas fa-arrow-right group-hover:translate-x-1.5 transition-transform"></i>
            </a>
        </div>

        <?php
            $topFirst = $topRatedProducts->first();
            $topRest  = $topRatedProducts->skip(1);
        ?>

        <div class="grid md:grid-cols-3 gap-6">

            <!-- Featured #1 -->
            <?php if($topFirst): ?>
            <?php
                $fp        = $topFirst;
                $fpPrice   = optional($fp->variants->first())->price ?? $fp->base_price ?? 0;
                $fpImg     = $fp->images->first();
                $fpImgPath = $fpImg ? asset('storage/'.$fpImg->image) : 'https://placehold.co/800x800?text=No+Photo';
                $fpRating  = round($fp->avg_rating ?? 5, 1);
                $fpReviews = $fp->reviews_count ?? 0;
            ?>
            <div class="md:col-span-1 rated-card group relative">
                <div class="relative overflow-hidden" style="aspect-ratio:1; background:#FEF3E2;">
                    <img src="<?php echo e($fpImgPath); ?>" alt="<?php echo e($fp->name); ?>"
                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                         onerror="this.src='https://placehold.co/800x800?text=No+Photo'">
                    <div class="absolute top-4 left-4">
                        <span class="inline-flex items-center gap-1.5 bg-amber-400 text-amber-950 text-[10px] font-black uppercase tracking-widest px-3 py-1.5 rounded-full shadow-lg">
                            <i class="fas fa-crown text-[9px]"></i> #1 Terbaik
                        </span>
                    </div>
                    <div class="absolute bottom-4 left-4 right-4">
                        <div class="bg-white/90 backdrop-blur-sm rounded-2xl px-4 py-3 flex items-center justify-between">
                            <div class="flex items-center gap-1">
                                <?php for($s=1; $s<=5; $s++): ?>
                                    <i class="fas fa-star text-[11px] <?php echo e($s <= round($fpRating) ? 'text-amber-400' : 'text-gray-200'); ?>"></i>
                                <?php endfor; ?>
                                <span class="ml-1 text-xs font-bold text-amber-900"><?php echo e($fpRating); ?></span>
                            </div>
                            <span class="text-[10px] font-medium" style="color:rgba(74,44,25,0.5);"><?php echo e($fpReviews); ?> ulasan</span>
                        </div>
                    </div>
                </div>
                <div class="p-6">
                    <p class="text-[10px] font-bold uppercase tracking-widest text-amber-500 mb-1"><?php echo e($fp->category->name ?? 'Furniture'); ?></p>
                    <a href="<?php echo e(route('products.show', $fp->id)); ?>">
                        <h3 class="serif font-bold text-amber-950 hover:text-amber-600 transition-colors mb-4" style="font-size:1.4rem;"><?php echo e($fp->name); ?></h3>
                    </a>
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-[10px] mb-0.5" style="color:rgba(74,44,25,0.4);">Mulai dari</p>
                            <p class="font-black text-amber-900 text-lg">Rp <?php echo e(number_format($fpPrice, 0, ',', '.')); ?></p>
                        </div>
                        <a href="<?php echo e(route('login')); ?>" class="cart-btn">
                            <i class="fas fa-shopping-bag text-sm"></i>
                        </a>
                    </div>
                </div>
            </div>
            <?php endif; ?>

            <!-- Rest top rated -->
            <div class="md:col-span-2 grid sm:grid-cols-2 gap-5">
                <?php $__currentLoopData = $topRest->take(4); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php
                    $rPrice   = optional($product->variants->first())->price ?? $product->base_price ?? 0;
                    $rImg     = $product->images->first();
                    $rImgPath = $rImg ? asset('storage/'.$rImg->image) : 'https://placehold.co/600x600?text=No+Photo';
                    $rRating  = round($product->avg_rating ?? 5, 1);
                    $rReviews = $product->reviews_count ?? 0;
                    $rank     = $i + 2;
                    $rankClass = match($rank) { 2 => 'rank-2', 3 => 'rank-3', default => 'rank-other' };
                ?>
                <div class="rated-card group relative">
                    <div class="relative overflow-hidden" style="aspect-ratio:1; background:#FEF3E2;">
                        <img src="<?php echo e($rImgPath); ?>" alt="<?php echo e($product->name); ?>"
                             class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                             onerror="this.src='https://placehold.co/600x600?text=No+Photo'">
                        <div class="rank-badge <?php echo e($rankClass); ?>">#<?php echo e($rank); ?></div>
                    </div>
                    <div class="p-4 flex flex-col flex-1">
                        <p class="text-[9px] font-bold uppercase tracking-widest text-amber-500 mb-0.5"><?php echo e($product->category->name ?? 'Furniture'); ?></p>
                        <a href="<?php echo e(route('products.show', $product->id)); ?>">
                            <h3 class="serif font-semibold text-amber-950 hover:text-amber-600 transition-colors text-base leading-snug mb-2"><?php echo e($product->name); ?></h3>
                        </a>
                        <div class="flex items-center gap-1 mb-3">
                            <?php for($s=1; $s<=5; $s++): ?>
                                <i class="fas fa-star text-[10px] <?php echo e($s <= round($rRating) ? 'text-amber-400' : 'text-gray-200'); ?>"></i>
                            <?php endfor; ?>
                            <span class="text-[10px] font-bold ml-1" style="color:rgba(74,44,25,0.55);"><?php echo e($rRating); ?> (<?php echo e($rReviews); ?>)</span>
                        </div>
                        <div class="flex items-center justify-between mt-auto">
                            <p class="font-black text-amber-900 text-sm">Rp <?php echo e(number_format($rPrice, 0, ',', '.')); ?></p>
                            <a href="<?php echo e(route('login')); ?>" class="cart-btn-sm">
                                <i class="fas fa-shopping-bag text-xs"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    </section>


    <!-- ===== LATEST PRODUCTS ===== -->
    <section class="mb-24 fade-up delay-3">
        <div class="flex items-center gap-5 mb-10">
            <div class="h-px flex-1" style="background:linear-gradient(90deg,transparent,rgba(217,119,6,0.3));"></div>
            <div class="text-center">
                <div class="section-label justify-center">Baru Datang</div>
                <h2 class="serif font-bold" style="font-size:clamp(2rem,4vw,3rem);">
                    Produk <span class="text-amber-600 italic">Terbaru</span>
                </h2>
            </div>
            <div class="h-px flex-1" style="background:linear-gradient(90deg,rgba(217,119,6,0.3),transparent);"></div>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <?php $__empty_1 = true; $__currentLoopData = $latestProducts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
            <?php
                $displayPrice = optional($product->variants->first())->price ?? $product->base_price ?? 0;
                $firstImage   = $product->images->first();
                $imagePath    = $firstImage ? asset('storage/'.$firstImage->image) : 'https://placehold.co/600x600?text=No+Photo';
            ?>
            <div class="prod-card group">
                <div class="prod-img-wrap">
                    <img src="<?php echo e($imagePath); ?>" alt="<?php echo e($product->name); ?>"
                         onerror="this.src='https://placehold.co/600x600?text=No+Photo'">
                    <span class="prod-badge">New Arrival</span>
                </div>
                <div class="p-5">
                    <p class="text-[10px] font-bold uppercase tracking-widest text-amber-500 mb-1"><?php echo e($product->category->name ?? 'Furniture'); ?></p>
                    <a href="<?php echo e(route('products.show', $product->id)); ?>">
                        <h3 class="serif font-semibold text-amber-950 hover:text-amber-600 transition-colors mb-4" style="font-size:1.15rem;line-height:1.3;"><?php echo e($product->name); ?></h3>
                    </a>
                    <div class="flex items-center justify-between">
                        <p class="font-black text-amber-900">Rp <?php echo e(number_format($displayPrice, 0, ',', '.')); ?></p>
                        <a href="<?php echo e(route('login')); ?>" class="cart-btn">
                            <i class="fas fa-shopping-bag text-xs"></i>
                        </a>
                    </div>
                </div>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
            <div class="col-span-full py-16 text-center border-2 border-dashed border-amber-200 rounded-3xl">
                <i class="fas fa-box-open text-4xl mb-4" style="color:rgba(217,119,6,0.4);"></i>
                <p class="text-sm italic" style="color:rgba(74,44,25,0.35);">Produk belum tersedia</p>
            </div>
            <?php endif; ?>
        </div>
    </section>


    <!-- ===== CTA BANNER ===== -->
    <section class="banner-strip px-10 py-12 fade-up delay-4">
        <div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8">
            <div>
                <p class="text-xs font-bold uppercase tracking-widest mb-2" style="color:rgba(217,119,6,0.7);">Mulai Hari Ini</p>
                <h2 class="serif text-white font-bold leading-tight" style="font-size:clamp(1.8rem,3.5vw,2.8rem);">
                    Wujudkan Rumah <br><em class="text-amber-400">Impian Anda</em>
                </h2>
            </div>
            <a href="<?php echo e(route('register')); ?>"
               class="btn-shine flex-shrink-0 inline-flex items-center gap-3 bg-amber-500 hover:bg-amber-400 text-white font-bold px-8 py-4 rounded-2xl transition-colors shadow-xl shadow-amber-900/30 text-sm">
                Daftar Sekarang — Gratis <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </section>

</main>


<!-- FOOTER -->
<footer class="pt-20 pb-10" style="background:var(--wood-darkest); color:rgba(253,248,242,0.6);">
    <div class="max-w-7xl mx-auto px-6">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-14">
            <div class="md:col-span-1">
                <a href="#" class="flex items-center gap-3 mb-5">
                    <div class="w-9 h-9 bg-amber-600 rounded-xl flex items-center justify-center text-white text-sm">
                        <i class="fas fa-couch"></i>
                    </div>
                    <span class="serif text-xl font-bold text-white">LokaFurniture</span>
                </a>
                <p class="text-sm leading-relaxed" style="opacity:0.45;">
                    Kami percaya bahwa furniture bukan sekadar benda, melainkan jiwa dari sebuah hunian yang memberikan kehangatan bagi setiap keluarga.
                </p>
                <div class="flex items-center gap-1.5 mt-5">
                    <?php for($i=0;$i<5;$i++): ?><i class="fas fa-star text-amber-500 text-xs"></i><?php endfor; ?>
                    <span class="text-xs ml-1" style="color:rgba(217,119,6,0.6);">4.9 / 5.0</span>
                </div>
            </div>
            <div>
                <h4 class="text-white font-bold mb-5 text-xs uppercase tracking-widest">Tautan Cepat</h4>
                <ul class="space-y-3.5 text-sm">
                    <li><a href="#" class="hover:text-amber-400 transition-colors">Semua Katalog</a></li>
                    <li><a href="#" class="hover:text-amber-400 transition-colors">Cara Pemesanan</a></li>
                    <li><a href="#" class="hover:text-amber-400 transition-colors">Kebijakan Garansi</a></li>
                </ul>
            </div>
            <div>
                <h4 class="text-white font-bold mb-5 text-xs uppercase tracking-widest">Bantuan</h4>
                <ul class="space-y-3.5 text-sm">
                    <li><a href="#" class="hover:text-amber-400 transition-colors">Hubungi Kami</a></li>
                    <li><a href="#" class="hover:text-amber-400 transition-colors">FAQ</a></li>
                    <li><a href="#" class="hover:text-amber-400 transition-colors">Lokasi Workshop</a></li>
                </ul>
            </div>
            <div>
                <h4 class="text-white font-bold mb-5 text-xs uppercase tracking-widest">Ikuti Kami</h4>
                <div class="flex gap-3">
                    <?php $__currentLoopData = ['instagram','facebook-f','whatsapp','tiktok']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $soc): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <a href="#" class="w-10 h-10 rounded-xl flex items-center justify-center hover:bg-amber-600 transition-all text-sm"
                       style="background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.07);">
                        <i class="fab fa-<?php echo e($soc); ?>"></i>
                    </a>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
        </div>
        <div class="pt-8 flex flex-col md:flex-row justify-between items-center gap-3 text-xs" style="border-top:1px solid rgba(255,255,255,0.06); opacity:0.35;">
            <p>© <?php echo e(date('Y')); ?> LokaFurniture Premium. All Rights Reserved.</p>
            <p>Crafted with Passion in Central Java, Indonesia</p>
        </div>
    </div>
</footer>

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