{{-- AppHeader (design kit parts.jsx): per-screen eyebrow + title + actions. --}}
@php $hasBack = trim($__env->yieldContent('back')) !== ''; $histBack = trim($__env->yieldContent('back-history')) !== ''; @endphp
<header style="padding:{{ $hasBack ? '4px 16px 12px' : '4px 16px 14px' }};flex-shrink:0;position:relative;z-index:10;background:var(--bg-canvas);display:flex;align-items:center;gap:10px;">
    @if($hasBack)
        {{-- Con back-history: vuelve de verdad (a la página anterior); el href es el
             fallback si se llegó por enlace directo, sin historial. --}}
        {{-- 44px: superficie táctil mínima (Apple HIG); el icono no crece. --}}
        <a href="@yield('back')" aria-label="Atrás" @if($histBack) onclick="if(history.length>1){history.back();return false;}" @endif
           style="width:44px;height:44px;margin-left:-6px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--ink-500);text-decoration:none;flex-shrink:0;">
            <i class="fa-solid fa-arrow-left" style="font-size:18px;"></i>
        </a>
    @endif
    <div style="flex:1;min-width:0;">
        @hasSection('app-eyebrow')
            <div style="font:600 11px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--green-600);margin-bottom:7px;">@yield('app-eyebrow')</div>
        @endif
        <h1 id="fm-app-title" style="margin:0;font-family:var(--font-display);font-weight:700;font-size:{{ $hasBack ? '20' : '26' }}px;letter-spacing:-.01em;color:var(--text-primary);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">@yield('app-title', 'Fermenty')</h1>
    </div>
    <div style="display:flex;gap:4px;align-items:center;flex-shrink:0;">
        @yield('app-action')
        <a href="{{ route('plan') }}" aria-label="Avisos" x-data="fmBell()" x-init="load()"
           style="position:relative;width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--ink-500);text-decoration:none;">
            <i class="fa-solid fa-bell" style="font-size:19px;"></i>
            <span x-show="unread > 0" x-cloak
                  style="position:absolute;top:3px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--rust-500);color:#fff;font:700 10px/16px var(--font-sans);text-align:center;"
                  x-text="unread > 9 ? '9+' : unread"></span>
        </a>
        <script>
        // Badge de avisos no leídos (incluye los atrasados). Cache de 60 s en
        // sessionStorage para no pedirlo en cada navegación entre pestañas.
        function fmBell() {
            return {
                unread: 0,
                async load() {
                    if (!window.fmAuthed()) return;
                    try {
                        const c = JSON.parse(sessionStorage.getItem('fm_unread') || 'null');
                        if (c && Date.now() - c.t < 60000) { this.unread = c.n; return; }
                    } catch (e) {}
                    try {
                        const d = await window.FermentyAPI.notifications();
                        this.unread = d.unread_count || 0;
                        sessionStorage.setItem('fm_unread', JSON.stringify({ n: this.unread, t: Date.now() }));
                    } catch (e) {}
                },
            };
        }
        </script>
        {{-- Superficie táctil de 44px; el círculo visible se queda en 34. --}}
        <a href="{{ route('profile') }}" aria-label="Perfil"
           style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;text-decoration:none;">
            <span style="width:34px;height:34px;border-radius:50%;background:var(--green-050);color:var(--green-700);display:flex;align-items:center;justify-content:center;">
                <i class="fa-solid fa-user" style="font-size:15px;"></i>
            </span>
        </a>
    </div>
</header>