{% extends 'base.html.twig' %}

{% block title %}Les cartes mères pour votre setup gaming !{% endblock %}

{% block body %}
<style>
    .card-img-top {
        height: 400px;
        object-fit: contain;
        transition: transform 0.3s ease;
    }
    .card:hover .card-img-top {
        transform: scale(1.05);
    }
    .card {
        transition: box-shadow 0.3s ease;
        border: none;
        background-color: #f8f9fa;
    }
    .card:hover {
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    .product-btn {
        background-color: #2c3e50;
        color: white;
        padding: 10px 25px;
        border-radius: 25px;
        transition: all 0.3s ease;
    }
    .product-btn:hover {
        background-color: #34495e;
        transform: translateY(-2px);
        color: white;
    }
    .card-title {
        font-weight: 600;
        color: #2c3e50;
    }
    .card-text {
        color: #666;
        font-size: 0.95rem;
        line-height: 1.6;
    }
</style>

    {% set mere =
        [
            {
                'name': 'MSI B760 GAMING PLUS',
                'description': "MSI B760 B760 GAMING PLUS WIFI Carte Mère, ATX - Pour Processeurs Intel Core 14e, 13e & 12e Génération, LGA 1700 - DDR5 Memory Boost 6800+MHz/OC, Slots PCIe 4.0 x16, Slots M.2 Gen4, Wi-Fi 6E",
                'productLink': 'https://amzn.to/41h7Nzm',
                'imageUrl': 'https://m.media-amazon.com/images/I/811+Jj0m5eL._AC_SX425_.jpg',
                'price': '167 €'
            },
            {
                'name': 'GIGABYTE B550M',
                'description': "GIGABYTE B550M AORUS Elite AX (AM4/ AMD/ B550/ Micro ATX/Single M.2/SATA 6Gb/s/USB 3.2 Gen 1/ Realtek GbE LAN/PCIe 4.0/ Carte mère)",
                'productLink': 'https://amzn.to/4b3y2MP',
                'imageUrl': 'https://m.media-amazon.com/images/I/71tCMY0ve4L._AC_SX425_.jpg',
                'price': '125 €'
            },
            {
                'name': 'MSI Pro B650-A WiFi',
                'description': "MSI Pro B650-A WiFi Carte mère, ATX - pour processeurs AMD Ryzen 9000, 8000 & 7000, AM5 - DDR5 Memory Boost 7600+MHz/OC, 2 x PCIe 4.0 x16, 3 x M.2 Gen4, Wi-FI 6E",
                'productLink': 'https://amzn.to/42ULhNW',
                'imageUrl': "https://m.media-amazon.com/images/I/81YKwBpjnLL._AC_SX425_.jpg",
                'price': '195 €'
            },
            {
                'name': 'Gigabyte B760',
                'description': "Gigabyte B760 Gaming X DDR4 Intel LGA 1700",
                'productLink': 'https://amzn.to/3EFpKic',
                'imageUrl': 'https://m.media-amazon.com/images/I/61m12l7E+GL._AC_SX425_.jpg',
                'price': '135 €'
            },
    
        ] 
    %}

<section>
    <div class="my-5 pt-5">
        <div class="container">
            <h1 class="mb-4 text-center fw-bold">Notre sélection des cartes mères gaming</h1>
            <h2 class="text-center mb-4 text-secondary fs-4">Guide complet pour choisir la meilleure carte mère en 2024</h2>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <p class="text-center mb-5 lead">
                        Découvrez notre sélection exclusive des meilleures cartes mères du marché. Une base solide pour votre configuration gaming, compatible avec les derniers processeurs et offrant des performances optimales.
                    </p>
                </div>
            </div>

            <div class="row g-4 justify-content-center">
                {% for cartes in mere %}
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="card h-100">
                            <div class="overflow-hidden">
                                <img src="{{ cartes.imageUrl }}" class="card-img-top" alt="{{ cartes.name }}">
                            </div>
                            <div class="card-body">
                                <h5 class="card-title mb-3">{{ cartes.name }}</h5>
                                <p class="card-text">{{ cartes.description }}</p>
                                <p class="card-text fw-bold text-primary">Prix: {{ cartes.price }}</p>
                            </div>
                            <div class="card-footer bg-transparent border-0 text-center pb-4">
                                <a href="{{ cartes.productLink }}" target="_blank" class="btn product-btn">
                                    Voir le produit <i class="fas fa-arrow-right ms-2"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>
{% endblock %}