{{-- /panel/suscripcion — la puerta de pago (docs/paginas/pro.md + Precios.md).
     Aquí ya está dentro: no se vuelve a vender el producto entero, se enseña lo
     que cambia, se elige tramo y se sale a Stripe. Precios con IVA incluido
     (B2C) y porcentajes reales. --}}
@extends('layouts.app')

@section('title', 'Pasar a Fermenty Pro')

@php
    $tandasFree = config('billing.plans.free.tandas_activas');
    $anual = config('billing.periods.year');
    $porMesAnual = $anual['amount'] / $anual['months'];
    $earlyBird = config('billing.early_bird');
@endphp

@section('content')

<div class="mb-3">
    <a href="{{ route('dashboard') }}" class="btn-back">← Volver</a>
</div>

<div class="row justify-content-center">
    <div class="col-12 col-lg-9">

        <div class="page-title">Se acuerda de tu cocina</div>
        <p class="page-subtitle">
            Tu plan gratis fermenta contigo. Pro añade lo único que el tiempo no regala — memoria:
            cada tanda que cierras estrecha la siguiente predicción.
        </p>

        {{-- Lo que cambia de verdad: las dos respuestas a la misma pregunta.
             Es el bloque que vende, y va antes del precio (pro.md §3). --}}
        <div class="fermenty-card mb-4">
            <div class="card-title">La misma pregunta, dos respuestas</div>
            <div class="row g-3">
                <div class="col-12 col-md-6">
                    <div class="sub-quote">
                        <div class="sub-quote__label">Con tu plan gratis</div>
                        <p class="sub-quote__text">«Huele a manzana y ya no a té: entra en su ventana entre el día 6 y el 9.»</p>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="sub-quote sub-quote--pro">
                        <div class="sub-quote__label">Con Pro, a la quinta tanda</div>
                        <p class="sub-quote__text">«Huele a manzana y ya no a té: entra en su ventana <strong>entre el día 6 y el 7</strong>, <strong>porque tu cocina va rápida</strong>.»</p>
                    </div>
                </div>
            </div>
            <p class="text-muted mb-0 mt-3" style="font-size:.9rem;">
                Dos días menos de incertidumbre. No porque el modelo haya mejorado, sino porque ya te conoce.
            </p>
        </div>

        <div class="row g-4">

            {{-- Qué incluye --}}
            <div class="col-12 col-md-5 order-md-2">
                <div class="fermenty-card">
                    <strong class="d-block mb-2">Tu plan Pro incluye</strong>
                    @include('partials.pro-advantages')
                </div>

                <div class="fermenty-card mt-3">
                    <strong class="d-block mb-2">Y lo que no se cobra nunca</strong>
                    <p class="text-muted mb-0" style="font-size:.88rem;line-height:1.6;">
                        Las barandillas y los avisos de seguridad —presión en la botella, alcohol acercándose
                        al límite, margen que se acaba— están en el plan gratis y van a seguir estando.
                        Cerrar y valorar tus tandas, también: es tu historial y es tuyo desde el primer día.
                    </p>
                </div>
            </div>

            {{-- Elegir tramo y salir a Stripe --}}
            <div class="col-12 col-md-7 order-md-1">
                <form method="POST" action="{{ route('suscripcion.checkout') }}" class="fermenty-form">
                    @csrf

                    <div class="fermenty-card mb-3">
                        <label class="form-label d-block mb-2">Elige cómo pagarlo</label>

                        @foreach($periods as $key => $p)
                            @php $perMonth = $p['amount'] / $p['months']; @endphp
                            <label class="period-opt {{ old('period', 'year') === $key ? 'is-selected' : '' }}">
                                <input type="radio" name="period" value="{{ $key }}"
                                       {{ old('period', 'year') === $key ? 'checked' : '' }} required>
                                <span class="period-opt__main">
                                    <span class="period-opt__name">
                                        {{ $p['label'] }}
                                        @if($p['badge'])<span class="period-opt__save">{{ $p['badge'] }}</span>@endif
                                    </span>
                                    <span class="period-opt__price">
                                        {{ number_format($perMonth, 2, ',', '.') }} €<small> / mes</small>
                                    </span>
                                </span>
                                <span class="period-opt__billed">
                                    @if($key === 'month')
                                        Se factura {{ number_format($p['amount'], 2, ',', '.') }} € cada mes
                                    @else
                                        Se factura {{ number_format($p['amount'], 2, ',', '.') }} € {{ $key === 'quarter' ? 'cada 3 meses' : 'al año' }}
                                    @endif
                                </span>
                            </label>
                        @endforeach

                        <p class="text-muted mb-0 mt-2" style="font-size:.82rem;">
                            Precios en euros, IVA incluido. Los descuentos son sobre el precio mensual.
                        </p>
                    </div>

                    {{-- El precio publicado ES la tarifa Early Bird (2026-07-31):
                         nada de una segunda cifra que el checkout no cobra. --}}
                    @if($earlyBird['activa'])
                        <div class="fermenty-card mb-3 sub-early">
                            <strong class="d-block mb-1">Tarifa Early Bird</strong>
                            <p class="mb-0" style="font-size:.9rem;line-height:1.6;">
                                Estás entre los primeros: <strong>el precio que eliges hoy se te queda
                                mientras sigas suscrito</strong>. Cuando la app avance, subirá para quien
                                llegue después — no caduca, no sube y no hay que renovarla.
                            </p>
                        </div>
                    @endif

                    <div class="fermenty-card mb-3">
                        <label class="form-label" for="code">¿Tienes un código?</label>
                        <input type="text" name="code" id="code" class="form-control"
                               value="{{ old('code') }}" placeholder="Introdúcelo (opcional)" autocomplete="off">
                        <div class="text-muted mt-1" style="font-size:13px;">Lo validamos y se aplica en el pago.</div>
                    </div>

                    <button type="submit" class="btn btn-fermenty-primary w-100 btn-lg">
                        Pasar a Pro
                    </button>
                    <p class="text-muted text-center mt-2" style="font-size:13px;">
                        <i class="fa-solid fa-lock me-1"></i>Pago con Stripe · tarjeta o SEPA · cancelas cuando quieras desde tu cuenta
                    </p>
                </form>

                <div class="fermenty-card mt-3">
                    <div class="card-title">Lo que conviene saber</div>
                    <p class="mb-2" style="font-size:.88rem;line-height:1.6;">
                        <strong>El plan gratis no caduca.</strong> Son {{ $tandasFree }} tandas activas a la vez y el mentor
                        completo, avisos de seguridad incluidos.
                    </p>
                    <p class="mb-2" style="font-size:.88rem;line-height:1.6;">
                        <strong>Cancelar es desde tu cuenta</strong>, en esta misma pantalla, con el portal de facturación.
                        Conservas Pro hasta el final del periodo pagado y no se te vuelve a cobrar.
                    </p>
                    <p class="mb-0" style="font-size:.88rem;line-height:1.6;">
                        <strong>Si vuelves al plan gratis no se borra nada.</strong> Las tandas que pasen del límite quedan
                        en solo lectura hasta que las termines, y tu historial se queda entero. Si vuelves a Pro, la
                        calibración sigue donde estaba.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
