// Page shell — sets page width, folio, running head.
// Each "spread" is a full-viewport section.

function Shell({ children }) {
  const kids = React.Children.toArray(children);
  return (
    <div>
      {/* top running bar — persistent */}
      <div style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
        background: 'rgba(240, 234, 219, 0.88)',
        backdropFilter: 'blur(8px)',
        borderBottom: '1px solid var(--rule)',
        padding: '10px clamp(20px, 3vw, 40px)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
        color: 'var(--ink-soft)',
      }}>
        <span>Noble Rock Partners</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ width: 6, height: 6, background: 'var(--walnut)', display: 'inline-block', transform: 'rotate(45deg)' }} />
          <span>Brand Exploration · Phase 01</span>
        </span>
        <span>MMXXVI · Vol. I</span>
      </div>

      {kids.map((child, i) => (
        <section key={i} style={{
          position: 'relative',
          minHeight: i === 0 ? '100vh' : 'auto',
        }}>
          {child}
        </section>
      ))}
    </div>
  );
}

Object.assign(window, { Shell });