{{--
    Kashi Housing — Professional Business Header
    Navigation: Home | Services ▾ | About | Contact | Call CTA
--}}

<style>
/* ── Announcement Bar ── */
.ann-bar {
    background: #0f2942;
    padding: 0.5rem 0;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
}
.ann-bar a { color: rgba(255,255,255,0.75); text-decoration: none; transition: color .2s; }
.ann-bar a:hover { color: white; }
.ann-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.2); }
.ann-badge {
    background: rgba(16,185,129,0.18);
    border: 1px solid rgba(16,185,129,0.3);
    color: #6ee7b7;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}
.ann-dot {
    width: 6px; height: 6px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse 2s infinite;
    display: inline-block;
}

/* ── Main Header ── */
.kh-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #e5e7eb;
    transition: box-shadow .3s;
}
.kh-header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.08); }
.kh-nav {
    display: flex;
    align-items: center;
    height: 68px;
    gap: 0;
}

/* ── Logo ── */
.kh-logo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: auto;
}
.kh-logo-icon {
    width: 38px; height: 38px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}
.kh-logo-icon svg { width: 20px; height: 20px; color: white; stroke: white; }
.kh-logo-check {
    position: absolute;
    bottom: -3px; right: -3px;
    width: 14px; height: 14px;
    background: #10b981;
    border-radius: 50%;
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kh-logo-check svg { width: 8px; height: 8px; color: white; }
.kh-logo-brand { font-size: 1.15rem; font-weight: 800; color: #111827; line-height: 1.1; }
.kh-logo-brand span { color: #2563eb; }
.kh-logo-tag { font-size: 0.65rem; color: #6b7280; font-weight: 500; letter-spacing: 0.03em; }

/* ── Desktop Nav Links ── */
.kh-nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.kh-nav-links > li { position: relative; }
.kh-nav-link {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #374151;
    border-radius: 8px;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color .2s, background .2s;
    white-space: nowrap;
}
.kh-nav-link:hover, .kh-nav-link.active { color: #2563eb; background: #eff6ff; }
.kh-nav-link .chev {
    width: 14px; height: 14px;
    transition: transform .25s;
    flex-shrink: 0;
}
.kh-nav-links > li.open > .kh-nav-link .chev { transform: rotate(180deg); }

/* ── Dropdown ── */
.kh-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 280px;
    background: white;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-8px);
    transition: opacity .2s, transform .2s, visibility .2s;
    pointer-events: none;
}
.kh-nav-links > li.open .kh-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.dd-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #9ca3af;
    padding: 0.6rem 0.75rem 0.25rem;
}
.dd-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 9px;
    text-decoration: none;
    color: #374151;
    transition: background .15s, color .15s;
}
.dd-item:hover { background: #f5f7ff; color: #2563eb; text-decoration: none; }
.dd-icon {
    width: 34px; height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dd-icon svg { width: 16px; height: 16px; }
.dd-item-title { font-size: 0.85rem; font-weight: 600; line-height: 1.2; }
.dd-item-sub { font-size: 0.73rem; color: #9ca3af; line-height: 1.2; }
.dd-divider { height: 1px; background: #f3f4f6; margin: 0.4rem 0.5rem; }

/* ── CTA Buttons ── */
.nav-cta-area {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1rem;
    flex-shrink: 0;
}
.nav-call-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    font-size: 0.83rem;
    font-weight: 700;
    padding: 0.55rem 1.1rem;
    border-radius: 10px;
    text-decoration: none;
    transition: all .25s;
    box-shadow: 0 2px 10px rgba(37,99,235,0.3);
    white-space: nowrap;
}
.nav-call-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37,99,235,0.4);
    color: white;
    text-decoration: none;
}
.nav-wa-btn {
    width: 38px; height: 38px;
    background: #25D366;
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all .25s;
    box-shadow: 0 2px 10px rgba(37,211,102,0.3);
    flex-shrink: 0;
}
.nav-wa-btn:hover { background: #1ebe5c; transform: translateY(-1px); color: white; }

/* ── Hamburger ── */
.kh-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px; height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background .2s;
    flex-shrink: 0;
    margin-left: 0.75rem;
}
.kh-hamburger:hover { background: #f3f4f6; }
.kh-hamburger span {
    display: block;
    width: 22px; height: 2px;
    background: #374151;
    border-radius: 2px;
    transition: all .3s;
}
.kh-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.kh-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.kh-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Mobile Drawer ── */
.kh-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 299;
    opacity: 0;
    transition: opacity .3s;
}
.kh-mobile-overlay.open { display: block; opacity: 1; }
.kh-mobile-drawer {
    position: fixed;
    top: 0; right: 0;
    width: 300px;
    max-width: 90vw;
    height: 100%;
    background: white;
    z-index: 300;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.kh-mobile-drawer.open { transform: translateX(0); }
.mob-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}
.mob-close-btn {
    width: 34px; height: 34px;
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}
.mob-close-btn:hover { background: #e5e7eb; }
.mob-nav-list { list-style: none; padding: 0.75rem; margin: 0; flex: 1; }
.mob-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: #374151;
    border-radius: 10px;
    text-decoration: none;
    transition: background .15s, color .15s;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    justify-content: space-between;
}
.mob-nav-link:hover { background: #f5f7ff; color: #2563eb; text-decoration: none; }
.mob-accordion-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease;
}
.mob-accordion-body.open { max-height: 500px; }
.mob-sub-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem 0.6rem 1.75rem;
    font-size: 0.85rem;
    color: #4b5563;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.mob-sub-link:hover { background: #f5f7ff; color: #2563eb; }
.mob-sub-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mob-drawer-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex-shrink: 0;
}
.mob-call-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.85rem;
    border-radius: 12px;
    text-decoration: none;
    transition: all .25s;
}
.mob-call-btn:hover { color: white; text-decoration: none; filter: brightness(1.08); }
.mob-wa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #25D366;
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.85rem;
    border-radius: 12px;
    text-decoration: none;
    transition: all .25s;
}
.mob-wa-btn:hover { color: white; text-decoration: none; filter: brightness(1.08); }

