@extends('layouts.app')

@push('styles')
    @vite('resources/css/pages/home.css')
@endpush

@section('content')
@include('components.header')

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
*{font-family:'Inter',sans-serif}

/* Animations */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(6deg)}}
@keyframes pulse-ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.6);opacity:0}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes gradient-x{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes spin-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.animate-float{animation:float 6s ease-in-out infinite}
.animate-float2{animation:float2 8s ease-in-out infinite}
.animate-fadein{animation:fadeInUp .8s ease both}
.animate-fadein-d1{animation:fadeInUp .8s ease .15s both}
.animate-fadein-d2{animation:fadeInUp .8s ease .3s both}
.animate-fadein-d3{animation:fadeInUp .8s ease .45s both}
.animate-fadein-d4{animation:fadeInUp .8s ease .6s both}

.gradient-text{
    background:linear-gradient(135deg,#fff 0%,#b3d9ff 50%,#fff 100%);
    background-size:200% auto;
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    animation:shimmer 4s linear infinite;
}
.gradient-text-dark{
    background:linear-gradient(135deg,#045d98,#08a3ff,#045d98);
    background-size:200% auto;
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    animation:shimmer 4s linear infinite;
}

.card-hover{transition:transform .3s ease,box-shadow .3s ease}
.card-hover:hover{transform:translateY(-8px);box-shadow:0 32px 64px rgba(4,93,152,.18)!important}

.btn-primary{
    background:linear-gradient(135deg,#045d98,#08a3ff);
    transition:all .3s ease;
    position:relative;overflow:hidden;
}
.btn-primary::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,#08a3ff,#045d98);
    opacity:0;transition:opacity .3s ease;
}
.btn-primary:hover::before{opacity:1}
.btn-primary span{position:relative;z-index:1}

.step-line::after{
    content:'';position:absolute;top:32px;left:calc(50% + 40px);
    width:calc(100% - 80px);height:2px;
    background:linear-gradient(90deg,#08a3ff,transparent);
}

.stat-item{
    border-left:3px solid;
    border-image:linear-gradient(180deg,#045d98,#08a3ff) 1;
}
</style>

<!-- ══════════════════════ HERO ══════════════════════ -->
<section id="home" style="min-height:100vh;background:linear-gradient(135deg,#020f1e 0%,#041d38 40%,#063660 70%,#0a4a7a 100%);position:relative;overflow:hidden;display:flex;align-items:center">

    <!-- Orbes décoratifs -->
    <div style="position:absolute;top:-10%;left:-10%;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(8,163,255,.12) 0%,transparent 70%);filter:blur(40px)"></div>
    <div style="position:absolute;bottom:-10%;right:-5%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(4,93,152,.2) 0%,transparent 70%);filter:blur(40px)"></div>
    <div style="position:absolute;top:30%;left:45%;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(8,163,255,.08) 0%,transparent 70%);filter:blur(60px)"></div>

    <!-- Grille déco -->
    <div style="position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:80px 80px;pointer-events:none"></div>

    <!-- Particules flottantes -->
    <div class="animate-float" style="position:absolute;top:15%;left:8%;width:60px;height:60px;border-radius:16px;background:rgba(8,163,255,.08);backdrop-filter:blur(10px);border:1px solid rgba(8,163,255,.2)"></div>
    <div class="animate-float2" style="position:absolute;top:25%;right:12%;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.05);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)"></div>
    <div class="animate-float" style="position:absolute;bottom:25%;left:15%;width:24px;height:24px;border-radius:8px;background:rgba(8,163,255,.15);animation-delay:2s"></div>
    <div class="animate-float2" style="position:absolute;bottom:35%;right:8%;width:48px;height:48px;border-radius:50%;background:rgba(4,93,152,.12);border:1px solid rgba(8,163,255,.15);animation-delay:1s"></div>

    <div class="container mx-auto px-4" style="padding-top:100px;padding-bottom:80px;position:relative;z-index:1">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center" class="lg-grid-two">

            <!-- Texte gauche -->
            <div>
                <div class="animate-fadein" style="display:inline-flex;align-items:center;gap:8px;background:rgba(8,163,255,.1);border:1px solid rgba(8,163,255,.3);border-radius:50px;padding:6px 16px;margin-bottom:24px">
                    <span style="width:7px;height:7px;border-radius:50%;background:#08a3ff;display:inline-block;box-shadow:0 0 8px #08a3ff"></span>
                    <span style="color:#7dcfff;font-size:13px;font-weight:600;letter-spacing:.05em">Carte de visite digitale au Sénégal</span>
                </div>

                <h1 class="animate-fadein-d1" style="font-size:clamp(2.5rem,5vw,4rem);font-weight:900;line-height:1.1;color:#fff;margin-bottom:24px;letter-spacing:-.02em">
                    Votre identité<br>
                    <span class="gradient-text">professionnelle</span><br>
                    en 1 lien
                </h1>

                <p class="animate-fadein-d2" style="font-size:18px;line-height:1.7;color:rgba(255,255,255,.65);margin-bottom:40px;max-width:480px">
                    Créez votre vitrine digitale avec vos produits, vos réseaux sociaux et votre contact — partageable en un scan de QR code.
                </p>

                <div class="animate-fadein-d3" style="display:flex;gap:16px;flex-wrap:wrap;margin-bottom:48px">
                    <a href="/register" class="btn-primary" style="display:inline-flex;align-items:center;gap:10px;padding:16px 32px;border-radius:14px;font-weight:700;font-size:16px;color:#fff;text-decoration:none;box-shadow:0 8px 32px rgba(8,163,255,.4)">
                        <span>Créer ma carte</span>
                        <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
                    </a>
                    <a href="#how-it-works" style="display:inline-flex;align-items:center;gap:10px;padding:16px 32px;border-radius:14px;font-weight:600;font-size:16px;color:rgba(255,255,255,.85);text-decoration:none;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(10px);transition:all .3s" onmouseover="this.style.background='rgba(255,255,255,.12)'" onmouseout="this.style.background='rgba(255,255,255,.07)'">
                        <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" 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 stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Voir comment ça marche
                    </a>
                </div>

                <!-- Stats -->
                <div class="animate-fadein-d4" style="display:flex;gap:32px;flex-wrap:wrap">
                    <div class="stat-item" style="padding-left:16px">
                        <div style="font-size:28px;font-weight:900;color:#fff;line-height:1">500+</div>
                        <div style="font-size:13px;color:rgba(255,255,255,.5);margin-top:4px">Utilisateurs actifs</div>
                    </div>
                    <div class="stat-item" style="padding-left:16px">
                        <div style="font-size:28px;font-weight:900;color:#fff;line-height:1">10K+</div>
                        <div style="font-size:13px;color:rgba(255,255,255,.5);margin-top:4px">Scans par mois</div>
                    </div>
                    <div class="stat-item" style="padding-left:16px">
                        <div style="font-size:28px;font-weight:900;color:#fff;line-height:1">100%</div>
                        <div style="font-size:13px;color:rgba(255,255,255,.5);margin-top:4px">Sécurisé</div>
                    </div>
                </div>
            </div>

            <!-- Mockup droite -->
            <div class="animate-fadein-d2" style="display:flex;justify-content:center;align-items:center;position:relative">
                <!-- Halo -->
                <div style="position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(8,163,255,.15),transparent 70%);filter:blur(30px)"></div>

                <!-- Carte centrale -->
                <div class="animate-float" style="position:relative;width:300px;background:rgba(255,255,255,.07);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.15);border-radius:28px;padding:28px;box-shadow:0 32px 80px rgba(0,0,0,.5)">

                    <!-- Header de la carte -->
                    <div style="display:flex;align-items:center;gap:14px;margin-bottom:20px">
                        <div style="width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#045d98,#08a3ff);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(8,163,255,.4)">
                            <svg width="24" height="24" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                        </div>
                        <div>
                            <div style="font-weight:800;color:#fff;font-size:15px">Votre Boutique</div>
                            <div style="font-size:12px;color:rgba(255,255,255,.5);margin-top:2px">azsenegal.com/votre-page</div>
                        </div>
                    </div>

                    <!-- Ligne séparateur -->
                    <div style="height:1px;background:rgba(255,255,255,.1);margin-bottom:18px"></div>

                    <!-- Produits mini -->
                    <div style="font-size:11px;font-weight:700;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px">Mes produits</div>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px">
                        @foreach([['#1','Produit 1'],['#2','Produit 2'],['#3','Produit 3'],['#4','Produit 4']] as $p)
                        <div style="background:rgba(255,255,255,.06);border-radius:12px;padding:10px;border:1px solid rgba(255,255,255,.08)">
                            <div style="height:40px;border-radius:8px;background:linear-gradient(135deg,rgba(8,163,255,.2),rgba(4,93,152,.3));margin-bottom:6px"></div>
                            <div style="font-size:11px;color:rgba(255,255,255,.7);font-weight:600">{{ $p[1] }}</div>
                        </div>
                        @endforeach
                    </div>

                    <!-- Réseaux sociaux mini -->
                    <div style="display:flex;gap:8px;justify-content:center">
                        @foreach(['#f59e0b','#10b981','#3b82f6','#ec4899'] as $c)
                        <div style="width:32px;height:32px;border-radius:10px;background:{{ $c }}22;border:1px solid {{ $c }}44;display:flex;align-items:center;justify-content:center">
                            <div style="width:10px;height:10px;border-radius:3px;background:{{ $c }}88"></div>
                        </div>
                        @endforeach
                    </div>
                </div>

                <!-- Badge QR -->
                <div class="animate-float2" style="position:absolute;top:-20px;right:-20px;background:rgba(255,255,255,.1);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px;box-shadow:0 16px 40px rgba(0,0,0,.3)">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none">
                        <rect x="3" y="3" width="7" height="7" rx="1" stroke="white" stroke-width="1.5"/>
                        <rect x="14" y="3" width="7" height="7" rx="1" stroke="white" stroke-width="1.5"/>
                        <rect x="3" y="14" width="7" height="7" rx="1" stroke="white" stroke-width="1.5"/>
                        <rect x="5" y="5" width="3" height="3" fill="white"/>
                        <rect x="16" y="5" width="3" height="3" fill="white"/>
                        <rect x="5" y="16" width="3" height="3" fill="white"/>
                        <path d="M14 14h2v2h-2zM16 16h2v2h-2zM18 14h2v2h-2zM14 18h2v2h-2zM18 18h2v2h-2z" fill="white"/>
                    </svg>
                    <div style="font-size:10px;color:rgba(255,255,255,.7);text-align:center;margin-top:4px;font-weight:600">QR Code</div>
                </div>

                <!-- Badge "En ligne" -->
                <div style="position:absolute;bottom:-16px;left:10px;background:rgba(16,185,129,.15);backdrop-filter:blur(16px);border:1px solid rgba(16,185,129,.3);border-radius:50px;padding:8px 16px;display:flex;align-items:center;gap:8px">
                    <span style="width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 8px #10b981;display:inline-block"></span>
                    <span style="font-size:12px;color:#6ee7b7;font-weight:600">Page en ligne</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Vague bas -->
    <div style="position:absolute;bottom:0;left:0;right:0;line-height:0">
        <svg viewBox="0 0 1440 80" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="width:100%;display:block">
            <path d="M0,40 C360,80 1080,0 1440,40 L1440,80 L0,80 Z" fill="#f8fafc"/>
        </svg>
    </div>
</section>

<!-- ══════════════════════ AVANTAGES ══════════════════════ -->
<section id="advantages" style="background:#f8fafc;padding:100px 0">
    <div class="container mx-auto px-4">

        <div style="text-align:center;margin-bottom:64px">
            <div style="display:inline-flex;align-items:center;gap:8px;background:#e0f2fe;border-radius:50px;padding:6px 18px;margin-bottom:16px">
                <span style="font-size:13px;font-weight:700;color:#0369a1;text-transform:uppercase;letter-spacing:.08em">Pourquoi AZ Senegal</span>
            </div>
            <h2 style="font-size:clamp(2rem,4vw,3rem);font-weight:900;color:#0f2a45;line-height:1.15;letter-spacing:-.02em;margin-bottom:16px">
                Tout ce dont vous avez besoin<br>
                <span class="gradient-text-dark">pour briller en ligne</span>
            </h2>
            <p style="font-size:17px;color:#64748b;max-width:540px;margin:0 auto;line-height:1.7">
                Une solution simple et puissante pour les entrepreneurs, commerçants et professionnels sénégalais.
            </p>
        </div>

        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px">
            @foreach([
                ['icon'=>'M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z','color'=>'#08a3ff','bg'=>'#e0f2fe','title'=>'Partage instantané','desc'=>'Partagez votre carte via QR code ou lien direct en un seul clic.'],
                ['icon'=>'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z','color'=>'#10b981','bg'=>'#d1fae5','title'=>'Mise à jour en temps réel','desc'=>'Modifiez vos informations à tout moment, elles se mettent à jour partout.'],
                ['icon'=>'M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4','color'=>'#f59e0b','bg'=>'#fef3c7','title'=>'Vitrine produits','desc'=>'Affichez vos produits avec photos, descriptions et messages vocaux.'],
                ['icon'=>'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z','color'=>'#8b5cf6','bg'=>'#ede9fe','title'=>'Sécurisé & Fiable','desc'=>'Vos données sont protégées. Disponible 24h/24 et 7j/7.'],
            ] as $f)
            <div class="card-hover" style="background:#fff;border-radius:24px;padding:32px;box-shadow:0 4px 24px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.05)">
                <div style="width:56px;height:56px;border-radius:18px;background:{{ $f['bg'] }};display:flex;align-items:center;justify-content:center;margin-bottom:20px">
                    <svg width="26" height="26" fill="none" stroke="{{ $f['color'] }}" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="{{ $f['icon'] }}"/>
                    </svg>
                </div>
                <h3 style="font-size:17px;font-weight:800;color:#0f2a45;margin-bottom:10px">{{ $f['title'] }}</h3>
                <p style="font-size:14px;color:#64748b;line-height:1.7">{{ $f['desc'] }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>

<!-- ══════════════════════ COMMENT ÇA MARCHE ══════════════════════ -->
<section id="how-it-works" style="background:#fff;padding:100px 0">
    <div class="container mx-auto px-4">

        <div style="text-align:center;margin-bottom:72px">
            <div style="display:inline-flex;align-items:center;gap:8px;background:#e0f2fe;border-radius:50px;padding:6px 18px;margin-bottom:16px">
                <span style="font-size:13px;font-weight:700;color:#0369a1;text-transform:uppercase;letter-spacing:.08em">Démarrez en 3 minutes</span>
            </div>
            <h2 style="font-size:clamp(2rem,4vw,3rem);font-weight:900;color:#0f2a45;letter-spacing:-.02em">
                Comment ça marche ?
            </h2>
        </div>

        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px;position:relative">
            @foreach([
                ['num'=>'01','color'=>'#08a3ff','title'=>'Inscrivez-vous','desc'=>'Créez votre compte en quelques secondes avec votre nom et numéro de téléphone.','icon'=>'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'],
                ['num'=>'02','color'=>'#8b5cf6','title'=>'Personnalisez','desc'=>'Ajoutez votre logo, vos produits, vos réseaux sociaux et vos coordonnées.','icon'=>'M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'],
                ['num'=>'03','color'=>'#10b981','title'=>'Partagez','desc'=>'Obtenez votre QR code et votre lien unique. Partagez-les partout !','icon'=>'M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z'],
            ] as $s)
            <div style="text-align:center;position:relative">
                <!-- Numéro -->
                <div style="position:relative;display:inline-flex;align-items:center;justify-content:center;margin-bottom:24px">
                    <div style="width:72px;height:72px;border-radius:24px;background:linear-gradient(135deg,{{ $s['color'] }}22,{{ $s['color'] }}44);display:flex;align-items:center;justify-content:center;border:2px solid {{ $s['color'] }}33">
                        <svg width="30" height="30" fill="none" stroke="{{ $s['color'] }}" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="{{ $s['icon'] }}"/>
                        </svg>
                    </div>
                    <div style="position:absolute;top:-10px;right:-10px;width:26px;height:26px;border-radius:8px;background:{{ $s['color'] }};display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#fff">{{ $s['num'] }}</div>
                </div>
                <h3 style="font-size:19px;font-weight:800;color:#0f2a45;margin-bottom:12px">{{ $s['title'] }}</h3>
                <p style="font-size:15px;color:#64748b;line-height:1.7;max-width:260px;margin:0 auto">{{ $s['desc'] }}</p>
            </div>
            @endforeach
        </div>

        <div style="text-align:center;margin-top:56px">
            <a href="/register" class="btn-primary" style="display:inline-flex;align-items:center;gap:10px;padding:18px 40px;border-radius:16px;font-weight:700;font-size:17px;color:#fff;text-decoration:none;box-shadow:0 12px 40px rgba(8,163,255,.4)">
                <span>Commencer maintenant</span>
                <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
            </a>
        </div>
    </div>
</section>

<!-- ══════════════════════ TARIFS ══════════════════════ -->
<section id="pricing" style="background:linear-gradient(135deg,#f0f9ff,#f8fafc);padding:100px 0">
    <div class="container mx-auto px-4">

        <div style="text-align:center;margin-bottom:64px">
            <div style="display:inline-flex;align-items:center;gap:8px;background:#e0f2fe;border-radius:50px;padding:6px 18px;margin-bottom:16px">
                <span style="font-size:13px;font-weight:700;color:#0369a1;text-transform:uppercase;letter-spacing:.08em">Nos offres</span>
            </div>
            <h2 style="font-size:clamp(2rem,4vw,3rem);font-weight:900;color:#0f2a45;letter-spacing:-.02em;margin-bottom:14px">
                Choisissez votre plan
            </h2>
            <p style="font-size:16px;color:#64748b">Un paiement unique. Pas d'abonnement mensuel.</p>
        </div>

        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;max-width:720px;margin:0 auto">

            <!-- Offre 1 -->
            <div class="card-hover" style="background:#fff;border-radius:28px;padding:36px;box-shadow:0 4px 24px rgba(0,0,0,.07);border:2px solid #e2e8f0;position:relative">
                <div style="font-size:13px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px">Essentiel</div>
                <div style="margin-bottom:8px">
                    <span style="font-size:48px;font-weight:900;color:#0f2a45;letter-spacing:-.03em">5 000</span>
                    <span style="font-size:16px;color:#64748b;font-weight:600"> FCFA</span>
                </div>
                <div style="font-size:13px;color:#94a3b8;margin-bottom:28px">Paiement unique</div>

                <div style="height:1px;background:#f1f5f9;margin-bottom:24px"></div>

                <ul style="list-style:none;padding:0;margin:0 0 32px 0;display:flex;flex-direction:column;gap:14px">
                    @foreach(['1 carte de visite PVC avec QR code','1 porte-clés avec QR code','1 compte personnalisable'] as $item)
                    <li style="display:flex;align-items:center;gap:12px;font-size:15px;color:#334155">
                        <span style="width:22px;height:22px;border-radius:7px;background:#d1fae5;display:flex;align-items:center;justify-content:center;flex-shrink:0">
                            <svg width="12" height="12" fill="none" stroke="#10b981" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                        </span>
                        {{ $item }}
                    </li>
                    @endforeach
                </ul>

                <a href="/register" style="display:block;text-align:center;padding:15px;border-radius:14px;font-weight:700;font-size:15px;color:#0f2a45;text-decoration:none;background:#f1f5f9;border:2px solid #e2e8f0;transition:all .3s" onmouseover="this.style.background='#e2e8f0'" onmouseout="this.style.background='#f1f5f9'">
                    Choisir cette offre
                </a>
            </div>

            <!-- Offre 2 (populaire) -->
            <div class="card-hover" style="background:linear-gradient(135deg,#041d38,#063660);border-radius:28px;padding:36px;box-shadow:0 24px 64px rgba(4,93,152,.4);border:2px solid rgba(8,163,255,.3);position:relative;overflow:hidden">
                <!-- Décor -->
                <div style="position:absolute;top:-40px;right:-40px;width:180px;height:180px;border-radius:50%;background:rgba(8,163,255,.08);pointer-events:none"></div>

                <div style="display:inline-block;background:linear-gradient(135deg,#08a3ff,#045d98);border-radius:50px;padding:5px 14px;font-size:12px;font-weight:700;color:#fff;margin-bottom:12px;letter-spacing:.05em">
                    ⭐ POPULAIRE
                </div>
                <div style="font-size:13px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px">Premium</div>
                <div style="margin-bottom:8px">
                    <span style="font-size:48px;font-weight:900;color:#fff;letter-spacing:-.03em">8 000</span>
                    <span style="font-size:16px;color:rgba(255,255,255,.6);font-weight:600"> FCFA</span>
                </div>
                <div style="font-size:13px;color:rgba(255,255,255,.35);margin-bottom:28px">Paiement unique</div>

                <div style="height:1px;background:rgba(255,255,255,.1);margin-bottom:24px"></div>

                <ul style="list-style:none;padding:0;margin:0 0 32px 0;display:flex;flex-direction:column;gap:14px">
                    @foreach(['1 carte de visite PVC avec QR code','1 porte-clés avec QR code','1 compte personnalisable','50 étiquettes avec QR code'] as $item)
                    <li style="display:flex;align-items:center;gap:12px;font-size:15px;color:rgba(255,255,255,.85)">
                        <span style="width:22px;height:22px;border-radius:7px;background:rgba(8,163,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(8,163,255,.4)">
                            <svg width="12" height="12" fill="none" stroke="#08a3ff" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                        </span>
                        {{ $item }}
                    </li>
                    @endforeach
                </ul>

                <a href="/register" class="btn-primary" style="display:block;text-align:center;padding:15px;border-radius:14px;font-weight:700;font-size:15px;color:#fff;text-decoration:none;box-shadow:0 8px 24px rgba(8,163,255,.5)">
                    <span>Choisir cette offre</span>
                </a>
            </div>
        </div>
    </div>
</section>

<!-- ══════════════════════ CTA FINAL ══════════════════════ -->
<section style="background:linear-gradient(135deg,#020f1e 0%,#041d38 50%,#063660 100%);padding:100px 0;position:relative;overflow:hidden">
    <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;height:400px;background:radial-gradient(ellipse,rgba(8,163,255,.12),transparent 70%);pointer-events:none"></div>

    <div class="container mx-auto px-4" style="text-align:center;position:relative;z-index:1">
        <div style="display:inline-flex;align-items:center;gap:8px;background:rgba(8,163,255,.1);border:1px solid rgba(8,163,255,.3);border-radius:50px;padding:6px 18px;margin-bottom:24px">
            <span style="width:7px;height:7px;border-radius:50%;background:#08a3ff;display:inline-block;box-shadow:0 0 8px #08a3ff"></span>
            <span style="color:#7dcfff;font-size:13px;font-weight:600">Rejoignez des centaines d'entrepreneurs</span>
        </div>

        <h2 style="font-size:clamp(2rem,5vw,3.5rem);font-weight:900;color:#fff;letter-spacing:-.02em;line-height:1.15;margin-bottom:20px">
            Prêt à booster votre<br>
            <span class="gradient-text">présence digitale ?</span>
        </h2>

        <p style="font-size:18px;color:rgba(255,255,255,.6);margin-bottom:44px;max-width:500px;margin-left:auto;margin-right:auto;line-height:1.7">
            Créez votre carte de visite digitale en moins de 3 minutes et commencez à recevoir des clients.
        </p>

        <div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap">
            <a href="/register" class="btn-primary" style="display:inline-flex;align-items:center;gap:10px;padding:18px 40px;border-radius:16px;font-weight:700;font-size:17px;color:#fff;text-decoration:none;box-shadow:0 12px 40px rgba(8,163,255,.5)">
                <span>S'inscrire maintenant</span>
                <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
            </a>
            <a href="/login" style="display:inline-flex;align-items:center;gap:10px;padding:18px 40px;border-radius:16px;font-weight:600;font-size:17px;color:rgba(255,255,255,.8);text-decoration:none;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(10px);transition:all .3s" onmouseover="this.style.background='rgba(255,255,255,.12)'" onmouseout="this.style.background='rgba(255,255,255,.07)'">
                J'ai déjà un compte
            </a>
        </div>
    </div>
</section>

<!-- ══════════════════════ FOOTER ══════════════════════ -->
<footer style="background:#020f1e;padding:64px 0 32px">
    <div class="container mx-auto px-4">
        <div style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;margin-bottom:48px">

            <div>
                <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
                    <img src="/images/icone-logo.png" alt="AZ Senegal" style="height:36px">
                </div>
                <p style="font-size:14px;color:rgba(255,255,255,.45);line-height:1.8;max-width:300px">
                    Votre solution de carte de visite digitale au Sénégal. Moderne, simple et efficace pour tous les professionnels.
                </p>
                <p style="font-size:13px;color:rgba(255,255,255,.25);margin-top:20px">&copy; 2022 AZ Senegal. Tous droits réservés.</p>
            </div>

            <div>
                <h3 style="font-size:14px;font-weight:700;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.1em;margin-bottom:20px">Navigation</h3>
                <ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px">
                    @foreach(['#home'=>'Accueil','#advantages'=>'Avantages','#how-it-works'=>'Fonctionnement','#pricing'=>'Tarifs'] as $href=>$label)
                    <li><a href="{{ $href }}" style="font-size:14px;color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s" onmouseover="this.style.color='#08a3ff'" onmouseout="this.style.color='rgba(255,255,255,.45)'">{{ $label }}</a></li>
                    @endforeach
                </ul>
            </div>

            <div>
                <h3 style="font-size:14px;font-weight:700;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.1em;margin-bottom:20px">Mon espace</h3>
                <ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px">
                    <li><a href="/login" style="font-size:14px;color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s" onmouseover="this.style.color='#08a3ff'" onmouseout="this.style.color='rgba(255,255,255,.45)'">Se connecter</a></li>
                    <li><a href="/register" style="font-size:14px;color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s" onmouseover="this.style.color='#08a3ff'" onmouseout="this.style.color='rgba(255,255,255,.45)'">Créer un compte</a></li>
                </ul>
            </div>
        </div>

        <div style="height:1px;background:rgba(255,255,255,.07);margin-bottom:24px"></div>
        <div style="text-align:center;font-size:13px;color:rgba(255,255,255,.2)">
            Conçu avec ❤️ pour les entrepreneurs sénégalais
        </div>
    </div>
</footer>

<style>
@media(max-width:900px){
    .lg-grid-two{grid-template-columns:1fr!important;gap:48px!important}
    .lg-grid-two > div:last-child{display:none}
}
</style>

@endsection