.period-opt{display:block;border:1.5px solid #e3e0d8;border-radius:14px;padding:12px 14px;margin-bottom:10px;cursor:pointer;transition:border-color .15s,background .15s;}
.period-opt.is-selected{border-color:#4B7A50;background:#f4f8f3;}
.period-opt input{position:absolute;opacity:0;width:0;height:0;}
.period-opt__main{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.period-opt__name{font-weight:600;}
.period-opt__save{display:inline-block;margin-left:6px;font-size:.72rem;font-weight:700;color:#9a7b1f;background:#f7ecd2;border-radius:999px;padding:1px 7px;}
.period-opt__price{font-weight:700;white-space:nowrap;}
.period-opt__price small{color:#6b756c;font-weight:500;}
.period-opt__billed{display:block;font-size:13px;color:#6b756c;margin-top:2px;}
.pro-advantages li{padding:5px 0;}
.pro-advantages i{color:#4B7A50;margin-right:8px;}
.sub-quote{background:#EFF5E9;border:1px solid #E0EDD7;border-radius:16px;padding:16px 18px;height:100%;}
.sub-quote--pro{border-color:#2C5234;box-shadow:0 2px 10px rgba(44,82,52,.08);}
.sub-quote__label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#79847B;margin-bottom:8px;}
.sub-quote__text{font-family:'Comfortaa',sans-serif;font-weight:700;font-size:15px;line-height:1.4;color:#1F3A26;margin:0;}
.sub-quote--pro strong{color:#2C5234;}
.sub-early{background:#16271B;color:#EAF0E4;border-color:#16271B;}
.sub-early strong{color:#F8D379;}
</style>
@endpush

@push('scripts')
<script>
document.querySelectorAll('.period-opt input[name="period"]').forEach(function (r) {
    r.addEventListener('change', function () {
        document.querySelectorAll('.period-opt').forEach(function (l) { l.classList.remove('is-selected'); });
        if (r.checked) r.closest('.period-opt').classList.add('is-selected');
    });
});
</script>
@endpush

@endsection