@extends('layouts.app')

@section('content')
<section class="hero">
    <div class="container">
        <div class="hero-content">
            <h1 class="hero-title typewriter-effect">Nos forfaits</h1>
            <p class="hero-subtitle font-mono">Des solutions complètes et transparentes pour votre présence numérique.</p>
        </div>
    </div>
</section>

<div class="typed-divider"></div>

<section class="py-5">
    <div class="container">
        <div class="text-center mb-5">
            <div class="pricing-toggle">
                <button id="monthly-toggle" class="btn btn-primary active">Mensuel</button>
                <button id="yearly-toggle" class="btn">Annuel <span class="typed-badge ml-1">-20%</span></button>
            </div>
        </div>
        
        <div class="row">
            <!-- Forfait Vitrine -->
            <div class="col">
                <div class="pricing-table">
                    <div class="pricing-header">
                        <h3>Vitrine</h3>
                        <div id="vitrine-monthly" class="pricing-price">$99</div>
                        <div id="vitrine-yearly" class="pricing-price" style="display: none;">$79</div>
                        <div class="pricing-duration">par mois</div>
                    </div>
                    <p class="font-mono text-ink-light mb-4">Site web simple pour présenter votre entreprise</p>
                    <ul class="pricing-features">
                        <li>Site web personnalisé</li>
                        <li>Domaine à votre nom</li>
                        <li>Hébergement souverain</li>
                        <li>Optimisation SEO de base</li>
                        <li>Maintenance mensuelle</li>
                        <li>Support technique</li>
                    </ul>
                    <a href="{{ route('contact', app()->getLocale()) }}?service=vitrine" class="btn w-100 mt-4">Commencer</a>
                </div>
            </div>
            
            <!-- Forfait Commerce -->
            <div class="col">
                <div class="pricing-table featured">
                    <div class="pricing-header">
                        <h3>Commerce</h3>
                        <div id="commerce-monthly" class="pricing-price">$199</div>
                        <div id="commerce-yearly" class="pricing-price" style="display: none;">$159</div>
                        <div class="pricing-duration">par mois</div>
                    </div>
                    <p class="font-mono text-ink-light mb-4">Solution e-commerce complète pour vendre en ligne</p>
                    <ul class="pricing-features">
                        <li>Boutique en ligne complète</li>
                        <li>Gestion des produits</li>
                        <li>Paiement sécurisé</li>
                        <li>Infrastructure évolutive</li>
                        <li>Support technique prioritaire</li>
                        <li>Optimisation SEO avancée</li>
                    </ul>
                    <a href="{{ route('contact', app()->getLocale()) }}?service=commerce" class="btn btn-primary w-100 mt-4">Commencer</a>
                </div>
            </div>
            
            <!-- Forfait Application -->
            <div class="col">
                <div class="pricing-table">
                    <div class="pricing-header">
                        <h3>Application</h3>
                        <div id="application-monthly" class="pricing-price">$299</div>
                        <div id="application-yearly" class="pricing-price" style="display: none;">$239</div>
                        <div class="pricing-duration">par mois</div>
                    </div>
                    <p class="font-mono text-ink-light mb-4">Application web sur mesure pour vos besoins spécifiques</p>
                    <ul class="pricing-features">
                        <li>Application web sur mesure</li>
                        <li>Fonctionnalités personnalisées</li>
                        <li>Intégration avec vos systèmes</li>
                        <li>Architecture robuste et sécurisée</li>
                        <li>Accompagnement dédié</li>
                        <li>Support technique 24/7</li>
                    </ul>
                    <a href="{{ route('contact', app()->getLocale()) }}?service=application" class="btn w-100 mt-4">Commencer</a>
                </div>
            </div>
        </div>
        
        <div class="typed-divider"></div>
        
        <div class="row">
            <!-- Forfait Marketing -->
            <div class="col-md-6">
                <div class="pricing-table">
                    <div class="pricing-header">
                        <h3>Marketing</h3>
                        <div id="marketing-monthly" class="pricing-price">$499</div>
                        <div id="marketing-yearly" class="pricing-price" style="display: none;">$399</div>
                        <div class="pricing-duration">par mois</div>
                    </div>
                    <p class="font-mono text-ink-light mb-4">Stratégie web complète pour augmenter votre visibilité</p>
                    <ul class="pricing-features">
                        <li>Audit de votre présence en ligne</li>
                        <li>Stratégie SEO personnalisée</li>
                        <li>Gestion des campagnes Google Ads</li>
                        <li>Gestion des réseaux sociaux</li>
                        <li>Création de contenu (blog, newsletters)</li>
                        <li>Analyse des performances</li>
                        <li>Rapports mensuels</li>
                        <li>Conseils et recommandations</li>
                    </ul>
                    <a href="{{ route('contact', app()->getLocale()) }}?service=marketing" class="btn w-100 mt-4">Commencer</a>
                </div>
            </div>
            
            <!-- Forfait Entreprise -->
            <div class="col-md-6">
                <div class="pricing-table">
                    <div class="pricing-header">
                        <h3>Entreprise</h3>
                        <div id="enterprise-monthly" class="pricing-price">$999</div>
                        <div id="enterprise-yearly" class="pricing-price" style="display: none;">$799</div>
                        <div class="pricing-duration">par mois</div>
                    </div>
                    <p class="font-mono text-ink-light mb-4">Solution complète pour les grandes entreprises</p>
                    <ul class="pricing-features">
                        <li>Tous les services des forfaits précédents</li>
                        <li>Développement sur mesure avancé</li>
                        <li>Intégration ERP/CRM</li>
                        <li>Tableau de bord personnalisé</li>
                        <li>API et intégrations tierces</li>
                        <li>Sécurité renforcée</li>
                        <li>Hébergement haute disponibilité</li>
                        <li>Support technique 24/7</li>
                        <li>Conseiller dédié</li>
                    </ul>
                    <a href="{{ route('contact', app()->getLocale()) }}?service=entreprise" class="btn w-100 mt-4">Commencer</a>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="typed-divider"></div>

