// coming-soon.jsx — single-page launch capture for Prospicio

function ComingSoonForm() {
  const [email, setEmail] = React.useState('');
  const [state, setState] = React.useState('idle'); // 'idle' | 'submitting' | 'success' | 'invalid'
  const validEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  const onSubmit = (e) => {
    e.preventDefault();
    if (!validEmail.test(email.trim())) {
      setState('invalid');
      return;
    }
    setState('submitting');
    // Simulated submission — replace with real endpoint when launch lands
    setTimeout(() => setState('success'), 450);
  };

  if (state === 'success') {
    return (
      <div>
        <div className="cs-success">
          <span className="tick">✦</span>
          <span className="msg">
            You're on <em>the list.</em>
          </span>
        </div>
        <p className="cs-success-fine">
          We'll inform you when the door opens. Unsubscribe any time <strong></strong>, no exit survey. Want to read more in the meantime? See <a href="index.html">the field notes</a>.
        </p>
      </div>);

  }

  return (
    <div>
      <form className={`cs-form${state === 'invalid' ? ' invalid' : ''}`} onSubmit={onSubmit} noValidate>
        <input
          type="email"
          inputMode="email"
          autoComplete="email"
          placeholder="you@work.com"
          aria-label="Email address"
          value={email}
          onChange={(e) => {setEmail(e.target.value);if (state === 'invalid') setState('idle');}}
          required />

        <button type="submit" disabled={state === 'submitting'}>
          {state === 'submitting' ? 'Adding…' : 'Reserve a seat'}
          <svg className="arrow" width="14" height="10" viewBox="0 0 12 10" fill="none">
            <path d="M1 5h10M7 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>
      </form>
      <div className={`cs-error${state === 'invalid' ? ' show' : ''}`}>
        That doesn't look like an email. Try again — we only need the address.
      </div>
      <div className="cs-fine">
        One launch email · <span className="sep">·</span> No marketing · <span className="sep">·</span> Unsubscribe in one click
      </div>
    </div>);

}

function ComingSoonApp() {
  return (
    <div className="cs-shell">
      {/* Top bar */}
      <header className="cs-bar">
        <div className="container cs-bar-inner">
          <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>
            <Wordmark size={22} />
          </a>
          <span className="cs-status">
            <span className="pulse"></span>
            <span>In rehearsal · Q3 2026</span>
          </span>
        </div>
      </header>

      {/* Main split */}
      <main className="container cs-main">
        <div className="cs-left">
          <Eyebrow>Prospicere · to look ahead</Eyebrow>
          <h1>
            Look <em>ahead.</em><br />Soon.
          </h1>
          <p className="lede">
            <strong>Prospicio</strong> is the rehearsal before the moment that decides. Practice the conversations that move your career — the salary, the pitch, the first‑round, the hard 1‑1 — against a worthy opponent, in private, before they happen.
          </p>
          <ComingSoonForm />
        </div>

        <div className="cs-right">
          <div className="cs-image">
            <span className="crosshair"></span>
            <span className="caption">Cover · Issue 01 · forthcoming</span>
          </div>
          <div className="cs-manifest">
            <span className="label">From the field journal</span>
            <p className="quote">
              "There is a particular kind of silence in the seconds after a hard question. <em>Most people fill it badly.</em>"
            </p>
            <span className="load-line"></span>
          </div>
        </div>
      </main>

      {/* Four beats */}
      <section className="container cs-beats">
        <div className="cs-beat">
          <span className="n">01</span>
          <h3>Pick the scenario.</h3>
          <p>Interview, salary, pitch, or the hard 1‑1. Calibrated to your role, your level, and the company across the table.</p>
        </div>
        <div className="cs-beat">
          <span className="n">02</span>
          <h3>Run it in private.</h3>
          <p>Voice in, voice back, under 600 ms. A worthy opponent who pushes back, holds silence, notices when you flinch.</p>
        </div>
        <div className="cs-beat">
          <span className="n">03</span>
          <h3>Read the report.</h3>
          <p>Not a score. The specific moments worth re-watching, what went wrong, and what to do differently next time.</p>
        </div>
        <div className="cs-beat">
          <span className="n">04</span>
          <h3>Get better.</h3>
          <p>Learn from your mistakes. Train your brain to engage appropriately. Course recommendations targeted at your areas of improvement.</p>
        </div>
      </section>

      {/* Footer */}
      <footer className="container cs-foot">
        <span>© 2026 Prospicio · From the Latin <em style={{ fontFamily: 'var(--display)', fontStyle: 'italic', textTransform: 'none', letterSpacing: 0 }}>prospicere</em> — to look ahead</span>
        <span className="cs-foot-links">
          <a href="mailto:hello@prospicio.ai">HELLO@PROSPICIO.APP</a>
          <a href="#">Privacy</a>
          <a href="https://twitter.com" target="_blank" rel="noreferrer noopener">Follow</a>
        </span>
      </footer>
    </div>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<ComingSoonApp />);