{{--
    Web "Welcome Tour": a centered, dependency-free modal that steps through the
    app's main areas so a new user understands the environment. The modal stays
    put (it doesn't jump around); it just gently highlights the matching sidebar
    item for each step. Auto-offered via the dashboard welcome banner; can be
    relaunched from the profile (?tour=1). Marks itself done (POST
    onboarding.tour-done) when finished or skipped.
--}}
<div id="fmTour" aria-hidden="true">
    <div class="fmtour-mask"></div>
    <div class="fmtour-modal" role="dialog" aria-modal="true" aria-labelledby="fmtourTitle">
        <button type="button" class="fmtour-x" data-tour-skip aria-label="Cerrar tour">&times;</button>
        <div class="fmtour-ic"><i class="fa-solid fa-wand-magic-sparkles"></i></div>
        <div class="fmtour-step"></div>
        <h4 class="fmtour-title" id="fmtourTitle"></h4>
        <p class="fmtour-body"></p>
        <div class="fmtour-dots" aria-hidden="true"></div>
        <div class="fmtour-actions">
            <button type="button" class="fmtour-skip" data-tour-skip>Saltar el tour</button>
            <div class="fmtour-nav">
                <button type="button" class="fmtour-btn fmtour-btn--ghost" data-tour-prev>Atrás</button>
                <button type="button" class="fmtour-btn fmtour-btn--primary" data-tour-next>Siguiente</button>
            </div>
        </div>
    </div>
</div>

<style>
    #fmTour { display:none; }
    #fmTour.is-open { display:block; }
    .fmtour-mask { position:fixed; inset:0; z-index:3000; background:rgba(20,38,24,.55); }
    .fmtour-modal { position:fixed; z-index:3002; top:50%; left:50%; transform:translate(-50%,-50%);
        width:380px; max-width:calc(100vw - 32px); background:#FCFBF7; border-radius:18px; padding:26px 24px 20px;
        box-shadow:0 24px 60px rgba(0,0,0,.32); text-align:center;
        font-family:'Segoe UI',system-ui,sans-serif; }
    .fmtour-x { position:absolute; top:10px; right:14px; border:none; background:none; font-size:24px; line-height:1; color:#79847B; cursor:pointer; }
    .fmtour-ic { width:56px; height:56px; margin:0 auto 12px; border-radius:50%; display:flex; align-items:center; justify-content:center;
        background:#E7F0D6; color:#4B7A50; font-size:24px; }
    .fmtour-step { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#4B7A50; }
    .fmtour-title { font-family:'Comfortaa','Segoe UI',sans-serif; font-size:20px; color:#1B241D; margin:4px 0 8px; }
    .fmtour-body { font-size:14.5px; line-height:1.6; color:#2F3A31; margin:0 0 16px; }
    .fmtour-dots { display:flex; gap:6px; justify-content:center; margin-bottom:18px; }
    .fmtour-dots span { width:7px; height:7px; border-radius:50%; background:#D5DCC9; transition:background .2s; }
    .fmtour-dots span.is-on { background:#4B7A50; }
    .fmtour-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .fmtour-skip { border:none; background:none; color:#79847B; font-size:13.5px; cursor:pointer; padding:6px 2px; }
    .fmtour-nav { display:flex; align-items:center; gap:8px; }
    .fmtour-btn { border:none; border-radius:999px; padding:9px 18px; font-size:14px; font-weight:600; cursor:pointer; }
    .fmtour-btn--primary { background:#4B7A50; color:#FCFBF7; }
    .fmtour-btn--ghost { background:none; color:#56625A; padding-left:6px; padding-right:6px; }
    .fmtour-btn--ghost[hidden] { display:none; }

    /* Gentle highlight on the matching sidebar item (stays where it is). */
    .fmtour-highlight { position:relative; z-index:3001; border-radius:10px;
        background:var(--surface-card,#fff); box-shadow:0 0 0 3px #B7C63C, 0 0 0 6px rgba(183,198,60,.35); }
</style>

<script>
(function () {
    var steps = [
        { sel: '[data-tour="dashboard"]',  icon: 'fa-gauge',        title: 'Tu panel',            body: 'Aquí ves de un vistazo tus lotes activos, las alertas y el consejo del día.' },
        { sel: '[data-tour="new-batch"]',  icon: 'fa-plus',         title: 'Crea tu primer lote', body: 'Empieza por aquí: en un par de minutos tienes tu primer fermento en marcha.' },
        { sel: '[data-tour="batches"]',    icon: 'fa-layer-group',  title: 'Mis lotes',           body: 'Sigue el progreso de cada lote, registra mediciones y avanza sus fases.' },
        { sel: '[data-tour="fermentos"]',  icon: 'fa-jar',          title: 'Fermentos',           body: 'Guías de kombucha, kéfir, chucrut y más para empezar con una receta probada.' },
        { sel: '[data-tour="planner"]',    icon: 'fa-calendar',     title: 'Planificador',        body: 'Tu cronología: qué toca hacer y cuándo en cada fermento.' },
        { sel: '[data-tour="laboratorio"]',icon: 'fa-flask',        title: 'Laboratorio',         body: 'Calculadoras (alcohol, salmuera), materiales y otras herramientas útiles.' },
        { sel: '[data-tour="comunidad"]',  icon: 'fa-users',        title: 'Comunidad',           body: 'Comparte tus fermentos, pregunta y aprende con otros fermentistas.' },
        { sel: '[data-tour="perfil"]',     icon: 'fa-user',         title: 'Tu perfil',           body: 'Ajusta tu cuenta y preferencias. Desde aquí puedes repetir este tour cuando quieras.' },
    ];

    var root = document.getElementById('fmTour');
    if (!root) return;
    var i = 0, done = false;

    // Build progress dots once.
    var dots = root.querySelector('.fmtour-dots');
    steps.forEach(function () { dots.appendChild(document.createElement('span')); });

    function clearHighlight() {
        document.querySelectorAll('.fmtour-highlight').forEach(function (el) { el.classList.remove('fmtour-highlight'); });
    }

    function markDone() {
        if (done) return;
        done = true;
        var tok = document.querySelector('meta[name="csrf-token"]');
        if (!tok) return;
        fetch('{{ route('onboarding.tour-done') }}', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': tok.content, 'Accept': 'application/json' },
        }).catch(function () {});
    }

    function close() {
        clearHighlight();
        root.classList.remove('is-open');
        root.setAttribute('aria-hidden', 'true');
        document.body.style.overflow = '';
    }
    function finish() { markDone(); close(); }

    function render() {
        var s = steps[i];
        root.querySelector('.fmtour-ic').innerHTML = '<i class="fa-solid ' + s.icon + '"></i>';
        root.querySelector('.fmtour-step').textContent = 'Paso ' + (i + 1) + ' de ' + steps.length;
        root.querySelector('.fmtour-title').textContent = s.title;
        root.querySelector('.fmtour-body').textContent = s.body;
        root.querySelector('[data-tour-prev]').hidden = (i === 0);
        root.querySelector('[data-tour-next]').textContent = (i === steps.length - 1) ? 'Finalizar' : 'Siguiente';

        dots.querySelectorAll('span').forEach(function (d, n) { d.classList.toggle('is-on', n === i); });

        // Gentle highlight on the matching menu item (no modal movement).
        clearHighlight();
        var el = document.querySelector(s.sel);
        if (el && el.offsetParent !== null) {
            el.classList.add('fmtour-highlight');
            try { el.scrollIntoView({ block: 'nearest', inline: 'nearest' }); } catch (e) {}
        }
    }

    function open() {
        i = 0; done = false;
        root.classList.add('is-open');
        root.setAttribute('aria-hidden', 'false');
        document.body.style.overflow = 'hidden';
        render();
    }

    root.querySelector('[data-tour-next]').addEventListener('click', function () {
        if (i >= steps.length - 1) { finish(); } else { i++; render(); }
    });
    root.querySelector('[data-tour-prev]').addEventListener('click', function () { if (i > 0) { i--; render(); } });
    root.querySelectorAll('[data-tour-skip]').forEach(function (b) { b.addEventListener('click', finish); });
    root.querySelector('.fmtour-mask').addEventListener('click', finish);
    document.addEventListener('keydown', function (e) { if (root.classList.contains('is-open') && e.key === 'Escape') finish(); });

    // Public API + auto-start when ?tour=1.
    window.fermentyTour = { start: open };
    if (new URLSearchParams(window.location.search).get('tour') === '1') {
        window.addEventListener('load', open);
    }
})();
</script>