<section class="py-5">
    <div class="container">
        <h2 class="text-center mb-5 carbon-copy">Questions fréquentes</h2>
        
        <div class="row">
            <div class="col-md-6">
                <div class="typed-card mb-4">
                    <h3 class="font-typewriter">Puis-je changer de forfait plus tard?</h3>
                    <p>Oui, vous pouvez changer de forfait à tout moment. La différence de prix sera calculée au prorata pour le reste de votre cycle de facturation.</p>
                </div>
                
                <div class="typed-card mb-4">
                    <h3 class="font-typewriter">Quels modes de paiement acceptez-vous?</h3>
                    <p>Nous acceptons toutes les cartes de crédit principales, PayPal et les virements bancaires pour les forfaits annuels.</p>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="typed-card mb-4">
                    <h3 class="font-typewriter">Y a-t-il des frais de mise en place?</h3>
                    <p>Non, il n'y a pas de frais de mise en place pour nos forfaits. Le prix affiché est le prix que vous payez.</p>
                </div>
                
                <div class="typed-card mb-4">
                    <h3 class="font-typewriter">Puis-je annuler mon abonnement?</h3>
                    <p>Oui, vous pouvez annuler votre abonnement à tout moment. Si vous annulez, votre service continuera jusqu'à la fin de votre période de facturation en cours.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5 bg-ink text-center">
    <div class="container">
        <h2 class="mb-3 font-typewriter">Prêt à commencer?</h2>
        <p class="mb-4">Choisissez le forfait parfait pour votre entreprise et commencez à bâtir votre présence numérique dès aujourd'hui.</p>
        <a href="{{ route('contact', app()->getLocale()) }}" class="btn bg-paper">Nous contacter</a>
    </div>
</section>

@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const monthlyToggle = document.getElementById('monthly-toggle');
        const yearlyToggle = document.getElementById('yearly-toggle');
        
        const monthlyPrices = document.querySelectorAll('[id$="-monthly"]');
        const yearlyPrices = document.querySelectorAll('[id$="-yearly"]');
        
        monthlyToggle.addEventListener('click', function() {
            monthlyToggle.classList.add('active');
            yearlyToggle.classList.remove('active');
            
            monthlyPrices.forEach(price => price.style.display = 'block');
            yearlyPrices.forEach(price => price.style.display = 'none');
        });
        
        yearlyToggle.addEventListener('click', function() {
            yearlyToggle.classList.add('active');
            monthlyToggle.classList.remove('active');
            
            yearlyPrices.forEach(price => price.style.display = 'block');
            monthlyPrices.forEach(price => price.style.display = 'none');
        });
    });
</script>
@endsection