<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', $settings['meta_title'] ?? 'MUVR Labs')</title>
    <meta name="description" content="@yield('meta_description', $settings['meta_description'] ?? '')">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    <style>
        :root {
            --brand-primary: #E5943C;
            --brand-dark: #0f172a;
            --brand-navy: #0a0f1e;
            --brand-blue: #3b82f6;
            --text-muted-custom: #64748b;
            --border-light: #e2e8f0;
        }
        * { box-sizing: border-box; }
        body { font-family: 'Inter', system-ui, sans-serif; color: #1a1a1a; }

        /* ── NAVBAR ── */
        .navbar-muvr { background: #fff; border-bottom: 1px solid var(--border-light); padding: 0 1.5rem; min-height: 56px; position: sticky; top: 0; z-index: 1050; }
        .navbar-muvr .navbar-brand { font-size: 1.1rem; font-weight: 800; color: var(--brand-dark); letter-spacing: -.3px; }
        .navbar-muvr .navbar-brand span { color: var(--brand-primary); }
        .navbar-muvr .nav-link { font-size: .82rem; color: #374151 !important; padding: .45rem .65rem; font-weight: 500; }
        .navbar-muvr .nav-link:hover, .navbar-muvr .nav-link.active { color: var(--brand-primary) !important; }
        .btn-enquire { background: var(--brand-primary); color: #fff !important; padding: .38rem 1rem !important; border-radius: 5px; font-weight: 700 !important; font-size: .8rem !important; }
        .btn-enquire:hover { background: #d4832e; }
        .dropdown-menu { border: 1px solid var(--border-light); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.08); font-size: .82rem; }
        .dropdown-item:hover { color: var(--brand-primary); background: #fff8f3; }

        /* ── HERO ── */
        .hero-section { background: linear-gradient(135deg, #0a0f1e 0%, #0b3c42 60%, #0e2a5c 100%); min-height: 340px; position: relative; overflow: hidden; }
        .hero-section::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(255,255,255,.03) 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(255,255,255,.03) 40px); pointer-events: none; }
        .hero-eyebrow { font-size: .72rem; color: #60a5fa; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
        .hero-h1 { font-size: 1.7rem; font-weight: 800; color: #fff; line-height: 1.25; letter-spacing: -.4px; }
        .hero-sub { font-size: .82rem; color: #94a3b8; line-height: 1.7; }
        .hero-support { font-size: .75rem; color: #64748b; font-style: italic; }

        /* ── PAGE HERO (inner pages) ── */
        .page-hero-dark { background: linear-gradient(135deg, #0a0f1e 0%, #0d1b3e 100%); }
        .page-hero-light { background: #f8fafc; border-bottom: 1px solid var(--border-light); }

        /* ── SECTION COMMONS ── */
        .sec-label { font-size: .7rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--brand-primary); font-weight: 700; }
        .sec-title { font-size: 1.45rem; font-weight: 800; color: var(--brand-dark); letter-spacing: -.3px; }
        .sec-intro { font-size: .82rem; color: var(--text-muted-custom); line-height: 1.65; }

        /* ── PRODUCT CARDS ── */
        .product-badge { background: var(--brand-primary); color: #fff; font-size: .7rem; padding: 3px 8px; border-radius: 4px; font-weight: 700; }
        .product-standard-badge { background: #dbeafe; color: #1e40af; font-size: .72rem; padding: 3px 10px; border-radius: 4px; font-weight: 700; display: inline-block; }
        .feature-check::before { content: '✓'; color: var(--brand-primary); font-weight: 700; margin-right: 6px; }

        /* ── SOLUTION CARDS ── */
        .sol-card { background: #fff; border: 1px solid var(--border-light); border-radius: 10px; padding: 1.25rem 1rem; transition: box-shadow .2s, transform .2s; }
        .sol-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
        .sol-icon-wrap { width: 40px; height: 40px; background: #eff6ff; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
        .sol-icon-wrap svg { width: 20px; height: 20px; stroke: var(--brand-primary); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

        /* ── CASE STUDY CARDS ── */
        .case-card { border: 1px solid var(--border-light); border-radius: 10px; overflow: hidden; transition: box-shadow .2s; }
        .case-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1); }
        .case-card-img { height: 110px; background: linear-gradient(135deg, #1e3a5f, #0c2044); display: flex; align-items: flex-end; padding: .6rem .9rem; }
        .case-card-img-label { font-size: .7rem; color: rgba(255,255,255,.45); letter-spacing: 1px; text-transform: uppercase; }

        /* ── WHY ITEMS ── */
        .why-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-primary); flex-shrink: 0; margin-top: 5px; }

        /* ── PROCESS STEPS ── */
        .step-num { width: 38px; height: 38px; background: var(--brand-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 800; margin: 0 auto .5rem; position: relative; z-index: 1; }
        .step-connector { position: absolute; top: 18px; left: 60%; width: 80%; height: 1px; background: var(--border-light); z-index: 0; }

        /* ── RESOURCE CARDS ── */
        .res-card { background: #fff; border: 1px solid var(--border-light); border-radius: 8px; padding: .85rem 1rem; display: flex; align-items: center; gap: .75rem; transition: box-shadow .2s; }
        .res-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }

        /* ── CAREER/JOB CARDS ── */
        .job-card { background: #fff; border: 1px solid var(--border-light); border-radius: 8px; padding: 1rem 1.25rem; }
        .job-tag { font-size: .72rem; padding: 2px 9px; border-radius: 4px; font-weight: 600; }
        .job-tag-dept { background: #eff6ff; color: #1d4ed8; }
        .job-tag-loc { background: #f0fdf4; color: #166534; }
        .job-tag-type { background: #fef9c3; color: #854d0e; }

        /* ── FORMS ── */
        .form-label { font-size: .8rem; font-weight: 600; color: #374151; }
        .form-control, .form-select { font-size: .82rem; border: 1px solid var(--border-light); border-radius: 6px; }
        .form-control:focus, .form-select:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 .2rem rgba(229,148,60,.2); }

        /* ── BUTTONS ── */
        .btn-brand { background: var(--brand-primary); color: #fff; border: none; font-weight: 700; }
        .btn-brand:hover { background: #d4832e; color: #fff; }
        .btn-outline-brand { border: 1px solid var(--brand-primary); color: var(--brand-primary); background: transparent; font-weight: 600; }
        .btn-outline-brand:hover { background: var(--brand-primary); color: #fff; }
        .btn-outline-light-custom { border: 1px solid rgba(255,255,255,.3); color: #e2e8f0; background: transparent; }
        .btn-outline-light-custom:hover { background: rgba(255,255,255,.1); color: #fff; }

        /* ── FINAL CTA ── */
        .final-cta { background: linear-gradient(135deg, #0a0f1e 0%, #0d1b3e 100%); }

        /* ── FOOTER ── */
        .footer-main { background: #0f172a; }
        .footer-brand { font-size: 1rem; font-weight: 800; color: #fff; }
        .footer-brand span { color: var(--brand-blue); }
        .footer-bottom { background: #0a0f1e; }
        .footer-link { font-size: .78rem; color: #64748b; text-decoration: none; display: block; margin-bottom: .35rem; }
        .footer-link:hover { color: var(--brand-primary); }

        /* ── UTILITY ── */
        .text-brand { color: var(--brand-primary); }
        .bg-alt { background: #f8fafc; }
        .divider-light { border: none; border-top: 1px solid var(--border-light); }

        @media (max-width: 768px) {
            .hero-h1 { font-size: 1.3rem; }
            .sec-title { font-size: 1.2rem; }
        }
    </style>
    @stack('styles')
</head>
<body>

<!-- ── NAVBAR ── -->
<nav class="navbar navbar-expand-lg navbar-muvr">
    <div class="container-fluid">
        <a class="navbar-brand" href="{{ route('home') }}"><span>MUVR</span> Labs</a>
        <button class="navbar-toggler border-0" 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 align-items-lg-center gap-1">
                <li class="nav-item"><a class="nav-link {{ request()->routeIs('home') ? 'active' : '' }}" href="{{ route('home') }}">Home</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle {{ request()->routeIs('products*') ? 'active' : '' }}" href="{{ route('products') }}" data-bs-toggle="dropdown">Products</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="{{ route('products') }}">All Products</a></li>
                        @foreach(\App\Models\Product::where('is_active',1)->orderBy('sort_order')->get() as $p)
                        <li><a class="dropdown-item" href="{{ route('product.show', $p->slug) }}">{{ $p->name }}</a></li>
                        @endforeach
                    </ul>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle {{ request()->routeIs('solutions*') ? 'active' : '' }}" href="{{ route('solutions') }}" data-bs-toggle="dropdown">Solutions</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="{{ route('solutions') }}">All Solutions</a></li>
                        @foreach(\App\Models\Solution::where('is_active',1)->orderBy('sort_order')->get() as $s)
                        <li><a class="dropdown-item" href="{{ route('solution.show', $s->slug) }}">{{ $s->title }}</a></li>
                        @endforeach
                    </ul>
                </li>
                <li class="nav-item"><a class="nav-link {{ request()->routeIs('case-studies*') ? 'active' : '' }}" href="{{ route('case-studies') }}">Case Studies</a></li>
                <li class="nav-item"><a class="nav-link {{ request()->routeIs('resources') ? 'active' : '' }}" href="{{ route('resources') }}">Resources</a></li>
                <li class="nav-item"><a class="nav-link {{ request()->routeIs('careers*') ? 'active' : '' }}" href="{{ route('careers') }}">Careers</a></li>
                <li class="nav-item"><a class="nav-link {{ request()->routeIs('about') ? 'active' : '' }}" href="{{ route('about') }}">About Us</a></li>
                <li class="nav-item"><a class="nav-link {{ request()->routeIs('contact') ? 'active' : '' }}" href="{{ route('contact') }}">Contact</a></li>
                <li class="nav-item ms-1"><a class="nav-link btn-enquire" href="{{ route('contact') }}">Enquire Now</a></li>
            </ul>
        </div>
    </div>
</nav>

<!-- ── CONTENT ── -->
@yield('content')

<!-- ── FOOTER ── -->
<footer class="footer-main pt-5 pb-3">
    <div class="container-fluid px-4">
        <div class="row g-4 mb-4">
            <div class="col-lg-3 col-md-6">
                <div class="footer-brand mb-2"><span>MUVR</span> Labs</div>
                <p class="footer-tagline small text-secondary mb-3" style="font-size:.78rem">{{ $settings['footer_tagline'] ?? 'Engineering-driven solutions built for real-world performance.' }}</p>
                <a href="{{ route('contact') }}" class="btn btn-brand btn-sm px-3">Get in Touch</a>
            </div>
            <div class="col-lg-2 col-md-6">
                <h6 class="text-white fw-700 mb-3" style="font-size:.78rem;letter-spacing:.5px">Quick Links</h6>
                <a href="{{ route('home') }}" class="footer-link">Home</a>
                <a href="{{ route('about') }}" class="footer-link">About Us</a>
                <a href="{{ route('careers') }}" class="footer-link">Careers</a>
                <a href="{{ route('contact') }}" class="footer-link">Contact</a>
            </div>
            <div class="col-lg-2 col-md-6">
                <h6 class="text-white fw-700 mb-3" style="font-size:.78rem;letter-spacing:.5px">Products</h6>
                @foreach(\App\Models\Product::where('is_active',1)->orderBy('sort_order')->get() as $p)
                <a href="{{ route('product.show', $p->slug) }}" class="footer-link">{{ $p->name }}</a>
                @endforeach
                <a href="{{ route('resources') }}" class="footer-link">Download Brochures</a>
            </div>
            <div class="col-lg-2 col-md-6">
                <h6 class="text-white fw-700 mb-3" style="font-size:.78rem;letter-spacing:.5px">Solutions</h6>
                @foreach(\App\Models\Solution::where('is_active',1)->orderBy('sort_order')->get() as $s)
                <a href="{{ route('solution.show', $s->slug) }}" class="footer-link">{{ $s->title }}</a>
                @endforeach
            </div>
            <div class="col-lg-3 col-md-6">
                <h6 class="text-white fw-700 mb-3" style="font-size:.78rem;letter-spacing:.5px">Contact</h6>
                @if(!empty($settings['contact_email']))
                <p class="footer-link mb-1"><i class="bi bi-envelope me-1"></i>{{ $settings['contact_email'] }}</p>
                @endif
                <a href="{{ route('contact') }}" class="footer-link">Send an Enquiry</a>
                <a href="{{ route('contact') }}" class="footer-link">Request Consultation</a>
                <a href="{{ route('resources') }}" class="footer-link">Resources</a>
            </div>
        </div>
    </div>
    <div class="footer-bottom py-2 px-4 mt-3 d-flex justify-content-between flex-wrap gap-2">
        <p class="mb-0 small text-secondary" style="font-size:.75rem">© {{ date('Y') }} MUVR Labs. All rights reserved.</p>
        <p class="mb-0 small text-secondary" style="font-size:.75rem">Engineered for performance, precision, and real-world deployment.</p>
    </div>
</footer>

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