@php $settings = $settings ?? \App\Models\SiteSetting::getAllSettings(); @endphp
<nav class="navbar navbar-expand-lg main-navbar">
  <div class="container">
    <a class="navbar-brand" href="{{ route('home') }}">
      @if(!empty($settings['logo']))
        <img src="{{ Storage::url($settings['logo']) }}" alt="{{ $settings['site_name'] ?? 'VK Gardening' }}">
      @else
        <img src="{{ asset('images/logo.png') }}" alt="VK Gardening, Landscaping & Home Maintenance">
      @endif
    </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 mx-auto align-items-lg-center">

        <li class="nav-item">
          <a class="nav-link {{ request()->routeIs('home') ? 'active' : '' }}" href="{{ route('home') }}">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link {{ request()->routeIs('about') ? 'active' : '' }}" href="{{ route('about') }}">About Us</a>
        </li>

        {{-- Garden Mega Menu --}}
        <li class="nav-item has-megamenu">
          <a class="nav-link mega-toggle {{ request()->routeIs('garden') ? 'active' : '' }}" href="{{ route('garden') }}">
            Garden <i class="fas fa-chevron-down dropdown-arrow ms-1" style="font-size:.7rem;transition:transform .3s"></i>
          </a>
          <div class="megamenu-wrapper">
            <div class="container">
              <div class="row g-4">
                <div class="col-lg-3">
                  <div class="mega-col-title"><i class="fas fa-leaf me-2"></i>Lawn & Garden</div>
                  <a class="mega-link" href="{{ route('garden') }}#lawn-mowing"><span class="mega-icon"><i class="fas fa-cut"></i></span><span>Lawn Mowing</span></a>
                  <a class="mega-link" href="{{ route('garden') }}#garden-maintenance"><span class="mega-icon"><i class="fas fa-seedling"></i></span><span>Garden Maintenance</span></a>
                  <a class="mega-link" href="{{ route('garden') }}#irrigation"><span class="mega-icon"><i class="fas fa-tint"></i></span><span>Irrigation Systems</span></a>
                  <a class="mega-link" href="{{ route('garden') }}#artificial-turf"><span class="mega-icon"><i class="fas fa-grip-lines"></i></span><span>Artificial Turf</span></a>
                </div>
                <div class="col-lg-3">
                  <div class="mega-col-title"><i class="fas fa-tree me-2"></i>Trees & Plants</div>
                  <a class="mega-link" href="{{ route('garden') }}#plants"><span class="mega-icon"><i class="fas fa-spa"></i></span><span>Plants & Tree Installation</span></a>
                  <a class="mega-link" href="{{ route('garden') }}#tree-removal"><span class="mega-icon"><i class="fas fa-tree"></i></span><span>Tree & Stump Removal</span></a>
                  <a class="mega-link" href="{{ route('garden') }}#indoor-plants"><span class="mega-icon"><i class="fas fa-leaf"></i></span><span>Indoor Plant Care</span></a>
                  <a class="mega-link" href="{{ route('garden') }}#topiary"><span class="mega-icon"><i class="fas fa-scissors"></i></span><span>Topiary & Tree Pruning</span></a>
                </div>
                <div class="col-lg-3">
                  <div class="mega-col-title"><i class="fas fa-star me-2"></i>Seasonal</div>
                  <a class="mega-link" href="{{ route('garden') }}#seasonal"><span class="mega-icon"><i class="fas fa-sun"></i></span><span>Spring Garden Prep</span></a>
                  <a class="mega-link" href="{{ route('garden') }}#mulching"><span class="mega-icon"><i class="fas fa-mountain"></i></span><span>Mulching & Soil Care</span></a>
                  <a class="mega-link" href="{{ route('garden') }}#weed-control"><span class="mega-icon"><i class="fas fa-ban"></i></span><span>Weed Control</span></a>
                  <a class="mega-link" href="{{ route('garden') }}#fertilising"><span class="mega-icon"><i class="fas fa-flask"></i></span><span>Fertilising</span></a>
                </div>
                <div class="col-lg-3">
                  <div class="mega-promo-card">
                    <div><div style="font-size:3rem;text-align:center;margin-bottom:1rem;">🌿</div><h5>Free Garden Consultation</h5><p>Book a free on-site consultation with our expert gardeners. We'll assess your space and tailor the perfect plan.</p></div>
                    <a href="{{ route('contact') }}" class="btn btn-gold btn-sm"><i class="fas fa-calendar-check me-2"></i>Book Now</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>

        {{-- Landscaping Mega Menu --}}
        <li class="nav-item has-megamenu">
          <a class="nav-link mega-toggle {{ request()->routeIs('landscaping') ? 'active' : '' }}" href="{{ route('landscaping') }}">
            Landscaping <i class="fas fa-chevron-down dropdown-arrow ms-1" style="font-size:.7rem;transition:transform .3s"></i>
          </a>
          <div class="megamenu-wrapper">
            <div class="container">
              <div class="row g-4">
                <div class="col-lg-3">
                  <div class="mega-col-title"><i class="fas fa-pencil-ruler me-2"></i>Design</div>
                  <a class="mega-link" href="{{ route('landscaping') }}#landscape-design"><span class="mega-icon"><i class="fas fa-drafting-compass"></i></span><span>Landscape Design</span></a>
                  <a class="mega-link" href="{{ route('landscaping') }}#3d-design"><span class="mega-icon"><i class="fas fa-cube"></i></span><span>3D Garden Planning</span></a>
                  <a class="mega-link" href="{{ route('landscaping') }}#consultation"><span class="mega-icon"><i class="fas fa-comments"></i></span><span>Design Consultation</span></a>
                </div>
                <div class="col-lg-3">
                  <div class="mega-col-title"><i class="fas fa-hard-hat me-2"></i>Installation</div>
                  <a class="mega-link" href="{{ route('landscaping') }}#landscape-install"><span class="mega-icon"><i class="fas fa-tools"></i></span><span>Landscape Installation</span></a>
                  <a class="mega-link" href="{{ route('landscaping') }}#retaining-walls"><span class="mega-icon"><i class="fas fa-border-all"></i></span><span>Retaining Walls</span></a>
                  <a class="mega-link" href="{{ route('landscaping') }}#paving"><span class="mega-icon"><i class="fas fa-th-large"></i></span><span>Paving & Pathways</span></a>
                  <a class="mega-link" href="{{ route('landscaping') }}#pergolas"><span class="mega-icon"><i class="fas fa-archway"></i></span><span>Pergolas & Decking</span></a>
                </div>
                <div class="col-lg-3">
                  <div class="mega-col-title"><i class="fas fa-water me-2"></i>Water Features</div>
                  <a class="mega-link" href="{{ route('landscaping') }}#water-features"><span class="mega-icon"><i class="fas fa-water"></i></span><span>Water Features</span></a>
                  <a class="mega-link" href="{{ route('landscaping') }}#drainage"><span class="mega-icon"><i class="fas fa-faucet"></i></span><span>Drainage Solutions</span></a>
                  <a class="mega-link" href="{{ route('landscaping') }}#lighting"><span class="mega-icon"><i class="fas fa-lightbulb"></i></span><span>Outdoor Lighting</span></a>
                </div>
                <div class="col-lg-3">
                  <div class="mega-promo-card">
                    <div><div style="font-size:3rem;text-align:center;margin-bottom:1rem;">🏡</div><h5>Transform Your Outdoor Space</h5><p>From concept to completion, our landscape designers create stunning, sustainable outdoor living areas.</p></div>
                    <a href="{{ route('contact') }}" class="btn btn-gold btn-sm"><i class="fas fa-arrow-right me-2"></i>Get a Quote</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>

        {{-- Other Services Mega Menu --}}
        <li class="nav-item has-megamenu">
          <a class="nav-link mega-toggle {{ request()->routeIs('other-services') ? 'active' : '' }}" href="{{ route('other-services') }}">
            Other Services <i class="fas fa-chevron-down dropdown-arrow ms-1" style="font-size:.7rem;transition:transform .3s"></i>
          </a>
          <div class="megamenu-wrapper">
            <div class="container">
              <div class="row g-4">
                <div class="col-lg-3">
                  <div class="mega-col-title"><i class="fas fa-home me-2"></i>Home Maintenance</div>
                  <a class="mega-link" href="{{ route('other-services') }}#handyman"><span class="mega-icon"><i class="fas fa-wrench"></i></span><span>Handyman Services</span></a>
                  <a class="mega-link" href="{{ route('other-services') }}#gutter-cleaning"><span class="mega-icon"><i class="fas fa-house-damage"></i></span><span>Gutter Cleaning</span></a>
                  <a class="mega-link" href="{{ route('other-services') }}#gutter-guard"><span class="mega-icon"><i class="fas fa-shield-alt"></i></span><span>Gutter Guard</span></a>
                </div>
                <div class="col-lg-3">
                  <div class="mega-col-title"><i class="fas fa-broom me-2"></i>Cleaning</div>
                  <a class="mega-link" href="{{ route('other-services') }}#pressure-cleaning"><span class="mega-icon"><i class="fas fa-spray-can"></i></span><span>High Pressure Cleaning</span></a>
                  <a class="mega-link" href="{{ route('other-services') }}#home-office-cleaning"><span class="mega-icon"><i class="fas fa-building"></i></span><span>Home & Office Cleaning</span></a>
                  <a class="mega-link" href="{{ route('other-services') }}#solar-cleaning"><span class="mega-icon"><i class="fas fa-solar-panel"></i></span><span>Solar Panel Cleaning</span></a>
                </div>
                <div class="col-lg-3">
                  <div class="mega-col-title"><i class="fas fa-paint-roller me-2"></i>Improvements</div>
                  <a class="mega-link" href="{{ route('other-services') }}#painting"><span class="mega-icon"><i class="fas fa-paint-brush"></i></span><span>Interior Painting</span></a>
                  <a class="mega-link" href="{{ route('other-services') }}#fencing"><span class="mega-icon"><i class="fas fa-border-style"></i></span><span>Fencing</span></a>
                  <a class="mega-link" href="{{ route('other-services') }}#rubbish"><span class="mega-icon"><i class="fas fa-trash-alt"></i></span><span>Rubbish Removal</span></a>
                </div>
                <div class="col-lg-3">
                  <div class="mega-promo-card">
                    <div><div style="font-size:3rem;text-align:center;margin-bottom:1rem;">🔧</div><h5>All-in-One Home Care</h5><p>We handle everything from gutters to solar panels so you don't have to. One call, one team, total care.</p></div>
                    <a href="{{ route('contact') }}" class="btn btn-gold btn-sm"><i class="fas fa-phone me-2"></i>Call Us Today</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>

        <li class="nav-item">
          <a class="nav-link {{ request()->routeIs('contact') ? 'active' : '' }}" href="{{ route('contact') }}">Contact Us</a>
        </li>
      </ul>

      <div class="d-flex align-items-center gap-2 mt-3 mt-lg-0">
        <a href="tel:{{ preg_replace('/\s+/', '', $settings['phone'] ?? '+61406473886') }}" class="btn btn-outline-vk d-none d-xl-flex">
          <i class="fas fa-phone"></i> {{ $settings['phone'] ?? '+61 406 473 886' }}
        </a>
        <a href="{{ route('contact') }}" class="btn-primary-vk navbar-quote-btn">
          <i class="fas fa-clipboard-list"></i> Get a Quote
        </a>
      </div>
    </div>
  </div>
</nav>