<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">
    <meta name="theme-color" content="#0e9f6e">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Befikreyy — Team Member')</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet">
    <link rel="icon" type="image/png" href="/assets/brand/logo.png">
    <link rel="stylesheet" href="/assets/bfk-app.css?v=3">
<link rel="stylesheet" href="/assets/bfk-forms.css?v=1">
    @stack('head')
</head>
<body class="app-body">
<div class="phone-frame">
    @hasSection('appheader')
        @yield('appheader')
    @else
        <div class="app-header">
            <a href="{{ route('tm.dashboard') }}" class="app-logo-link">
                <img src="/assets/brand/logo.png" alt="Befikreyy" class="app-logo">
            </a>
            <div class="app-header-title">@yield('apptitle', 'Team Member')</div>
            <div class="app-header-right">@yield('appheaderright')</div>
        </div>
    @endif

    <main class="app-main">
        @if(session('success'))
            <div class="app-toast app-toast-success">✓ {{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="app-toast app-toast-error">! {{ session('error') }}</div>
        @endif
        @yield('content')
    </main>

    <nav class="app-bottom-nav" aria-label="Primary">
        <a href="{{ route('tm.dashboard') }}" class="{{ request()->routeIs('tm.dashboard') ? 'active' : '' }}"><x-icon name="home" :size="20" /><span>Home</span></a>
        <a href="{{ route('tm.visits') }}" class="{{ request()->routeIs('tm.visits*') || request()->routeIs('tm.visit*') ? 'active' : '' }}"><x-icon name="bookings" :size="20" /><span>Visits</span></a>
        <a href="{{ route('tm.profile') }}" class="{{ request()->routeIs('tm.profile') ? 'active' : '' }}"><x-icon name="profile" :size="20" /><span>Profile</span></a>
        <a href="{{ route('tm.help') }}" class="{{ request()->routeIs('tm.help') ? 'active' : '' }}"><x-icon name="help" :size="20" /><span>Help</span></a>
    </nav>
</div>
@stack('scripts')
</body>
</html>
