/* LangSwitcher + CurrencySwitcher — pequeñito, encima del header */
function LangCurrencySwitcher() {
  const [, force] = React.useReducer(x => x + 1, 0);
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const h = () => force();
    window.addEventListener('escala:i18n', h);
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => {
      window.removeEventListener('escala:i18n', h);
      document.removeEventListener('mousedown', onDoc);
    };
  }, []);
  const I = window.ESCALA_I18N;
  if (!I || !I.langs || !I.currencies) return null;
  return (
    <div className="lcs" ref={ref}>
      <button className="icon-btn lcs__trigger" onClick={() => setOpen(o => !o)} aria-label="Idioma y moneda">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
          <circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/>
        </svg>
        <span className="lcs__label">{I.state.lang.toUpperCase()} · {I.state.currency}</span>
      </button>
      {open && (
        <div className="lcs__menu">
          <div className="lcs__section">
            <div className="lcs__title">Idioma</div>
            <div className="lcs__opts">
              {I.langs.map(l => (
                <button key={l}
                  className={'lcs__opt' + (I.state.lang === l ? ' is-on' : '')}
                  onClick={() => { I.setLang(l); }}>{l.toUpperCase()}</button>
              ))}
            </div>
          </div>
          <div className="lcs__divider"/>
          <div className="lcs__section">
            <div className="lcs__title">Moneda</div>
            <div className="lcs__opts">
              {I.currencies.map(c => (
                <button key={c}
                  className={'lcs__opt' + (I.state.currency === c ? ' is-on' : '')}
                  onClick={() => { I.setCurrency(c); }}>{c}</button>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function NotFoundPage({ navigate }) {
  const t = window.t || (k => k);
  return (
    <main className="nf">
      <div className="aurora"><div className="aurora-3"/><div className="aurora-4"/></div>
      <div className="container nf__inner">
        <p className="t-eyebrow">404</p>
        <h1 className="t-display nf__title">{t('404.title')}</h1>
        <p className="nf__sub">{t('404.sub')}</p>
        <div className="nf__actions">
          <button className="btn btn--primary" onClick={() => navigate('/')}>{t('404.cta')}</button>
          <button className="btn btn--ghost" onClick={() => navigate('/shop')}>{t('404.shop')}</button>
        </div>
        <svg className="nf__rope" viewBox="0 0 600 120" fill="none" stroke="currentColor" strokeWidth="1">
          <path d="M0,60 Q150,10 300,60 T600,60" strokeDasharray="3 6"/>
        </svg>
      </div>
    </main>
  );
}

Object.assign(window, { LangCurrencySwitcher, NotFoundPage });