<!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="#ff4a1c">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>@yield('title', 'Befikreyy App')</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">
<meta name="csrf-token" content="{{ csrf_token() }}">
<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">

@if (session('success'))
    <div class="app-toast app-toast-success" id="appToast">
        <span class="at-icon">✓</span>
        <span>{{ session('success') }}</span>
    </div>
@endif
@if (session('error'))
    <div class="app-toast app-toast-error" id="appToast">
        <span class="at-icon">!</span>
        <span>{{ session('error') }}</span>
    </div>
@endif

<div class="phone-frame">
    {{-- App header (logo + title) --}}
    @hasSection('appheader')
        @yield('appheader')
    @else
        <div class="app-header">
            <a href="{{ route('app.home') }}" class="app-logo-link">
                <img src="/assets/brand/logo.png" alt="Befikreyy" class="app-logo">
            </a>
            <div class="app-header-title">@yield('apptitle', 'Befikreyy')</div>
            <div class="app-header-right">
                @auth
                    @if(auth()->user()->role === 'customer')
                        @if(auth()->user()->lat && auth()->user()->lng)
                            <span class="loc-pill" title="Location captured">
                                <x-icon name="location" :size="11" /> {{ number_format(auth()->user()->lat, 2) }}, {{ number_format(auth()->user()->lng, 2) }}
                            </span>
                        @else
                            <button type="button" class="loc-pill is-missing" data-bfk-detect-location data-set-default="1" style="border:0; cursor:pointer;" title="Tap to capture location">
                                <x-icon name="location" :size="11" /> Set location
                            </button>
                        @endif
                    @endif
                @endauth
                @yield('appheaderright')
            </div>
        </div>
        @auth
            @if(auth()->user()->role === 'customer')
                <x-geolocate />
            @endif
        @endauth
    @endif

    {{-- Main content --}}
    <main class="app-main">
        @yield('content')
    </main>

    {{-- Bottom navigation (only on authenticated pages) --}}
    @auth
        @hasSection('appbottomnav')
            <nav class="app-bottom-nav" aria-label="Primary">
                @yield('appbottomnav')
            </nav>
        @else
            <nav class="app-bottom-nav" aria-label="Primary">
                <a href="{{ route('app.home') }}" class="{{ request()->routeIs('app.home') ? 'active' : '' }}">
                    <x-icon name="home" />
                    <span>Home</span>
                </a>
                <a href="{{ route('app.services') }}" class="{{ request()->routeIs('app.services') || request()->routeIs('app.service') ? 'active' : '' }}">
                    <x-icon name="services" />
                    <span>Services</span>
                </a>
                <a href="{{ route('app.bookings') }}" class="{{ request()->routeIs('app.bookings') || request()->routeIs('app.booking') ? 'active' : '' }}">
                    <x-icon name="bookings" />
                    <span>Bookings</span>
                </a>
                <a href="{{ route('app.profile') }}" class="{{ request()->routeIs('app.profile') ? 'active' : '' }}">
                    <x-icon name="profile" />
                    <span>Profile</span>
                </a>
            </nav>
        @endif
    @endauth
</div>

@stack('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-hide toast
    var toast = document.getElementById('appToast');
    if (toast) {
        setTimeout(function() { toast.classList.add('is-hide'); }, 3500);
        setTimeout(function() { toast.remove(); }, 4200);
    }
});
</script>
</body>
</html>