/* ── Responsive ── */
@media (max-width: 1023px) {
    .kh-nav-links, .nav-cta-area { display: none; }
    .kh-hamburger { display: flex; }
}
@media (max-width: 639px) {
    .ann-bar .ann-social,
    .ann-bar .ann-sep:last-of-type { display: none; }
}
</style>

{{-- Announcement Bar --}}
<div class="ann-bar">
    <div class="container">
        <div class="flex items-center justify-between gap-4">
            <div class="flex items-center gap-3 flex-wrap">
                <a href="mailto:info@kashihousing.com" class="flex items-center gap-1.5">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                    </svg>
                    info@kashihousing.com
                </a>
                <div class="ann-sep"></div>
                <a href="tel:{{ $sitePhone }}" class="flex items-center gap-1.5">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                    </svg>
                    {{ $sitePhone }}
                </a>
            </div>
            <div class="flex items-center gap-3">
                <span class="ann-badge flex items-center gap-1.5">
                    <span class="ann-dot"></span>
                    Investment Advisory · Varanasi
                </span>
                <div class="ann-social flex items-center gap-2">
                    <a href="#" aria-label="Facebook" class="opacity-60 hover:opacity-100 transition-opacity">
                        <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.77,7.46H14.5v-1.9c0-.9.6-1.1,1-1.1h3V.5h-4.33C10.24.5,9.5,3.44,9.5,5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4Z"/></svg>
                    </a>
                    <a href="#" aria-label="Instagram" class="opacity-60 hover:opacity-100 transition-opacity">
                        <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M12,2.16c3.2,0,3.58,0,4.85.07,3.25.15,4.77,1.69,4.92,4.92.06,1.27.07,1.65.07,4.85s0,3.58-.07,4.85c-.15,3.23-1.66,4.77-4.92,4.92-1.27.06-1.64.07-4.85.07s-3.58,0-4.85-.07c-3.26-.15-4.77-1.7-4.92-4.92-.06-1.27-.07-1.64-.07-4.85s0-3.58.07-4.85C2.38,3.92,3.9,2.38,7.15,2.23,8.42,2.18,8.8,2.16,12,2.16ZM12,0C8.74,0,8.33,0,7.05.07c-4.35.2-6.78,2.62-7,7C0,8.33,0,8.74,0,12s0,3.67.07,4.95c.2,4.36,2.62,6.78,7,7C8.33,24,8.74,24,12,24s3.67,0,4.95-.07c4.35-.2,6.78-2.62,7-7C24,15.67,24,15.26,24,12s0-3.67-.07-4.95c-.2-4.35-2.62-6.78-7-7C15.67,0,15.26,0,12,0Zm0,5.84A6.16,6.16,0,1,0,18.16,12,6.16,6.16,0,0,0,12,5.84ZM12,16a4,4,0,1,1,4-4A4,4,0,0,1,12,16ZM18.41,4.15a1.44,1.44,0,1,0,1.44,1.44A1.44,1.44,0,0,0,18.41,4.15Z"/></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Main Header --}}
