@extends('layouts.mobile')

@section('title', 'Descubre Fermenty')
@section('screen-label', 'Tour')
@section('bare', '1')
@section('screen-class', 'fm-screen--dark')

@section('content')
<div style="flex:1;display:flex;flex-direction:column;padding:28px 28px calc(24px + env(safe-area-inset-bottom, 0px));color:var(--text-on-dark);"
     x-data="{ i: 0, slides: [
        { img:'{{ asset('img/tour/tour_app_1-recipe.jpg') }}', t:'Recetas paso a paso', d:'Elige una receta por tipo de fermentación — láctica, acética, alcohólica… — y síguela día a día con cantidades a tu medida.' },
        { img:'{{ asset('img/tour/tour_app_2-batch.jpg') }}', t:'Tus lotes, bajo control', d:'Cada lote con su anillo de progreso, sus pasos, mediciones y notas. Todo en un solo sitio, también cuando pausas o retomas.' },
        { img:'{{ asset('img/tour/tour_app_3-aviso.jpg') }}', t:'Avisos en su momento', d:'Te avisamos cuando toca remover, probar o pasar al frío. Tú solo fermenta.' },
        { img:'{{ asset('img/tour/tour_app_4-tools.jpg') }}', t:'Laboratorio y comunidad', d:'Calculadoras como la de salmuera y una comunidad de fermentistas para compartir tu progreso.' },
     ], get last() { return this.i === this.slides.length - 1 },
     touchX: 0, touchY: 0,
     onTouchStart(e) { this.touchX = e.changedTouches[0].clientX; this.touchY = e.changedTouches[0].clientY; },
     onTouchEnd(e) {
        const dx = e.changedTouches[0].clientX - this.touchX;
        const dy = e.changedTouches[0].clientY - this.touchY;
        if (Math.abs(dx) < 40 || Math.abs(dx) < Math.abs(dy)) return;
        if (dx < 0 && !this.last) this.i++;
        else if (dx > 0 && this.i > 0) this.i--;
     } }">

    <div style="display:flex;justify-content:space-between;align-items:center;">
        <img src="{{ asset('img/brand/fermenty-mark-light.svg') }}" alt="Fermenty" width="34" height="34">
        <a href="{{ route('home') }}" style="color:rgba(234,240,228,.7);text-decoration:none;font:600 14px var(--font-sans);"
           onclick="try{localStorage.setItem('fm_onboarded','1')}catch(e){}">Saltar</a>
    </div>

    <div style="flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px;touch-action:pan-y;"
         @touchstart="onTouchStart($event)" @touchend="onTouchEnd($event)">
        {{-- Ilustraciones del tour (public/img/tour): las 4 apiladas para que
             cachen y el cambio de slide sea instantáneo. Esquinas redondeadas,
             borde fino y velo verde (multiply) para integrarlas en el fondo.
             Soporta swipe horizontal (onTouchStart/onTouchEnd) además de los botones. --}}
        <div style="position:relative;width:100%;aspect-ratio:2/1;border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:0 16px 38px rgba(0,0,0,.35);background:rgba(255,255,255,.05);">
            <template x-for="(s, n) in slides" :key="n">
                <img :src="s.img" :alt="s.t" x-show="i === n"
                     style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.95);"
                     :loading="n === 0 ? 'eager' : 'lazy'">
            </template>
            <span style="position:absolute;inset:0;background:linear-gradient(160deg, rgba(75,122,80,.16), rgba(22,39,27,.30));mix-blend-mode:multiply;pointer-events:none;"></span>
            {{-- Sombra interior: hunde la captura, como mirar por una ventana --}}
            <span style="position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 14px 30px rgba(22,39,27,.42), inset 0 -12px 26px rgba(22,39,27,.32), inset 0 0 0 1px rgba(22,39,27,.15);"></span>
        </div>
        <h1 style="font-family:var(--font-display);font-weight:700;font-size:28px;margin:0;" x-text="slides[i].t"></h1>
        <p style="font:400 15px/1.6 var(--font-sans);color:rgba(234,240,228,.8);margin:0;" x-text="slides[i].d"></p>
    </div>

    <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:20px;">
        <template x-for="(s, n) in slides" :key="n">
            <span @click="i = n" :style="'width:8px;height:8px;border-radius:50%;transition:.2s;cursor:pointer;' + (n===i ? 'background:var(--lime-400);width:22px;border-radius:999px;' : 'background:rgba(255,255,255,.3);')"></span>
        </template>
    </div>

    <div style="display:flex;flex-direction:column;gap:10px;">
        <button class="fm-btn fm-btn--gold fm-btn--block"
                @click="last ? (localStorage.setItem('fm_onboarded','1'), window.location='{{ route('home') }}') : i++"
                x-text="last ? 'Probar sin cuenta' : 'Siguiente'"></button>
        <a x-show="last" x-cloak href="{{ route('register') }}" class="fm-btn fm-btn--block"
           style="background:rgba(255,255,255,.12);color:#fff;"
           @click="localStorage.setItem('fm_onboarded','1')">Crear cuenta gratis</a>
    </div>
</div>
@endsection