/* global React */
const { useState: _eaUse } = React;

function EarlyAccess() {
  const [submitted, setSubmitted] = _eaUse(false);
  const [form, setForm] = _eaUse({ name: '', email: '', school: '', year: '' });
  function update(k, v) { setForm((f) => ({ ...f, [k]: v })); }
  function submit(e) { e.preventDefault(); setSubmitted(true); }

  return (
    <section className="sec page" id="access" style={{ paddingBottom: 80 }}>
      <div className="phase-num" style={{ top: '10%', right: '-3%', color: 'transparent', WebkitTextStroke: '1px rgba(14,15,16,0.06)' }}>07</div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 48 }}>
        <div className="section-label"><span className="dot"></span><span className="mono">Phase / 07 · Access</span></div>
        <div className="mono mono-sm" style={{ color: 'var(--olive)' }}>● COHORT 43 OPEN</div>
      </div>

      <div className="early">
        <div>
          <h2 className="early-claim">
            Join the cohort.<br/>Build your <span className="serif-it" style={{ color: 'var(--olive)' }}>semester</span><span className="dot">.</span>
          </h2>
          <p className="early-sub">Closed early access. 48 seats. One semester.</p>

          {!submitted ? (
            <form className="form" onSubmit={submit}>
              <div className="field"><label>Name</label><input placeholder="Maya Rivera" value={form.name} onChange={(e)=>update('name', e.target.value)} required /></div>
              <div className="field"><label>Email</label><input type="email" placeholder="you@school.edu" value={form.email} onChange={(e)=>update('email', e.target.value)} required /></div>
              <div className="field"><label>School</label><input placeholder="Princeton '27" value={form.school} onChange={(e)=>update('school', e.target.value)} required /></div>
              <div className="field"><label>Year</label><select value={form.year} onChange={(e)=>update('year', e.target.value)} required><option value="">—</option><option>Freshman</option><option>Sophomore</option><option>Junior</option><option>Senior</option><option>Graduate</option></select></div>
              <div className="form-submit">
                <div className="note">Replies within 7 days</div>
                <button className="btn-submit" type="submit"><span className="dot"></span> Request access</button>
              </div>
            </form>
          ) : (
            <div style={{ border: '1px solid var(--olive)', padding: '28px 32px', background: 'rgba(203,255,61,0.14)' }}>
              <div className="mono mono-sm" style={{ color: 'var(--olive)', marginBottom: 10 }}>● APPLICATION RECEIVED</div>
              <div style={{ fontFamily: 'Inter Tight', fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>Thanks, {form.name.split(' ')[0] || 'friend'}.</div>
              <div style={{ color: 'var(--ink-2)', marginTop: 6 }}>We'll reply to {form.email || 'your inbox'} within 7 days.</div>
            </div>
          )}
        </div>

        <div className="status-panel">
          <div style={{ fontFamily: 'Inter Tight', fontWeight: 700, fontSize: 18, color: '#fff', marginBottom: 18, letterSpacing: '-0.01em' }}>Build status</div>
          <div className="row"><span className="k">Status</span><span className="v">Early access</span></div>
          <div className="row"><span className="k">Cohort</span><span className="v">Closed · 42</span></div>
          <div className="row"><span className="k">Surface</span><span className="v neutral">Web</span></div>
          <div className="row"><span className="k">Track</span><span className="v">Active build</span></div>
          <div className="row"><span className="k">Code</span><span className="v neutral">OR-03</span></div>
          <div className="row"><span className="k">Version</span><span className="v neutral">v0.4.2</span></div>
        </div>
      </div>

      <div className="footer" style={{ marginTop: 120 }}>
        <div>BeBoosted · ORIA Foundations</div>
        <div style={{ textAlign: 'center' }}>Platform / Productivity</div>
        <div className="right">v0.4.2 · OR-03</div>
      </div>
    </section>
  );
}

Object.assign(window, { EarlyAccess });