/* Stub page EN — "coming soon" */
/* global React */
function StubPage({ page, eyebrow, title, body, extra }) {
  return (
    <Site page={page}>
      <main data-screen-label={page} style={{ padding: '120px var(--gutter) 64px', minHeight: '60vh' }}>
        <div className="container-narrow">
          <div className="eyebrow accent eyebrow-dot">{eyebrow}</div>
          <h1 className="h1" style={{ marginTop: 22, fontWeight: 600 }}>{title}</h1>
          <p className="lede" style={{ marginTop: 24, maxWidth: 580 }}>{body}</p>
          {extra}
          <div style={{ marginTop: 56, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            <a href="#newsletter" className="btn btn-primary" onClick={(e) => {
              e.preventDefault();
              const anchor = document.createElement('a'); anchor.href = 'index.html#newsletter'; anchor.click();
            }}>Notify me at launch <span className="btn-arrow">→</span></a>
            <a href="index.html" className="btn btn-ghost">← Home</a>
          </div>
        </div>
      </main>
    </Site>
  );
}
window.StubPage = StubPage;