@extends('layouts.mobile')

@section('title', 'Laboratorio')
@section('app-eyebrow', 'Para fermentar mejor')
@section('app-title', 'Laboratorio')

{{-- Espejo del /laboratorio web (ToolsController): calculadoras activas,
     próximas (Premium) y aprendizaje/soporte. --}}
@section('content')
<div class="fm-pad fm-stack">

    {{-- Calculadoras --}}
    <div>
        <div class="fm-sectitle"><span>Calculadoras</span></div>
        <div class="fm-cards">
            <a href="{{ route('tools.conversor') }}" class="fm-card fm-row fm-card--tap" style="text-decoration:none;">
                <span class="fm-glyph" style="width:44px;height:44px;border-radius:14px;"><i class="fa-solid fa-arrow-right-arrow-left"></i></span>
                <div style="flex:1;min-width:0;">
                    <div class="fm-title" style="font-size:15px;">Conversor de unidades</div>
                    <div class="fm-muted" style="font-size:12.5px;margin-top:2px;">Cups, onzas y Fahrenheit a gramos, mililitros y °C.</div>
                </div>
                <i class="fa-solid fa-chevron-right" style="color:var(--ink-300);font-size:13px;"></i>
            </a>

            <a href="{{ route('tools.salmuera') }}" class="fm-card fm-row fm-card--tap" style="text-decoration:none;">
                <span class="fm-glyph" style="width:44px;height:44px;border-radius:14px;"><i class="fa-solid fa-flask-vial"></i></span>
                <div style="flex:1;min-width:0;">
                    <div class="fm-title" style="font-size:15px;">Calculadora de salmuera</div>
                    <div class="fm-muted" style="font-size:12.5px;margin-top:2px;">Sal según fermento, temperatura y textura.</div>
                </div>
                <i class="fa-solid fa-chevron-right" style="color:var(--ink-300);font-size:13px;"></i>
            </a>

            <a href="{{ route('tools.alcohol') }}" class="fm-card fm-row fm-card--tap" style="text-decoration:none;">
                <span class="fm-glyph" style="width:44px;height:44px;border-radius:14px;"><i class="fa-solid fa-percent"></i></span>
                <div style="flex:1;min-width:0;">
                    <div class="fm-title" style="font-size:15px;">Calculadora de alcohol</div>
                    <div class="fm-muted" style="font-size:12.5px;margin-top:2px;">Estima el % de alcohol a partir de densidades o Brix.</div>
                </div>
                <i class="fa-solid fa-chevron-right" style="color:var(--ink-300);font-size:13px;"></i>
            </a>

            {{-- Próximas (Premium) --}}
            <div class="fm-card" style="border-style:dashed;background:linear-gradient(135deg,var(--gold-100),var(--surface-card));">
                <div class="fm-row" style="align-items:flex-start;">
                    <div style="flex:1;">
                        <div class="fm-title" style="font-size:15px;">Más calculadoras <span class="fm-badge fm-badge--gold" style="margin-left:6px;">Pro</span></div>
                        <div class="fm-muted" style="font-size:12.5px;margin-top:6px;">En preparación:</div>
                        {{-- Mismo teaser rotatorio que el laboratorio del panel: el nombre
                             de la próxima herramienta va cambiando con un fundido.
                             @json no traga arrays literales (parte por comas): variable antes. --}}
                        @php($proximas = ['Reducción de azúcar', 'Predicción de pH', 'Carbonatación', 'Tiempo de fermentación'])
                        <div data-rotate='@json($proximas)'
                             style="font:700 13.5px/1.4 var(--font-sans);color:var(--gold-700);min-height:1.4em;margin-top:2px;transition:opacity .35s ease;">Reducción de azúcar</div>
                    </div>
                </div>
                <a href="{{ route('premium') }}" class="fm-btn--ghost" style="display:inline-block;margin-top:8px;text-decoration:none;font:600 13px var(--font-sans);">Ver Pro ›</a>
            </div>
        </div>
    </div>

    {{-- Aprendizaje y soporte --}}
    <div>
        <div class="fm-sectitle"><span>Aprendizaje y soporte</span></div>
        <div class="fm-cards">
            <a href="{{ route('tools.materiales') }}" class="fm-card fm-row fm-card--tap" style="text-decoration:none;">
                <span class="fm-glyph" style="width:44px;height:44px;border-radius:14px;"><i class="fa-solid fa-toolbox"></i></span>
                <div style="flex:1;min-width:0;">
                    <div class="fm-title" style="font-size:15px;">Materiales y equipo</div>
                    <div class="fm-muted" style="font-size:12.5px;margin-top:2px;">Qué necesitas para fermentar, en glosario.</div>
                </div>
                <i class="fa-solid fa-chevron-right" style="color:var(--ink-300);font-size:13px;"></i>
            </a>

            <a href="{{ \App\Support\Superficie::web('faq') }}" target="_blank" rel="noopener" class="fm-card fm-row fm-card--tap" style="text-decoration:none;">
                <span class="fm-glyph" style="width:44px;height:44px;border-radius:14px;"><i class="fa-solid fa-circle-question"></i></span>
                <div style="flex:1;min-width:0;">
                    <div class="fm-title" style="font-size:15px;">FAQ</div>
                    <div class="fm-muted" style="font-size:12.5px;margin-top:2px;">Preguntas frecuentes.</div>
                </div>
                <i class="fa-solid fa-arrow-up-right-from-square" style="color:var(--ink-300);font-size:12px;"></i>
            </a>

            @foreach([
                ['fa-book', 'Fundamentos de la fermentación', 'Guía básica para empezar con buen pie.', false],
                ['fa-graduation-cap', 'Cursos', 'Talleres videoguiados.', true],
                ['fa-headset', '101 Troubleshooting', 'Asistente IA para resolver problemas.', true],
            ] as [$icon, $name, $desc, $premium])
            <div class="fm-card fm-row" style="opacity:.7;">
                <span class="fm-glyph" style="width:44px;height:44px;border-radius:14px;background:var(--paper-2);color:var(--ink-400);"><i class="fa-solid {{ $icon }}"></i></span>
                <div style="flex:1;min-width:0;">
                    <div class="fm-title" style="font-size:15px;">{{ $name }} @if($premium)<span class="fm-badge fm-badge--gold" style="margin-left:4px;">Pro</span>@endif</div>
                    <div class="fm-muted" style="font-size:12.5px;margin-top:2px;">{{ $desc }}</div>
                </div>
                <span class="fm-badge fm-badge--neutral">Pronto</span>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    document.querySelectorAll('[data-rotate]').forEach(function (el) {
        var list;
        try { list = JSON.parse(el.getAttribute('data-rotate')); } catch (e) { list = []; }
        if (!Array.isArray(list) || list.length < 2) return;

        var i = 0;
        setInterval(function () {
            el.style.opacity = '0';
            setTimeout(function () {
                i = (i + 1) % list.length;
                el.textContent = list[i];
                el.style.opacity = '';
            }, 350);
        }, 2400);
    });
})();
</script>
@endpush