// ngn42 — a private system

const HERO_VARIANTS = {
  A: {
    line: 'an inference engine for active traders.',
    tag: 'closed beta. by reference only.',
  },
  B: {
    line: 'signal, compiled.\nfilings parsed. tape watched. notes delivered.',
    tag: 'members-only. not accepting applications at this time.',
  },
  C: {
    line: 'forty-two answers.\nyou bring the questions.',
    tag: 'beta.',
  },
};

const BETA_VARIANTS = {
  plain:    'ngn42 is currently in closed beta. access is by reference.',
  cryptic:  'membership is closed. if you need to ask, it isn\u2019t for you yet.',
  sealed:   'not open. not a waitlist. if someone sent you here, you already know what to do.',
};

const CELLS = [
  { n: '01', name: 'portfolio', desc: 'real-time P&L across accounts. margin surface. position heat.' },
  { n: '02', name: 'filings',   desc: 'sec primary sources. parsed by resident models. no summaries of summaries.' },
  { n: '03', name: 'signal',    desc: 'watchlist telemetry. churn detection. volume confidence scoring.' },
  { n: '04', name: 'risk',      desc: 'atr stops. volatility-adapted sizing. the math, already done.' },
  { n: '05', name: 'bulk buy',  desc: 'basket execution. size once, enter in sequence.' },
  { n: '06', name: 'log',       desc: 'the ledger, not the narrative. fills, timestamps, venues, fees.' },
  { n: '07', name: 'journal',   desc: 'weekly retrospection. behavioral guardrails. the rules that keep you solvent.' },
  { n: '08', name: 'briefs',    desc: 'morning. midday. close. delivered where you already are.' },
];

function Topbar() {
  return (
    <header className="topbar">
      <div className="wrap topbar-inner">
        <div className="topbar-left">
          <span className="mark">ngn42</span>
          <span className="sep">/</span>
          <span>a private system</span>
        </div>
        <nav className="topbar-right">
          <a href="#sub">system</a>
          <a href="#grid">modules</a>
          <a href="#beta">access</a>
          <a href="/ui/login.html" className="active">console &rarr;</a>
          <a href="/ui/login.html">login</a>
        </nav>
      </div>
    </header>
  );
}

function Hero({ variant }) {
  const v = HERO_VARIANTS[variant];
  return (
    <section className="hero">
      <div className="wrap">
        <p className="hero-mark">ngn42</p>
        <h1 className="hero-line">
          {v.line.split('\n').map((l, i) => (
            <React.Fragment key={i}>{l}{i < v.line.split('\n').length - 1 && <br/>}</React.Fragment>
          ))}
        </h1>
        <hr className="hero-rule" />
        <p className="hero-tag">{v.tag}</p>
      </div>
    </section>
  );
}

function Sub() {
  return (
    <section className="sub" id="sub">
      <div className="wrap sub-inner">
        <div className="sub-label">[ the system ]</div>
        <div>
          <p className="sub-body">
            ngn42 reads the market so you don&rsquo;t have to refresh eleven tabs.
            primary-source filings, watchlist telemetry, and a local inference
            layer that writes in plain english. built for one trader. opened to a few more.
          </p>
          <p className="sub-body alt">
            a private system. filings, tape, and a resident model that reads
            faster than you do. currently supporting a handful of operators. not for sale.
          </p>
        </div>
      </div>
    </section>
  );
}

