@extends('layouts.mobile')

@section('title', 'Pro')
@section('back', url()->previous())
@section('app-eyebrow', 'Fermenty')
@section('app-title', 'Pro')

{{-- El plan de pago se llama Pro en todas partes (Lexico); la URL /premium se
     conserva por los enlaces ya repartidos. El pago real vive en el panel web
     (Stripe): el CTA sale por la ruta puente /suscripcion. --}}
@section('content')
<div class="fm-pad fm-stack">
    <div class="fm-card fm-card--dark fm-stack" style="gap:14px;">
        <span class="fm-glyph" style="width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.12);color:var(--gold-400);font-size:22px;"><i class="fa-solid fa-crown"></i></span>
        <div style="font-family:var(--font-display);font-weight:700;font-size:24px;">Fermenty Pro</div>
        <div style="font:400 15px/1.55 var(--font-sans);color:rgba(234,240,228,.82);">Lleva tus fermentos más lejos: mediciones, recetas propias y todo el catálogo.</div>
    </div>

    <div class="fm-card fm-stack" style="gap:14px;">
        @foreach([
            ['fa-droplet','Mediciones rápidas','Registra pH, temperatura y más en cada lote.'],
            ['fa-bell','Avísame para catar','Tras catar, un aviso a la hora que elijas: en 12 h, mañana o cuando digas.'],
            ['fa-wand-magic-sparkles','Consejos Pro','Pistas avanzadas en cada paso del asistente.'],
            ['fa-jar','Catálogo completo','Miso, tempeh, vinagres y todos los fermentos Pro.'],
            ['fa-pen-to-square','Crea tus recetas','Diseña y guarda tus propias recetas.'],
        ] as $b)
        <div class="fm-row" style="gap:12px;">
            <span class="fm-glyph" style="width:38px;height:38px;border-radius:12px;color:var(--gold-700);background:var(--gold-100);"><i class="fa-solid {{ $b[0] }}"></i></span>
            <div><div style="font:700 14px var(--font-sans);color:var(--text-primary);">{{ $b[1] }}</div><div class="fm-muted" style="font-size:13px;">{{ $b[2] }}</div></div>
        </div>
        @endforeach
    </div>

    <a href="{{ route('suscripcion') }}" class="fm-btn fm-btn--gold fm-btn--block">Ver planes y precios</a>
    <p class="fm-muted" style="text-align:center;font-size:12px;margin:0;">Mensual, trimestral o anual. Cancela cuando quieras.</p>
</div>
@endsection