<?php include __DIR__ . '/../layout/header.php'; ?>

<div class="container" style="padding-top:28px;padding-bottom:48px;">

    <nav class="breadcrumb">
        <a href="<?php echo $baseUrl; ?>/"><i class="fa fa-home"></i></a>
        <span>/</span>
        <span style="color:var(--text-1);">Markalar</span>
    </nav>

    <div style="border-bottom:2px solid var(--border-color);padding-bottom:14px;margin-bottom:30px;">
        <h1 style="font-size:28px;font-weight:800;color:var(--text-1);margin:0;">Favori Markanızı Bulun</h1>
        <p style="color:var(--text-3);font-size:14px;margin-top:6px;">Size en uygun markayı seçin, tüm ürünlerini görüntüleyin.</p>
    </div>

    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;">
        <?php foreach ($brands as $b): ?>
        <a href="<?php echo $baseUrl; ?>/<?php echo htmlspecialchars($b['slug']); ?>" class="brand-card">
            <div class="brand-card-logo">
                <img src="<?php echo $baseUrl . '/' . (isset($b['image']) && $b['image'] ? ltrim($b['image'], '/') : 'uploads/brands/' . $b['slug'] . '.webp'); ?>" 
                     alt="<?php echo htmlspecialchars($b['name']); ?>">
            </div>
            <div class="brand-card-name"><?php echo htmlspecialchars($b['name']); ?></div>
        </a>
        <?php endforeach; ?>
    </div>
</div>

<style>
.brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 28px 16px 22px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.brand-card:hover {
    border-color: #f97316;
    box-shadow: 0 8px 30px rgba(249,115,22,0.12);
    transform: translateY(-4px);
}
.brand-card-logo {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f9fafb;
    padding: 12px;
    transition: background 0.3s;
}
.brand-card:hover .brand-card-logo {
    background: #fff7ed;
}
.brand-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.brand-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    letter-spacing: 0.02em;
}
</style>

<?php include __DIR__ . '/../layout/footer.php'; ?>