@extends('layouts.app')

@section('content')
<section class="hero">
    <div class="container hero-inner">
        <div>
            <span class="eyebrow" style="color:var(--orange-300)">Espace professionnel</span>
            <h1 style="margin:14px 0 16px">Devenez <em>incontournable</em> dans votre ville.</h1>
            <p class="lead">
                Fiche établissement, annonces illimitées, avis clients, publication d'événements :
                tout ce qu'il faut pour capter la clientèle locale au bon moment.
            </p>
            <div class="row-center" style="gap:12px;margin-top:24px;flex-wrap:wrap">
                <a href="{{ auth()->check() ? url('/pro/fiche') : url('/inscription') }}" class="btn btn-primary btn-lg">Créer ma fiche gratuitement</a>
                <a href="{{ url('/tarifs') }}" class="btn btn-white btn-lg">Voir les tarifs</a>
            </div>
            <div class="hero-badges">
                <span class="hero-badge"><x-icon name="check-circle"/> Souscription immédiate</span>
                <span class="hero-badge"><x-icon name="check-circle"/> Starter dès {{ \App\Support\Dates::euros(config('billing.plans.starter.amount'), true) }} / mois</span>
                <span class="hero-badge"><x-icon name="check-circle"/> Assistance française</span>
            </div>
        </div>

        <div class="search-card" style="padding:26px">
            <h2 style="font-size:1.15rem">Choisissez votre formule</h2>
            <p class="small muted" style="margin:6px 0 16px">
                Souscription en ligne, paiement sécurisé par Stripe. Starter s'engage sur
                {{ config('billing.plans.starter.engagement_mois') }} mois, Premium se règle à l'année.
            </p>

            <div class="stack">
                @foreach(config('billing.plans') as $cle => $plan)
                    <form method="post" action="{{ url('/abonnement/'.$cle) }}">
                        @csrf
                        <button type="submit" class="card card-pad card-hover"
                                style="width:100%;text-align:left;cursor:pointer;border:1px solid {{ $plan['featured'] ? 'var(--orange)' : 'var(--line)' }}">
                            <span class="row-between" style="gap:12px;align-items:flex-start">
                                <span style="min-width:0">
                                    <strong style="display:block;color:var(--ink-900)">{{ $plan['name'] }}</strong>
                                    <span class="small muted">{{ $plan['features'][0] }} · {{ $plan['features'][1] }}</span>
                                </span>
                                <span style="text-align:right;white-space:nowrap">
                                    <strong style="color:var(--orange-700);font-size:1.15rem">{{ \App\Support\Dates::euros($plan['amount'], true) }}</strong>
                                    <span class="tiny muted" style="display:block">
                                        {{ $plan['unite'] }}@if($plan['engagement_mois']) · {{ $plan['engagement_mois'] }} mois @endif
                                    </span>
                                </span>
                            </span>
                        </button>
                    </form>
                @endforeach
            </div>

            <a href="{{ url('/tarifs') }}" class="btn btn-ghost btn-block btn-sm" style="margin-top:12px">
                Comparer les formules en détail
            </a>
            <p class="tiny muted center" style="margin:10px 0 0">
                Déjà un compte pro ? <a href="{{ url('/pro/fiche') }}" style="color:var(--orange-700)">Gérer ma fiche</a>
            </p>
        </div>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="section-head">
            <div>
                <span class="eyebrow">Ce que vous obtenez</span>
                <h2 style="margin-top:8px">Une vitrine complète, pensée pour le local</h2>
            </div>
        </div>
        <div class="grid grid-3">
            @foreach([
                ['store', 'Fiche établissement', 'Logo, photos, horaires, services, moyens de paiement et itinéraire.'],
                ['star', 'Avis clients', 'Collectez et répondez aux avis pour rassurer les nouveaux clients.'],
                ['tag', 'Annonces illimitées', 'Publiez vos offres, stocks, promotions et recrutements.'],
                ['calendar', 'Événements', 'Annoncez vos portes ouvertes, soldes et animations dans l\'agenda.'],
                ['chart', 'Statistiques', 'Vues, appels, itinéraires demandés : mesurez votre visibilité.'],
                ['target', 'Mise en avant locale', 'Apparaissez en tête sur votre commune et vos catégories clés.'],
            ] as [$i, $t, $d])
                <div class="card card-pad">
                    <span class="tile-icon"><x-icon :name="$i"/></span>
                    <h3 style="font-size:1.02rem;margin:12px 0 6px">{{ $t }}</h3>
                    <p class="small muted" style="margin:0">{{ $d }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>

<section class="section section-alt">
    <div class="container">
        <div class="section-head">
            <div><span class="eyebrow">Ils sont déjà sur CityMag</span><h2 style="margin-top:8px">Des fiches qui inspirent confiance</h2></div>
            <a href="{{ url('/annuaire') }}" class="btn btn-outline">Voir l'annuaire <x-icon name="arrow-right"/></a>
        </div>
        <div class="grid grid-3">
            @foreach($pros as $pro)<x-pro-card :pro="$pro"/>@endforeach
        </div>
    </div>
</section>

<section class="section-tight">
    <div class="container">
        <div class="cta">
            <div>
                <h2>Prêt à développer votre visibilité locale ?</h2>
                <p>Créez votre fiche en 5 minutes, puis choisissez Starter ou Premium quand vous le voulez.</p>
            </div>
            <a href="{{ url('/inscription') }}" class="btn btn-primary btn-lg">Créer ma fiche <x-icon name="arrow-right"/></a>
        </div>
    </div>
</section>
@endsection