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

{% block title %}Les processeurs 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>
{# Définition des SSD SATA #}
{% set proc = 
[
    {
        'name': 'Intel Core i9',
        'description': "Intel® Core™ i9-14900KF Desktop Processor 24 Cores (8 P-Cores + 16 E-Cores) up to 6.0 GHz",
        'productLink': 'https://amzn.to/42NItSP',
        'imageUrl': 'https://m.media-amazon.com/images/I/41ku5qlG8wL._AC_SX425_.jpg',
        'price': '485 €'
    },
    {
        'name': 'Intel Core i7',
        'description': "Intel® Core™ i7-14700F, processeur pour PC de bureau, 20 cœurs (8 P-cores + 12 E-cores) jusqu'à 5,4 GHz",
        'productLink': 'https://amzn.to/3Qimk7H',
        'imageUrl': 'https://m.media-amazon.com/images/I/51PvtXTGT0L._AC_SX425_.jpg',
        'price': '358 €'
    },
    {
        'name': 'Intel Core i5',
        'description': "Intel® Core™ i5-14500, processeur pour PC de bureau, 14 cœurs (6 P-cores + 8 E-cores) jusqu'à 5 GHz",
        'productLink': 'https://amzn.to/42U9NyK',
        'imageUrl': 'https://m.media-amazon.com/images/I/513V467KLdL._AC_SX425_.jpg',
        'price': '279 €'
    },
    {
        'name': 'AMD Ryzen 9',
        'description': "AMD Ryzen 9 7900X Processeur, 12 Cœurs/24 Threads Débridés, Architecture Zen 4, 76MB L3 Cache, 170W TDP, Jusqu'à 5,6 GHz Fréquence Boost, Socket AMD 5, DDR5 & PCIe 5.0, Pas de Ventirad",
        'productLink': 'https://amzn.to/4jU47ec',
        'imageUrl': 'https://m.media-amazon.com/images/I/51OEiWrUtqL._AC_SX425_.jpg',
        'price': '405 €'
    },
    {
        'name': 'AMD Ryzen 7',
        'description': "AMD Ryzen™ 7 5700X3D Processeur, 8 Cœurs/16 Threads Débridés, Architecture Zen 3, 100MB L3 Cache, 105W TDP, Jusqu'à 4,1 GHz Fréquence Boost, Socket AM4, DDR4 & PCIe 4.0, sans Ventirad",
        'productLink': 'https://amzn.to/3QheBH4',
        'imageUrl': 'https://m.media-amazon.com/images/I/61TXaMf2WyL._AC_SX425_.jpg',
        'price': '240 €'
    },
    {
        'name': 'AMD Ryzen 5',
        'description': "AMD Ryzen™ 5 7600 Processeur avec Ventirad Wraith Stealth, 6 Cœurs/12 Threads Débridés, Architecture Zen 4, 38MB L3 Cache, 65 W TDP, Jusqu'à 5,2 GHz Fréquence Boost, Socket AMD 5, DDR5 & PCIe 5.0",
        'productLink': 'https://amzn.to/3QheBH4',
        'imageUrl': 'https://m.media-amazon.com/images/I/61h39mKsSBL._AC_SX425_.jpg',
        'price': '213 €'
    },
    
] %}
<section>
    <div class="my-5 pt-5">
        <div class="container">
            <h1 class="mb-4 text-center fw-bold">Processeurs Haut de Gamme : Puissance et Efficacité</h1>
            <h2 class="text-center mb-4 text-secondary fs-4">Découvrez Notre Sélection de Processeurs Performants</h2>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <p class="text-center mb-5 lead">
                        Explorez notre gamme de processeurs haute performance pour le gaming et les applications exigeantes. Des solutions Intel et AMD pour tous les besoins.
                    </p>
                </div>
            </div>

            <div class="row g-4 justify-content-center">
                {% for processeur in proc %}
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="card h-100">
                            <div class="overflow-hidden">
                                <img src="{{ processeur.imageUrl }}" class="card-img-top" alt="{{ processeur.name }}">
                            </div>
                            <div class="card-body">
                                <h5 class="card-title mb-3">{{ processeur.name }}</h5>
                                <p class="card-text">{{ processeur.description }}</p>
                                <p class="card-text fw-bold text-primary">Prix: {{ processeur.price }}</p>
                            </div>
                            <div class="card-footer bg-transparent border-0 text-center pb-4">
                                <a href="{{ processeur.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 %}