@php
$locale = app()->getLocale();
// Build the current path without the lang prefix so we can rebuild it for each lang
$rawPath = request()->path(); // e.g. "en/about" or "en"
$pathSegs = explode('/', $rawPath);
array_shift($pathSegs); // drop the lang segment
$pagePath = implode('/', $pathSegs); // e.g. "about" or ""
@endphp
<header id="site-header"
class="fixed top-0 inset-x-0 z-50 transition-all duration-300"
x-data="{
open: false,
services: false,
products: false,
scrolled: false,
mServices: false,
mProducts: false,
}"
@scroll.window="scrolled = window.scrollY > 24"
:class="scrolled ? 'bg-white/98 backdrop-blur-xl shadow-sm border-b border-slate-100' : 'bg-transparent'">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16 lg:h-[68px]">
{{-- โโ Logo โโ --}}
<a href="{{ lang_url('/') }}" class="flex items-center gap-2.5 flex-shrink-0">
@if(setting('logo'))
<img src="{{ asset('storage/'.setting('logo')) }}" alt="{{ setting('site_name','Chandra & Sons') }}" class="h-9 w-auto">
@else
<img src="{{ asset('storage/logo.svg') }}" alt="Chandra & Sons" class="h-9 w-auto"
onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">
<div class="hidden items-center gap-2.5">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background:var(--primary);">
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
</div>
<div class="leading-none">
<p class="font-black text-[15px]" style="color:var(--dark);letter-spacing:-0.03em;">Chandra & Sons</p>
<p class="text-[9px] font-semibold tracking-widest uppercase mt-0.5" style="color:var(--text-muted);">Pharma Distributors</p>
</div>
</div>
@endif
</a>
{{-- โโ Desktop Nav โโ --}}
<nav class="hidden lg:flex items-center gap-6">
<a href="{{ lang_url('/') }}" class="nav-link text-sm">{{ __('site.nav_home') }}</a>
<a href="{{ lang_url('/about') }}" class="nav-link text-sm">{{ __('site.nav_about') }}</a>
{{-- Services dropdown --}}
<div class="relative"
@mouseenter="services=true"
@mouseleave="services=false">
<button class="nav-link flex items-center gap-1 text-sm">
{{ __('site.nav_services') }}
<svg class="w-3.5 h-3.5 transition-transform duration-200" :class="services?'rotate-180':''" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
</button>
<div x-show="services" x-cloak
x-transition:enter="transition ease-out duration-150"
x-transition:enter-start="opacity-0 translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
class="absolute top-full left-1/2 -translate-x-1/2 pt-3 w-64">
<div class="rounded-2xl p-1.5" style="background:white;box-shadow:0 12px 48px rgba(27,10,12,0.14);border:1px solid #E2E8F0;">
<a href="{{ lang_url('/services/wholesale-supply') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 transition-colors group">
<div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0" style="background:var(--primary-light);">
<svg class="w-4 h-4" style="color:var(--primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
</div>
<span class="text-sm font-medium" style="color:var(--text)">{{ __('site.nav_wholesale') }}</span>
</a>
<a href="{{ lang_url('/services/retail-supply') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 transition-colors">
<div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0" style="background:var(--primary-light);">
<svg class="w-4 h-4" style="color:var(--primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
</div>
<span class="text-sm font-medium" style="color:var(--text)">{{ __('site.nav_retail') }}</span>
</a>
<a href="{{ lang_url('/services/export-to-nepal') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-amber-50 transition-colors">
<div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#FEF3CD;"><span class="text-sm">๐ณ๐ต</span></div>
<div>
<span class="text-sm font-semibold block" style="color:var(--primary)">{{ __('site.nav_nepal_export') }}</span>
<span class="text-[10px]" style="color:var(--text-muted)">Border crossing specialist</span>
</div>
</a>
<a href="{{ lang_url('/services/pharmacy-hospital-supply') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 transition-colors">
<div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0" style="background:var(--primary-light);">
<svg class="w-4 h-4" style="color:var(--primary)" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" 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>
<span class="text-sm font-medium" style="color:var(--text)">{{ __('site.nav_pharma_hospital') }}</span>
</a>
</div>
</div>
</div>
{{-- Products dropdown --}}
<div class="relative"
@mouseenter="products=true"
@mouseleave="products=false">
<button class="nav-link flex items-center gap-1 text-sm">
{{ __('site.nav_products') }}
<svg class="w-3.5 h-3.5 transition-transform duration-200" :class="products?'rotate-180':''" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
</button>
<div x-show="products" x-cloak
x-transition:enter="transition ease-out duration-150"
x-transition:enter-start="opacity-0 translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
class="absolute top-full left-1/2 -translate-x-1/2 pt-3 w-52">
<div class="rounded-2xl p-1.5" style="background:white;box-shadow:0 12px 48px rgba(27,10,12,0.14);border:1px solid #E2E8F0;">
@foreach([
['branded-medicines', 'nav_branded'],
['generic-medicines', 'nav_generic'],
['surgical-medical-supplies','nav_surgical'],
['otc-wellness', 'nav_otc'],
] as [$slug, $key])
<a href="{{ lang_url('/products/'.$slug) }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-slate-50 transition-colors">
<span class="text-sm font-medium" style="color:var(--text)">{{ __('site.'.$key) }}</span>
</a>
@endforeach
</div>
</div>
</div>
<a href="{{ lang_url('/brand-partners') }}" class="nav-link text-sm">{{ __('site.nav_brands') }}</a>
<a href="{{ lang_url('/faqs') }}" class="nav-link text-sm">{{ __('site.nav_faqs') }}</a>
<a href="{{ lang_url('/blog') }}" class="nav-link text-sm">{{ __('site.nav_blog') }}</a>
</nav>
{{-- โโ Desktop Right: Language + CTA โโ --}}
<div class="hidden lg:flex items-center gap-3">
{{-- Language switcher: switches to same page in chosen lang --}}
<div class="flex items-center gap-0.5 p-0.5 rounded-xl" style="background:var(--bg);border:1px solid var(--border);">
@foreach(['en'=>'EN','ne'=>'เคจเฅ','hi'=>'เคนเคฟ'] as $code => $label)
<a href="{{ url('/'.$code.($pagePath ? '/'.$pagePath : '')) }}"
class="px-2.5 py-1.5 rounded-lg text-xs font-bold transition-all"
style="{{ $locale===$code ? 'background:var(--primary);color:white;' : 'color:var(--text-muted);' }}">
{{ $label }}
</a>
@endforeach
</div>
<a href="{{ lang_url('/contact') }}" class="btn-primary" style="padding:0.5rem 1.125rem;font-size:0.8125rem;border-radius:10px;">
{{ __('site.btn_contact_us') }}
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
{{-- โโ Mobile hamburger โโ --}}
<button @click="open=!open" class="lg:hidden p-2 rounded-xl" style="color:var(--text)">
<svg x-show="!open" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
<svg x-show="open" x-cloak class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
</div>
{{-- โโ Mobile Menu โโ --}}
<div x-show="open" x-cloak
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-2"
x-transition:enter-end="opacity-100 translate-y-0"
class="lg:hidden bg-white border-t" style="border-color:var(--border);max-height:calc(100vh - 4rem);overflow-y:auto;">
<div class="max-w-7xl mx-auto px-4 py-4 space-y-0.5">
<a href="{{ lang_url('/') }}" class="block py-2.5 px-3 rounded-xl text-sm font-medium hover:bg-slate-50 transition-colors" style="color:var(--text)">{{ __('site.nav_home') }}</a>
<a href="{{ lang_url('/about') }}" class="block py-2.5 px-3 rounded-xl text-sm font-medium hover:bg-slate-50 transition-colors" style="color:var(--text)">{{ __('site.nav_about') }}</a>
{{-- Mobile Services accordion --}}
<div>
<button @click="mServices=!mServices"
class="w-full flex items-center justify-between py-2.5 px-3 rounded-xl text-sm font-medium hover:bg-slate-50 transition-colors"
style="color:var(--text)">
<span>{{ __('site.nav_services') }}</span>
<svg class="w-4 h-4 transition-transform duration-200" :class="mServices?'rotate-180':''" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
</button>
<div x-show="mServices" x-cloak class="pl-4 mt-0.5 space-y-0.5 border-l-2 ml-4" style="border-color:var(--primary-light);">
<a href="{{ lang_url('/services/wholesale-supply') }}" class="block py-2 px-3 rounded-lg text-sm hover:bg-slate-50 transition-colors" style="color:var(--text)">{{ __('site.nav_wholesale') }}</a>
<a href="{{ lang_url('/services/retail-supply') }}" class="block py-2 px-3 rounded-lg text-sm hover:bg-slate-50 transition-colors" style="color:var(--text)">{{ __('site.nav_retail') }}</a>
<a href="{{ lang_url('/services/export-to-nepal') }}" class="block py-2 px-3 rounded-lg text-sm font-semibold hover:bg-amber-50 transition-colors" style="color:var(--primary)">{{ __('site.nav_nepal_export') }}</a>
<a href="{{ lang_url('/services/pharmacy-hospital-supply') }}" class="block py-2 px-3 rounded-lg text-sm hover:bg-slate-50 transition-colors" style="color:var(--text)">{{ __('site.nav_pharma_hospital') }}</a>
</div>
</div>
{{-- Mobile Products accordion --}}
<div>
<button @click="mProducts=!mProducts"
class="w-full flex items-center justify-between py-2.5 px-3 rounded-xl text-sm font-medium hover:bg-slate-50 transition-colors"
style="color:var(--text)">
<span>{{ __('site.nav_products') }}</span>
<svg class="w-4 h-4 transition-transform duration-200" :class="mProducts?'rotate-180':''" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
</button>
<div x-show="mProducts" x-cloak class="pl-4 mt-0.5 space-y-0.5 border-l-2 ml-4" style="border-color:var(--primary-light);">
<a href="{{ lang_url('/products/branded-medicines') }}" class="block py-2 px-3 rounded-lg text-sm hover:bg-slate-50 transition-colors" style="color:var(--text)">{{ __('site.nav_branded') }}</a>
<a href="{{ lang_url('/products/generic-medicines') }}" class="block py-2 px-3 rounded-lg text-sm hover:bg-slate-50 transition-colors" style="color:var(--text)">{{ __('site.nav_generic') }}</a>
<a href="{{ lang_url('/products/surgical-medical-supplies') }}" class="block py-2 px-3 rounded-lg text-sm hover:bg-slate-50 transition-colors" style="color:var(--text)">{{ __('site.nav_surgical') }}</a>
<a href="{{ lang_url('/products/otc-wellness') }}" class="block py-2 px-3 rounded-lg text-sm hover:bg-slate-50 transition-colors" style="color:var(--text)">{{ __('site.nav_otc') }}</a>
</div>
</div>
<a href="{{ lang_url('/brand-partners') }}" class="block py-2.5 px-3 rounded-xl text-sm font-medium hover:bg-slate-50 transition-colors" style="color:var(--text)">{{ __('site.nav_brands') }}</a>
<a href="{{ lang_url('/faqs') }}" class="block py-2.5 px-3 rounded-xl text-sm font-medium hover:bg-slate-50 transition-colors" style="color:var(--text)">{{ __('site.nav_faqs') }}</a>
<a href="{{ lang_url('/blog') }}" class="block py-2.5 px-3 rounded-xl text-sm font-medium hover:bg-slate-50 transition-colors" style="color:var(--text)">{{ __('site.nav_blog') }}</a>
<a href="{{ lang_url('/contact') }}" class="block py-2.5 px-3 rounded-xl text-sm font-medium hover:bg-slate-50 transition-colors" style="color:var(--text)">{{ __('site.nav_contact') }}</a>
{{-- Mobile: Language + CTA --}}
<div class="flex items-center gap-3 pt-3 pb-2 border-t mt-2" style="border-color:var(--border);">
<div class="flex gap-0.5 p-0.5 rounded-xl flex-shrink-0" style="background:var(--bg);border:1px solid var(--border);">
@foreach(['en'=>'EN','ne'=>'เคจเฅ','hi'=>'เคนเคฟ'] as $code => $label)
<a href="{{ url('/'.$code.($pagePath ? '/'.$pagePath : '')) }}"
class="px-2.5 py-1.5 rounded-lg text-xs font-bold transition-all"
style="{{ $locale===$code ? 'background:var(--primary);color:white;' : 'color:var(--text-muted);' }}">
{{ $label }}
</a>
@endforeach
</div>
<a href="{{ lang_url('/contact') }}" class="btn-primary flex-1 text-center" style="padding:0.5rem;font-size:0.8125rem;border-radius:10px;">{{ __('site.btn_contact_us') }} โ</a>
</div>
</div>
</div>
</header>
<div class="h-16 lg:h-[68px]"></div>