function Beta({ variant }) {
  const [mode, setMode] = React.useState('closed'); // 'closed' | 'open' | 'sending' | 'sent' | 'error'
  const [email, setEmail] = React.useState('');
  const [note, setNote]   = React.useState('');
  const [err, setErr]     = React.useState('');

  const submit = async (e) => {
    e.preventDefault();
    if (!email.trim()) return;
    setMode('sending'); setErr('');
    try {
      const res = await fetch('/api/landing/request-access', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: email.trim(), note: note.trim() }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setErr(data.error || 'Could not send. Try again.');
        setMode('error');
        return;
      }
      setMode('sent');
    } catch (_) {
      setErr('Network error.');
      setMode('error');
    }
  };

  return (
    <section className="beta" id="beta">
      <div className="wrap beta-inner">
        <div className="beta-label">[ access ]</div>
        <div>
          <p className="beta-body">{BETA_VARIANTS[variant]}</p>

          {mode === 'closed' && (
            <button
              className="beta-ask-link"
              onClick={() => setMode('open')}
            >
              ask anyway &rarr;
            </button>
          )}

          {(mode === 'open' || mode === 'sending' || mode === 'error') && (
            <form className="ask-form" onSubmit={submit}>
              <div className="ask-row">
                <label className="ask-label">[ email ]</label>
                <input
                  className="ask-input"
                  type="email"
                  required
                  autoFocus
                  placeholder="you@somewhere"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                />
              </div>
              <div className="ask-row">
                <label className="ask-label">[ message ]</label>
                <textarea
                  className="ask-input ask-textarea"
                  rows={4}
                  placeholder="who sent you, what you trade, why now."
                  value={note}
                  onChange={(e) => setNote(e.target.value)}
                />
              </div>
              {mode === 'error' && (
                <div className="ask-label" style={{ color: 'var(--neg)', marginBottom: 12 }}>
                  [ {err} ]
                </div>
              )}
              <div className="ask-actions">
                <button
                  type="button"
                  className="ask-cancel"
                  onClick={() => { setMode('closed'); setEmail(''); setNote(''); setErr(''); }}
                  disabled={mode === 'sending'}
                >
                  cancel
                </button>
                <button type="submit" className="beta-ask-link" disabled={mode === 'sending'}>
                  {mode === 'sending' ? 'sending\u2026' : 'send \u2192'}
                </button>
              </div>
            </form>
          )}

          {mode === 'sent' && (
            <div className="ask-sent">
              <div className="ask-sent-mark">noted.</div>
              <p className="ask-sent-body">
                we read everything. we reply to some. don&rsquo;t wait on us.
              </p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function Grid() {
  return (
    <section className="grid" id="grid">
      <div className="wrap grid-inner">
        <div className="grid-label">[ modules ]</div>
        <div className="grid-cells">
          {CELLS.map((c) => (
            <div className="cell" key={c.n}>
              <div className="cell-head">
                <span className="cell-num">{c.n}</span>
                <span className="cell-name">{c.name}</span>
              </div>
              <p className="cell-desc">{c.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Foot() {
  return (
    <footer className="foot">
      <div className="wrap foot-inner">
        <div className="foot-left">
          <span>ngn42</span>
          <span className="sep">&middot;</span>
          <span>a private system</span>
          <span className="sep">&middot;</span>
          <span>&copy; 2026</span>
        </div>
        <div className="foot-right">
          <a href="#">status</a>
          <a href="#">changelog</a>
          <a href="#beta">access</a>
        </div>
      </div>
    </footer>
  );
}

// ── Tweaks ──────────────────────────────────────────────────

const ACCENT_MAP = {
  amber: { accent: '#f5a623', dim: '#8a5c14' },
  sage:  { accent: '#7fa875', dim: '#3f5438' },
  cyan:  { accent: '#6ca4a8', dim: '#375257' },
};

function Tweaks({ state, set }) {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onMsg = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') setOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setOpen(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const update = (patch) => {
    const next = { ...state, ...patch };
    set(next);
    window.parent.postMessage({
      type: '__edit_mode_set_keys',
      edits: patch,
    }, '*');
  };

  if (!open) return null;
  return (
    <div className="tweaks">
      <div className="tweaks-title">
        <span>tweaks</span>
        <button className="tweak-close" onClick={() => {
          setOpen(false);
          window.parent.postMessage({ type: '__deactivate_edit_mode' }, '*');
        }}>&times;</button>
      </div>
      <div className="tweak-row">
        <label>hero copy</label>
        <div className="tweak-opts">
          {['A', 'B', 'C'].map(k => (
            <button
              key={k}
              className={'tweak-opt' + (state.hero === k ? ' active' : '')}
              onClick={() => update({ hero: k })}
            >{k}</button>
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <label>access notice &middot; mystique</label>
        <div className="tweak-opts">
          <button
            className={'tweak-opt' + (state.beta === 'plain' ? ' active' : '')}
            onClick={() => update({ beta: 'plain' })}
          >plain</button>
          <button
            className={'tweak-opt' + (state.beta === 'cryptic' ? ' active' : '')}
            onClick={() => update({ beta: 'cryptic' })}
          >cryptic</button>
          <button
            className={'tweak-opt' + (state.beta === 'sealed' ? ' active' : '')}
            onClick={() => update({ beta: 'sealed' })}
          >sealed</button>
        </div>
      </div>
      <div className="tweak-row">
        <label>accent</label>
        <div className="tweak-swatches">
          {['amber', 'sage', 'cyan'].map(a => (
            <button
              key={a}
              className={'tweak-swatch ' + a + (state.accent === a ? ' active' : '')}
              onClick={() => update({ accent: a })}
              title={a}
            />
          ))}
        </div>
      </div>
    </div>
  );
}

// ── App ───────────────────────────────────────────────────────

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "A",
  "beta": "sealed",
  "accent": "amber"
}/*EDITMODE-END*/;

function App() {
  const [state, set] = React.useState(DEFAULTS);

  React.useEffect(() => {
    const a = ACCENT_MAP[state.accent] || ACCENT_MAP.amber;
    document.documentElement.style.setProperty('--accent', a.accent);
    document.documentElement.style.setProperty('--accent-dim', a.dim);
  }, [state.accent]);

  return (
    <>
      <Topbar />
      <Hero variant={state.hero} />
      <Sub />
      <Beta variant={state.beta} />
      <Grid />
      <Foot />
      <Tweaks state={state} set={set} />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);