// Shell for sub-pages — shared nav, footer, tokens.

const rToken = {
  ink: '#0f0e0c',
  cream: '#efe9dc',
  muted: '#6b6357',
  mutedDark: 'rgba(239,233,220,0.55)',
  mutedDarker: 'rgba(239,233,220,0.75)',
  rule: 'rgba(15,14,12,0.12)',
  ruleDark: 'rgba(239,233,220,0.15)',
  accent: 'oklch(0.68 0.14 55)',
};

const RSerif = ({ children, style }) => (
  <span style={{ fontFamily: '"Instrument Serif", serif', fontWeight: 400, letterSpacing: '-0.02em', ...style }}>{children}</span>
);
const RSans = ({ children, style }) => (
  <span style={{ fontFamily: 'Inter, sans-serif', ...style }}>{children}</span>
);
const RMono = ({ children, style }) => (
  <span style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', ...style }}>{children}</span>
);

const NAV_ITEMS = [
  { id: 'how', href: 'how-it-works.html', label: 'How it works' },
  { id: 'write', href: 'write.html', label: 'Write freely' },
  { id: 'privacy', href: 'privacy.html', label: 'Privacy' },
  { id: 'pricing', href: 'pricing.html', label: 'Pricing' },
];

const RNav = ({ active }) => {
  const labelByActive = {
    how: '02 — protocol',
    write: '03 — no limits',
    privacy: '04 — charter',
    pricing: '05 — plans',
  };
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', borderBottom: `1px solid ${rToken.rule}` }}>
      <div style={{ background: rToken.ink, color: rToken.cream, padding: '22px 56px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="index.html" style={{ textDecoration: 'none', display: 'inline-flex' }}>
          <img src="assets/respoken-wordmark-cream.png" alt="Respoken" style={{ height: 44, width: 'auto', display: 'block' }} />
        </a>
        <RMono style={{ color: rToken.mutedDark }}>{labelByActive[active] || '01 — voice engine'}</RMono>
      </div>
      <div style={{ padding: '22px 56px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, fontSize: 14 }}>
        <div style={{ display: 'flex', gap: 26 }}>
          {NAV_ITEMS.map(n => (
            <a key={n.id} href={n.href} style={{ color: active === n.id ? rToken.ink : rToken.muted, textDecoration: 'none', fontWeight: active === n.id ? 500 : 400 }}>{n.label}</a>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
          <span style={{ color: rToken.muted }}>Sign in</span>
          <div style={{ background: rToken.ink, color: rToken.cream, padding: '10px 22px', borderRadius: 999 }}>Try now</div>
        </div>
      </div>
    </div>
  );
};

const RFooter = () => (
  <div style={{ background: rToken.ink, color: rToken.cream, padding: '56px 64px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
    <a href="index.html" style={{ textDecoration: 'none', display: 'inline-flex' }}>
      <img src="assets/respoken-wordmark-cream.png" alt="Respoken" style={{ height: 56, width: 'auto', display: 'block' }} />
    </a>
    <div style={{ display: 'flex', gap: 28 }}>
      {NAV_ITEMS.map(n => (
        <a key={n.id} href={n.href} style={{ color: rToken.mutedDark, textDecoration: 'none' }}><RMono>{n.label}</RMono></a>
      ))}
    </div>
    <RMono style={{ color: rToken.mutedDark }}>respoken.ai · mmxxvi</RMono>
  </div>
);

window.RNav = RNav;
window.RFooter = RFooter;
window.RSerif = RSerif;
window.RSans = RSans;
window.RMono = RMono;
window.rToken = rToken;