@extends('front.layout.app')

@section('content')

<div class="max-w-7xl mx-auto py-12 px-4 space-y-10">

    @include('front.plan_media.partials.header', ['showSelectionHint' => true])

    <div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
        <div class="flex items-start gap-3">
            <span class="flex size-9 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
                </svg>
            </span>
            <div>
                <h2 class="text-lg font-bold text-primary">Les packs tarifaires</h2>
                <p class="mt-1 text-sm text-gray-600">
                    Le tarif d'une opération seule reste inchangé, au tarif plein indiqué sur le plan média.
                    À partir de deux opérations, nous proposons une remise progressive sur les frais d'agence Boosty Media.
                </p>
            </div>
        </div>

        <div class="mt-5 grid grid-cols-2 gap-3 sm:grid-cols-5">
            @php
                $packs = [
                    ['name' => '—',      'ops' => '1 opération',       'discount' => 'Tarif plein', 'highlight' => false],
                    ['name' => 'Duo',    'ops' => '2 opérations',      'discount' => '-5 %',        'highlight' => false],
                    ['name' => 'Boost',  'ops' => '3 opérations',      'discount' => '-10 %',       'highlight' => false],
                    ['name' => 'Gold',   'ops' => '4 opérations',      'discount' => '-15 %',       'highlight' => false],
                    ['name' => 'Impact', 'ops' => '5 opérations et +', 'discount' => '-25 %',       'highlight' => true],
                ];
            @endphp
            @foreach($packs as $pack)
                <div class="rounded-lg border p-3 text-center {{ $pack['highlight'] ? 'border-primary bg-primary text-primary-foreground' : 'border-gray-200 bg-gray-50 text-gray-700' }}">
                    @if($pack['name'] !== '—')
                        <p class="text-[11px] font-semibold uppercase tracking-wide {{ $pack['highlight'] ? 'text-primary-foreground/80' : 'text-secondary' }}">
                            Pack {{ $pack['name'] }}
                        </p>
                    @endif
                    <p class="mt-1 text-xl font-bold">{{ $pack['discount'] }}</p>
                    <p class="mt-1 text-[11px] {{ $pack['highlight'] ? 'text-primary-foreground/80' : 'text-gray-500' }}">{{ $pack['ops'] }}</p>
                </div>
            @endforeach
        </div>

        <p class="mt-4 text-xs text-gray-500">
            La remise s'applique uniquement sur les frais d'agence Boosty Media et non sur la dotation.
        </p>
    </div>

    <livewire:front.plan-media-selection :proposal="$proposal" />

</div>

@endsection