@extends('layouts.app')

@section('title', 'Abonnement activé')

@section('content')
<div style="max-width: 540px; margin: 60px auto; text-align: center;">

    <div style="width: 72px; height: 72px; background: var(--success-bg); border-radius: 50%;
                display: flex; align-items: center; justify-content: center; margin: 0 auto 24px;">
        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
             style="width: 36px; height: 36px; color: var(--success);">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
        </svg>
    </div>

    <h1 style="font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 600;
               color: var(--navy); margin-bottom: 12px;">
        Abonnement activé !
    </h1>

    <p style="color: var(--text-muted); font-size: 15px; margin-bottom: 32px; line-height: 1.6;">
        Votre essai gratuit de 7 jours a démarré. Vous avez accès à toutes les fonctionnalités de TraçaChef.
        Aucun prélèvement avant la fin de la période d'essai.
    </p>

    <a href="{{ route('dashboard') }}"
       style="display: inline-block; padding: 13px 32px; background: var(--navy);
              color: white; border-radius: 8px; text-decoration: none;
              font-size: 14px; font-weight: 500; letter-spacing: 0.04em;">
        Accéder à mon tableau de bord
    </a>

</div>
@endsection