<header class="kh-header" id="khHeader" role="banner">
    <div class="container">
        <nav class="kh-nav" role="navigation" aria-label="Main navigation">

            {{-- Logo --}}
            <a href="{{ url('/') }}" class="kh-logo" aria-label="Kashi Housing — Home">
                <div class="kh-logo-icon">
                    <svg viewBox="0 0 24 24" fill="none">
                        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <polyline points="9 22 9 12 15 12 15 22" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <div class="kh-logo-check">
                        <svg viewBox="0 0 20 20" fill="white"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                    </div>
                </div>
                <div>
                    <div class="kh-logo-brand">Kashi<span>Housing</span></div>
                    <div class="kh-logo-tag">Real Estate Investment Advisory</div>
                </div>
            </a>

            {{-- Desktop Navigation --}}
            <ul class="kh-nav-links" id="khNavLinks">

                <li>
                    <a href="{{ url('/') }}" class="kh-nav-link {{ request()->is('/') ? 'active' : '' }}">Home</a>
                </li>
                <li>
                    <a href="{{ route('investments.index') }}" class="kh-nav-link {{ request()->routeIs('investments.*') ? 'active' : '' }}">
                        Investments
                    </a>
                </li>
                <li>
                    <a href="{{ route('research.index') }}" class="kh-nav-link {{ request()->routeIs('research.*') ? 'active' : '' }}">
                        Research
                    </a>
                </li>

                {{-- Services Dropdown --}}
                <li id="servicesDropdown">
                    <button class="kh-nav-link" onclick="toggleDropdown('servicesDropdown')" aria-expanded="false" aria-haspopup="true">
                        Services
                        <svg class="chev" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/></svg>
                    </button>
                    <div class="kh-dropdown" role="menu">
                        <div class="dd-section-label">Property Services</div>

                        <a href="{{ route('seo.plot.sale.varanasi') }}" class="dd-item" role="menuitem">
                            <div class="dd-icon" style="background:#dbeafe">
                                <svg fill="none" viewBox="0 0 24 24" stroke="#2563eb"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/></svg>
                            </div>
                            <div>
                                <div class="dd-item-title">Buy a Plot</div>
                                <div class="dd-item-sub">VDA-approved residential & commercial plots</div>
                            </div>
                        </a>

                        <a href="{{ route('seo.flat.sale.varanasi') }}" class="dd-item" role="menuitem">
                            <div class="dd-icon" style="background:#ede9fe">
                                <svg fill="none" viewBox="0 0 24 24" stroke="#7c3aed"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                            </div>
                            <div>
                                <div class="dd-item-title">Buy a Flat</div>
                                <div class="dd-item-sub">Ready-to-move 1–4 BHK apartments</div>
                            </div>
                        </a>

                        <a href="{{ route('seo.duplex.sale.varanasi') }}" class="dd-item" role="menuitem">
                            <div class="dd-icon" style="background:#d1fae5">
                                <svg fill="none" viewBox="0 0 24 24" stroke="#059669"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
                            </div>
                            <div>
                                <div class="dd-item-title">Buy a Duplex</div>
                                <div class="dd-item-sub">Spacious duplex homes & villas</div>
                            </div>
                        </a>

                        <a href="{{ route('contact') }}" class="dd-item" role="menuitem">
                            <div class="dd-icon" style="background:#fef3c7">
                                <svg fill="none" viewBox="0 0 24 24" stroke="#d97706"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"/></svg>
                            </div>
                            <div>
                                <div class="dd-item-title">Rental Assistance</div>
                                <div class="dd-item-sub">Flats, houses & PG rooms for rent</div>
                            </div>
                        </a>

                        <div class="dd-divider"></div>
                        <div class="dd-section-label">Investment & Legal</div>

                        <a href="{{ route('investment.calculator') }}" class="dd-item" role="menuitem">
                            <div class="dd-icon" style="background:#fee2e2">
                                <svg fill="none" viewBox="0 0 24 24" stroke="#dc2626"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                            </div>
                            <div>
                                <div class="dd-item-title">Plot Investment Calculator</div>
                                <div class="dd-item-sub">Estimate returns on Varanasi plots</div>
                            </div>
                        </a>

                        <a href="{{ route('contact') }}" class="dd-item" role="menuitem">
                            <div class="dd-icon" style="background:#cffafe">
                                <svg fill="none" viewBox="0 0 24 24" stroke="#0891b2"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                            </div>
                            <div>
                                <div class="dd-item-title">Legal Consultation</div>
                                <div class="dd-item-sub">Free title check & registry guidance</div>
                            </div>
                        </a>
                    </div>
                </li>

                {{-- Areas Dropdown --}}
                <li id="areasDropdown">
                    <button class="kh-nav-link" onclick="toggleDropdown('areasDropdown')" aria-expanded="false" aria-haspopup="true">
                        Areas
                        <svg class="chev" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/></svg>
                    </button>
                    <div class="kh-dropdown" role="menu">
                        <div class="dd-section-label">Popular Areas in Varanasi</div>
                        <a href="{{ route('seo.plot.rohaniya.varanasi') }}" class="dd-item" role="menuitem">
                            <div class="dd-icon" style="background:#dbeafe">
                                <svg fill="none" viewBox="0 0 24 24" stroke="#2563eb"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0zM15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            </div>
                            <div>
                                <div class="dd-item-title">Plot in Rohaniya</div>
                                <div class="dd-item-sub">NH-19 Corridor · Near Airport</div>
                            </div>
                        </a>
                        <a href="{{ route('seo.plot.sale.varanasi') }}" class="dd-item" role="menuitem">
                            <div class="dd-icon" style="background:#d1fae5">
                                <svg fill="none" viewBox="0 0 24 24" stroke="#059669"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0zM15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            </div>
                            <div>
                                <div class="dd-item-title">Plots Across Varanasi</div>
                                <div class="dd-item-sub">Sarnath, Lanka, Sigra, Babatpur</div>
                            </div>
                        </a>
                        <a href="{{ route('seo.hotel.rent.varanasi') }}" class="dd-item" role="menuitem">
                            <div class="dd-icon" style="background:#fef3c7">
                                <svg fill="none" viewBox="0 0 24 24" stroke="#d97706"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                            </div>
                            <div>
                                <div class="dd-item-title">Hotel on Rent</div>
                                <div class="dd-item-sub">Commercial hotel properties in Varanasi</div>
                            </div>
                        </a>
                    </div>
                </li>

                <li>
                    <a href="{{ route('about') }}" class="kh-nav-link {{ request()->is('about') ? 'active' : '' }}">About</a>
                </li>
                <li>
                    <a href="{{ route('contact') }}" class="kh-nav-link {{ request()->is('contact') ? 'active' : '' }}">Contact</a>
                </li>
                <li>
                    @auth
                        @if(auth()->user()->canAccessInvestorPortal())
                            <a href="{{ route('investor.dashboard') }}" class="kh-nav-link {{ request()->routeIs('investor.*') ? 'active' : '' }}">My Portal</a>
                        @endif
                    @else
                        <a href="{{ route('investor.login') }}" class="kh-nav-link">Investor Login</a>
                    @endauth
                </li>
            </ul>

            {{-- CTA Buttons --}}
            <div class="nav-cta-area">
                <a href="{{ route('contact') }}" class="nav-call-btn" style="background:linear-gradient(135deg,#C9A84C,#a8863a);color:#07111f;box-shadow:0 2px 10px rgba(201,168,76,0.3)">
                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    Free Consultation
                </a>
                <a href="https://wa.me/{{ $siteWhatsapp }}" target="_blank" rel="noopener" class="nav-wa-btn" aria-label="WhatsApp">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                </a>
            </div>

            {{-- Hamburger (mobile) --}}
            <button class="kh-hamburger" id="khHamburger" aria-label="Open menu" onclick="toggleMobileMenu()">
                <span></span><span></span><span></span>
            </button>

        </nav>
    </div>
