<!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', 'Glow Beauty')); ?> - Skincare 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&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
        * { font-family: 'Poppins', '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); }
        }
        @keyframes shimmer {
            0% { background-position: -1000px 0; }
            100% { background-position: 1000px 0; }
        }

        .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 #ffe4e6;
            background: linear-gradient(135deg, #ffffff 0%, #fff5f7 100%);
        }
        .product-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 25px -5px rgba(244, 114, 182, 0.2);
            border-color: #f9a8d4;
        }

        .btn-primary {
            background: linear-gradient(135deg, #f472b6 0%, #ec489a 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(244, 114, 182, 0.35);
        }

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

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

        .hero-pattern {
            background: radial-gradient(circle at 10% 20%, rgba(244,114,182,0.08) 0%, transparent 30%),
                        radial-gradient(circle at 90% 50%, rgba(244,114,182,0.08) 0%, transparent 30%),
                        radial-gradient(circle at 30% 80%, rgba(244,114,182,0.08) 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: #fce7f3;
            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;
        }

        /* Pink Theme Additional */
        .bg-gradient-pink {
            background: linear-gradient(135deg, #fdf2f8 0%, #fff1f3 100%);
        }
        .text-pink-gradient {
            background: linear-gradient(135deg, #f472b6, #ec489a);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .border-pink-light {
            border-color: #fbcfe8;
        }
        .shadow-pink {
            box-shadow: 0 4px 14px 0 rgba(244, 114, 182, 0.15);
        }
    </style>
</head>
<body class="bg-gradient-pink">

    <!-- ========== NAVBAR ========== -->
    <nav class="bg-white/95 backdrop-blur-md border-b border-pink-light sticky top-0 z-50 shadow-pink">
        <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-pink-400 to-pink-500 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">✨</span>
                    </div>
                    <div>
                        <h1 class="font-bold text-2xl text-pink-600"><?php echo e(config('app.name', 'Glow Beauty')); ?></h1>
                        <p class="text-xs text-pink-400">Skincare & Kecantikan</p>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <a href="<?php echo e(route('login')); ?>" class="px-6 py-2.5 text-pink-500 border-2 border-pink-400 rounded-xl hover:bg-pink-500 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-pink-400 to-pink-500 text-white rounded-xl hover:from-pink-500 hover:to-pink-600 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-pink-50 via-white to-pink-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-pink-100 text-pink-500 rounded-full text-sm font-semibold mb-6 animate-fadeInUp">
                        💖 Selamat Datang di <?php echo e(config('app.name', 'Glow Beauty')); ?>

                    </div>
                    <h1 class="text-4xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight animate-fadeInUp delay-1">
                        Kulit Sehat, 
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-pink-600">
                            Berseri Alami
                        </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 produk skincare berkualitas dengan bahan alami. Dapatkan kulit impian Anda bersama kami!
                    </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-leaf text-2xl text-pink-400"></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-smile text-2xl text-pink-400"></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">Pelanggan Puas</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]">
        <!-- Blob backgrounds -->
        <div class="absolute top-20 left-10 w-32 h-32 bg-pink-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-rose-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>

        <!-- Foto Produk Center -->
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80">
            <img 
                src="https://images.pexels.com/photos/3685530/pexels-photo-3685530.jpeg?auto=compress&cs=tinysrgb&w=600" 
                alt="Skincare Set" 
                class="w-full h-80 floating rounded-2xl shadow-2xl object-cover"
                onerror="this.src='https://placehold.co/400x400/fce7f3/ec4899?text=Skincare+Product'"
            >
        </div>

        <!-- Badge: Skincare Natural -->
        <div class="absolute top-0 right-0 bg-white p-4 rounded-2xl shadow-xl floating">
            <i class="fas fa-spa text-pink-400 text-2xl mb-2"></i>
            <p class="font-bold text-gray-800">Skincare Natural</p>
            <p class="text-xs text-gray-500">100% Bahan Alami</p>
        </div>

        <!-- Badge: BPOM Terdaftar -->
        <div class="absolute bottom-20 left-0 bg-white p-4 rounded-2xl shadow-xl floating-delay-1">
            <i class="fas fa-certificate text-pink-400 text-2xl mb-2"></i>
            <p class="font-bold text-gray-800">BPOM Terdaftar</p>
            <p class="text-xs text-gray-500">Aman & Halal</p>
        </div>

        <!-- Badge: Gratis Ongkir -->
        <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-pink-400 text-2xl mb-2"></i>
            <p class="font-bold text-gray-800">Gratis Ongkir</p>
            <p class="text-xs text-gray-500">Min. beli Rp200K</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-pink-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 ?? 'Skincare';
            $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');
        };

        // Filter: produk terbaru = belum terjual, urutkan dari terbaru
        $produkTerbaruFiltered = isset($produkTerbaru)
            ? $produkTerbaru->filter(function($p) {
                return getTerjualWelcome($p->id) == 0;
              })->sortByDesc('created_at')
            : collect([]);

        // Filter: produk unggulan = sudah terjual (terjual > 0)
        $produkUnggulanFiltered = isset($produkUnggulan)
            ? collect($produkUnggulan)->filter(function($p) {
                return getTerjualWelcome($p->id) > 0;
              })
            : collect([]);
    ?>

    <!-- ========== PRODUK TERBARU (belum terjual) ========== -->
    <section id="produk" class="py-20 bg-gradient-to-b from-pink-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-pink-100 px-4 py-2 rounded-full mb-4">
                    <i class="fas fa-star text-pink-400 text-sm"></i>
                    <span class="text-pink-500 text-sm font-semibold tracking-wide">PRODUK TERBARU</span>
                </div>
                <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">Koleksi Skincare Terbaru</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Produk baru dengan formula terbaik untuk kulit sehat berseri!</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 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-pink-100 overflow-hidden flex flex-col">

                    
                    <div class="relative bg-gradient-to-br from-pink-50 to-white overflow-hidden" style="height:320px;">
                        <?php if($firstFoto): ?>
                            <img src="<?php echo e(asset('storage/'.$firstFoto)); ?>"
                                class="w-full h-full object-contain p-3 transition-transform duration-500"
                                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-fill-drip 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-pink-400 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-pink-400 text-white text-[10px] font-bold px-3 py-1.5 rounded-full shadow-md">
                            <i class="fas fa-seedling 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-pink-50 px-2 py-0.5 rounded-full border border-pink-100">
                                    <i class="fas fa-palette text-pink-300 text-[9px]"></i>
                                    <?php echo e(count($warnaArr)); ?> varian
                                </span>
                            <?php endif; ?>
                            <?php if(count($ukuranArr) > 0): ?>
                                <span class="flex items-center gap-1 text-[11px] text-gray-500 bg-pink-50 px-2 py-0.5 rounded-full border border-pink-100">
                                    <i class="fas fa-ruler text-pink-300 text-[9px]"></i>
                                    <?php echo e(count($ukuranArr)); ?> ukuran
                                </span>
                            <?php endif; ?>
                        </div>

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

                            </span>
                            <span class="flex items-center gap-1 text-[11px] text-gray-400 bg-pink-50 px-2 py-0.5 rounded-full">
                                <i class="fas fa-fire text-[9px]"></i>
                                0 terjual
                            </span>
                        </div>

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

                        
                        <div class="flex items-center justify-between mb-3">
                            <button
                                type="button"
                                class="rating-btn"
                                onclick="bukaModalUlasan(<?php echo e($produk->id); ?>, '<?php echo e(addslashes($produk->nama_produk)); ?>')"
                                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-pink-400 text-[11px]"></i>
                                        <?php elseif($star - $rataRating < 1): ?>
                                            <i class="fas fa-star-half-alt text-pink-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-pink-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-pink-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-pink-400 hover:bg-pink-500 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-pink-400 text-pink-500 hover:bg-pink-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-pink-100 rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-box-open text-pink-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-pink-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-rose-100 px-4 py-2 rounded-full mb-4">
                    <i class="fas fa-crown text-rose-400 text-sm"></i>
                    <span class="text-rose-500 text-sm font-semibold tracking-wide">PRODUK UNGGULAN</span>
                </div>
                <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">Best Seller Skincare</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 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-pink-100 overflow-hidden flex flex-col">

                    <div class="relative bg-gradient-to-br from-pink-50 to-white overflow-hidden" style="height:320px;">
                        <?php if($firstFoto): ?>
                            <img src="<?php echo e(asset('storage/'.$firstFoto)); ?>"
                                class="w-full h-full object-contain p-3 transition-transform duration-500"
                                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-fill-drip 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-pink-400 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-rose-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-pink-50 px-2 py-0.5 rounded-full border border-pink-100">
                                    <i class="fas fa-palette text-pink-300 text-[9px]"></i>
                                    <?php echo e(count($warnaArr)); ?> varian
                                </span>
                            <?php endif; ?>
                            <?php if(count($ukuranArr) > 0): ?>
                                <span class="flex items-center gap-1 text-[11px] text-gray-500 bg-pink-50 px-2 py-0.5 rounded-full border border-pink-100">
                                    <i class="fas fa-ruler text-pink-300 text-[9px]"></i>
                                    <?php echo e(count($ukuranArr)); ?> ukuran
                                </span>
                            <?php endif; ?>
                        </div>

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

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

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

                        
                        <div class="flex items-center justify-between mb-3">
                            <button
                                type="button"
                                class="rating-btn"
                                onclick="bukaModalUlasan(<?php echo e($produk->id); ?>, '<?php echo e(addslashes($produk->nama_produk)); ?>')"
                                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-pink-400 text-[11px]"></i>
                                        <?php elseif($star - $rataRating < 1): ?>
                                            <i class="fas fa-star-half-alt text-pink-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-pink-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-pink-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-pink-50 border border-pink-300 text-pink-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-pink-400 hover:bg-pink-500 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-pink-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-pink-100 text-pink-500 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 kulit sehat 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 border border-pink-100">
                    <div class="w-20 h-20 bg-gradient-to-br from-pink-100 to-pink-200 rounded-2xl flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-truck-fast text-pink-500 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 border border-pink-100">
                    <div class="w-20 h-20 bg-gradient-to-br from-pink-100 to-pink-200 rounded-2xl flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-percent text-pink-500 text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Diskon Belanja</h3>
                    <p class="text-gray-600">Belanja minimal Rp 200.000 langsung dapat diskon 10% untuk setiap transaksi kamu!</p>
                </div>
                <div class="text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-xl transition border border-pink-100">
                    <div class="w-20 h-20 bg-gradient-to-br from-pink-100 to-pink-200 rounded-2xl flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-credit-card text-pink-500 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 border border-pink-100">
                    <div class="w-20 h-20 bg-gradient-to-br from-pink-100 to-pink-200 rounded-2xl flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-headset text-pink-500 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-pink-400 to-pink-500 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 Memulai Perawatan Kulit?</h2>
                <p class="text-xl text-pink-100 mb-8 max-w-2xl mx-auto">
                    Daftar sekarang dan temukan produk skincare terbaik untuk kulit sehat dan berseri!
                </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-pink-500 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-pink-500 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-pink-500 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', 'Glow Beauty')); ?>. Glow Up with Confidence.</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-pink-400 to-pink-500 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-pink-100 text-sm mt-1">Ikuti langkah berikut untuk mulai belanja</p>
            </div>

            
            <div class="p-6">
                <div class="bg-pink-50 border border-pink-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-pink-500">klik Masuk</span>
                        kalau sudah mempunyai akun.<br><br>
                        Jika belum punya akun, silahkan
                        <span class="font-bold text-pink-500">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-pink-400 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-pink-400 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 skincare 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-pink-400 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-pink-400 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-pink-400 text-pink-500 hover:bg-pink-400 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-pink-400 hover:bg-pink-500 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-gradient-to-r from-pink-400 to-pink-500 p-5 text-white flex-shrink-0">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
                            <i class="fas fa-star text-white"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold">Ulasan Pembeli</h3>
                            <p id="modalUlasanProduk" class="text-pink-100 text-sm truncate max-w-md"></p>
                        </div>
                    </div>
                    <button onclick="tutupModalUlasan()" class="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"></i>
                    </button>
                </div>
            </div>

            
            <div id="ringkasanRating" class="px-6 py-3 border-b border-gray-100 bg-pink-50 flex items-center gap-4 flex-shrink-0" style="display:none!important;">
                <div class="text-center">
                    <div id="nilaiRataRating" class="text-4xl font-bold text-pink-500">0</div>
                    <div id="bintangRingkasan" class="flex items-center gap-0.5 mt-1 justify-center"></div>
                    <div class="text-xs text-gray-500 mt-1">dari <span id="totalUlasanRingkasan">0</span> ulasan</div>
                </div>
                <div class="flex-1 space-y-1" id="distribusiBintang"></div>
            </div>

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

            
            <div class="border-t border-gray-100 p-4 bg-gray-50 flex-shrink-0 flex items-center justify-between">
                <div class="text-sm text-gray-500">
                    <span id="totalUlasan">0</span> ulasan &bull; Rata-rata
                    <span id="rataUlasan">0</span>
                    <i class="fas fa-star text-pink-400 text-xs ml-0.5"></i>
                </div>
                <button onclick="tutupModalUlasan()" class="text-xs text-gray-400 hover:text-pink-500 transition px-3 py-1.5 rounded-lg hover:bg-pink-50">
                    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.getElementById('modalUlasanProduk').textContent = namaProduk;
            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);

            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 = 'flex';

            document.getElementById('nilaiRataRating').textContent     = rata.toFixed(1);
            document.getElementById('totalUlasanRingkasan').textContent = total;

            let bintangHtmlRingkasan = '';
            for (let i = 1; i <= 5; i++) {
                if (i <= Math.floor(rata))   bintangHtmlRingkasan += '<i class="fas fa-star text-pink-400 text-sm"></i>';
                else if (i - rata < 1)       bintangHtmlRingkasan += '<i class="fas fa-star-half-alt text-pink-400 text-sm"></i>';
                else                         bintangHtmlRingkasan += '<i class="far fa-star text-gray-300 text-sm"></i>';
            }
            document.getElementById('bintangRingkasan').innerHTML = bintangHtmlRingkasan;

            // 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-2">
                        <span class="text-xs text-gray-500 w-3">${b}</span>
                        <i class="fas fa-star text-pink-400 text-[10px]"></i>
                        <div class="flex-1 bg-gray-200 rounded-full h-1.5">
                            <div class="bg-pink-400 h-1.5 rounded-full transition-all duration-500" style="width:${persen}%"></div>
                        </div>
                        <span class="text-xs text-gray-400 w-6">${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-pink-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 onclick="toggleReview(${ulasan.id})"
                            id="btn-review-${ulasan.id}"
                            data-expanded="false"
                            class="mt-2 text-xs font-semibold text-pink-500 hover:text-pink-600 flex items-center gap-1 cursor-pointer">
                        <i class="fas fa-chevron-down text-[10px]"></i> Baca selengkapnya
                    </button>`
                    : '';

                const komentarHtml = ulasan.komentar
                    ? `<div class="bg-white rounded-lg p-4 border border-pink-100 relative">
                        <i class="fas fa-quote-left text-pink-200 text-lg absolute top-3 left-3"></i>
                        <p id="review-${ulasan.id}"
                            class="review-comment text-gray-700 text-sm leading-relaxed pl-6"
                            style="display:block; max-height:1.6em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; word-break:break-word;">
                            ${escHtml(ulasan.komentar)}
                        </p>
                        ${toggleBtn}
                    </div>`
                    : `<p class="text-gray-400 text-sm italic text-center py-2">— Tidak ada komentar —</p>`;

                html += `
                    <div class="bg-pink-50 rounded-xl p-5 border border-pink-100 hover:border-pink-200 transition">
                        <div class="flex items-start justify-between mb-3">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 bg-gradient-to-br from-pink-100 to-pink-200 rounded-full flex items-center justify-center flex-shrink-0">
                                    <span class="text-pink-500 font-bold text-sm">${avatar}</span>
                                </div>
                                <div>
                                    <p class="font-semibold text-gray-800">${namaUser}</p>
                                    <div class="flex items-center gap-1.5 mt-0.5">
                                        <div class="flex items-center gap-0.5">${bintangHtml}</div>
                                        <span class="text-xs font-medium ${warnaVal}">${labelVal}</span>
                                    </div>
                                </div>
                            </div>
                            <span class="text-xs text-gray-400 flex-shrink-0 ml-2 bg-white px-2 py-0.5 rounded-full border border-pink-100">${tanggal}</span>
                        </div>
                        ${komentarHtml}
                    </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:1.6em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; word-break:break-word;';
                btn.dataset.expanded = 'false';
                btn.innerHTML = `<i class="fas fa-chevron-down text-[10px]"></i> Baca selengkapnya`;
            } 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 = `<i class="fas fa-chevron-up text-[10px]"></i> Sembunyikan`;
            }
        }
    </script>
</body>
</html><?php /**PATH C:\laragon\www\ecommerce\resources\views/welcome.blade.php ENDPATH**/ ?>