/** Sticky glass top bar — logo, primary nav, language toggle, CTA. */

const Topbar = ({ lang, setLang }) => (
  <header className="topbar">
    <div className="logo">
      <span className="logo-mark"></span>
      <span>codaro</span>
      <span
        className="font-mono topbar__tag"
        style={{ fontSize: 10, color: 'var(--color-whisper-blue)', marginLeft: 6, letterSpacing: '0.16em' }}
      >
        STUDIO · BISHKEK
      </span>
    </div>

    <nav className="nav-links">
      <a href="#services">{T(lang, 'Услуги', 'Services')}</a>
      <a href="#cases">{T(lang, 'Кейсы', 'Work')}</a>
      <a href="#contact">{T(lang, 'Связаться', 'Contact')}</a>
    </nav>

    <div className="topbar__actions">
      <div className="lang-toggle">
        <button className={lang === 'ru' ? 'active' : ''} onClick={() => setLang('ru')}>RU</button>
        <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
      </div>
      <a href="#contact" className="btn-pill topbar__cta" style={{ height: 36, fontSize: 13 }}>
        <span className="topbar__cta-full">{T(lang, 'Запросить смету', 'Request a quote')}</span>
        <span className="topbar__cta-short">{T(lang, 'Смета', 'Quote')}</span>
        <span style={{ marginLeft: 2 }}>→</span>
      </a>
    </div>
  </header>
);

window.Topbar = Topbar;