<?php
$page_title = 'Products';
require_once __DIR__ . '/header.php';
?>

<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
    <h2 style="font-family:'Outfit', sans-serif; font-size:1.8rem; color:#0f172a; margin:0;">Our Products</h2>
    <div style="display:flex; gap:12px;">
        <button style="padding:10px 16px; background:#fff; border:1px solid #cbd5e1; border-radius:6px; font-weight:600; color:#475569; cursor:pointer;"><i class="fas fa-heart" style="color:#ef4444; margin-right:6px;"></i> Wishlist (2)</button>
        <button style="padding:10px 16px; background:#fff; border:1px solid #cbd5e1; border-radius:6px; font-weight:600; color:#475569; cursor:pointer;"><i class="fas fa-exchange-alt" style="margin-right:6px;"></i> Compare (1)</button>
    </div>
</div>

<div style="display:grid; grid-template-columns: 260px 1fr; gap:24px;">
    <!-- Filters Sidebar -->
    <div class="card" style="align-self:start; padding:20px;">
        <h3 style="margin:0 0 16px; font-size:1.1rem; border-bottom:1px solid #e2e8f0; padding-bottom:12px;">Filters</h3>
        
        <div style="margin-bottom:20px;">
            <strong style="display:block; margin-bottom:10px; font-size:0.9rem;">Categories</strong>
            <label style="display:flex; align-items:center; gap:8px; margin-bottom:8px; color:#475569; font-size:0.9rem;"><input type="checkbox" checked> Kitchen Sinks</label>
            <label style="display:flex; align-items:center; gap:8px; margin-bottom:8px; color:#475569; font-size:0.9rem;"><input type="checkbox"> Faucets</label>
            <label style="display:flex; align-items:center; gap:8px; margin-bottom:8px; color:#475569; font-size:0.9rem;"><input type="checkbox"> Drain Boards</label>
            <label style="display:flex; align-items:center; gap:8px; margin-bottom:8px; color:#475569; font-size:0.9rem;"><input type="checkbox"> Accessories</label>
        </div>

        <div style="margin-bottom:20px;">
            <strong style="display:block; margin-bottom:10px; font-size:0.9rem;">Material Grade</strong>
            <label style="display:flex; align-items:center; gap:8px; margin-bottom:8px; color:#475569; font-size:0.9rem;"><input type="checkbox"> 304 Grade</label>
            <label style="display:flex; align-items:center; gap:8px; margin-bottom:8px; color:#475569; font-size:0.9rem;"><input type="checkbox"> 202 Grade</label>
        </div>

        <div style="margin-bottom:20px;">
            <strong style="display:block; margin-bottom:10px; font-size:0.9rem;">Finish</strong>
            <label style="display:flex; align-items:center; gap:8px; margin-bottom:8px; color:#475569; font-size:0.9rem;"><input type="checkbox"> Matte</label>
            <label style="display:flex; align-items:center; gap:8px; margin-bottom:8px; color:#475569; font-size:0.9rem;"><input type="checkbox"> Glossy</label>
            <label style="display:flex; align-items:center; gap:8px; margin-bottom:8px; color:#475569; font-size:0.9rem;"><input type="checkbox"> Brushed</label>
        </div>

        <button style="width:100%; padding:10px; background:#f1f5f9; border:none; border-radius:6px; color:#475569; font-weight:600; cursor:pointer;">Reset Filters</button>
    </div>

    <!-- Products Grid -->
    <div>
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;">
            <div style="font-size:0.9rem; color:#64748b;">Showing 1-9 of 45 results</div>
            <select style="padding:8px 12px; border:1px solid #cbd5e1; border-radius:6px; outline:none;">
                <option>Sort by: Featured</option>
                <option>Sort by: New Arrivals</option>
                <option>Sort by: Best Seller</option>
                <option>Price: Low to High</option>
                <option>Price: High to Low</option>
            </select>
        </div>

        <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;">
            <?php 
            $prods = [
                ['id'=>1, 'name'=>'Premium Sink 24x18', 'desc'=>'Stainless Steel 304', 'price'=>4850, 'badge'=>'Best Seller', 'badge_color'=>'#16a34a'],
                ['id'=>2, 'name'=>'Handmade Sink 32x18', 'desc'=>'Stainless Steel 304', 'price'=>6250, 'badge'=>'New', 'badge_color'=>'#f59e0b'],
                ['id'=>3, 'name'=>'Double Bowl Sink 32x20', 'desc'=>'Stainless Steel 304', 'price'=>7150, 'badge'=>'', 'badge_color'=>''],
                ['id'=>4, 'name'=>'SS Faucet Premium', 'desc'=>'304 Grade', 'price'=>1950, 'badge'=>'Hot', 'badge_color'=>'#ef4444'],
                ['id'=>5, 'name'=>'Soap Dispenser', 'desc'=>'Matte Black Finish', 'price'=>650, 'badge'=>'', 'badge_color'=>''],
                ['id'=>6, 'name'=>'Square Drain Board', 'desc'=>'Stainless Steel 202', 'price'=>1250, 'badge'=>'Offer', 'badge_color'=>'#9333ea'],
            ];
            foreach($prods as $p): ?>
            <div class="card" style="margin:0; padding:16px; position:relative;">
              <?php if($p['badge']): ?>
              <span style="position:absolute; top:16px; left:16px; background:<?= $p['badge_color'] ?>; color:#fff; padding:3px 10px; font-size:0.7rem; border-radius:12px; font-weight:700; z-index:2;"><?= $p['badge'] ?></span>
              <?php endif; ?>
              
              <div style="position:absolute; top:16px; right:16px; display:flex; flex-direction:column; gap:8px; z-index:2;">
                  <button style="width:30px; height:30px; border-radius:50%; background:#fff; border:1px solid #e2e8f0; color:#64748b; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 4px rgba(0,0,0,0.05);"><i class="far fa-heart"></i></button>
                  <button style="width:30px; height:30px; border-radius:50%; background:#fff; border:1px solid #e2e8f0; color:#64748b; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 4px rgba(0,0,0,0.05);"><i class="fas fa-exchange-alt"></i></button>
              </div>

              <a href="product.php?id=<?= $p['id'] ?>" style="display:block; text-decoration:none;">
                  <div style="height:180px; background:#f8fafc; border-radius:8px; margin-bottom:16px; display:flex; align-items:center; justify-content:center; color:#cbd5e1; font-size:4rem; transition:transform 0.3s;">
                     <i class="fas fa-image"></i>
                  </div>
                  <h4 style="margin:0 0 6px; font-size:1.1rem; color:#0f172a; font-family:'Outfit', sans-serif;"><?= $p['name'] ?></h4>
                  <p style="margin:0 0 12px; font-size:0.85rem; color:#64748b;"><?= $p['desc'] ?></p>
                  <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
                      <div style="font-weight:700; color:#0f172a; font-size:1.2rem;">₹<?= number_format($p['price'], 2) ?></div>
                  </div>
              </a>
              <button class="btn" style="width:100%; padding:10px; background:#2563eb; color:#fff; border:none; border-radius:6px; cursor:pointer; font-weight:600;"><i class="fas fa-shopping-cart"></i> Add to Cart</button>
            </div>
            <?php endforeach; ?>
        </div>

        <div style="display:flex; justify-content:center; gap:8px; margin-top:30px;">
            <button style="width:36px; height:36px; border-radius:6px; border:1px solid #cbd5e1; background:#fff; cursor:pointer;"><i class="fas fa-chevron-left"></i></button>
            <button style="width:36px; height:36px; border-radius:6px; border:none; background:#2563eb; color:#fff; font-weight:600; cursor:pointer;">1</button>
            <button style="width:36px; height:36px; border-radius:6px; border:1px solid #cbd5e1; background:#fff; cursor:pointer; font-weight:600;">2</button>
            <button style="width:36px; height:36px; border-radius:6px; border:1px solid #cbd5e1; background:#fff; cursor:pointer; font-weight:600;">3</button>
            <button style="width:36px; height:36px; border-radius:6px; border:1px solid #cbd5e1; background:#fff; cursor:pointer;"><i class="fas fa-chevron-right"></i></button>
        </div>
    </div>
</div>

<?php 
echo '</div></main></body></html>'; 
?>