</header>

{{-- Mobile Overlay --}}
<div class="kh-mobile-overlay" id="khOverlay" onclick="toggleMobileMenu()"></div>

{{-- Mobile Drawer --}}
<div class="kh-mobile-drawer" id="khDrawer" aria-label="Mobile navigation">
    <div class="mob-drawer-header">
        <a href="{{ url('/') }}" class="kh-logo">
            <div class="kh-logo-icon">
                <svg viewBox="0 0 24 24" fill="none"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" stroke="white" stroke-width="2"/><polyline points="9 22 9 12 15 12 15 22" stroke="white" stroke-width="2"/></svg>
                <div class="kh-logo-check"><svg viewBox="0 0 20 20" fill="white"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg></div>
            </div>
            <div>
                <div class="kh-logo-brand">Kashi<span>Housing</span></div>
            </div>
        </a>
        <button class="mob-close-btn" onclick="toggleMobileMenu()" aria-label="Close menu">
            <svg class="w-4 h-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
    </div>

    <ul class="mob-nav-list">
        <li>
            <a href="{{ url('/') }}" class="mob-nav-link">Home</a>
        </li>
        <li>
            <a href="{{ route('investments.index') }}" class="mob-nav-link">Investments</a>
        </li>
        <li>
            <a href="{{ route('research.index') }}" class="mob-nav-link">Research</a>
        </li>

        {{-- Services accordion --}}
        <li>
            <button class="mob-nav-link w-full" onclick="toggleMobAccordion('mobServices')">
                <span>Services</span>
                <svg class="w-4 h-4 text-gray-400 transition-transform" id="mobServicesChev" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
            </button>
            <div class="mob-accordion-body" id="mobServices">
                <a href="{{ route('seo.plot.sale.varanasi') }}" class="mob-sub-link">
                    <span class="mob-sub-dot" style="background:#2563eb"></span> Buy a Plot
                </a>
                <a href="{{ route('seo.flat.sale.varanasi') }}" class="mob-sub-link">
                    <span class="mob-sub-dot" style="background:#7c3aed"></span> Buy a Flat
                </a>
                <a href="{{ route('seo.duplex.sale.varanasi') }}" class="mob-sub-link">
                    <span class="mob-sub-dot" style="background:#059669"></span> Buy a Duplex
                </a>
                <a href="{{ route('contact') }}" class="mob-sub-link">
                    <span class="mob-sub-dot" style="background:#d97706"></span> Rental Assistance
                </a>
                <a href="{{ route('investment.calculator') }}" class="mob-sub-link">
                    <span class="mob-sub-dot" style="background:#dc2626"></span> Plot Investment
                </a>
                <a href="{{ route('contact') }}" class="mob-sub-link">
                    <span class="mob-sub-dot" style="background:#0891b2"></span> Legal Consultation
                </a>
            </div>
        </li>

        {{-- Areas accordion --}}
        <li>
            <button class="mob-nav-link w-full" onclick="toggleMobAccordion('mobAreas')">
                <span>Areas</span>
                <svg class="w-4 h-4 text-gray-400 transition-transform" id="mobAreasChev" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
            </button>
            <div class="mob-accordion-body" id="mobAreas">
                <a href="{{ route('seo.plot.rohaniya.varanasi') }}" class="mob-sub-link">
                    <span class="mob-sub-dot" style="background:#2563eb"></span> Plot in Rohaniya
                </a>
                <a href="{{ route('seo.plot.sale.varanasi') }}" class="mob-sub-link">
                    <span class="mob-sub-dot" style="background:#059669"></span> Plots Across Varanasi
                </a>
                <a href="{{ route('seo.hotel.rent.varanasi') }}" class="mob-sub-link">
                    <span class="mob-sub-dot" style="background:#d97706"></span> Hotel on Rent
                </a>
            </div>
        </li>

        <li><a href="{{ route('about') }}" class="mob-nav-link">About Us</a></li>
        <li><a href="{{ route('contact') }}" class="mob-nav-link">Contact</a></li>
    </ul>

    <div class="mob-drawer-footer">
        <a href="{{ route('contact') }}" class="mob-call-btn" style="background:linear-gradient(135deg,#C9A84C,#a8863a);color:#07111f">
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            Book Free Consultation
        </a>
        <a href="https://wa.me/{{ $siteWhatsapp }}" target="_blank" rel="noopener" class="mob-wa-btn">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
            Chat on WhatsApp
        </a>
    </div>
