@extends('layouts.app')
@php
    use App\Support\Dates;
    $plans   = config('billing.plans');
    $options = config('billing.options');
    $part    = config('billing.particulier');
    $u       = auth()->user();
    $actuel  = $u?->planKey();
    $engage  = $u?->engagementJusquAu();
@endphp

@section('content')
<section class="section-tight section-alt">
    <div class="container center" style="padding:34px 0">
        <span class="eyebrow">Offres &amp; visibilité</span>
        <h1 style="margin:10px 0 10px">Trois offres, un prix clair</h1>
        <p class="lead" style="max-width:62ch;margin:0 auto">
            Le dépôt d'annonce reste gratuit pour les particuliers — seule l'immobilier est facturée
            {{ Dates::euros($part['amount'], true) }} par annonce. Les professionnels choisissent
            entre {{ $plans['starter']['name'] }} au mois et {{ $plans['premium']['name'] }} à l'année.
        </p>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="grid grid-3">

            {{-- Offre Particulier : gratuite, sauf l'immobilier facturée à l'annonce --}}
            <div class="panel">
                <h2 style="font-size:1.15rem">{{ $part['name'] }}</h2>
                <div style="margin:14px 0 4px"><span class="price-tag">Gratuit</span></div>
                <p class="small muted">sur tout CityMag</p>
                <hr>
                <div class="stack">
                    @foreach([
                        'Dépôt d\'annonce gratuit', \App\Models\User::QUOTA_PARTICULIER.' annonces actives simultanément',
                        '10 photos par annonce', 'Messagerie sécurisée',
                        'Alertes e-mail illimitées', 'Statistiques de consultation',
                    ] as $f)
                        <div class="row" style="gap:9px">
                            <x-icon name="check" style="width:17px;height:17px;color:var(--green);flex:none;margin-top:2px"/>
                            <span class="small">{{ $f }}</span>
                        </div>
                    @endforeach
                    <div class="row" style="gap:9px">
                        <x-icon name="building" style="width:17px;height:17px;color:var(--orange-700);flex:none;margin-top:2px"/>
                        <span class="small">
                            <strong>{{ Dates::euros($part['amount'], true) }} {{ $part['unite'] }}</strong> —
                            réglée en ligne au dépôt, l'annonce est publiée dès le paiement.
                        </span>
                    </div>
                </div>
                <a href="{{ url('/deposer') }}" class="btn btn-outline btn-block btn-lg" style="margin-top:22px">
                    Déposer une annonce
                </a>
                <p class="tiny muted center" style="margin:10px 0 0">
                    Aucun abonnement · Aucune carte enregistrée hors immobilier
                </p>
            </div>

            {{-- Formules payantes : souscription directe --}}
            @foreach($plans as $cle => $plan)
                @php $estActuel = $actuel === $cle; @endphp
                <div class="panel" style="{{ $plan['featured'] ? 'border-color:var(--orange);box-shadow:var(--shadow);position:relative' : '' }}">
                    @if($plan['featured'])
                        <span class="badge badge-orange" style="position:absolute;top:-11px;left:50%;transform:translateX(-50%)">Le plus choisi</span>
                    @endif

                    <h2 style="font-size:1.15rem">{{ $plan['name'] }}</h2>
                    <div style="margin:14px 0 4px"><span class="price-tag">{{ Dates::euros($plan['amount'], true) }}</span></div>
                    <p class="small muted">
                        {{ $plan['unite'] }}@if($plan['engagement_mois']) · engagement {{ $plan['engagement_mois'] }} mois @endif
                    </p>
                    <hr>

                    <div class="stack">
                        @foreach($plan['features'] as $f)
                            <div class="row" style="gap:9px">
                                <x-icon name="check" style="width:17px;height:17px;color:var(--green);flex:none;margin-top:2px"/>
                                <span class="small">{{ $f }}</span>
                            </div>
                        @endforeach
                    </div>

                    @if($estActuel)
                        <span class="btn btn-outline btn-block btn-lg" style="margin-top:22px;pointer-events:none">
                            <x-icon name="check-circle"/> Votre formule actuelle
                        </span>
                        @if($engage)
                            <p class="tiny center" style="margin:8px 0 0;color:var(--orange-700)">
                                Engagée jusqu'au {{ $engage->translatedFormat('j F Y') }}
                            </p>
                        @endif
                    @elseif($u && $u->hasProPlan())
                        <form method="post" action="{{ url('/abonnement/changer') }}" style="margin-top:22px">
                            @csrf
                            <input type="hidden" name="plan" value="{{ $cle }}">
                            <button class="btn {{ $plan['featured'] ? 'btn-primary' : 'btn-outline' }} btn-block btn-lg" type="submit">
                                Passer à {{ $plan['name'] }}
                            </button>
                        </form>
                    @else
                        <form method="post" action="{{ url('/abonnement/'.$cle) }}" style="margin-top:22px">
                            @csrf
                            <button class="btn {{ $plan['featured'] ? 'btn-primary' : 'btn-outline' }} btn-block btn-lg" type="submit">
                                <x-icon name="wallet"/> {{ $plan['cta'] }}
                            </button>
                        </form>
                    @endif

                    <p class="tiny muted center" style="margin:10px 0 0">
                        @if($plan['engagement_mois'])
                            Engagement minimum {{ $plan['engagement_mois'] }} mois · Paiement sécurisé Stripe
                        @else
                            Sans engagement · Résiliable en un clic · Paiement sécurisé Stripe
                        @endif
                    </p>
                </div>
            @endforeach
        </div>

        <h2 style="margin:44px 0 8px;font-size:1.35rem">Options à l'unité</h2>
        <p class="small muted" style="margin-bottom:18px">
            Elles s'achètent depuis l'annonce concernée, en deux clics, sans abonnement.
            @auth
                <a href="{{ url('/compte/annonces') }}" style="color:var(--orange-700)">Choisir une annonce à booster</a>
            @endauth
        </p>

        <div class="grid grid-4">
            @foreach($options as $option)
                <div class="card card-pad">
                    <span class="tile-icon"><x-icon :name="$option['icon']"/></span>
                    <h3 style="font-size:1rem;margin:12px 0 4px">{{ $option['name'] }}</h3>
                    <p class="small muted" style="margin-bottom:10px">{{ $option['desc'] }}</p>
                    <strong style="color:var(--orange-700);font-size:1.1rem">{{ Dates::euros($option['amount'], true) }}</strong>
                </div>
            @endforeach
        </div>

        <div class="panel" style="margin-top:34px">
            <h2 style="font-size:1.15rem;margin-bottom:14px">Questions fréquentes</h2>
            @foreach([
                ['Le dépôt est-il vraiment gratuit ?', 'Oui, sur tout CityMag : un particulier publie jusqu\'à '.\App\Models\User::QUOTA_PARTICULIER.' annonces actives sans payer, photos et messagerie incluses. Seules les annonces immobilières sont facturées '.Dates::euros($part['amount'], true).' l\'unité.'],
                ['Pourquoi l\'immobilier est-il payant ?', 'C\'est la seule rubrique facturée à l\'annonce, au dépôt, en paiement unique. L\'annonce reste « en attente » tant que le règlement n\'est pas confirmé, puis part en ligne automatiquement.'],
                ['Puis-je changer de formule ?', 'Oui, depuis vos achats, une fois l\'engagement éventuel arrivé à son terme. Le changement est facturé au prorata et prend effet immédiatement.'],
                ['Y a-t-il un engagement ?', 'Starter est souscrit pour '.$plans['starter']['engagement_mois'].' mois minimum, puis se poursuit au mois. Premium est annuel et sans engagement : vous pouvez résilier quand vous le souhaitez, les avantages courant jusqu\'à la fin de la période payée.'],
                ['Comment sont facturées les options ?', 'À l\'unité, au moment de l\'achat. Le reçu Stripe est disponible immédiatement dans « Achats & factures ».'],
                ['Quels moyens de paiement acceptez-vous ?', 'Cartes bancaires et portefeuilles pris en charge par Stripe. CityMag ne stocke aucune donnée bancaire.'],
            ] as [$q, $a])
                <div style="padding:14px 0;border-bottom:1px solid var(--line-soft)">
                    <strong style="color:var(--ink-900);display:block;margin-bottom:4px">{{ $q }}</strong>
                    <span class="small muted">{{ $a }}</span>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endsection