<?php include 'header.php'; ?>

<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">

    <div class="lg:col-span-1">
        <div class="sticky top-8">
            <div class="space-y-6">
                <?php //include 'template-parts/product/widgets/widget-search.php'; 
                ?>
                <?php include 'template-parts/product/widgets/widget-price.php'; ?>
                <?php include 'template-parts/product/widgets/widget-category.php'; ?>
                <?php include 'template-parts/product/widgets/widget-variable.php'; ?>
            </div>
        </div>
    </div>

    <!-- Main content area -->
    <div class="lg:col-span-3">

        <div class="te-products">
            <div class="grid gap-4 grid-cols-2 md:grid-cols-3 md:gap-4 lg:grid-cols-3 lg:gap-6">

                <?php
                $products = [
                    [
                        'image' => 'assets/images/product-1.jpg',
                        'hover' => 'assets/images/product-1-flip.jpg',
                        'title' => 'Embroidered crew neck T-shirt',
                        'price' => '720.00',
                        'old_price' => '850.00',
                        'colors' => ['blue', 'black', 'gray'],
                        'sizes'  => ['SX', 'S', 'M', 'L', 'XL', 'XLL'],
                    ],
                    [
                        'image' => 'assets/images/product-2.jpg',
                        'hover' => 'assets/images/product-2-flip.jpg',
                        'title' => 'Cute short-sleeved T-shirt with brand logo',
                        'price' => '150.00',
                        'old_price' => null,
                        'colors' => ['white', 'green', 'orange'],
                        'sizes'  => ['M', 'L'],
                    ],
                    [
                        'image' => '',
                        'title' => 'Long-sleeved shirt with brand logo embroidery',
                        'price' => '450.00',
                        'old_price' => null,
                        'colors' => ['red', 'blue', 'white'],
                        'sizes'  => ['40', '41', '42', '43'],
                    ],
                    [
                        'image' => 'assets/images/product-4.jpg',
                        'title' => 'Straight-leg jeans',
                        'price' => '1,200.00',
                        'old_price' => '1,500.00',
                        'colors' => ['brown', 'orange'],
                        'sizes'  => ['M', 'L'],
                    ],
                    [
                        'image' => 'assets/images/product-6.jpg',
                        'hover' => 'assets/images/product-6-2.jpg',
                        'title' => 'Mercer 7 Inch Chino Shorts',
                        'price' => '200.00',
                        'old_price' => '300.00',
                        'colors' => ['brown', 'orange'],
                        'sizes'  => ['M', 'L'],
                    ],
                ];

                foreach ($products as $product) {
                    include 'template-parts/product/product-content.php';
                }
                ?>


            </div>
        </div>
    </div>

</div>

<?php include 'footer.php'; ?>