<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'iiSHEEG — Somali Diaspora Business Directory')</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <link href="{{ asset('css/custom.css') }}" rel="stylesheet">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark iisheeg-navbar">
    <div class="container">
        <a class="navbar-brand d-flex align-items-center gap-2" href="{{ route('home') }}">
            <span class="iisheeg-logo">ii<span class="text-teal">SHEEG</span></span>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="mainNav">
            <ul class="navbar-nav ms-auto gap-lg-2">
                <li class="nav-item"><a class="nav-link" href="{{ route('home') }}">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="{{ route('listing') }}">Listings</a></li>
                <li class="nav-item"><a class="nav-link" href="{{ route('how-it-works') }}">How It Works</a></li>
                <li class="nav-item"><a class="nav-link" href="{{ route('faq') }}">FAQ</a></li>
                <li class="nav-item"><a class="nav-link" href="{{ route('contact') }}">Contact</a></li>
                <li class="nav-item">
                    <a class="btn btn-teal btn-sm ms-lg-2" href="{{ route('business.create') }}">Add Business</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

@if (session('status'))
    <div class="container mt-3">
        <div class="alert alert-success">{{ session('status') }}</div>
    </div>
@endif

<main>
    @yield('content')
</main>

<footer class="iisheeg-footer mt-5">
    <div class="container py-4">
        <div class="row gy-3">
            <div class="col-md-4">
                <span class="iisheeg-logo">ii<span class="text-teal">SHEEG</span></span>
                <p class="small text-light-muted mt-2 mb-0">Connecting the Somali diaspora with trusted businesses and practical guidance, wherever you are.</p>
            </div>
            <div class="col-md-4">
                <h6 class="text-uppercase text-teal small fw-bold">Explore</h6>
                <ul class="list-unstyled small">
                    <li><a href="{{ route('listing') }}">Browse listings</a></li>
                    <li><a href="{{ route('business.create') }}">Add your business</a></li>
                    <li><a href="{{ route('how-it-works') }}">How it works</a></li>
                </ul>
            </div>
            <div class="col-md-4">
                <h6 class="text-uppercase text-teal small fw-bold">Support</h6>
                <ul class="list-unstyled small">
                    <li><a href="{{ route('faq') }}">FAQ</a></li>
                    <li><a href="{{ route('contact') }}">Contact us</a></li>
                </ul>
            </div>
        </div>
        <hr class="border-secondary">
        <p class="small text-light-muted mb-0">&copy; {{ date('Y') }} iiSHEEG.com — All rights reserved.</p>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
@yield('scripts')
</body>
</html>