</div>

<script>
    // Scroll shadow
    window.addEventListener('scroll', function() {
        document.getElementById('khHeader').classList.toggle('scrolled', window.scrollY > 20);
    });

    // Desktop dropdown
    function toggleDropdown(id) {
        const li = document.getElementById(id);
        const isOpen = li.classList.contains('open');
        document.querySelectorAll('.kh-nav-links > li.open').forEach(el => el.classList.remove('open'));
        if (!isOpen) li.classList.add('open');
    }
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.kh-nav-links > li')) {
            document.querySelectorAll('.kh-nav-links > li.open').forEach(el => el.classList.remove('open'));
        }
    });
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            document.querySelectorAll('.kh-nav-links > li.open').forEach(el => el.classList.remove('open'));
            closeMobileMenu();
        }
    });

    // Mobile menu
    function toggleMobileMenu() {
        const isOpen = document.getElementById('khDrawer').classList.contains('open');
        isOpen ? closeMobileMenu() : openMobileMenu();
    }
    function openMobileMenu() {
        document.getElementById('khDrawer').classList.add('open');
        document.getElementById('khOverlay').classList.add('open');
        document.getElementById('khHamburger').classList.add('open');
        document.body.style.overflow = 'hidden';
    }
    function closeMobileMenu() {
        document.getElementById('khDrawer').classList.remove('open');
        document.getElementById('khOverlay').classList.remove('open');
        document.getElementById('khHamburger').classList.remove('open');
        document.body.style.overflow = '';
    }

    // Mobile accordion
    function toggleMobAccordion(id) {
        const body = document.getElementById(id);
        const chevId = id.replace('mob', 'mob') + 'Chev';
        const chevEl = document.getElementById(id + 'Chev') || document.querySelector('[id="' + id.replace('mob','mob') + 'Chev"]');
        const isOpen = body.classList.contains('open');
        document.querySelectorAll('.mob-accordion-body.open').forEach(el => el.classList.remove('open'));
        if (!isOpen) body.classList.add('open');
    }
</script>