<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500&family=Poppins:wght@300;400;500;600&display=swap');

    .home-wrap { font-family: 'Inter', sans-serif; }

    html { scroll-behavior: smooth; }
    ::selection { background: #0f0f0f; color: #fff; }

    /* ── HERO ── */
    .hero-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: 620px;
        background: #fff;
    }

    @media (max-width: 1024px) {
        .hero-section { grid-template-columns: 1fr; }
        .hero-image { order: -1; min-height: 380px; }
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 80px 64px;
    }

    @media (max-width: 640px) {
        .hero-content { padding: 48px 24px; }
    }

    .hero-eyebrow {
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #bbb;
        margin-bottom: 20px;
    }

    .hero-title {
        font-family: 'Poppins', sans-serif;
        font-size: clamp(3rem, 6vw, 5.5rem);
        font-weight: 500;
        line-height: 1.1;
        color: #0f0f0f;
        margin-bottom: 24px;
        letter-spacing: -0.02em;
    }

    .hero-desc {
        font-size: 0.95rem;
        font-weight: 300;
        line-height: 1.7;
        color: #666;
        max-width: 360px;
        margin-bottom: 40px;
    }

    .hero-cta {
        display: inline-block;
        background: #0f0f0f;
        color: #fff;
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        text-decoration: none;
        padding: 14px 36px;
        border-radius: 30px;
        transition: background 0.2s;
        align-self: flex-start;
    }

    .hero-cta:hover { background: #333; }

    .hero-image {
        position: relative;
        background: #f0f0f0;
        overflow: hidden;
    }

    .hero-image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 8s ease;
    }

    .hero-image:hover img { transform: scale(1.03); }

    /* ── PROMO BANNER ── */
    .promo-section {
        padding: 80px 0;
        background: #f7f7f7;
    }

    .promo-inner {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .promo-card {
        position: relative;
        overflow: hidden;
        border-radius: 20px;
        min-height: 360px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .promo-bg {
        position: absolute;
        inset: 0;
    }

    .promo-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .promo-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.65) 100%);
    }

    .promo-content {
        position: relative;
        z-index: 10;
        text-align: center;
        padding: 64px 32px;
    }

    .promo-eyebrow {
        font-size: 0.65rem;
        font-weight: 500;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #d4a017;
        margin-bottom: 16px;
    }

    .promo-title {
        font-family: 'Poppins', sans-serif;
        font-size: clamp(2rem, 4vw, 3.5rem);
        font-weight: 500;
        color: #fff;
        margin-bottom: 12px;
        letter-spacing: -0.01em;
    }

    .promo-desc {
        font-size: 0.85rem;
        font-weight: 300;
        color: rgba(255,255,255,0.6);
        margin-bottom: 8px;
    }

    .promo-code {
        display: inline-block;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: #d4a017;
        border: 1px solid rgba(212,160,23,0.4);
        padding: 6px 16px;
        border-radius: 30px;
        margin-bottom: 32px;
    }

    .promo-cta {
        display: inline-block;
        background: #fff;
        color: #0f0f0f;
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        text-decoration: none;
        padding: 13px 32px;
        border-radius: 30px;
        transition: background 0.2s, color 0.2s;
    }

    .promo-cta:hover { background: #f0f0f0; }

    /* ── PRODUCT SECTIONS ── */
    .products-section {
        padding: 88px 0;
    }

    .products-section.alt { background: #fafafa; }
    .products-section.white { background: #fff; }

    .products-inner {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .products-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 48px;
    }

    .products-header-center { text-align: center; display: block; margin-bottom: 48px; }

    .products-eyebrow {
        font-size: 0.65rem;
        font-weight: 500;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: #bbb;
        margin-bottom: 8px;
    }

    .products-title {
        font-family: 'Poppins', sans-serif;
        font-size: 2.2rem;
        font-weight: 500;
        color: #0f0f0f;
        letter-spacing: -0.01em;
    }

    .products-subtitle {
        font-size: 0.85rem;
        font-weight: 300;
        color: #aaa;
        margin-top: 8px;
    }

    .products-see-all {
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #aaa;
        text-decoration: none;
        padding-bottom: 2px;
        border-bottom: 1px solid transparent;
        transition: color 0.2s, border-color 0.2s;
        white-space: nowrap;
    }

    .products-see-all:hover { color: #0f0f0f; border-bottom-color: #0f0f0f; }

    .products-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 28px;
    }

    @media (max-width: 1024px) { .products-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 480px) { .products-grid { grid-template-columns: 1fr; } }

    /* ── PRODUCT CARD ── */
    .product-card { cursor: pointer; }

    .product-card-image {
        position: relative;
        background: #f0f0f0;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: 16px;
    }

    .product-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s ease;
    }

    .product-card:hover .product-card-image img { transform: scale(1.06); }

    .product-card-empty {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product-card-empty-text {
        font-size: 0.65rem;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #ccc;
    }

    .product-card-overlay {
        position: absolute;
        inset: 0;
        background: rgba(10,10,10,0.5);
        opacity: 0;
        transition: opacity 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
    }

    .product-card:hover .product-card-overlay { opacity: 1; }

    .product-card-overlay-text {
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #fff;
    }

    .product-card-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        background: #0f0f0f;
        color: #d4a017;
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        padding: 5px 12px;
        border-radius: 30px;
    }

    .product-card-info {
        margin-top: 16px;
        text-align: center;
    }

    .product-card-name {
        font-size: 0.9rem;
        font-weight: 500;
        color: #1a1a1a;
        transition: color 0.2s;
    }

    .product-card:hover .product-card-name { color: #555; }

    .product-card-price {
        font-family: 'Poppins', sans-serif;
        font-size: 1rem;
        font-weight: 500;
        color: #555;
        margin-top: 6px;
    }

    .product-card-buy {
        display: inline-block;
        margin-top: 10px;
        font-size: 0.65rem;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #aaa;
        text-decoration: none;
        padding-bottom: 2px;
        border-bottom: 1px solid #e0e0e0;
        transition: color 0.2s, border-color 0.2s;
    }

    .product-card-buy:hover { color: #0f0f0f; border-bottom-color: #0f0f0f; }

    .product-card-soldout {
        display: inline-block;
        margin-top: 10px;
        font-size: 0.65rem;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #ddd;
    }

    /* ── KEUNGGULAN ── */
    .features-section {
        padding: 72px 0;
        background: #fff;
        border-top: 1px solid #f0f0f0;
    }

    .features-inner {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 24px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 48px;
    }

    @media (max-width: 768px) {
        .features-inner { grid-template-columns: 1fr; gap: 36px; }
    }

    .feature-item { text-align: center; }

    .feature-number {
        font-family: 'Poppins', sans-serif;
        font-size: 2.8rem;
        font-weight: 600;
        color: #ebebeb;
        line-height: 1;
        margin-bottom: 16px;
        letter-spacing: -0.02em;
    }

    .feature-title {
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #1a1a1a;
        margin-bottom: 10px;
    }

    .feature-desc {
        font-size: 0.85rem;
        font-weight: 300;
        color: #999;
        line-height: 1.7;
    }

    /* ── NEWSLETTER ── */
    .newsletter-section {
        padding: 100px 0;
        background: #0a0a0a;
        position: relative;
        overflow: hidden;
    }

    .newsletter-accent-1 {
        position: absolute;
        top: -120px; left: -120px;
        width: 400px; height: 400px;
        background: radial-gradient(circle, rgba(212,160,23,0.08) 0%, transparent 70%);
        pointer-events: none;
    }

    .newsletter-accent-2 {
        position: absolute;
        bottom: -120px; right: -120px;
        width: 400px; height: 400px;
        background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
        pointer-events: none;
    }

    .newsletter-inner {
        max-width: 560px;
        margin: 0 auto;
        padding: 0 24px;
        text-align: center;
        position: relative;
        z-index: 1;
    }

    .newsletter-eyebrow {
        font-size: 0.65rem;
        font-weight: 500;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #d4a017;
        margin-bottom: 20px;
    }

    .newsletter-title {
        font-family: 'Poppins', sans-serif;
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 500;
        color: #fff;
        line-height: 1.2;
        margin-bottom: 16px;
    }

    .newsletter-desc {
        font-size: 0.85rem;
        font-weight: 300;
        color: #888;
        line-height: 1.8;
        margin-bottom: 36px;
    }

    .newsletter-form {
        display: flex;
        gap: 0;
        max-width: 400px;
        margin: 0 auto;
    }

    .newsletter-input {
        flex: 1;
        background: #141414;
        border: 1px solid #2a2a2a;
        border-right: none;
        color: #fff;
        font-family: 'Inter', sans-serif;
        font-size: 0.85rem;
        padding: 13px 18px;
        outline: none;
        border-radius: 30px 0 0 30px;
        transition: border-color 0.2s;
    }

    .newsletter-input::placeholder { color: #444; }
    .newsletter-input:focus { border-color: #d4a017; }

    .newsletter-btn {
        background: #d4a017;
        color: #0a0a0a;
        border: none;
        font-family: 'Inter', sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        padding: 13px 22px;
        cursor: pointer;
        border-radius: 0 30px 30px 0;
        transition: background 0.2s;
        white-space: nowrap;
    }

    .newsletter-btn:hover { background: #e6b520; }

    /* ── FADE IN ── */
    @keyframes fadeUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .home-wrap section { animation: fadeUp 0.6s ease-out; }
</style>

<div class="home-wrap">

    
    <section class="hero-section">
        <div class="hero-content">
            <span class="hero-eyebrow">Koleksi 2026</span>
            <h1 class="hero-title">Minimalisme<br>Esensial</h1>
            <p class="hero-desc">Temukan potongan abadi yang dibuat dengan bahan premium. Di mana kesederhanaan bertemu dengan kecanggihan.</p>
            <a href="<?php echo e(route('products.index')); ?>" class="hero-cta">Belanja Sekarang</a>
        </div>
        <div class="hero-image">
            <img src="https://images.unsplash.com/photo-1445205170230-053b83016050?w=1200" alt="Koleksi Elevate">
        </div>
    </section>

    
    <section class="promo-section">
        <div class="promo-inner">
            <div class="promo-card">
                <div class="promo-bg">
                    <img src="https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?w=1600" alt="Promo Banner">
                </div>
                <div class="promo-overlay"></div>
                <div class="promo-content">
                    <div class="promo-eyebrow">Penawaran Terbatas</div>
                    <h2 class="promo-title">Diskon hingga 30%</h2>
                    <p class="promo-desc">Untuk model terpilih.</p>
        </div>
    </section>

    
    <?php if(isset($newArrivals) && $newArrivals->count() > 0): ?>
    <section class="products-section white" id="featured">
        <div class="products-inner">
            <div class="products-header">
                <div>
                    <div class="products-eyebrow">Baru Hadir</div>
                    <div class="products-title">New Arrivals</div>
                </div>
                <a href="<?php echo e(route('products.index')); ?>" class="products-see-all">Lihat Semua</a>
            </div>

            <div class="products-grid">
                <?php $__currentLoopData = $newArrivals->take(4); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="product-card">
                    <div class="product-card-image">
                        <?php if($product->images->count() > 0): ?>
                            <img src="<?php echo e(asset('storage/' . $product->images->first()->image_path)); ?>" alt="<?php echo e($product->name); ?>">
                        <?php else: ?>
                            <div class="product-card-empty">
                                <span class="product-card-empty-text">No Image</span>
                            </div>
                        <?php endif; ?>
                        <div class="product-card-overlay">
                            <span class="product-card-overlay-text">Lihat Detail</span>
                        </div>
                    </div>
                    <div class="product-card-info">
                        <div class="product-card-name"><?php echo e($product->name); ?></div>
                        <?php
                            $harga = $product->variants->min('additional_price') ?? 0;
                            $totalStock = $product->variants->sum('stock');
                        ?>
                        <div class="product-card-price">Rp <?php echo e(number_format($harga, 0, ',', '.')); ?></div>
                        <?php if(!Auth::check() || Auth::user()->role !== 'admin'): ?>
                            <?php if($totalStock > 0): ?>
                                <a href="<?php echo e(route('products.show', $product->id)); ?>" class="product-card-buy">Beli Sekarang</a>
                            <?php else: ?>
                                <span class="product-card-soldout">Stok Habis</span>
                            <?php endif; ?>
                        <?php endif; ?>
                    </div>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    </section>
    <?php endif; ?>

    
    <?php if(isset($bestSellers) && $bestSellers->count() > 0): ?>
    <section class="products-section alt">
        <div class="products-inner">
            <div class="products-header-center">
                <div class="products-eyebrow">Favorit Pelanggan</div>
                <div class="products-title">Best Sellers</div>
                <div class="products-subtitle">Produk paling laris yang banyak dipilih pelanggan</div>
            </div>

            <div class="products-grid">
                <?php $__currentLoopData = $bestSellers->take(4); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="product-card">
                    <div class="product-card-image">
                        <?php if($product->images->count() > 0): ?>
                            <img src="<?php echo e(asset('storage/' . $product->images->first()->image_path)); ?>" alt="<?php echo e($product->name); ?>">
                        <?php else: ?>
                            <div class="product-card-empty">
                                <span class="product-card-empty-text">No Image</span>
                            </div>
                        <?php endif; ?>
                        <span class="product-card-badge">Terlaris</span>
                        <div class="product-card-overlay">
                            <span class="product-card-overlay-text">Lihat Detail</span>
                        </div>
                    </div>
                    <div class="product-card-info">
                        <div class="product-card-name"><?php echo e($product->name); ?></div>
                        <?php
                            $harga = $product->variants->min('additional_price') ?? 0;
                            $totalStock = $product->variants->sum('stock');
                        ?>
                        <div class="product-card-price">Rp <?php echo e(number_format($harga, 0, ',', '.')); ?></div>
                        <?php if(!Auth::check() || Auth::user()->role !== 'admin'): ?>
                            <?php if($totalStock > 0): ?>
                                <a href="<?php echo e(route('products.show', $product->id)); ?>" class="product-card-buy">Beli Sekarang</a>
                            <?php else: ?>
                                <span class="product-card-soldout">Stok Habis</span>
                            <?php endif; ?>
                        <?php endif; ?>
                    </div>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    </section>
    <?php endif; ?>

    
    <section class="features-section">
        <div class="features-inner">
            <div class="feature-item">
                <div class="feature-number">01</div>
                <div class="feature-title">Gratis Pengiriman</div>
                <div class="feature-desc">Minimal belanja Rp 500.000 untuk menikmati pengiriman gratis ke seluruh Indonesia.</div>
            </div>
            <div class="feature-item">
                <div class="feature-number">02</div>
                <div class="feature-title">Garansi 100%</div>
                <div class="feature-desc">Setiap produk original dan telah melalui quality control ketat sebelum sampai ke tangan Anda.</div>
            </div>
            <div class="feature-item">
                <div class="feature-number">03</div>
                <div class="feature-title">Pembayaran Aman</div>
                <div class="feature-desc">Setiap transaksi dienkripsi dan dilindungi oleh sistem keamanan berlapis yang terpercaya.</div>
            </div>
        </div>
    </section>

    
    <section class="newsletter-section">
        <div class="newsletter-accent-1"></div>
        <div class="newsletter-accent-2"></div>
        <div class="newsletter-inner">
            <div class="newsletter-eyebrow">Newsletter</div>
            <h2 class="newsletter-title">Bergabung dengan Komunitas Kami</h2>
            <p class="newsletter-desc">Jadilah yang pertama tahu tentang koleksi baru, penawaran eksklusif, dan acara spesial.</p>
            <form class="newsletter-form">
                <input type="email" placeholder="Alamat email Anda" class="newsletter-input">
                <button type="submit" class="newsletter-btn">Daftar</button>
            </form>
        </div>
    </section>

</div>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?><?php /**PATH C:\laragon\www\toko_pakaian\resources\views/home/index.blade.php ENDPATH**/ ?>