@extends('layouts.app')
@section('title', 'Our Brands - AutoPart')

@section('content')
<div class="bg-gray-50 min-h-screen pb-16">
    <div class="bg-brand-dark text-white py-12 mb-8">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl font-extrabold uppercase tracking-widest mb-4">Our Brands</h1>
            <div class="flex items-center justify-center space-x-2 text-sm text-gray-400">
                <a href="{{ url('/') }}" class="hover:text-brand-red transition-colors">Home</a>
                <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
                <span class="text-white">Brands</span>
            </div>
        </div>
    </div>

    <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto text-center mb-12">
            <h2 class="text-3xl font-extrabold text-brand-dark mb-4">Trusted <span class="text-brand-red">Partners</span></h2>
            <p class="text-gray-600">We work with the world's leading auto parts manufacturers to bring you quality products.</p>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
            @foreach(['Bosch', 'Brembo', 'K&N', 'Mobil 1', 'NGK', 'Philips', 'Denso', 'Continental', 'Hella', 'Monroe', 'ACDelco', 'Castrol'] as $brand)
            <a href="{{ url('/shop?brand=' . urlencode($brand)) }}" class="bg-white rounded-lg shadow-sm border border-gray-100 p-8 text-center hover:shadow-xl hover:border-brand-red/30 transition-all group">
                <div class="w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-4 text-brand-dark group-hover:bg-brand-red group-hover:text-white transition-colors">
                    <span class="font-extrabold text-lg">{{ substr($brand, 0, 2) }}</span>
                </div>
                <h3 class="font-extrabold text-brand-dark group-hover:text-brand-red transition-colors">{{ $brand }}</h3>
            </a>
            @endforeach
        </div>
    </div>
</div>
@endsection