<?php $__env->startSection('title', 'Cultural Arts Mall'); ?>

<?php $__env->startPush('styles'); ?>
    <style>
        .hero {
            display: grid;
            grid-template-columns: 140px minmax(0, 1fr) 140px;
            gap: 16px;
            margin-top: 26px;
            align-items: stretch;
        }

        .hero-side,
        .hero-main {
            border-radius: var(--radius);
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(123, 91, 47, 0.18);
            box-shadow: var(--shadow);
        }

        .hero-side {
            min-height: 360px;
            background:
                linear-gradient(180deg, rgba(53, 37, 17, 0.55), rgba(53, 37, 17, 0.18)),
                radial-gradient(circle at top, rgba(255, 255, 255, 0.28), transparent 40%),
                linear-gradient(135deg, #a18461, #4d3822);
        }

        .hero-main {
            min-height: 360px;
            padding: 42px;
            display: grid;
            align-items: end;
            background:
                radial-gradient(circle at top right, rgba(255, 224, 166, 0.42), transparent 28%),
                linear-gradient(0deg, rgba(25, 14, 5, 0.58), rgba(25, 14, 5, 0.18)),
                linear-gradient(135deg, <?php echo e($heroProduct?->accent ?? '#7E5B34'); ?>, #1e1610);
            color: #fff8ef;
        }

        .hero-main::after {
            content: "";
            position: absolute;
            inset: 26px;
            border: 1px solid rgba(255, 244, 223, 0.22);
            border-radius: 22px;
        }

        .hero-copy {
            position: relative;
            z-index: 1;
            max-width: 420px;
        }

        .eyebrow {
            display: inline-flex;
            margin-bottom: 14px;
            padding: 8px 14px;
            border-radius: 999px;
            background: rgba(255, 248, 235, 0.18);
            letter-spacing: 0.12em;
            text-transform: uppercase;
            font-size: 0.76rem;
        }

        .hero-copy h2 {
            margin: 0 0 10px;
            font-size: clamp(2rem, 4vw, 3.25rem);
            line-height: 1.05;
        }

        .hero-copy p {
            margin: 0 0 24px;
            color: rgba(255, 248, 239, 0.82);
            line-height: 1.7;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 20px;
        }

        .product-card,
        .article-card,
        .summary-card,
        .cart-item {
            background: var(--card);
            border: 1px solid rgba(123, 91, 47, 0.16);
            border-radius: 24px;
            box-shadow: var(--shadow);
        }

        .product-card {
            padding: 18px;
        }

        .product-visual {
            height: 180px;
            border-radius: 20px;
            display: grid;
            place-items: center;
            color: #fffaf0;
            margin-bottom: 14px;
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 24%),
                linear-gradient(135deg, var(--accent), #2d2116);
        }

        .product-visual::before {
            content: "";
            width: 88px;
            height: 88px;
            border-radius: 999px;
            border: 12px solid rgba(255, 248, 239, 0.85);
            box-shadow: inset 0 0 0 1px rgba(65, 39, 18, 0.08);
        }

        .product-visual.ruby::before {
            width: 88px;
            height: 88px;
            border-width: 18px;
            transform: rotate(45deg);
            border-radius: 24px;
        }

        .product-visual.bead::before {
            width: 140px;
            height: 54px;
            border-radius: 999px;
        }

        .product-card h3,
        .article-card h3 {
            margin: 0;
            font-size: 1.15rem;
        }

        .subtitle,
        .article-card p,
        .meta-text {
            color: var(--muted);
            line-height: 1.65;
        }

        .price-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-top: 18px;
        }

        .price {
            font-size: 1.55rem;
            color: var(--gold-deep);
        }

        .product-card form,
        .cart-item form {
            margin: 0;
        }

        .article-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 20px;
        }

        .article-card {
            padding: 18px;
        }

        .article-thumb {
            height: 140px;
            border-radius: 18px;
            margin-bottom: 16px;
            background:
                radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.28), transparent 18%),
                linear-gradient(135deg, var(--accent), #f2e3cc);
        }

        .meta-row {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            margin-top: 14px;
            color: var(--gold-deep);
            font-size: 0.9rem;
        }

        @media (max-width: 980px) {
            .hero {
                grid-template-columns: 1fr;
            }

            .hero-side {
                display: none;
            }

            .feature-grid,
            .article-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 640px) {
            .hero-main {
                padding: 28px;
                min-height: 300px;
            }

            .feature-grid,
            .article-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
    <section class="hero">
        <div class="hero-side" aria-hidden="true"></div>

        <div class="hero-main">
            <div class="hero-copy">
                <div class="eyebrow"><?php echo e($heroProduct?->hero_badge ?? 'Collector highlight'); ?></div>
                <h2><?php echo e($heroProduct?->name ?? 'Curated heirlooms for modern collectors'); ?></h2>
                <p><?php echo e($heroProduct?->description ?? 'A softly luxurious storefront inspired by cultural treasures, museum displays, and ceremonial craftsmanship.'); ?></p>
                <?php if($heroProduct): ?>
                    <form action="<?php echo e(route('cart.store')); ?>" method="POST">
                        <?php echo csrf_field(); ?>
                        <input type="hidden" name="product_id" value="<?php echo e($heroProduct->id); ?>">
                        <button class="button" type="submit">Add hero piece to cart</button>
                    </form>
                <?php endif; ?>
            </div>
        </div>

        <div class="hero-side" aria-hidden="true"></div>
    </section>

    <h2 class="section-title" id="featured">Featured Treasures</h2>

    <section class="feature-grid">
        <?php $__currentLoopData = $featuredProducts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <?php
                $visualClass = match ($product->slug) {
                    'heaven-eye-dzi-bead' => 'bead',
                    'imperial-ruby-ring' => 'ruby',
                    default => '',
                };
            ?>

            <article class="product-card">
                <div class="product-visual <?php echo e($visualClass); ?>" style="--accent: <?php echo e($product->accent); ?>"></div>
                <p class="meta-text"><?php echo e($product->category); ?></p>
                <h3><?php echo e($product->name); ?></h3>
                <p class="subtitle"><?php echo e($product->subtitle); ?></p>

                <div class="price-row">
                    <strong class="price">$<?php echo e(number_format((float) $product->price, 0)); ?></strong>
                    <form action="<?php echo e(route('cart.store')); ?>" method="POST">
                        <?php echo csrf_field(); ?>
                        <input type="hidden" name="product_id" value="<?php echo e($product->id); ?>">
                        <button class="button" type="submit">Add to cart</button>
                    </form>
                </div>
            </article>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </section>

    <h2 class="section-title" id="articles">Cultural Journal</h2>

    <section class="article-grid">
        <?php $__currentLoopData = $articles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $article): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <article class="article-card">
                <div class="article-thumb" style="--accent: <?php echo e($article->accent); ?>"></div>
                <h3><?php echo e($article->title); ?></h3>
                <p><?php echo e($article->excerpt); ?></p>
                <div class="meta-row">
                    <span><?php echo e($article->category); ?></span>
                    <span><?php echo e($article->reading_time); ?></span>
                </div>
            </article>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </section>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.store', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /Users/gladwintan/Documents/New project/storefront/resources/views/storefront/home.blade.php ENDPATH**/ ?>