<?php
require_once 'config.php';

$pageTitle = 'Categories - Performance Boat Parts';

require_once 'header.php';

$stmt = $pdo->query("SELECT c.*, COUNT(p.id) as product_count FROM categories c LEFT JOIN products p ON c.id = p.category_id GROUP BY c.id");
$categories = $stmt->fetchAll();
?>

    <div class="breadcrumbs">
        <div class="container">
            <ul>
                <li><a href="index.php">Home</a></li>
                <li>Categories</li>
            </ul>
        </div>
    </div>

    <section class="categories" style="padding: 60px 0;">
        <div class="container">
            <div class="section-title">
                <h2>Shop by Category</h2>
                <p>Browse our selection of boat parts by category</p>
            </div>
            
            <div class="category-grid" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
<?php 
$icons = [
    'propellers' => 'fa-cogs',
    'engines' => 'fa-ship',
    'hull-parts' => 'fa-wrench',
    'accessories' => 'fa-tools',
    'electronics' => 'fa-satellite-dish'
];
foreach ($categories as $cat): ?>
                <a href="products.php?category=<?= $cat['slug'] ?>" class="category-card" style="text-align: left; display: flex; gap: 20px; align-items: center;">
                    <div style="width: 100px; height: 100px; background: var(--light); border-radius: 10px; display: flex; align-items: center; justify-content: center;">
                        <i class="fas <?= $icons[$cat['slug']] ?? 'fa-box' ?>" style="font-size: 40px; color: var(--primary);"></i>
                    </div>
                    <div>
                    <div>
                        <h3><?= htmlspecialchars($cat['name']) ?></h3>
                        <p style="color: var(--gray); margin-top: 5px;"><?= htmlspecialchars($cat['description']) ?></p>
                        <p style="color: var(--primary); margin-top: 10px; font-weight: 600;"><?= $cat['product_count'] ?> Products</p>
                    </div>
                </a>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

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