@extends('layouts.app')

@section('content')
<section class="hero">
    <div class="container">
        <div class="hero-content">
            <h1 class="hero-title typewriter-effect">Présences numériques souveraines</h1>
            <p class="hero-subtitle font-mono">Créez un espace web qui vous appartient véritablement — indépendant, maîtrisé, et conçu pour durer.</p>
            <div class="mt-4">
                <a href="{{ route('services', app()->getLocale()) }}" class="btn btn-primary">Découvrir nos services</a>
                <a href="{{ route('contact', app()->getLocale()) }}" class="btn">Discuter de votre projet</a>
            </div>
        </div>
    </div>
</section>

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

<section class="py-5">
    <div class="container">
        <div class="row align-center">
            <div class="col">
                <h2 class="carbon-copy">Notre approche</h2>
                <p class="vintage-ink">JMHP.pro est un cabinet numérique basé au Québec, spécialisé dans la création de présences en ligne complètes, durables et souveraines.</p>
                <p class="worn-ribbon">Chaque projet repose sur trois piliers essentiels :</p>
                <ul class="mt-3 vintage-list">
                    <li>Un domaine détenu par le client</li>
                    <li>Une infrastructure moderne et évolutive</li>
                    <li>Un design sur mesure qui vous ressemble</li>
                </ul>
                <p class="mt-3 vintage-ink">Nous travaillons avec des entreprises, des créateurs et des organisations qui souhaitent bâtir un espace numérique à leur image — loin des plateformes standardisées et des solutions génériques.</p>
                <div class="vintage-stamp-corner">Depuis 2025</div>
            </div>
            <div class="col">
                <div class="typed-frame vintage-border">
                    <img src="{{ asset('images/content/retroadvertising.png') }}" alt="Notre approche - Style publicité rétro" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="imperfect-type">Nos forfaits</h2>
            <p class="text-ink-light">Des solutions complètes et transparentes</p>
        </div>
        
        <div class="row">
            <div class="col">
                <div class="pricing-table">
                    <div class="pricing-header">
                        <h3>Vitrine</h3>
                        <div class="pricing-price">$99</div>
                        <div class="pricing-duration">par mois</div>
                    </div>
                    <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>
                    </ul>
                    <a href="{{ route('packages', app()->getLocale()) }}#vitrine" class="btn">En savoir plus</a>
                </div>
            </div>
            
            <div class="col">
                <div class="pricing-table featured">
                    <div class="pricing-header">
                        <h3>Commerce</h3>
                        <div class="pricing-price">$199</div>
                        <div class="pricing-duration">par mois</div>
                    </div>
                    <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>
                    </ul>
                    <a href="{{ route('packages', app()->getLocale()) }}#commerce" class="btn btn-primary">En savoir plus</a>
                </div>
            </div>
            
            <div class="col">
                <div class="pricing-table">
                    <div class="pricing-header">
                        <h3>Application</h3>
                        <div class="pricing-price">$299</div>
                        <div class="pricing-duration">par mois</div>
                    </div>
                    <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>
                    </ul>
                    <a href="{{ route('packages', app()->getLocale()) }}#application" class="btn">En savoir plus</a>
                </div>
            </div>
        </div>
        <div class="text-center mt-4">
            <a href="{{ route('packages', app()->getLocale()) }}" class="btn btn-accent">Voir tous nos forfaits</a>
        </div>
    </div>
</section>

<section class="py-5">
    <div class="container">
        <div class="vintage-ad">
            <div class="vintage-stamp">Nouveau!</div>
            <h3>Forfait Spécial Lancement</h3>
            <p>Pour célébrer notre lancement, obtenez 3 mois gratuits sur tout abonnement annuel. Une offre limitée dans le temps pour votre présence numérique souveraine.</p>
            <a href="{{ route('contact', app()->getLocale()) }}" class="btn vintage-button">Profitez de l'offre</a>
        </div>
    </div>
</section>

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

<section class="py-5">
    <div class="container">
        <div class="row align-center">
            <div class="col">
                <h2 class="carbon-copy">Une communauté d'affaires locale forte</h2>
                <p class="vintage-ink">Au-delà de la simple création de sites web, nous bâtissons un écosystème numérique local qui profite à tous nos clients.</p>
                <p class="worn-ribbon">Notre système unique de promotion croisée et de backlinks permet à chaque membre de bénéficier de la visibilité de l'ensemble du réseau, créant ainsi une synergie profitable pour tous.</p>
                <div class="vintage-benefits">
                    <div class="benefit-item">
                        <span class="benefit-number">01</span>
                        <span class="benefit-text">Visibilité accrue</span>
                    </div>
                    <div class="benefit-item">
                        <span class="benefit-number">02</span>
                        <span class="benefit-text">Référencement optimisé</span>
                    </div>
                    <div class="benefit-item">
                        <span class="benefit-number">03</span>
                        <span class="benefit-text">Réseau d'affaires local</span>
                    </div>
                </div>
                <div class="mt-4">
                    <a href="{{ route('partners', app()->getLocale()) }}" class="btn btn-accent vintage-button">Rejoindre notre communauté</a>
                </div>
            </div>
            <div class="col">
                <div class="typed-frame vintage-border">
                    <img src="{{ asset('images/content/partners.png') }}" alt="Communauté d'affaires JMHP.pro" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
</section>

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

<section class="py-5">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="heavy-type">Témoignages</h2>
            <p class="text-ink-light">Ce que nos clients disent de nous</p>
        </div>
        
        <div class="row">
            <div class="col">
                <div class="typed-card">
                    <blockquote>
                        "JMHP.pro nous a permis de reprendre le contrôle de notre présence en ligne. Fini les plateformes qui changent leurs règles sans préavis — nous avons maintenant un site qui nous appartient vraiment."
                    </blockquote>
                    <p class="text-right mb-0 font-typewriter">— Marie Tremblay, Boutique La Petite Fleur</p>
                </div>
            </div>
            
            <div class="col">
                <div class="typed-card">
                    <blockquote>
                        "Le système de promotion croisée a considérablement augmenté notre visibilité locale. Notre trafic web a doublé depuis que nous avons rejoint la communauté JMHP.pro."
                    </blockquote>
                    <p class="text-right mb-0 font-typewriter">— Jean Lavoie, Restaurant Le Gourmet</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 à bâtir votre espace numérique souverain?</h2>
        <p class="mb-4">Contactez-nous pour discuter de votre projet et découvrir comment nous pouvons créer une présence en ligne qui vous ressemble vraiment.</p>
        <a href="{{ route('contact', app()->getLocale()) }}" class="btn bg-paper">Demander un devis personnalisé</a>
    </div>
</section>
@endsection