<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FShop - Nos Services</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar">
        <div class="logo">
            <h1>FShop</h1>
        </div>
        <ul class="nav-links">
            <li><a href="index.html">Accueil</a></li>
            <li><a href="services.html" class="active">Services</a></li>
            <li><a href="tuto.html">Tutoriels</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
        <div class="mobile-menu-button">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>

    <!-- Services Section -->
    <section class="services-page">
        <div class="container">
            <div class="section-header">
                <h1>Nos Services FiveM</h1>
                <p>Des solutions complètes pour votre serveur</p>
            </div>

            <!-- Base RP V2 -->
            <div class="service-card">
                <div class="service-header">
                    <h2>FShop Base RP V2</h2>
                    <span class="service-tag">Style FlashWorld/FlashBack</span>
                </div>
                
                <div class="service-features">
                    <ul>
                        <li>✨ Verrouillage IP & FiveM</li>
                        <li>🎮 Base v2.0</li>
                        <li>📱 Support & mises à jour inclus</li>
                        <li>🗺️ Mappings & Vêtements inclus</li>
                    </ul>
                </div>

                <div class="video-preview">
                    <h4 class="preview-title">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                            <path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        Aperçu de la base
                    </h4>
                    <div class="video-container">
                        <iframe src="" 
                                title="Preview Base FShop V2" 
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                allowfullscreen></iframe>
                    </div>
                    <div class="test-server">
                        <p>Testez par vous-même ! Serveur de test</p>
                        <div class="server-links">
                            <a href="fivem://cfx.re/join/6xve7d" class="server-link">Lancer FiveM</a>
                            <a href="https://cfx.re/join/6xve7d" class="server-link">Lien navigateur</a>
                        </div>
                    </div>
                </div>

                <div class="service-pricing">
                    <div class="price-card">
                        <h3>Licence à vie</h3>
                        <div class="price">250€</div>
                        <ul>
                            <li>Mises à jour illimitées</li>
                            <li>Support prioritaire</li>
                            <li>Accès à vie</li>
                        </ul>
                        <a href="https://discord.gg/fshop" class="btn" target="_blank">Commander</a>
                    </div>
                    <div class="price-card">
                        <h3>Abonnement mensuel</h3>
                        <div class="price">75€</div>
                        <ul>
                            <li>Mises à jour incluses</li>
                            <li>Support disponible</li>
                            <li>Engagement mensuel</li>
                        </ul>
                        <a href="https://discord.gg/fshop" class="btn" target="_blank">Commander</a>
                    </div>
                </div>

                <div class="addons">
                    <h3>Extensions disponibles</h3>
                    <div class="addons-grid">
                        <div class="addon-card">
                            <h4>Pack 2.5</h4>
                            <div class="addon-price">150€</div>
                            <a href="https://discord.gg/fshop" class="btn" target="_blank">Accéder</a>
                        </div>
                        <div class="addon-card">
                            <h4>Pack NoPub</h4>
                            <div class="addon-price">100€</div>
                            <a href="https://discord.gg/fshop" class="btn" target="_blank">Accéder</a>
                        </div>
                        <div class="addon-card">
                            <h4>Pack Hiver</h4>
                            <div class="addon-price">60€</div>
                            <a href="https://discord.gg/fshop" class="btn" target="_blank">Accéder</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Base RP V2.5 -->
            <div class="service-card premium">
                <div class="service-header">
                    <h2>FShop Base RP V2.5</h2>
                    <span class="service-tag premium">Premium</span>
                </div>
                
                <div class="service-features">
                    <ul>
                        <li>✨ Verrouillage IP & FiveM Avancé</li>
                        <li>🎮 Base v2.5 Optimisée</li>
                        <li>📱 Support premium & mises à jour prioritaires</li>
                        <li>🗺️ Mappings & Vêtements premium inclus</li>
                    </ul>
                </div>

                <div class="video-preview">
                    <h4 class="preview-title">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                            <path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        Aperçu de la base
                    </h4>
                    <div class="video-container">
                        <iframe src="" 
                                title="Preview Base FShop V2.5" 
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                allowfullscreen></iframe>
                    </div>
                    <div class="test-server">
                        <p>Testez par vous-même ! Serveur de test</p>
                        <div class="server-links">
                            <a href="fivem://cfx.re/join/6xve7d" class="server-link">Lancer FiveM</a>
                            <a href="https://cfx.re/join/6xve7d" class="server-link">Lien navigateur</a>
                        </div>
                    </div>
                </div>

                <div class="service-pricing">
                    <div class="price-card featured">
                        <h3>Licence à vie</h3>
                        <div class="price">400€</div>
                        <ul>
                            <li>Mises à jour illimitées</li>
                            <li>Support prioritaire 24/7</li>
                            <li>Accès à vie</li>
                        </ul>
                        <a href="https://discord.gg/fshop" class="btn" target="_blank">Commander</a>
                    </div>
                    <div class="price-card">
                        <h3>Abonnement mensuel</h3>
                        <div class="price">125€</div>
                        <ul>
                            <li>Mises à jour incluses</li>
                            <li>Support premium</li>
                            <li>Engagement mensuel</li>
                        </ul>
                        <a href="https://discord.gg/fshop" class="btn" target="_blank">Commander</a>
                    </div>
                </div>
            </div>

            <!-- Services additionnels -->
            <div class="additional-services">
                <h2>Services Complémentaires</h2>
                
                <div class="services-grid">
                    <div class="service-category">
                        <h3>Services de Base</h3>
                        <ul class="service-list">
                            <li>
                                <span>Hébergement bannière</span>
                                <span class="price">2.50€</span>
                            </li>
                            <li>
                                <span>Hébergement loading screen</span>
                                <span class="price">5€</span>
                            </li>
                            <li>
                                <span>Changement d'IP</span>
                                <span class="price">5€</span>
                            </li>
                            <li>
                                <span>Retrait IP BlackList (ShieldCore)</span>
                                <span class="price">10€/mois</span>
                            </li>
                            <li>
                                <span>IP dédiée développement</span>
                                <span class="price">15€</span>
                            </li>
                        </ul>
                    </div>

                    <div class="service-category">
                        <h3>Configurations</h3>
                        <ul class="service-list">
                            <li>
                                <span>Anti Cheat WaveShield</span>
                                <span class="price">20€</span>
                            </li>
                            <li>
                                <span>Anti Cheat FiveGuard</span>
                                <span class="price">20€</span>
                            </li>
                            <li>
                                <span>LB PHONE</span>
                                <span class="price">15€</span>
                            </li>
                            <li>
                                <span>LB TABLET</span>
                                <span class="price">15€</span>
                            </li>
                            <li>
                                <span>Quasar phone</span>
                                <span class="price">15€</span>
                            </li>
                        </ul>
                    </div>

                    <div class="service-category">
                        <h3>Services Premium</h3>
                        <ul class="service-list">
                            <li>
                                <span>Installation des updates</span>
                                <span class="price">50€</span>
                            </li>
                            <li>
                                <span>Finalisation serveur</span>
                                <span class="price">100€</span>
                            </li>
                            <li>
                                <span>Configuration complète</span>
                                <span class="price">50€</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- FlashFA System -->
            <div class="service-card">
                <div class="service-header">
                    <h2>FlashFA System</h2>
                    <span class="service-tag new">Nouveau</span>
                </div>
                
                <div class="service-features">
                    <h3>Pack Complet :</h3>
                    <ul>
                        <li>👕 Inventory FlashFA</li>
                        <li>🛍️ Clothshop FlashFA</li>
                        <li>🎭 Accessory Shop FlashFA</li>
                    </ul>

                    <div class="features-detail">
                        <h4>Systèmes inclus :</h4>
                        <ul>
                            <li>✨ Système d'inventaire complet</li>
                            <li>👔 Système de clothshop avancé</li>
                            <li>🎪 Système d'accessoires shop</li>
                        </ul>
                    </div>

                    <div class="requirements">
                        <h4>Prérequis :</h4>
                        <ul>
                            <li>🔧 SkinChanger</li>
                            <li>📦 ESX Compatible à l'ox_inventory</li>
                        </ul>
                    </div>
                </div>

                <div class="video-preview">
                    <h4 class="preview-title">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                            <path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        Démonstration du système
                    </h4>
                    <div class="video-container">
                        <iframe src="https://www.youtube.com/embed/mZvIjY6FhZg" 
                                title="Preview FlashFA System" 
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                allowfullscreen></iframe>
                    </div>
                    <div class="test-server">
                        <p>Testez par vous-même ! Serveur de test</p>
                        <div class="server-links">
                            <a href="fivem://cfx.re/join/6xve7d" class="server-link">Lancer FiveM</a>
                            <a href="https://cfx.re/join/6xve7d" class="server-link">Lien navigateur</a>
                        </div>
                    </div>
                </div>

                <div class="pricing-special">
                    <div class="price-promotion">
                        <span class="price">100€</span>
                        <span class="promo-tag">10 premiers acheteurs</span>
                    </div>
                    <div class="price-regular">
                        <span class="price">120€</span>
                        <span>Prix régulier</span>
                    </div>
                    <a href="https://discord.gg/fshop" class="btn" target="_blank">Commander</a>
                </div>
            </div>

            <!-- Character Creator -->
            <div class="service-card creator">
                <div class="service-header">
                    <h2>Character Creator</h2>
                    <span class="service-tag new">Nouveau</span>
                </div>
                
                <div class="service-features">
                    <h3>Fonctionnalités principales :</h3>
                    <ul>
                        <li>🔒 Lock CFX</li>
                        <li>💻 Système NUI moderne</li>
                        <li>🔄 Compatible ESX / QBCore</li>
                        <li>👕 Support multiple systèmes d'habillage</li>
                    </ul>
                </div>

                <div class="video-preview">
                    <h4 class="preview-title">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                            <path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        Démonstration du Creator
                    </h4>
                    <div class="video-container">
                        <iframe src="https://www.youtube.com/embed/c50EFd4FuIQ" 
                                title="Preview Character Creator" 
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                allowfullscreen></iframe>
                    </div>
                    <div class="test-server">
                        <p>Testez par vous-même ! Serveur de test</p>
                        <div class="server-links">
                            <a href="fivem://cfx.re/join/6xve7d" class="server-link">Lancer FiveM</a>
                            <a href="https://cfx.re/join/6xve7d" class="server-link">Lien navigateur</a>
                        </div>
                    </div>
                </div>

                <div class="pricing-special">
                    <div class="price-regular">
                        <span class="price">60€</span>
                        <span>Prix régulier</span>
                    </div>
                    <a href="https://discord.gg/fshop" class="btn" target="_blank">Commander</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="contact" id="contact">
        <div class="contact-content">
            <h2>Prêt à passer commande ?</h2>
            <p>Rejoignez notre Discord pour plus d'informations et passer commande</p>
            <div class="contact-buttons">
                <a href="https://discord.gg/fshop" class="btn btn-light">
                    <svg class="discord-icon" viewBox="0 0 24 24" width="24" height="24">
                        <path fill="currentColor" d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .077-.025c.524-.733.997-1.5 1.405-2.31a.075.075 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .092.037a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
                    </svg>
                    Rejoindre Discord
                </a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="footer-content">
            <div class="footer-brand">
                <h3>FShop</h3>
                <p>Solutions premium pour serveurs FiveM</p>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2025 FShop | Tous droits réservés.</p>
        </div>
    </footer>

    <style>
        /* Styles pour les previews vidéo */
        .video-preview {
            margin: 2rem 0;
            border-radius: 12px;
            overflow: hidden;
            position: relative;
            background: rgba(255, 255, 255, 0.05);
            padding: 1.5rem;
        }

        .video-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
            border-radius: 8px;
            overflow: hidden;
        }

        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        .preview-title {
            color: var(--primary-light);
            font-size: 1.2rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .preview-title svg {
            width: 24px;
            height: 24px;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .video-preview {
                margin: 1.5rem 0;
                padding: 1rem;
            }
        }

        .test-server {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.test-server p {
    margin-bottom: 0.8rem;
    color: var(--primary-light);
    font-size: 0.9rem;
}

.server-links {
    display: flex;
    gap: 1rem;
}

.server-link {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.server-link:hover {
    background: var(--primary-dark);
}

@media (max-width: 768px) {
    .server-links {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .server-link {
        text-align: center;
    }
}
    </style>

    <script src="scripts.js"></script>
</body>
</html>