@php
    $intervalLabels = ['month' => __('Mensual'), 'year' => __('Anual'), 'one_time' => __('Pago único')];
    $defaultInterval = $intervals->contains(\App\Enums\Commerce\BillingInterval::Month) ? 'month' : ($intervals->first()?->value ?? 'month');
    $firstImage = $microapp->media->first();
    // Se prepara aquí: dentro de la plantilla, "@context" se tomaría por una directiva de Blade.
    $jsonLd = json_encode([
        '@context' => 'https://schema.org',
        '@type' => 'SoftwareApplication',
        'name' => $microapp->name,
        'description' => $microapp->seoDescription(),
        'applicationCategory' => 'BusinessApplication',
        'operatingSystem' => 'Web',
        'url' => route('catalog.show', $microapp->slug),
        'offers' => $plans->flatMap(fn ($plan) => $plan->activePrices->map(fn ($price) => [
            '@type' => 'Offer', 'name' => $plan->name, 'price' => number_format($price->amount / 100, 2, '.', ''), 'priceCurrency' => $price->currency,
        ]))->values()->all(),
    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_AMP);
@endphp
<x-layouts.public :title="$microapp->seoTitle()" :description="$microapp->seoDescription()" :canonical="route('catalog.show', $microapp->slug)" :image="$firstImage?->url()">
    <x-slot:head>
        <script type="application/ld+json">{!! $jsonLd !!}</script>
    </x-slot:head>

    {{-- Cabecera de la landing --}}
    <section class="border-b border-slate-200 bg-gradient-to-b from-indigo-50/60 to-white">
        <div class="mx-auto grid max-w-6xl gap-10 px-4 py-12 sm:px-6 sm:py-16 lg:grid-cols-2 lg:items-center">
            <div>
                <nav aria-label="{{ __('Migas de pan') }}" class="mb-6 text-sm text-slate-500">
                    <a href="{{ route('catalog.index') }}" class="hover:text-slate-700">{{ __('Aplicaciones') }}</a>
                    @if ($microapp->category)
                        <span aria-hidden="true"> / </span>
                        <a href="{{ route('catalog.index', ['categoria' => $microapp->category->slug]) }}" class="hover:text-slate-700">{{ $microapp->category->name }}</a>
                    @endif
                </nav>
                <x-microapp-icon :microapp="$microapp" size="lg" />
                <h1 class="mt-5 text-3xl font-semibold tracking-tight text-slate-900 sm:text-4xl">{{ $microapp->name }}</h1>
                <p class="mt-4 text-lg leading-8 text-slate-600">{{ $microapp->tagline }}</p>
                <div class="mt-8 flex flex-wrap gap-3">
                    @if ($plans->isNotEmpty() && $microapp->is_available)
                        <x-button href="#planes">{{ __('Ver planes y precios') }}</x-button>
                    @else
                        <x-badge color="amber">{{ __('Disponible próximamente') }}</x-badge>
                    @endif
                    @if (count($microapp->faqs ?? []) > 0)
                        <x-button variant="secondary" href="#preguntas">{{ __('Preguntas frecuentes') }}</x-button>
                    @endif
                </div>
            </div>
            @if ($firstImage)
                <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-lg">
                    <img src="{{ $firstImage->url() }}" alt="{{ $firstImage->alt ?: $microapp->name }}" width="{{ $firstImage->width }}" height="{{ $firstImage->height }}" class="h-auto w-full" fetchpriority="high">
                </div>
            @endif
        </div>
    </section>

    <div class="mx-auto max-w-6xl space-y-16 px-4 py-12 sm:px-6">
        @if ($microapp->description)
            <section aria-labelledby="titulo-descripcion" class="max-w-3xl">
                <h2 id="titulo-descripcion" class="text-xl font-semibold text-slate-900">{{ __('Qué es :name', ['name' => $microapp->name]) }}</h2>
                <div class="mt-4 space-y-4 text-base leading-7 text-slate-600">
                    @foreach (preg_split('/\R{2,}/', trim($microapp->description)) as $paragraph)
                        <p>{!! nl2br(e($paragraph)) !!}</p>
                    @endforeach
                </div>
            </section>
        @endif

        @if (count($microapp->features ?? []) || count($microapp->benefits ?? []))
            <section class="grid gap-10 lg:grid-cols-2">
                @if (count($microapp->features ?? []))
                    <div>
                        <h2 class="text-xl font-semibold text-slate-900">{{ __('Características principales') }}</h2>
                        <ul class="mt-5 space-y-3">
                            @foreach ($microapp->features as $feature)
                                <li class="flex gap-3 text-slate-700"><x-icon name="check-circle" class="mt-0.5 size-5 shrink-0 text-indigo-600" />{{ $feature }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                @if (count($microapp->benefits ?? []))
                    <div>
                        <h2 class="text-xl font-semibold text-slate-900">{{ __('Beneficios') }}</h2>
                        <ul class="mt-5 space-y-3">
                            @foreach ($microapp->benefits as $benefit)
                                <li class="flex gap-3 text-slate-700"><x-icon name="bolt" class="mt-0.5 size-5 shrink-0 text-emerald-600" />{{ $benefit }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </section>
        @endif

        @if (count($microapp->audiences ?? []))
            <section aria-labelledby="titulo-publico">
                <h2 id="titulo-publico" class="text-xl font-semibold text-slate-900">{{ __('Para quién es') }}</h2>
                <ul class="mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($microapp->audiences as $audience)
                        <li class="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700">{{ $audience }}</li>
                    @endforeach
                </ul>
            </section>
        @endif

        @if ($microapp->media->count() > 1)
            <section aria-labelledby="titulo-capturas">
                <h2 id="titulo-capturas" class="text-xl font-semibold text-slate-900">{{ __('Capturas') }}</h2>
                <ul class="mt-5 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($microapp->media->skip(1) as $media)
                        <li class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-xs">
                            <img src="{{ $media->url() }}" alt="{{ $media->alt ?: $microapp->name }}" width="{{ $media->width }}" height="{{ $media->height }}" loading="lazy" class="h-auto w-full">
                        </li>
                    @endforeach
                </ul>
            </section>
        @endif

        {{-- Planes y precios --}}
        <section id="planes" aria-labelledby="titulo-planes" class="scroll-mt-24" x-data="{ interval: '{{ $defaultInterval }}' }">
            <div class="flex flex-wrap items-end justify-between gap-4">
                <div>
                    <h2 id="titulo-planes" class="text-xl font-semibold text-slate-900">{{ __('Planes y precios') }}</h2>
                    <p class="mt-1 text-sm text-slate-500">{{ config('commerce.prices_include_tax') ? __('Precios con IVA incluido.') : __('Precios sin IVA.') }} {{ __('Puedes contratar para ti o para una organización que administres.') }}</p>
                </div>
                @if ($intervals->count() > 1)
                    <div class="inline-flex rounded-lg border border-slate-200 bg-slate-50 p-1" role="group" aria-label="{{ __('Periodicidad') }}">
                        @foreach ($intervals as $interval)
                            <button type="button" class="rounded-md px-3 py-1.5 text-sm font-medium" x-on:click="interval = '{{ $interval->value }}'"
                                x-bind:class="interval === '{{ $interval->value }}' ? 'bg-white text-slate-900 shadow-xs' : 'text-slate-600 hover:text-slate-900'"
                                x-bind:aria-pressed="interval === '{{ $interval->value }}'">{{ $intervalLabels[$interval->value] }}</button>
                        @endforeach
                    </div>
                @endif
            </div>

            @if ($plans->isEmpty() || ! $microapp->is_available)
                <x-empty-state class="mt-6" icon="tag" :title="__('Planes en preparación')" :description="__('Esta aplicación todavía no se puede contratar. Vuelve pronto.')" />
            @else
                <ul class="mt-8 grid gap-6 md:grid-cols-2 {{ ['lg:grid-cols-1', 'lg:grid-cols-2', 'lg:grid-cols-3'][min(3, $plans->count()) - 1] }}">
                    @foreach ($plans as $plan)
                        @php $promotion = $promotions[$plan->id] ?? null; @endphp
                        <li class="relative flex flex-col rounded-2xl border bg-white p-6 shadow-xs {{ $plan->is_highlighted ? 'border-indigo-500 ring-1 ring-indigo-500' : 'border-slate-200' }}">
                            @if ($plan->is_highlighted)
                                <span class="absolute -top-3 left-6 rounded-full bg-indigo-600 px-3 py-0.5 text-xs font-semibold text-white">{{ __('Recomendado') }}</span>
                            @endif
                            <h3 class="text-lg font-semibold text-slate-900">{{ $plan->name }}</h3>
                            @if ($plan->description)
                                <p class="mt-1 text-sm text-slate-500">{{ $plan->description }}</p>
                            @endif

                            @php
                                $planIntervals = $plan->activePrices->map(fn ($p) => $p->interval->value)->values();
                                $fallback = ! $planIntervals->contains($defaultInterval);
                            @endphp
                            @foreach ($plan->activePrices as $price)
                                @php $visibleByDefault = $price->interval->value === $defaultInterval || ($fallback && $loop->first); @endphp
                                <div x-show="interval === '{{ $price->interval->value }}' || (! @js($planIntervals).includes(interval) && {{ $loop->first ? 'true' : 'false' }})" @unless ($visibleByDefault) x-cloak @endunless class="mt-5">
                                    <p class="flex items-baseline gap-1">
                                        <span class="text-3xl font-semibold tracking-tight text-slate-900">{{ $price->isFree() ? __('Gratis') : \App\Support\Commerce\Money::format($price->amount, $price->currency, compact: true) }}</span>
                                        @if (! $price->isFree())
                                            <span class="text-sm text-slate-500">{{ $price->isRecurring() ? $price->interval->suffix() : __('pago único') }}</span>
                                        @endif
                                    </p>
                                    @if ($price->interval->value === 'year')
                                        <p class="text-xs text-slate-500">{{ __('Equivale a :amount al mes', ['amount' => \App\Support\Commerce\Money::format(intdiv($price->amount, 12), $price->currency)]) }}</p>
                                    @endif
                                    @if ($price->access_days)
                                        <p class="text-xs text-slate-500">{{ __('Acceso durante :days días', ['days' => $price->access_days]) }}</p>
                                    @endif
                                    @if ($promotion && ! $price->isFree())
                                        <p class="mt-2"><x-badge color="emerald">{{ $promotion->label() }}</x-badge></p>
                                    @endif
                                    @if ($plan->trial_days > 0 && $price->isRecurring())
                                        <p class="mt-2 text-sm font-medium text-indigo-700">{{ trans_choice('{1} :count día de prueba gratis|[2,*] :count días de prueba gratis', $plan->trial_days, ['count' => $plan->trial_days]) }}</p>
                                    @endif
                                    <div class="mt-5">
                                        <x-button class="w-full" :variant="$plan->is_highlighted ? 'primary' : 'secondary'" :href="route('checkout.create', ['plan' => $plan, 'precio' => $price->ulid])">
                                            {{ $price->isFree() ? __('Empezar gratis') : ($plan->trial_days > 0 && $price->isRecurring() ? __('Probar gratis') : __('Contratar')) }}
                                        </x-button>
                                    </div>
                                </div>
                            @endforeach

                            @if (count($plan->features ?? []))
                                <ul class="mt-6 space-y-2 border-t border-slate-100 pt-5 text-sm text-slate-700">
                                    @foreach ($plan->features as $feature)
                                        <li class="flex gap-2"><x-icon name="check" class="mt-0.5 size-4 shrink-0 text-indigo-600" />{{ $feature }}</li>
                                    @endforeach
                                </ul>
                            @endif
                            <p class="mt-4 text-xs text-slate-500">
                                {{ $plan->audience->label() }}@if ($plan->seats_limit) · {{ trans_choice('{1} :count usuario|[2,*] hasta :count usuarios', $plan->seats_limit, ['count' => $plan->seats_limit]) }}@endif
                            </p>
                        </li>
                    @endforeach
                </ul>
            @endif

            @if ($bundles->isNotEmpty())
                <div class="mt-8 rounded-xl border border-dashed border-slate-300 p-5 text-sm text-slate-600">
                    <p class="font-medium text-slate-900">{{ __('También incluida en paquetes') }}</p>
                    <ul class="mt-2 space-y-3">
                        @foreach ($bundles as $bundle)
                            <li>
                                <p>{{ $bundle->name }}: {{ $bundle->microapps->pluck('name')->join(', ', ' y ') }}</p>
                                @if ($bundle->plans->isNotEmpty() && $microapp->is_available)
                                    <ul class="mt-1 flex flex-wrap gap-2">
                                        @foreach ($bundle->plans as $bundlePlan)
                                            @foreach ($bundlePlan->activePrices as $price)
                                                <li>
                                                    <a href="{{ route('checkout.create', ['plan' => $bundlePlan, 'precio' => $price->ulid]) }}" class="inline-flex rounded-lg border border-slate-200 bg-white px-3 py-1.5 font-medium text-indigo-700 hover:border-indigo-300">
                                                        {{ __('Contratar :plan', ['plan' => $bundlePlan->name]) }} ·
                                                        {{ $price->isFree() ? __('Gratis') : \App\Support\Commerce\Money::format($price->amount, $price->currency, compact: true).' '.($price->isRecurring() ? $price->interval->suffix() : __('pago único')) }}
                                                    </a>
                                                </li>
                                            @endforeach
                                        @endforeach
                                    </ul>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </section>

        @if (count($microapp->faqs ?? []))
            <section id="preguntas" aria-labelledby="titulo-faq" class="max-w-3xl scroll-mt-24">
                <h2 id="titulo-faq" class="text-xl font-semibold text-slate-900">{{ __('Preguntas frecuentes') }}</h2>
                <div class="mt-5 divide-y divide-slate-200 rounded-xl border border-slate-200">
                    @foreach ($microapp->faqs as $faq)
                        <details class="group px-5 py-4">
                            <summary class="flex cursor-pointer list-none items-center justify-between gap-4 font-medium text-slate-900">
                                {{ $faq['q'] }}
                                <x-icon name="chevron-down" class="size-4 shrink-0 text-slate-400 transition group-open:rotate-180" />
                            </summary>
                            <p class="mt-3 text-sm leading-6 text-slate-600">{!! nl2br(e($faq['a'])) !!}</p>
                        </details>
                    @endforeach
                </div>
            </section>
        @endif
    </div>
</x-layouts.public>