// Top nav + language toggle
function TopNav({ copy, lang, setLang, density = 'airy', onCtaClick, logoSize = 22, logoTracking = 0.28, logoMarkScale = 1.7 }) {
  const nav = copy.nav;
  return (
    <>
      <style>{`
        .st-topnav {
          container-type: inline-size;
          position: sticky; top: 0; z-index: 30;
          background: rgba(250, 247, 242, 0.88);
          backdrop-filter: blur(12px) saturate(140%);
          -webkit-backdrop-filter: blur(12px) saturate(140%);
          border-bottom: 1px solid ${TOKENS.color.hairlineSoft};
        }
        .st-topnav-row {
          display: flex; align-items: center; justify-content: space-between;
          gap: 12px;
          padding: ${density === 'airy' ? '22px 24px' : '14px 20px'};
        }
        .st-topnav-cluster {
          display: flex; align-items: center; gap: 18px; flex-shrink: 0;
        }
        .st-topnav-wm { display: inline-flex; align-items: center; }
        @container (max-width: 560px) {
          .st-topnav-row { padding: 14px 16px; gap: 8px; }
          .st-topnav-cluster { gap: 8px; }
        }
      `}</style>
      <div className="st-topnav">
        <div className="st-topnav-row">
          <span className="st-topnav-wm">
            <Wordmark size={logoSize} tracking={logoTracking} markScale={logoMarkScale} />
          </span>
          <div className="st-topnav-cluster">
            <LangToggle lang={lang} setLang={setLang} />
            <Btn variant="primary" size="sm" onClick={onCtaClick}>{nav.contact}</Btn>
          </div>
        </div>
      </div>
    </>
  );
}

// Lotus mark (Soft Bloom) — inline SVG so the wordmark is self-contained.
function LotusMark({ size = 24, color = '#1b3661', accent = '#D48CBF' }) {
  const wash = '#F7EAF1';
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" aria-hidden style={{ flexShrink: 0 }}>
      <ellipse cx="24" cy="24" rx="10" ry="18" fill={wash}/>
      <ellipse cx="24" cy="24" rx="18" ry="10" fill={wash}/>
      <ellipse cx="24" cy="24" rx="14" ry="8" transform="rotate(45 24 24)" fill={accent} opacity="0.55"/>
      <ellipse cx="24" cy="24" rx="14" ry="8" transform="rotate(-45 24 24)" fill={accent} opacity="0.55"/>
      <circle cx="24" cy="24" r="3.2" fill={color}/>
    </svg>
  );
}

// Official wordmark: lotus mark + Option E (Tenor Sans, spaced caps).
// `size` accepts a number (px) or any CSS length string (e.g. 1em).
function Wordmark({ size = 18, color, tracking = 0.28, markScale = 1.7 }) {
  const fs = typeof size === 'number' ? `${size}px` : size;
  const c = color || TOKENS.color.navy;
  return (
    <span style={{
      display: 'inline-flex',
      alignItems: 'center',
      gap: '0.6em',
      fontSize: fs,
      lineHeight: 1,
    }}>
      <span style={{ width: `${markScale}em`, height: `${markScale}em`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
        <LotusMark size="100%" color={c} accent={TOKENS.color.pink} />
      </span>
      <span style={{
        fontFamily: "'Tenor Sans', 'Optima', sans-serif",
        fontWeight: 400,
        fontSize: '1em',
        letterSpacing: `${tracking}em`,
        textTransform: 'uppercase',
        color: c,
        lineHeight: 1,
        paddingRight: `${tracking}em`,
        whiteSpace: 'nowrap',
      }}>SannaTrip</span>
    </span>
  );
}

function LangToggle({ lang, setLang }) {
  return (
    <div style={{
      display: 'flex', gap: 2, padding: 3,
      border: `1px solid ${TOKENS.color.hairline}`,
      borderRadius: TOKENS.r.pill,
      fontFamily: TOKENS.font.sans, fontSize: 11, fontWeight: 500,
      letterSpacing: '0.05em',
    }}>
      {['en', 'es'].map(l => (
        <button key={l} onClick={() => setLang(l)} style={{
          padding: '5px 12px', borderRadius: TOKENS.r.pill,
          border: 'none', cursor: 'pointer',
          background: lang === l ? TOKENS.color.navy : 'transparent',
          color: lang === l ? '#fff' : TOKENS.color.inkSoft,
          textTransform: 'uppercase',
        }}>{l}</button>
      ))}
    </div>
  );
}

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