// Top utility bar + main nav with sticky behavior

const TopBar = () => (
  <div className="topbar">
    <div className="container topbar-inner">
      <div className="topbar-left">
        <IconClock size={13} />
        <span>Mon – Sat · 10:00 AM – 8:00 PM · Sunday Closed</span>
      </div>
      <div className="topbar-right">
        <a className="topbar-phone" href="tel:+923094951551"><IconPhone size={13} /> +92 309 4951551</a>
        <span className="topbar-sep hide-sm">·</span>
        <a href="/blog" className="hide-sm">Blog</a>
        <span className="topbar-sep hide-sm">·</span>
        <a href="/contact" className="hide-sm">Contact</a>
        <a href="/about" className="hide-sm" style={{ color: '#FF6B35' }}>About</a>
      </div>
    </div>
  </div>
);

const NAV_PRIVATE = [
  { name: "Hunza & Skardu", sub: "Karakoram · 7 Days" },
  { name: "Naran & Shogran", sub: "KP · 5 Days" },
  { name: "Kalam & Swat", sub: "KP · 5 Days" },
  { name: "Kumrat Valley", sub: "KP · 4 Days" },
  { name: "Murree & Galyat", sub: "PJ · 3 Days" },
  { name: "Azad Kashmir", sub: "AK · 6 Days" },
];
const NAV_INTL = [
  { name: "Europe", sub: "CH · FR · IT · 14 Days" },
  { name: "Türkiye & Cappadocia", sub: "IST · 10 Days" },
  { name: "Dubai & Baku", sub: "DXB · 7 Days" },
  { name: "Thailand & Malaysia", sub: "8 Days" },
  { name: "Indonesia (Bali)", sub: "DPS · 7 Days" },
  { name: "USA & Canada", sub: "12 Days" },
  { name: "Umrah Pilgrimage", sub: "SA · 10–14 Days" },
];

const Dropdown = ({ label, items, sectionId }) => {
  const scrollTo = (e) => {
    e.preventDefault();
    document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };
  return (
    <div className="has-drop">
      <button className="nav-link">{label} <IconChevron size={13} /></button>
      <div className="drop-panel" role="menu">
        {items.map((it) => (
          <a key={it.name} className="drop-item" href={`#${sectionId}`} onClick={scrollTo}>
            <span className="drop-item-title">{it.name}</span>
            <span className="drop-item-sub">{it.sub}</span>
          </a>
        ))}
      </div>
    </div>
  );
};

const Nav = ({ onPlan, onMenu }) => {
  const path = window.location.pathname.replace(/\/+$/, '') || '/';
  const isHome = path === '/';
  const [solid, setSolid] = React.useState(!isHome);
  React.useEffect(() => {
    const onScroll = () => setSolid(!isHome || window.scrollY > 60);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [isHome]);
  const goTo = (id) => (e) => {
    if (isHome) {
      e.preventDefault();
      document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };
  return (
    <div className={`nav-wrap ${solid ? 'solid' : ''}`}>
      <div className="container nav">
        <Logo dark={!solid} />
        <nav className="nav-center" aria-label="Primary">
          <a className={`nav-link ${isHome ? 'active' : ''}`} href="/" onClick={goTo('top')}>Home</a>
          <a className="nav-link" href="/international-tour-packages-from-lahore">Tour Packages</a>
          <a className="nav-link" href="/about">About Us</a>
          <a className="nav-link" href="/contact">Contact</a>
          {isHome && (
            <>
              <a className="nav-link" href="#tours" onClick={goTo('tours')}>Premium Group</a>
              <Dropdown label="Private Tours" items={NAV_PRIVATE} sectionId="pakistan" />
              <Dropdown label="International" items={NAV_INTL} sectionId="world" />
              <a className="nav-link" href="#sikh" onClick={goTo('sikh')}>Sikh Yatra</a>
            </>
          )}
        </nav>
        <div className="nav-right">
          <button className="btn btn-primary btn-sm nav-cta" onClick={onPlan}>Plan my trip <IconArrowRight size={14} /></button>
          <button className="nav-burger" aria-label="Menu" onClick={onMenu}><IconMenu size={22} /></button>
        </div>
      </div>
    </div>
  );
};

const MobileNav = ({ open, onClose, onPlan }) => (
  <div className={`mobile-nav ${open ? 'open' : ''}`}>
    <div className="mobile-nav-head">
      <div className="mobile-nav-brand"><Logo /></div>
      <button className="modal-close" onClick={onClose}><IconX size={18} /></button>
    </div>
    <a href="/" onClick={onClose}>Home</a>
    <a href="/international-tour-packages-from-lahore" onClick={onClose}>Tour Packages</a>
    <a href="/about" onClick={onClose}>About Us</a>
    <a href="/contact" onClick={onClose}>Contact</a>
    <a href="/#tours" onClick={onClose}>Premium Group</a>
    <a href="/#pakistan" onClick={onClose}>Private Tours</a>
    <a href="/#world" onClick={onClose}>International</a>
    <a href="/#calc" onClick={onClose}>Trip Calculator</a>
    <a href="/#sikh" onClick={onClose}>Sikh Yatra</a>
    <button className="btn btn-primary" style={{ marginTop: 24, width: '100%' }} onClick={() => { onClose(); onPlan(); }}>Plan my trip</button>
  </div>
);

Object.assign(window, { TopBar, Nav, MobileNav });