/* Shared reading-surface theme. Light is the default everywhere; dark follows
   the system until the reader toggle speaks, then localStorage remembers.
   A window event keeps stacked layers (hub under reader) in sync. */
const READER_C = {
  light: { bg: 'var(--paper)', heading: 'var(--black)', body: 'var(--gray-700)', stand: 'var(--gray-600)', meta: 'var(--gray-500)', rule: 'var(--gray-200)', chip: 'rgba(10,10,10,0.06)', chipHover: 'var(--black)', chipInk: 'var(--black)', chipInkHover: 'var(--white)', progress: 'var(--black)', card: 'var(--white)', hover: 'var(--gray-150)', headBg: 'color-mix(in srgb, var(--paper) 88%, transparent)' },
  dark: { bg: 'var(--black)', heading: 'var(--white)', body: 'var(--gray-on-dark-200)', stand: 'var(--gray-on-dark-400)', meta: 'var(--gray-on-dark-500)', rule: 'var(--border-hairline-dark)', chip: 'rgba(255,255,255,0.08)', chipHover: 'var(--white)', chipInk: 'var(--white)', chipInkHover: 'var(--black)', progress: 'var(--white)', card: 'rgba(255,255,255,0.05)', hover: 'rgba(255,255,255,0.06)', headBg: 'color-mix(in srgb, var(--black) 88%, transparent)' },
};

function readReaderDark() {
  try { const v = localStorage.getItem('sm-reader-dark'); if (v !== null) return v === '1'; } catch (e) {}
  return !!(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
}

function useReaderTheme() {
  const [dark, setDark] = React.useState(readReaderDark);
  React.useEffect(() => {
    const on = () => setDark(readReaderDark());
    window.addEventListener('sm-reader-theme', on);
    return () => window.removeEventListener('sm-reader-theme', on);
  }, []);
  const flip = () => {
    try { localStorage.setItem('sm-reader-dark', dark ? '0' : '1'); } catch (e) {}
    window.dispatchEvent(new Event('sm-reader-theme'));
  };
  return { dark, flip, C: dark ? READER_C.dark : READER_C.light };
}

function ThemeChip({ theme, t }) {
  const { dark, flip, C } = theme;
  const label = dark ? (t && t.lightMode) || 'Light mode' : (t && t.darkMode) || 'Dark mode';
  return (
    <button onClick={flip} aria-label={label} title={label}
      style={{ width: 32, height: 32, minHeight: 32, borderRadius: 'var(--radius-card)', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: C.chip, color: C.chipInk, fontSize: 14, lineHeight: 1, transition: 'background-color .25s ease, color .25s ease' }}>
      {dark ? '\u2600' : '\u263E'}
    </button>
  );
}

function ScreenOverlay({ onClose, backLabel = 'Back to home', meta, zIndex = 60, maxWidth = 1180, theme, t, children }) {
  const { Icon } = window.SevcikMarketingDesignSystem_3203fa;
  const C = theme ? theme.C : READER_C.light;
  const [shown, setShown] = React.useState(false);
  const [h, setH] = React.useState(false);
  React.useEffect(() => {
    const id = requestAnimationFrame(() => setShown(true));
    const to = setTimeout(() => setShown(true), 60);
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    const prev = document.documentElement.style.overflow;
    document.documentElement.style.overflow = 'hidden';
    return () => { cancelAnimationFrame(id); clearTimeout(to); window.removeEventListener('keydown', onKey); document.documentElement.style.overflow = prev; };
  }, [onClose]);
  return (
    <div className="sm-screen-layer" style={{
      position: 'fixed', inset: 0, zIndex, background: C.bg, overflowY: 'auto',
      opacity: shown ? 1 : 0, transform: shown ? 'translateX(0)' : 'translateX(56px)',
      transition: 'opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1), background-color .35s ease',
    }}>
      <div className="sm-layer-head" style={{ position: 'sticky', top: 0, zIndex: 1, background: C.headBg, backdropFilter: 'blur(12px)', borderBottom: `1.5px solid ${C.rule}` }}>
        <div style={{ maxWidth, margin: '0 auto', padding: '14px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20 }}>
          <button onClick={onClose} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
            style={{ display: 'flex', alignItems: 'center', gap: 10, minHeight: 44, border: 'none', background: 'transparent', cursor: 'pointer', padding: 0, fontFamily: 'var(--font-mono)', fontWeight: 500, fontSize: 9.5, letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: h ? C.heading : C.stand, transition: 'color .25s ease' }}>
            <span style={{ width: 32, height: 32, borderRadius: 'var(--radius-card)', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: h ? C.chipHover : C.chip, transition: 'background-color .25s ease' }}>
              <Icon name="arrow-up-left" size={15} color={h ? C.chipInkHover : C.chipInk} />
            </span>
            {backLabel}
          </button>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            {meta && <span className="sm-mono" style={{ fontFamily: 'var(--font-mono)', fontWeight: 500, fontSize: 9.5, letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: C.meta }}>{meta}</span>}
            {theme && <ThemeChip theme={theme} t={t} />}
          </div>
        </div>
      </div>
      <div style={{ maxWidth, margin: '0 auto', padding: '0 24px 96px' }}>{children}</div>
    </div>
  );
}

function OverlayTitle({ title, blurb, C = READER_C.light }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap', margin: '64px 0 32px' }}>
      <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(44px, 6vw, 88px)', lineHeight: 1, letterSpacing: '-0.02em', color: C.heading, margin: 0 }}>{title}</h1>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.6, color: C.stand, margin: 0, maxWidth: '34ch' }}>{blurb}</p>
    </div>
  );
}

Object.assign(window, { ScreenOverlay, OverlayTitle, useReaderTheme, ThemeChip, READER_C });

/* Empty state for a section with nothing published yet. Same gradient plate
   vocabulary as the rest of the site, so an unfinished section still looks
   designed rather than broken. */
function EmptyState({ title, note, gradient, C }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '120px minmax(0, 1fr)', gap: 'clamp(20px, 3vw, 34px)', alignItems: 'center', padding: 'clamp(26px, 4vw, 40px)' }} className="sm-empty-state">
      <div style={{ height: 120, borderRadius: 'var(--radius-card)', background: gradient || 'var(--gradient-thumb-cool)' }}></div>
      <div>
        <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(20px, 2.2vw, 26px)', lineHeight: 1.15, letterSpacing: '-0.02em', color: C.heading }}>{title}</h3>
        <p style={{ margin: '12px 0 0', maxWidth: '52ch', fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.65, color: C.stand, textWrap: 'pretty' }}>{note}</p>
      </div>
    </div>
  );
}

Object.assign(window, { EmptyState });