@extends('layouts.app')

@section('content')
<section class="py-5">
    <div class="container">
        <h1 class="text-center mb-5 typewriter-effect">Nos Services</h1>
        
        <div class="typed-card mb-5" id="vitrine">
            <div class="row">
                <div class="col">
                    <h2 class="text-accent heavy-type">Vitrine</h2>
                    <p class="mb-3">Un site web simple et élégant pour présenter votre entreprise, vos produits et services.</p>
                    
                    <h3 class="mt-4 font-typewriter">Ce forfait comprend:</h3>
                    <ul>
                        <li>Design personnalisé et responsive</li>
                        <li>Jusqu'à 5 pages (Accueil, À propos, Services, Contact, etc.)</li>
                        <li>Formulaire de contact</li>
                        <li>Intégration des réseaux sociaux</li>
                        <li>Optimisation SEO de base</li>
                        <li>Hébergement et nom de domaine</li>
                        <li>Maintenance mensuelle</li>
                        <li>Support technique</li>
                    </ul>
                    
                    <div class="mt-4">
                        <span class="typed-badge">49€/mois</span>
                        <a href="{{ route('contact', app()->getLocale()) }}?service=vitrine" class="btn btn-primary ml-3">Demander un devis</a>
                    </div>
                </div>
                <div class="col">
                    <div class="typed-frame">
                        <img src="https://via.placeholder.com/500x300" alt="Service Vitrine">
                    </div>
                </div>
            </div>
        </div>
        
        <div class="typed-divider"></div>
        
        <div class="typed-card mb-5" id="commerce">
            <div class="row">
                <div class="col">
                    <div class="typed-frame">
                        <img src="https://via.placeholder.com/500x300" alt="Service Commerce">
                    </div>
                </div>
                <div class="col">
                    <h2 class="text-accent heavy-type">Commerce</h2>
                    <p class="mb-3">Une solution e-commerce complète pour vendre vos produits en ligne.</p>
                    
                    <h3 class="mt-4 font-typewriter">Ce forfait comprend:</h3>
                    <ul>
                        <li>Boutique en ligne personnalisée</li>
                        <li>Gestion des produits et des stocks</li>
                        <li>Paiement sécurisé (Stripe, PayPal, etc.)</li>
                        <li>Calcul automatique des frais de livraison</li>
                        <li>Gestion des commandes et des clients</li>
                        <li>Optimisation SEO avancée</li>
                        <li>Hébergement et nom de domaine</li>
                        <li>Maintenance mensuelle</li>
                        <li>Support technique prioritaire</li>
                    </ul>
                    
                    <div class="mt-4">
                        <span class="typed-badge">99€/mois</span>
                        <a href="{{ route('contact', app()->getLocale()) }}?service=commerce" class="btn btn-primary ml-3">Demander un devis</a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="typed-divider"></div>
        
        <div class="typed-card mb-5" id="application">
            <div class="row">
                <div class="col">
                    <h2 class="text-accent heavy-type">Application</h2>
                    <p class="mb-3">Une application web sur mesure pour répondre à vos besoins spécifiques.</p>
                    
                    <h3 class="mt-4 font-typewriter">Ce forfait comprend:</h3>
                    <ul>
                        <li>Analyse des besoins et spécifications</li>
                        <li>Développement sur mesure</li>
                        <li>Interface utilisateur intuitive</li>
                        <li>Intégration avec vos systèmes existants</li>
                        <li>Tests et déploiement</li>
                        <li>Formation des utilisateurs</li>
                        <li>Hébergement sécurisé</li>
                        <li>Maintenance mensuelle</li>
                        <li>Support technique dédié</li>
                    </ul>
                    
                    <div class="mt-4">
                        <span class="typed-badge">149€/mois</span>
                        <a href="{{ route('contact', app()->getLocale()) }}?service=application" class="btn btn-primary ml-3">Demander un devis</a>
                    </div>
                </div>
                <div class="col">
                    <div class="typed-frame">
                        <img src="https://via.placeholder.com/500x300" alt="Service Application">
                    </div>
                </div>
            </div>
        </div>
        
        <div class="typed-divider"></div>
        
        <div class="typed-card mb-5" id="marketing">
            <div class="row">
                <div class="col">
                    <div class="typed-frame">
                        <img src="https://via.placeholder.com/500x300" alt="Service Marketing">
                    </div>
                </div>
                <div class="col">
                    <h2 class="text-accent heavy-type">Marketing</h2>
                    <p class="mb-3">Une stratégie web complète pour augmenter votre visibilité en ligne.</p>
                    
                    <h3 class="mt-4 font-typewriter">Ce forfait comprend:</h3>
                    <ul>
                        <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>
                    
                    <div class="mt-4">
                        <span class="typed-badge">199€/mois</span>
                        <a href="{{ route('contact', app()->getLocale()) }}?service=marketing" class="btn btn-primary ml-3">Demander un devis</a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="typed-divider"></div>
        
        <div class="typed-card" id="entreprise">
            <div class="row">
                <div class="col">
                    <h2 class="text-accent heavy-type">Entreprise</h2>
                    <p class="mb-3">Une solution complète pour les grandes entreprises avec des besoins complexes.</p>
                    
                    <h3 class="mt-4 font-typewriter">Ce forfait comprend:</h3>
                    <ul>
                        <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>
                    
                    <div class="mt-4">
                        <span class="typed-badge">Sur devis</span>
                        <a href="{{ route('contact', app()->getLocale()) }}?service=entreprise" class="btn btn-primary ml-3">Nous contacter</a>
                    </div>
                </div>
                <div class="col">
                    <div class="typed-frame">
                        <img src="https://via.placeholder.com/500x300" alt="Service Entreprise">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5 bg-ink text-center">
    <div class="container">
        <h2 class="mb-3 font-typewriter">Vous ne trouvez pas ce que vous cherchez?</h2>
        <p class="mb-4">Nous pouvons créer une solution personnalisée pour répondre à vos besoins spécifiques.</p>
        <a href="{{ route('contact', app()->getLocale()) }}" class="btn bg-paper">Discuter de votre projet</a>
    </div>
</section>
@endsection