@extends('layouts.mobile')

@section('title', 'Bienvenido a Fermenty')
@section('screen-label', 'Bienvenida')
@section('bare', '1')
@section('screen-class', 'fm-screen--dark')

@section('content')
{{-- La bienvenida es solo para la primerísima visita: con sesión (da igual si
     standalone o navegador) o con el tour ya hecho, saltamos directo a Inicio.
     replace() para no dejarla en el historial (el botón atrás no debe volver a
     la pantalla verde). Corre antes de que se pinte el contenido; el splash de
     arranque tapa el instante. --}}
<script>
(function () {
    try {
        if (localStorage.getItem('fm_token') || localStorage.getItem('fm_onboarded')) {
            window.location.replace(@json(route('home')));
        }
    } catch (e) {}
})();
</script>
<div style="flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:26px;padding:40px 28px calc(24px + env(safe-area-inset-bottom, 0px));
            background:radial-gradient(120% 80% at 80% 0%, rgba(183,198,60,.14), transparent 60%),
                       radial-gradient(120% 80% at 0% 100%, rgba(245,195,86,.10), transparent 55%);
            color:var(--text-on-dark);">

    {{-- App icon + marca --}}
    <div style="display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;">
        <img src="{{ asset('img/brand/fermenty-mark-light.svg') }}" alt="Fermenty" width="96" height="96"
             style="filter:drop-shadow(0 10px 26px rgba(0,0,0,.28));">
        <div>
            <img src="{{ asset('img/brand/fermenty-wordmark-light.svg') }}" alt="fermenty" style="height:34px;width:auto;display:block;margin:0 auto;">
            <div style="margin-top:10px;font:500 15px/1.5 var(--font-sans);color:rgba(234,240,228,.8);">Un oficio vivo, a tu ritmo.</div>
        </div>
    </div>

    {{-- Bienvenida --}}
    <div style="text-align:center;">
        <h1 style="font-family:var(--font-display);font-weight:700;font-size:30px;line-height:1.18;margin:0 0 14px;">
            Fermenta en casa<br>con confianza
        </h1>
        <p style="font:400 15px/1.6 var(--font-sans);color:rgba(234,240,228,.78);margin:0;">
            Recetas paso a paso, tus lotes bajo control y un aviso cuando toque actuar. Empieza explorando — crea tu cuenta cuando quieras lanzar tu primer lote.
        </p>
        {{-- Enlace discreto al tour: no compite con la primaria de abajo. --}}
        <a href="{{ route('onboarding') }}"
           style="display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:10px 6px;color:var(--lime-400);text-decoration:underline;text-underline-offset:4px;font:600 15px var(--font-sans);">
            <i class="fa-solid fa-wand-magic-sparkles" style="font-size:13px;"></i> Descubre cómo funciona
        </a>
    </div>

    {{-- Una primaria por estado (con sesión ni se llega aquí: redirect arriba).
         Explorar marca fm_onboarded: la bienvenida es de un solo uso — a la
         siguiente apertura se salta directo a Inicio. Crear cuenta vive en el
         login y en la hoja global; aquí solo estorbaría como tercer botón. --}}
    <div style="display:flex;flex-direction:column;gap:10px;"
         x-data="{ authed: window.fmAuthed(), name: (window.fmUser() || {}).name || '' }">
        <template x-if="authed">
            <div style="display:flex;flex-direction:column;gap:12px;text-align:center;">
                <div style="font-family:var(--font-display);font-weight:700;font-size:20px;" x-text="'Hola' + (name ? ', ' + name.split(' ')[0] : '')"></div>
                <a href="{{ route('home') }}" class="fm-btn fm-btn--gold fm-btn--block">Entrar <i class="fa-solid fa-angles-right" style="font-size:12px;margin-left:4px;"></i></a>
            </div>
        </template>
        <template x-if="!authed">
            <div style="display:flex;flex-direction:column;gap:10px;">
                <a href="{{ route('home') }}" class="fm-btn fm-btn--gold fm-btn--block"
                   onclick="try{localStorage.setItem('fm_onboarded','1')}catch(e){}">Explorar la app</a>
                <a href="{{ route('login') }}" class="fm-btn fm-btn--block fm-btn--ghost" style="color:rgba(234,240,228,.85);">Ya tengo cuenta <i class="fa-solid fa-angles-right" style="font-size:12px;margin-left:4px;"></i></a>
            </div>
        </template>
    </div>
</div>
@endsection