/* Navbar — unified dark translucent header over the hero,
   flips to cream once scrolled past it. No stripes. */
const { useState: useStateN, useEffect: useEffectN } = React;

function Navbar() {
  const [isPastHero, setIsPastHero] = useStateN(false);
  const [isMobileOpen, setIsMobileOpen] = useStateN(false);
  const [bannerVisible, setBannerVisible] = useStateN(true);

  useEffectN(() => {
    const onScroll = () => {
      // Measure the actual hero container so this works regardless of
      // its responsive height (360vh mobile / 500vh desktop).
      const hero = document.getElementById('home');
      const heroEnd = hero
        ? hero.offsetTop + hero.offsetHeight - window.innerHeight
        : window.innerHeight * 4;
      setIsPastHero(window.scrollY > heroEnd - 80);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);

  const NAV_LINKS = [
    { label: 'Destinations', href: '#destinations' },
    { label: 'Packages',     href: '#packages' },
    { label: 'Journal',      href: '#testimonials' },
    { label: 'About',        href: '#benefits' },
  ];

  // After hero only — always dark text on cream.
  const ink     = 'var(--ink)';
  const inkSoft = 'var(--ink-soft)';
  const muted   = 'var(--muted)';
  const hairline = 'var(--hairline)';

  return (
    <div className="fixed top-0 left-0 right-0 z-50 transition-all duration-500"
      style={{
        background: 'rgba(250,248,242,0.94)',
        backdropFilter: 'blur(14px) saturate(120%)',
        borderBottom: '1px solid var(--hairline)',
        transform: isPastHero ? 'translateY(0)' : 'translateY(-110%)',
        opacity: isPastHero ? 1 : 0,
        pointerEvents: isPastHero ? 'auto' : 'none',
      }}
    >
      {/* ── Announcement ── */}
      {bannerVisible && (
        <div className="relative" id="announcement-banner"
          style={{
            background: 'var(--banner-bg)',
            borderBottom: '1px solid var(--hairline-2)',
          }}>
          <a href="#packages" className="group block w-full px-6 py-2">
            <span className="flex items-center justify-center gap-1.5 md:gap-2 text-[11.5px] md:text-[12.5px] tracking-[-0.01em] flex-wrap" style={{ color: ink }}>
              <span className="serif-it text-[13px] md:text-[14px]" style={{ color: 'var(--sky-deep)' }}>Summer ’26</span>
              <span style={{ color: inkSoft }} className="hidden sm:inline">— hand-picked itineraries, now 15% off through June</span>
              <span style={{ color: inkSoft }} className="sm:hidden">— 15% off through June</span>
              <span className="inline-flex items-center gap-1 ml-0.5 md:ml-1 underline underline-offset-4 transition-colors"
                style={{ color: ink, textDecorationColor: hairline }}>
                Browse
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M5 12h14M12 5l7 7-7 7"/>
                </svg>
              </span>
            </span>
          </a>
          <button
            onClick={() => setBannerVisible(false)}
            className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 flex items-center justify-center transition-colors"
            style={{ color: muted }}
            aria-label="Dismiss banner"
          >
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
          </button>
        </div>
      )}

      {/* ── Main bar ── */}
      <header id="navbar" className="w-full">
        <div className="mx-auto flex items-center justify-between px-5 md:px-6 lg:px-10 py-3 md:py-4" style={{ maxWidth: '1280px' }}>

          {/* Brand */}
          <a href="#home" className="flex items-baseline gap-2" aria-label="Be Happy">
            <span className="serif text-[20px] md:text-[22px] tracking-[-0.02em] leading-none" style={{ color: ink }}>
              be<span className="serif-it" style={{ color: 'var(--sky-deep)' }}>happy</span>
            </span>
            <span className="hidden sm:inline text-[10px] tracking-[0.18em] uppercase" style={{ color: muted }}>· travel</span>
          </a>

          {/* Desktop nav */}
          <nav className="hidden md:flex items-center gap-1" aria-label="Main">
            {NAV_LINKS.map(l => (
              <a key={l.label} href={l.href}
                className="inline-flex items-center px-3.5 py-2 rounded-full text-[13.5px] tracking-[-0.01em] transition-colors"
                style={{ color: ink }}
                onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(14,14,14,0.06)'}
                onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
                {l.label}
              </a>
            ))}
          </nav>

          {/* Right cluster */}
          <div className="flex items-center gap-3">
            <a href="tel:+1234567890" className="hidden lg:inline-flex items-center gap-1.5 text-[13px] transition-colors"
              style={{ color: inkSoft }}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.8 19.79 19.79 0 01.01 1.18 2 2 0 012 0h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 14v2.92z"/>
              </svg>
              Speak to a planner
            </a>
            <a href="#contact" id="nav-cta"
              className="hidden md:inline-flex items-center gap-2 px-4 py-2 rounded-full text-[13.5px] transition-colors"
              style={{ background: 'var(--ink)', color: 'var(--white)' }}>
              Start planning
            </a>
            <button
              id="mobile-menu-btn"
              className="md:hidden flex items-center justify-center w-9 h-9 rounded-full transition-colors"
              style={{
                border: `1px solid ${hairline}`,
                background: 'var(--white)',
                color: ink,
              }}
              onClick={() => setIsMobileOpen(v => !v)}
              aria-label={isMobileOpen ? 'Close menu' : 'Open menu'}>
              {isMobileOpen
                ? <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
                : <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M3 12h18M3 6h18M3 18h18"/></svg>}
            </button>
          </div>
        </div>
      </header>

      {/* Mobile dropdown */}
      <div className="md:hidden mx-4 mb-2 overflow-hidden transition-all duration-300"
        style={{ maxHeight: isMobileOpen ? '400px' : '0', opacity: isMobileOpen ? 1 : 0 }}>
        <nav className="bg-white rounded-3xl border border-[var(--hairline)] shadow-lg px-5 py-4 flex flex-col gap-1">
          {NAV_LINKS.map(l => (
            <a key={l.label} href={l.href}
              onClick={() => setIsMobileOpen(false)}
              className="py-2.5 px-3 text-sm border-b border-[var(--hairline)] last:border-0 hover:text-[var(--sky-deep)] transition-colors rounded-lg hover:bg-[var(--cream)]"
              style={{ color: 'var(--ink)' }}>
              {l.label}
            </a>
          ))}
          <a href="#contact" onClick={() => setIsMobileOpen(false)}
            className="mt-3 py-2.5 px-4 rounded-full text-center text-sm"
            style={{ background: 'var(--ink)', color: 'var(--white)' }}>
            Start planning
          </a>
        </nav>
      </div>
    </div>
  );
}

window.Navbar = Navbar;