// Header.jsx — Maison Gifts
// Sticky navigation: wordmark, anchor links, EN/ID toggle, quote CTA, mobile menu.

const Wordmark = ({ onClick, inverse = false }) => {
  const ink = inverse ? '#F6F1E6' : 'var(--navy-ink)';
  return (
    <button onClick={onClick} aria-label="Maison Gifts home" style={{
      display: 'flex', alignItems: 'center', gap: 12, background: 'none', border: 'none',
      cursor: 'pointer', padding: 0
    }}>
      {/* Brand emblem */}
      <img src="maison/img/icon.png" alt="" style={{
        borderRadius: 'var(--radius-sm)', display: 'block', flexShrink: 0, height: "60px", margin: "0px", objectFit: "cover", width: "60px"
      }} />
      <span style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center', lineHeight: 1
      }}>
        <span style={{
          fontWeight: 600, letterSpacing: '0.02em', color: ink,
          fontFamily: 'var(--font-display)', fontSize: 22, lineHeight: 1, whiteSpace: 'nowrap'
        }}>Maison Gifts</span>
        <span style={{
          fontFamily: 'var(--font-sans)', fontSize: 9.5, fontWeight: 500,
          letterSpacing: '0.34em', textTransform: 'uppercase', marginTop: 4,
          color: inverse ? 'rgba(246,241,230,0.55)' : 'var(--grey)'
        }}>Indonesia</span>
      </span>
    </button>);

};

const LangToggle = ({ inverse = false }) => {
  const { lang, setLang } = useLang();
  const base = {
    fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.04em',
    border: 'none', cursor: 'pointer', padding: '5px 10px', borderRadius: 'var(--radius-full)',
    transition: 'all 160ms ease', background: 'transparent'
  };
  const dim = inverse ? 'rgba(246,241,230,0.55)' : 'var(--grey)';
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 2, padding: 3,
      borderRadius: 'var(--radius-full)',
      border: inverse ? '1px solid rgba(246,241,230,0.22)' : '1px solid var(--grey-line)'
    }}>
      {['en', 'id'].map((code) =>
      <button key={code} onClick={() => setLang(code)} style={{
        ...base,
        color: lang === code ? '#F6F1E6' : dim,
        background: lang === code ? 'var(--burgundy)' : 'transparent'
      }}>{code.toUpperCase()}</button>
      )}
    </div>);

};

const Header = () => {
  const c = useContent();
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.pageYOffset > 24);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const go = (id) => {setOpen(false);scrollToId(id);};

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: 'var(--cream-deep)',
      backdropFilter: scrolled ? 'saturate(180%) blur(14px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'saturate(180%) blur(14px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--grey-line)' : '1px solid transparent',
      transition: 'background 240ms ease, border-color 240ms ease'
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '0 var(--space-8)',
        height: 76, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24
      }}>
        <Wordmark onClick={() => go('top')} />

        {/* Desktop nav */}
        <nav className="mg-desktop-nav" style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          {c.nav.links.map((l) =>
          <button key={l.id} onClick={() => go(l.id)} style={{
            fontFamily: 'var(--font-sans)', fontSize: 14.5, fontWeight: 400,
            color: 'var(--text-2)', background: 'none', border: 'none', cursor: 'pointer',
            padding: '8px 11px', borderRadius: 'var(--radius-sm)', transition: 'color 150ms ease, background 150ms ease'
          }}
          onMouseEnter={(e) => {e.currentTarget.style.color = 'var(--burgundy)';}}
          onMouseLeave={(e) => {e.currentTarget.style.color = 'var(--text-2)';}}>
            {l.label}</button>
          )}
        </nav>

        <div className="mg-desktop-actions" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <LangToggle />
          <button onClick={() => go('contact')} style={{
            fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500,
            background: 'var(--burgundy)', color: '#F6F1E6', border: 'none', cursor: 'pointer',
            padding: '11px 20px', borderRadius: 'var(--radius-full)',
            boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.06)', transition: 'background 160ms ease, transform 160ms ease',
            display: 'inline-flex', alignItems: 'center', gap: 8
          }}
          onMouseEnter={(e) => {e.currentTarget.style.background = 'var(--burgundy-deep)';}}
          onMouseLeave={(e) => {e.currentTarget.style.background = 'var(--burgundy)';}}>
            
            {c.nav.quote}
            <i data-lucide="arrow-right" style={{ width: 16, height: 16, strokeWidth: 2 }}></i>
          </button>
        </div>

        {/* Mobile trigger */}
        <button className="mg-mobile-trigger" onClick={() => setOpen((o) => !o)} aria-label="Menu" style={{
          display: 'none', background: 'none', border: '1px solid var(--grey-line)',
          borderRadius: 'var(--radius-sm)', width: 42, height: 42, cursor: 'pointer',
          alignItems: 'center', justifyContent: 'center', color: 'var(--navy-ink)'
        }}>
          <i data-lucide={open ? 'x' : 'menu'} style={{ width: 20, height: 20 }}></i>
        </button>
      </div>

      {/* Mobile menu */}
      {open &&
      <div className="mg-mobile-menu" style={{
        background: 'var(--cream)', borderBottom: '1px solid var(--grey-line)',
        padding: 'var(--space-4) var(--space-6) var(--space-6)'
      }}>
          <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {c.nav.links.map((l) =>
          <button key={l.id} onClick={() => go(l.id)} style={{
            fontFamily: 'var(--font-sans)', fontSize: 16, fontWeight: 400, textAlign: 'left',
            color: 'var(--navy-ink)', background: 'none', border: 'none', cursor: 'pointer',
            padding: '13px 6px', borderBottom: '1px solid var(--grey-line)'
          }}>{l.label}</button>
          )}
          </nav>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 18 }}>
            <LangToggle />
            <button onClick={() => go('contact')} style={{
            fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500,
            background: 'var(--burgundy)', color: '#F6F1E6', border: 'none', cursor: 'pointer',
            padding: '11px 20px', borderRadius: 'var(--radius-full)'
          }}>{c.nav.quote}</button>
          </div>
        </div>
      }
    </header>);

};

Object.assign(window, { Header, Wordmark, LangToggle });