<!DOCTYPE html>
<html lang="<?php echo e(str_replace('_', '-', app()->getLocale())); ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo e(config('app.name', 'Raja Futsal')); ?> - Toko Online Terpercaya</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    <style>
        * { font-family: 'Inter', sans-serif; }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes floatAnim {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        @keyframes pulseSlow {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        @keyframes modalIn {
            from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
            to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }
        
        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #d1d5db; }

        .animate-fadeInUp { animation: fadeInUp 0.6s ease forwards; opacity: 0; }
        .delay-1 { animation-delay: 0.2s; }
        .delay-2 { animation-delay: 0.4s; }
        .delay-3 { animation-delay: 0.6s; }
        .delay-4 { animation-delay: 0.8s; }

        .floating          { animation: floatAnim 6s ease-in-out infinite; }
        .floating-delay-1  { animation: floatAnim 7s ease-in-out infinite; animation-delay: 0.5s; }
        .floating-delay-2  { animation: floatAnim 8s ease-in-out infinite; animation-delay: 1s; }
        .pulse-slow        { animation: pulseSlow 3s ease-in-out infinite; }

        .product-card {
            transition: all 0.3s ease;
            border: 1px solid #f3f4f6;
        }
        .product-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
            border-color: #fed7aa;
        }

        .btn-primary {
            background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(249, 115, 22, 0.35);
        }

        .btn-outline {
            transition: all 0.3s ease;
            border: 1.5px solid #f97316;
            color: #f97316;
        }
        .btn-outline:hover {
            background: #f97316;
            color: white;
            transform: translateY(-2px);
        }

        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .hero-pattern {
            background: radial-gradient(circle at 10% 20%, rgba(249,115,22,0.05) 0%, transparent 30%),
                        radial-gradient(circle at 90% 50%, rgba(249,115,22,0.05) 0%, transparent 30%),
                        radial-gradient(circle at 30% 80%, rgba(249,115,22,0.05) 0%, transparent 30%);
        }

        /* ===== Rating Clickable ===== */
        .rating-btn {
            cursor: pointer;
            transition: all 0.2s ease;
            border-radius: 8px;
            padding: 3px 6px;
            margin: -3px -6px;
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }
        .rating-btn:hover {
            background: #fff7ed;
            transform: scale(1.04);
        }
        .rating-btn:active { transform: scale(0.97); }

        /* ===== Modal Animation ===== */
        #modalUlasan .modal-box {
            animation: modalIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }

        /* ===== FIX: Komentar panjang tanpa spasi ===== */
        #kontenUlasan .review-comment {
            word-break: break-word;
            overflow-wrap: break-word;
            white-space: pre-wrap;
        }

        /* Review Modal Refinement */
        .review-card {
            transition: all 0.2s ease;
        }
        .review-card:hover {
            border-color: #fed7aa;
            background: #fff;
        }
        .rating-bar-bg { background: #f3f4f6; }
        .rating-bar-fill { background: #fbbf24; }
    </style>
</head>
<body class="bg-white">

    <!-- ========== NAVBAR ========== -->
    <nav class="bg-white/95 backdrop-blur-md border-b sticky top-0 z-50 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">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl flex items-center justify-center shadow-lg transform rotate-3 hover:rotate-0 transition-transform floating">
                        <span class="text-white font-bold text-xl"><?php echo e(substr(config('app.name', 'Laravel'), 0, 1)); ?></span>
                    </div>
                    <div>
                        <h1 class="font-bold text-2xl text-gray-800"><?php echo e(config('app.name', 'Laravel')); ?></h1>
                        <p class="text-xs text-gray-500">Toko Online Terpercaya</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <a href="<?php echo e(route('login')); ?>" class="px-6 py-2.5 text-orange-600 border-2 border-orange-600 rounded-xl hover:bg-orange-600 hover:text-white transition-all font-medium">
                        Masuk
                    </a>
                    <a href="<?php echo e(route('register')); ?>" class="px-6 py-2.5 bg-gradient-to-r from-orange-500 to-orange-600 text-white rounded-xl hover:from-orange-600 hover:to-orange-700 transition-all font-medium shadow-lg">
                        Daftar
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- ========== HERO SECTION ========== -->
    <section id="home" class="relative overflow-hidden bg-gradient-to-br from-orange-50 via-white to-orange-50 py-20 lg:py-28 hero-pattern">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <div class="text-center lg:text-left">
                    <div class="inline-block px-4 py-2 bg-orange-100 text-orange-600 rounded-full text-sm font-semibold mb-6 animate-fadeInUp">
                        🎉 Selamat Datang di <?php echo e(config('app.name', 'Laravel')); ?>

                    </div>
                    <h1 class="text-4xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight animate-fadeInUp delay-1">
                        Belanja Online
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-orange-700">
                            Mudah & Aman
                        </span>
                    </h1>
                    <p class="text-lg lg:text-xl text-gray-600 mb-8 animate-fadeInUp delay-2 max-w-xl mx-auto lg:mx-0">
                        Temukan berbagai produk berkualitas dengan harga terbaik. Gratis ongkir * dan garansi 30 hari.
                    </p>

                    <div class="flex flex-wrap justify-center lg:justify-start gap-6 mb-8 animate-fadeInUp delay-3">
                        <div class="flex items-center gap-3">
                            <div class="w-12 h-12 bg-white rounded-xl shadow-md flex items-center justify-center">
                                <i class="fas fa-boxes text-2xl text-orange-500"></i>
                            </div>
                            <div>
                                <p class="text-2xl font-bold text-gray-900"><?php echo e($totalProduk ?? 24); ?>+</p>
                                <p class="text-sm text-gray-500">Total Produk</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-3">
                            <div class="w-12 h-12 bg-white rounded-xl shadow-md flex items-center justify-center">
                                <i class="fas fa-users text-2xl text-orange-500"></i>
                            </div>
                            <div>
                                <p class="text-2xl font-bold text-gray-900"><?php echo e($totalTerjual ?? 156); ?>+</p>
                                <p class="text-sm text-gray-500">Produk Terjual</p>
                            </div>
                        </div>
                    </div>

                    <div class="flex flex-wrap justify-center lg:justify-start gap-4 animate-fadeInUp delay-4">
                        <a href="#produk" class="btn-primary px-8 py-4 text-white rounded-xl font-bold flex items-center gap-3 shadow-xl">
                            <i class="fas fa-shopping-bag"></i> Belanja Sekarang
                        </a>
                        <button onclick="bukaModalCaraBelanja()" class="btn-outline px-8 py-4 rounded-xl font-bold flex items-center gap-3">
                            <i class="fas fa-play"></i> Cara Belanja
                        </button>
                    </div>
                </div>

                <div class="relative hidden lg:block floating">
                    <div class="relative w-full h-[500px]">
                        <div class="absolute top-20 left-10 w-32 h-32 bg-orange-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 pulse-slow"></div>
                        <div class="absolute bottom-20 right-10 w-40 h-40 bg-yellow-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 pulse-slow"></div>
                        <div class="absolute top-40 right-20 w-24 h-24 bg-pink-200 rounded-full mix-blend-multiply filter blur-xl opacity-70 pulse-slow"></div>
                        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96">
                            <img src="<?php echo e(asset('images/sepatu-futsal.jpg')); ?>" alt="Sepatu Futsal" class="w-full floating rounded-2xl shadow-xl">
                        </div>
                        <div class="absolute top-0 right-0 bg-white p-4 rounded-2xl shadow-xl floating">
                            <i class="fas fa-futbol text-orange-500 text-2xl mb-2"></i>
                            <p class="font-bold text-gray-800">Sepatu Futsal Original</p>
                            <p class="text-xs text-gray-500">Kualitas Terbaik</p>
                        </div>
                        <div class="absolute bottom-20 left-0 bg-white p-4 rounded-2xl shadow-xl floating-delay-1">
                            <i class="fas fa-shield-alt text-orange-500 text-2xl mb-2"></i>
                            <p class="font-bold text-gray-800">Garansi 30 Hari</p>
                            <p class="text-xs text-gray-500">100% Original</p>
                        </div>
                        <div class="absolute top-1/2 -right-10 bg-white p-4 rounded-2xl shadow-xl floating-delay-2">
                            <i class="fas fa-truck text-orange-500 text-2xl mb-2"></i>
                            <p class="font-bold text-gray-800">Ongkir Trejangkau</p>
                            <p class="text-xs text-gray-500"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="absolute bottom-0 left-0 w-full overflow-hidden">
            <svg viewBox="0 0 1440 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 100L60 91.7C120 83.3 240 66.7 360 58.3C480 50 600 50 720 54.2C840 58.3 960 66.7 1080 70.8C1200 75 1320 75 1380 75L1440 75V100H1380C1320 100 1200 100 1080 100C960 100 840 100 720 100C600 100 480 100 360 100C240 100 120 100 60 100H0Z" fill="white"/>
            </svg>
        </div>
    </section>

    
    <?php
        if (!function_exists('getTerjualWelcome')) {
            function getTerjualWelcome($produkId) {
                return \App\Models\PesananDetail::where('produk_id', $produkId)
                    ->whereHas('pesanan', function($q) {
                        $q->whereIn('status', ['selesai', 'dikirim', 'diproses', 'dibayar']);
                    })->sum('qty');
            }
        }

        $getCardData = function($produk) {
            $firstFoto = null;
            if (!empty($produk->foto)) {
                foreach(explode('|', $produk->foto) as $item) {
                    $item = trim($item);
                    if (str_contains($item, ':')) {
                        $parts = explode(':', $item, 2);
                        $path  = trim($parts[1]);
                        if ($path) { $firstFoto = $path; break; }
                    } elseif ($item) { $firstFoto = $item; break; }
                }
            }
            $stok         = $produk->stok ?? 0;
            $stokColor    = $stok > 10 ? 'bg-green-500' : ($stok > 0 ? 'bg-amber-400' : 'bg-red-500');
            $stokText     = $stok > 0 ? 'Stok ' . $stok : 'Habis';
            $terjual      = getTerjualWelcome($produk->id);
            $rataRating   = round(\App\Models\Ulasan::where('produk_id', $produk->id)->avg('bintang') ?? 0, 1);
            $jumlahUlasan = \App\Models\Ulasan::where('produk_id', $produk->id)->count();
            $namaKat      = $produk->kategori->nama ?? $produk->kategori->nama_kategori ?? 'Umum';
            $warnaArr     = $produk->warna ? array_filter(explode(',', $produk->warna)) : [];
            $ukuranArr    = $produk->ukuran ? array_filter(explode(',', $produk->ukuran)) : [];
            $tokoInfo     = \App\Models\Toko::where('user_id', $produk->user_id)->first();
            $lokasiToko   = $tokoInfo && $tokoInfo->city ? $tokoInfo->city->name
                : ($tokoInfo && $tokoInfo->district ? $tokoInfo->district->name : 'Lokasi tidak tersedia');
            $isNew        = $produk->created_at && $produk->created_at->diffInDays(now()) <= 7;
            return compact('firstFoto','stok','stokColor','stokText','terjual','rataRating','jumlahUlasan','namaKat','warnaArr','ukuranArr','lokasiToko','isNew');
        };

        $produkTerbaruFiltered = isset($produkTerbaru) ? $produkTerbaru : collect([]);
        $produkUnggulanFiltered = isset($produkUnggulan) ? $produkUnggulan : collect([]);
    ?>

    <!-- ========== PRODUK TERBARU (belum terjual) ========== -->
    <section id="produk" class="py-20 bg-gradient-to-b from-gray-50 to-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

            <div class="text-center mb-12">
                <div class="inline-flex items-center gap-2 bg-orange-100 px-4 py-2 rounded-full mb-4">
                    <i class="fas fa-rocket text-orange-500 text-sm"></i>
                    <span class="text-orange-600 text-sm font-semibold tracking-wide">PRODUK TERBARU</span>
                </div>
                <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">Yang Baru Dari Toko Kami</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Produk baru yang belum pernah terjual — jadilah pembeli pertamanya!</p>
            </div>

            <?php if($produkTerbaruFiltered->count() > 0): ?>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
                <?php $__currentLoopData = $produkTerbaruFiltered; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $produk): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php extract($getCardData($produk)); ?>

                <div class="product-card bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden flex flex-col">

                    
                    <div class="relative bg-gray-50 overflow-hidden aspect-square flex items-center justify-center">
                        <?php if($firstFoto): ?>
                            <img src="<?php echo e(asset('storage/'.$firstFoto)); ?>"
                                class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
                                alt="<?php echo e($produk->nama_produk); ?>" loading="lazy">
                        <?php else: ?>
                            <div class="w-full h-full flex flex-col items-center justify-center text-gray-200">
                                <i class="fas fa-shoe-prints text-6xl mb-2"></i>
                                <span class="text-xs text-gray-300">Tidak ada gambar</span>
                            </div>
                        <?php endif; ?>

                        <span class="absolute top-2 left-2 bg-orange-500 text-white text-[10px] font-semibold px-2.5 py-1 rounded-full shadow-sm">
                            <?php echo e($namaKat); ?>

                        </span>
                        <span class="absolute top-2 right-2 <?php echo e($stokColor); ?> text-white text-[10px] font-semibold px-2.5 py-1 rounded-full shadow-sm">
                            <?php echo e($stokText); ?>

                        </span>

                        <div class="absolute bottom-2 left-2 flex items-center gap-1 bg-orange-500 text-white text-[10px] font-bold px-3 py-1.5 rounded-full shadow-md">
                            <i class="fas fa-bolt text-[9px]"></i> NEW
                        </div>
                    </div>

                    
                    <div class="p-4 flex flex-col flex-1">

                        <h3 class="font-semibold text-gray-800 text-sm line-clamp-2 mb-2 leading-snug" style="min-height:40px;">
                            <?php echo e($produk->nama_produk); ?>

                        </h3>

                        <div class="flex items-center gap-2 mb-3">
                            <?php if(count($warnaArr) > 0): ?>
                                <span class="flex items-center gap-1 text-[11px] text-gray-500 bg-gray-50 px-2 py-0.5 rounded-full border border-gray-100">
                                    <i class="fas fa-palette text-purple-400 text-[9px]"></i>
                                    <?php echo e(count($warnaArr)); ?> warna
                                </span>
                            <?php endif; ?>
                            <?php if(count($ukuranArr) > 0): ?>
                                <span class="flex items-center gap-1 text-[11px] text-gray-500 bg-gray-50 px-2 py-0.5 rounded-full border border-gray-100">
                                    <i class="fas fa-ruler text-blue-400 text-[9px]"></i>
                                    <?php echo e(count($ukuranArr)); ?> ukuran
                                </span>
                            <?php endif; ?>
                        </div>

                        <div class="flex items-center justify-between gap-2 mb-3">
                            <span class="text-lg font-bold text-orange-500 whitespace-nowrap">
                                Rp <?php echo e(number_format($produk->harga ?? 0, 0, ',', '.')); ?>

                            </span>
                            <span class="flex items-center gap-1 text-[11px] text-gray-400 whitespace-nowrap flex-shrink-0">
                                <i class="fas fa-fire text-[9px]"></i>
                                0 terjual
                            </span>
                        </div>

                        <div class="border-t border-gray-100 mb-3"></div>

                        
                        <div class="flex items-center justify-between mb-3">
                            <button
                                type="button"
                                class="rating-btn"
                                data-id="<?php echo e($produk->id); ?>"
                                data-name="<?php echo e($produk->nama_produk); ?>"
                                onclick="bukaModalUlasan(this.dataset.id, this.dataset.name)"
                                title="Lihat ulasan pembeli"
                            >
                                <?php if($rataRating > 0): ?>
                                    <?php for($star = 1; $star <= 5; $star++): ?>
                                        <?php if($star <= floor($rataRating)): ?>
                                            <i class="fas fa-star text-yellow-400 text-[11px]"></i>
                                        <?php elseif($star - $rataRating < 1): ?>
                                            <i class="fas fa-star-half-alt text-yellow-400 text-[11px]"></i>
                                        <?php else: ?>
                                            <i class="far fa-star text-gray-200 text-[11px]"></i>
                                        <?php endif; ?>
                                    <?php endfor; ?>
                                    <span class="text-[11px] font-semibold text-gray-600 ml-1"><?php echo e($rataRating); ?></span>
                                    <span class="text-[11px] text-orange-400 underline ml-0.5">(<?php echo e($jumlahUlasan); ?> ulasan)</span>
                                <?php else: ?>
                                    <?php for($star = 1; $star <= 5; $star++): ?>
                                        <i class="far fa-star text-gray-200 text-[11px]"></i>
                                    <?php endfor; ?>
                                    <span class="text-[11px] text-gray-400 ml-1 underline">Belum ada ulasan</span>
                                <?php endif; ?>
                            </button>
                            <div class="flex items-center gap-1 text-[11px] text-gray-400">
                                <i class="fas fa-map-marker-alt text-orange-300 text-[10px]"></i>
                                <span class="truncate max-w-[80px]"><?php echo e($lokasiToko); ?></span>
                            </div>
                        </div>

                        <p class="text-[10px] text-gray-300 text-center italic mb-3">
                            Login untuk melihat detail & membeli
                        </p>

                        <div class="mt-auto">
                            <a href="<?php echo e(route('login')); ?>?redirect=<?php echo e(urlencode(route('produk.public.show', $produk->id))); ?>"
                               class="w-full flex items-center justify-center gap-1.5 py-2.5 bg-orange-500 hover:bg-orange-600 text-white rounded-xl text-xs font-semibold transition shadow-sm">
                                <i class="fas fa-bolt text-[11px]"></i> Beli Sekarang
                            </a>
                        </div>

                    </div>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>

            <div class="text-center mt-12">
                <a href="<?php echo e(route('produk.public.index')); ?>"
                    class="inline-flex items-center gap-3 px-8 py-4 bg-white border-2 border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white rounded-xl font-bold transition-all duration-300 shadow-lg hover:shadow-xl group">
                    <span>Lihat Semua Produk</span>
                    <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                </a>
            </div>

            <?php else: ?>
            <div class="bg-white rounded-2xl shadow-lg p-12 max-w-2xl mx-auto text-center">
                <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-box-open text-gray-400 text-4xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-gray-800 mb-3">Belum Ada Produk Baru</h3>
                <p class="text-gray-600">Saat ini semua produk sudah pernah terjual. Nantikan produk baru kami!</p>
            </div>
            <?php endif; ?>

        </div>
    </section>

    <!-- ========== PRODUK UNGGULAN (sudah terjual) ========== -->
    <?php if($produkUnggulanFiltered->count() > 0): ?>
    <section class="py-20 bg-gradient-to-b from-white to-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

            <div class="text-center mb-12">
                <div class="inline-flex items-center gap-2 bg-yellow-100 px-4 py-2 rounded-full mb-4">
                    <i class="fas fa-crown text-yellow-500 text-sm"></i>
                    <span class="text-yellow-600 text-sm font-semibold tracking-wide">PRODUK UNGGULAN</span>
                </div>
                <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">Paling Laris Bulan Ini</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Produk favorit yang paling banyak dibeli dan disukai pelanggan kami</p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
                <?php $__currentLoopData = $produkUnggulanFiltered; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $produk): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php extract($getCardData($produk)); ?>

                <div class="product-card bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden flex flex-col">

                    <div class="relative bg-gray-50 overflow-hidden aspect-square flex items-center justify-center">
                        <?php if($firstFoto): ?>
                            <img src="<?php echo e(asset('storage/'.$firstFoto)); ?>"
                                class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
                                alt="<?php echo e($produk->nama_produk); ?>" loading="lazy">
                        <?php else: ?>
                            <div class="w-full h-full flex flex-col items-center justify-center text-gray-200">
                                <i class="fas fa-shoe-prints text-6xl mb-2"></i>
                                <span class="text-xs text-gray-300">Tidak ada gambar</span>
                            </div>
                        <?php endif; ?>

                        <span class="absolute top-2 left-2 bg-orange-500 text-white text-[10px] font-semibold px-2.5 py-1 rounded-full shadow-sm">
                            <?php echo e($namaKat); ?>

                        </span>
                        <span class="absolute top-2 right-2 <?php echo e($stokColor); ?> text-white text-[10px] font-semibold px-2.5 py-1 rounded-full shadow-sm">
                            <?php echo e($stokText); ?>

                        </span>
                        <div class="absolute bottom-2 left-2 flex items-center gap-1 bg-yellow-400 text-white text-[10px] font-bold px-3 py-1.5 rounded-full shadow-md">
                            <i class="fas fa-crown text-[9px]"></i> BEST SELLER
                        </div>
                    </div>

                    <div class="p-4 flex flex-col flex-1">

                        <h3 class="font-semibold text-gray-800 text-sm line-clamp-2 mb-2 leading-snug" style="min-height:40px;">
                            <?php echo e($produk->nama_produk); ?>

                        </h3>

                        <div class="flex items-center gap-2 mb-3">
                            <?php if(count($warnaArr) > 0): ?>
                                <span class="flex items-center gap-1 text-[11px] text-gray-500 bg-gray-50 px-2 py-0.5 rounded-full border border-gray-100">
                                    <i class="fas fa-palette text-purple-400 text-[9px]"></i>
                                    <?php echo e(count($warnaArr)); ?> warna
                                </span>
                            <?php endif; ?>
                            <?php if(count($ukuranArr) > 0): ?>
                                <span class="flex items-center gap-1 text-[11px] text-gray-500 bg-gray-50 px-2 py-0.5 rounded-full border border-gray-100">
                                    <i class="fas fa-ruler text-blue-400 text-[9px]"></i>
                                    <?php echo e(count($ukuranArr)); ?> ukuran
                                </span>
                            <?php endif; ?>
                        </div>

                        <div class="flex items-center justify-between gap-2 mb-3">
                            <span class="text-lg font-bold text-orange-500 whitespace-nowrap">
                                Rp <?php echo e(number_format($produk->harga ?? 0, 0, ',', '.')); ?>

                            </span>
                            <span class="flex items-center gap-1 text-[11px] text-orange-500 bg-orange-50 px-2 py-0.5 rounded-full whitespace-nowrap flex-shrink-0">
                                <i class="fas fa-fire text-[9px]"></i>
                                <?php echo e(number_format($terjual)); ?> terjual
                            </span>
                        </div>

                        <div class="border-t border-gray-100 mb-3"></div>

                        
                        <div class="flex items-center justify-between mb-3">
                            <button
                                type="button"
                                class="rating-btn"
                                data-id="<?php echo e($produk->id); ?>"
                                data-name="<?php echo e($produk->nama_produk); ?>"
                                onclick="bukaModalUlasan(this.dataset.id, this.dataset.name)"
                                title="Lihat ulasan pembeli"
                            >
                                <?php if($rataRating > 0): ?>
                                    <?php for($star = 1; $star <= 5; $star++): ?>
                                        <?php if($star <= floor($rataRating)): ?>
                                            <i class="fas fa-star text-yellow-400 text-[11px]"></i>
                                        <?php elseif($star - $rataRating < 1): ?>
                                            <i class="fas fa-star-half-alt text-yellow-400 text-[11px]"></i>
                                        <?php else: ?>
                                            <i class="far fa-star text-gray-200 text-[11px]"></i>
                                        <?php endif; ?>
                                    <?php endfor; ?>
                                    <span class="text-[11px] font-semibold text-gray-600 ml-1"><?php echo e($rataRating); ?></span>
                                    <span class="text-[11px] text-orange-400 underline ml-0.5">(<?php echo e($jumlahUlasan); ?> ulasan)</span>
                                <?php else: ?>
                                    <?php for($star = 1; $star <= 5; $star++): ?>
                                        <i class="far fa-star text-gray-200 text-[11px]"></i>
                                    <?php endfor; ?>
                                    <span class="text-[11px] text-gray-400 ml-1 underline">Belum ada ulasan</span>
                                <?php endif; ?>
                            </button>
                            <div class="flex items-center gap-1 text-[11px] text-gray-400">
                                <i class="fas fa-map-marker-alt text-orange-300 text-[10px]"></i>
                                <span class="truncate max-w-[80px]"><?php echo e($lokasiToko); ?></span>
                            </div>
                        </div>

                        <p class="text-[10px] text-gray-300 text-center italic mb-3">
                            Login untuk melihat detail & membeli
                        </p>

                        <div class="mt-auto flex gap-2">
                            <a href="<?php echo e(route('produk.public.show', $produk->id)); ?>"
                               class="flex-1 flex items-center justify-center gap-1.5 py-2.5 bg-white hover:bg-orange-50 border border-orange-400 text-orange-500 rounded-xl text-xs font-semibold transition shadow-sm">
                                <i class="fas fa-eye text-[11px]"></i> Lihat
                            </a>
                            <a href="<?php echo e(route('login')); ?>?redirect=<?php echo e(urlencode(route('produk.public.show', $produk->id))); ?>"
                               class="flex-1 flex items-center justify-center gap-1.5 py-2.5 bg-orange-500 hover:bg-orange-600 text-white rounded-xl text-xs font-semibold transition shadow-sm">
                                <i class="fas fa-bolt text-[11px]"></i> Beli
                            </a>
                        </div>

                    </div>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    </section>
    <?php endif; ?>

    <!-- ========== LAYANAN KAMI ========== -->
    <section class="py-20 bg-gradient-to-b from-white to-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <span class="px-4 py-2 bg-orange-100 text-orange-600 rounded-full text-sm font-semibold inline-block mb-4">Layanan Kami</span>
                <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">Kenapa Belanja di <?php echo e(config('app.name')); ?>?</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Kami memberikan pengalaman belanja terbaik untuk Anda</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-xl transition">
                    <div class="w-20 h-20 bg-gradient-to-br from-orange-100 to-orange-200 rounded-2xl flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-truck-fast text-orange-600 text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Ongkir Terjangkau</h3>
                    <p class="text-gray-600">Ongkir dihitung dari alamat toko ke rumah kamu, semakin dekat semakin murah!</p>
                </div>
                <div class="text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-xl transition">
                    <div class="w-20 h-20 bg-gradient-to-br from-orange-100 to-orange-200 rounded-2xl flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-percent text-orange-600 text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Diskon Belanja</h3>
                    <p class="text-gray-600">Ayo Belanja Sekarang Banyak Diskon Menarik!</p>
                </div>
                <div class="text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-xl transition">
                    <div class="w-20 h-20 bg-gradient-to-br from-orange-100 to-orange-200 rounded-2xl flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-credit-card text-orange-600 text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Pembayaran Mudah</h3>
                    <p class="text-gray-600">Transfer bank, e-wallet, tersedia</p>
                </div>
                <div class="text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-xl transition">
                    <div class="w-20 h-20 bg-gradient-to-br from-orange-100 to-orange-200 rounded-2xl flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-headset text-orange-600 text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">CS 24/7</h3>
                    <p class="text-gray-600">Customer service siap membantu Anda kapan saja</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ========== CALL TO ACTION ========== -->
    <section class="py-20 bg-gradient-to-r from-orange-500 to-orange-600 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-64 h-64 bg-white opacity-10 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
        <div class="absolute bottom-0 right-0 w-96 h-96 bg-white opacity-10 rounded-full translate-x-1/3 translate-y-1/3"></div>
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="text-center text-white">
                <h2 class="text-3xl lg:text-5xl font-bold mb-6">Siap Berbelanja?</h2>
                <p class="text-xl text-orange-100 mb-8 max-w-2xl mx-auto">
                    Daftar sekarang dan temukan banyak produk bagus pilihan terbaik untuk kamu!
                </p>
                <div class="flex flex-wrap justify-center gap-4">
                    <?php if(auth()->guard()->check()): ?>
                        <a href="<?php echo e(route('produk.public.index')); ?>" class="px-8 py-4 bg-white text-orange-600 rounded-xl font-bold hover:bg-gray-100 transition shadow-xl">
                            Mulai Belanja
                        </a>
                    <?php else: ?>
                        <a href="<?php echo e(route('register')); ?>" class="px-8 py-4 bg-white text-orange-600 rounded-xl font-bold hover:bg-gray-100 transition shadow-xl">
                            Daftar Sekarang
                        </a>
                        <a href="<?php echo e(route('login')); ?>" class="px-8 py-4 border-2 border-white text-white rounded-xl font-bold hover:bg-white hover:text-orange-600 transition">
                            Masuk
                        </a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </section>

    <!-- ========== FOOTER ========== -->
    <footer class="bg-gray-900 text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
                <p>&copy; <?php echo e(date('Y')); ?> <?php echo e(config('app.name', 'Laravel')); ?>. Raja Futsal.</p>
            </div>
        </div>
    </footer>

    <!-- ========== MODAL CARA BELANJA ========== -->
    <div id="modalCaraBelanja" class="fixed inset-0 z-[9999]" style="display:none;">
        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" onclick="tutupModalCaraBelanja()"></div>
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-2xl shadow-2xl w-full max-w-md mx-4 z-10 overflow-hidden">

            
            <div class="bg-gradient-to-r from-orange-500 to-orange-600 p-6 text-white text-center relative">
                <button onclick="tutupModalCaraBelanja()" class="absolute top-4 right-4 w-8 h-8 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition">
                    <i class="fas fa-times text-white text-sm"></i>
                </button>
                <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-shopping-bag text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold">Cara Belanja</h3>
                <p class="text-orange-100 text-sm mt-1">Ikuti langkah berikut untuk mulai belanja</p>
            </div>

            
            <div class="p-6">
                <div class="bg-orange-50 border border-orange-100 rounded-xl p-5 mb-6 text-center">
                    <p class="text-gray-700 text-sm leading-relaxed">
                        Kamu mau belanja? Silahkan
                        <span class="font-bold text-orange-600">klik Masuk</span>
                        kalau sudah mempunyai akun.<br><br>
                        Jika belum punya akun, silahkan
                        <span class="font-bold text-orange-600">klik Daftar</span>
                        untuk membuat akun baru terlebih dahulu.
                    </p>
                </div>

                
                <div class="space-y-3 mb-6">
                    <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
                        <div class="w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center flex-shrink-0">
                            <span class="text-white text-xs font-bold">1</span>
                        </div>
                        <p class="text-sm text-gray-700">Daftar atau masuk ke akun kamu</p>
                    </div>
                    <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
                        <div class="w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center flex-shrink-0">
                            <span class="text-white text-xs font-bold">2</span>
                        </div>
                        <p class="text-sm text-gray-700">Pilih produk yang kamu inginkan</p>
                    </div>
                    <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
                        <div class="w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center flex-shrink-0">
                            <span class="text-white text-xs font-bold">3</span>
                        </div>
                        <p class="text-sm text-gray-700">Tambahkan ke keranjang & checkout</p>
                    </div>
                    <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
                        <div class="w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center flex-shrink-0">
                            <span class="text-white text-xs font-bold">4</span>
                        </div>
                        <p class="text-sm text-gray-700">Lakukan pembayaran & tunggu pesanan datang</p>
                    </div>
                </div>

                
                <div class="flex gap-3">
                    <a href="<?php echo e(route('login')); ?>"
                       class="flex-1 flex items-center justify-center gap-2 py-3 border-2 border-orange-500 text-orange-600 hover:bg-orange-500 hover:text-white rounded-xl font-bold transition">
                        <i class="fas fa-sign-in-alt"></i> Masuk
                    </a>
                    <a href="<?php echo e(route('register')); ?>"
                       class="flex-1 flex items-center justify-center gap-2 py-3 bg-orange-500 hover:bg-orange-600 text-white rounded-xl font-bold transition shadow-lg">
                        <i class="fas fa-user-plus"></i> Daftar
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- ========== MODAL ULASAN ========== -->
    <div id="modalUlasan" class="fixed inset-0 z-[9999]" style="display:none;">
        
        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" onclick="tutupModalUlasan()"></div>

        
        <div class="modal-box absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-2xl shadow-2xl w-full max-w-2xl mx-4 max-h-[85vh] overflow-hidden z-10 flex flex-col">

            
            <div class="bg-white p-6 border-b border-gray-100 flex-shrink-0 relative">
                <div class="flex items-start justify-between">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-star text-orange-500 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-extrabold text-gray-800">Ulasan Pembeli</h3>
                            <p class="text-gray-400 text-sm">Rating & testimoni dari pembeli</p>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="flex items-baseline justify-end gap-1">
                            <span id="nilaiRataRatingHeader" class="text-3xl font-extrabold text-orange-500">0</span>
                            <span class="text-gray-400 text-sm">/5</span>
                        </div>
                        <p class="text-[11px] font-bold text-gray-400 uppercase tracking-wider"><span id="totalUlasanHeader">0</span> ulasan</p>
                    </div>
                </div>
                <button onclick="tutupModalUlasan()" class="absolute top-2 right-2 w-8 h-8 rounded-full hover:bg-gray-100 flex items-center justify-center transition-all duration-200">
                    <i class="fas fa-times text-gray-300"></i>
                </button>
            </div>

            
            <div id="ringkasanRating" class="px-8 py-5 border-b border-gray-100 bg-white flex-shrink-0" style="display:none!important;">
                <div class="w-full space-y-2" id="distribusiBintang"></div>
            </div>

            
            <div class="flex-1 overflow-y-auto custom-scrollbar p-6">
                <div class="text-center py-12" id="loadingUlasan">
                    <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-orange-500 mb-4"></div>
                    <p class="text-gray-400 font-medium">Memuat ulasan...</p>
                </div>
                <div id="kontenUlasan" style="display:none;"></div>
            </div>

            
            <div class="border-t border-gray-100 p-5 bg-gray-50 flex-shrink-0 flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <div class="px-3 py-1 bg-orange-100 text-orange-700 rounded-lg text-xs font-bold">
                        <span id="totalUlasan">0</span> Ulasan
                    </div>
                    <div class="px-3 py-1 bg-yellow-100 text-yellow-700 rounded-lg text-xs font-bold flex items-center gap-1.5">
                        <i class="fas fa-star text-xs"></i>
                        <span id="rataUlasan">0</span>
                    </div>
                </div>
                <button onclick="tutupModalUlasan()" class="px-5 py-2 bg-white hover:bg-gray-100 text-gray-700 border border-gray-200 rounded-xl text-xs font-bold shadow-sm transition-all active:scale-95">
                    Tutup
                </button>
            </div>
        </div>
    </div>

    <script>
        // ===== Smooth scroll =====
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
            });
        });

        // ===== Navbar shadow on scroll =====
        window.addEventListener('scroll', function() {
            const nav = document.querySelector('nav');
            if (window.scrollY > 100) nav.classList.add('shadow-md');
            else nav.classList.remove('shadow-md');
        });

        // ===== Keyboard close modal =====
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                tutupModalUlasan();
                tutupModalCaraBelanja();
            }
        });

        // ===== Modal Cara Belanja =====
        function bukaModalCaraBelanja() {
            document.getElementById('modalCaraBelanja').style.display = 'block';
            document.body.style.overflow = 'hidden';
        }
        function tutupModalCaraBelanja() {
            document.getElementById('modalCaraBelanja').style.display = 'none';
            document.body.style.overflow = 'auto';
        }

        // ===== Modal Ulasan =====
        function bukaModalUlasan(produkId, namaProduk) {
            const modal = document.getElementById('modalUlasan');
            modal.style.display = 'block';
            document.body.style.overflow = 'hidden';

            document.getElementById('loadingUlasan').style.display = 'block';
            document.getElementById('kontenUlasan').style.display = 'none';
            document.getElementById('ringkasanRating').style.cssText = 'display:none!important';

            fetch(`/api/ulasan/produk/${produkId}`)
                .then(r => r.json())
                .then(data => {
                    document.getElementById('loadingUlasan').style.display = 'none';
                    document.getElementById('kontenUlasan').style.display = 'block';
                    if (data.success) {
                        tampilkanUlasan(data);
                    } else {
                        document.getElementById('kontenUlasan').innerHTML =
                            `<div class="text-center py-12">
                                <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i class="fas fa-comment-slash text-gray-300 text-2xl"></i>
                                </div>
                                <p class="text-gray-500 font-medium">Belum ada ulasan untuk produk ini</p>
                                <p class="text-gray-400 text-sm mt-1">Jadilah yang pertama memberikan ulasan!</p>
                            </div>`;
                    }
                })
                .catch(() => {
                    document.getElementById('loadingUlasan').style.display = 'none';
                    document.getElementById('kontenUlasan').style.display = 'block';
                    document.getElementById('kontenUlasan').innerHTML =
                        `<div class="text-center py-12">
                            <div class="w-16 h-16 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-4">
                                <i class="fas fa-exclamation-circle text-red-400 text-2xl"></i>
                            </div>
                            <p class="text-red-500 font-medium">Gagal memuat ulasan</p>
                            <p class="text-gray-400 text-sm mt-1">Coba lagi nanti</p>
                        </div>`;
                });
        }

        function tutupModalUlasan() {
            document.getElementById('modalUlasan').style.display = 'none';
            document.body.style.overflow = 'auto';
        }

        function tampilkanUlasan(data) {
            const konten     = document.getElementById('kontenUlasan');
            const ulasanList = data.ulasan || [];
            const total      = ulasanList.length;
            const rata       = parseFloat(data.rata_rating || 0);

            document.getElementById('totalUlasan').textContent = total;
            document.getElementById('rataUlasan').textContent  = rata.toFixed(1);
            document.getElementById('totalUlasanHeader').textContent = total;
            document.getElementById('nilaiRataRatingHeader').textContent = rata.toFixed(1);

            if (total === 0) {
                konten.innerHTML =
                    `<div class="text-center py-12">
                        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-comment-slash text-gray-300 text-2xl"></i>
                        </div>
                        <p class="text-gray-500 font-medium">Belum ada ulasan untuk produk ini</p>
                        <p class="text-gray-400 text-sm mt-1">Jadilah yang pertama memberikan ulasan!</p>
                    </div>`;
                return;
            }

            // Ringkasan rating
            const ringkasan = document.getElementById('ringkasanRating');
            ringkasan.style.cssText = '';
            ringkasan.style.display = 'block';

            // Distribusi bintang
            const dist = {5:0, 4:0, 3:0, 2:0, 1:0};
            ulasanList.forEach(u => { if (dist[u.bintang] !== undefined) dist[u.bintang]++; });
            let distHtml = '';
            for (let b = 5; b >= 1; b--) {
                const persen = total > 0 ? Math.round((dist[b] / total) * 100) : 0;
                distHtml += `
                    <div class="flex items-center gap-4">
                        <div class="flex items-center gap-1 w-6">
                            <span class="text-sm font-medium text-gray-600">${b}</span>
                            <i class="fas fa-star text-yellow-400 text-xs"></i>
                        </div>
                        <div class="flex-1 bg-gray-100 rounded-full h-1.5 overflow-hidden">
                            <div class="bg-yellow-400 h-full rounded-full" style="width:${persen}%"></div>
                        </div>
                        <span class="text-sm text-gray-400 w-4">${dist[b]}</span>
                    </div>`;
            }
            document.getElementById('distribusiBintang').innerHTML = distHtml;

            // Daftar ulasan
            const escHtml = str => {
                const d = document.createElement('div');
                d.appendChild(document.createTextNode(str || ''));
                return d.innerHTML;
            };

            const labelBintang = ['', 'Sangat Buruk', 'Buruk', 'Cukup', 'Bagus', 'Sangat Bagus'];
            const warnaBintang = ['', 'text-red-500', 'text-orange-400', 'text-yellow-400', 'text-blue-500', 'text-green-500'];

            let html = '<div class="space-y-4">';
            ulasanList.forEach(ulasan => {
                const tanggal = new Date(ulasan.created_at).toLocaleDateString('id-ID', {
                    day: 'numeric', month: 'long', year: 'numeric'
                });
                let bintangHtml = '';
                for (let i = 1; i <= 5; i++) {
                    bintangHtml += i <= ulasan.bintang
                        ? '<i class="fas fa-star text-yellow-400 text-sm"></i>'
                        : '<i class="far fa-star text-gray-300 text-sm"></i>';
                }
                const avatar   = escHtml(ulasan.user?.name?.charAt(0)?.toUpperCase() || 'U');
                const namaUser = escHtml(ulasan.user?.name || 'Anonymous');
                const labelVal = labelBintang[ulasan.bintang] || '';
                const warnaVal = warnaBintang[ulasan.bintang] || '';

                const toggleBtn = ulasan.komentar && ulasan.komentar.length > 100
                    ? `<button id="btn-review-${ulasan.id}" 
                               onclick="toggleReview(${ulasan.id})" 
                               data-expanded="false" 
                               class="mt-2 text-sm font-medium text-orange-500 hover:text-orange-600 transition-colors">
                        Sembunyikan <i class="fas fa-chevron-up text-[10px] ml-1"></i>
                    </button>`
                    : '';

                html += `
                    <div class="py-6 border-b border-gray-100 last:border-0">
                        <div class="flex items-start justify-between mb-2">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0 shadow-sm">
                                    <span class="text-orange-600 font-bold text-sm">${avatar}</span>
                                </div>
                                <div>
                                    <p class="font-bold text-gray-800 text-base leading-tight">${namaUser}</p>
                                    <div class="flex items-center gap-0.5 mt-1">${bintangHtml}</div>
                                </div>
                            </div>
                            <span class="text-xs text-gray-400 font-medium">${tanggal}</span>
                        </div>
                        
                        <div class="mt-2" style="padding-left: 52px;">
                            <p id="review-${ulasan.id}" class="review-comment text-gray-600 text-[15px] leading-relaxed italic" style="display:block; max-height:2.8em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; word-break:break-word;">"${escHtml(ulasan.komentar)}"</p>
                            ${toggleBtn}
                        </div>
                    </div>`;
            });
            html += '</div>';
            konten.innerHTML = html;
        }
        function toggleReview(id) {
            const el  = document.getElementById(`review-${id}`);
            const btn = document.getElementById(`btn-review-${id}`);
            if (!el || !btn) return;

            const isExpanded = btn.dataset.expanded === 'true';

            if (isExpanded) {
                el.style.cssText = 'display:block; max-height:2.8em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; word-break:break-word;';
                btn.dataset.expanded = 'false';
                btn.innerHTML = `Baca selengkapnya <i class="fas fa-chevron-down text-[10px] ml-1"></i>`;
            } else {
                el.style.cssText = 'display:block; max-height:none; overflow:visible; white-space:pre-wrap; word-break:break-word;';
                btn.dataset.expanded = 'true';
                btn.innerHTML = `Sembunyikan <i class="fas fa-chevron-up text-[10px] ml-1"></i>`;
            }
        }
    </script>
</body>
</html><?php /**PATH C:\laragon\www\ecommerce\resources\views/welcome.blade.php ENDPATH**/ ?>