/* global React, Nav, Footer */
const { useState } = React;

function Header() {
  return (
    <section style={{ padding: "72px 0 40px", borderBottom: "1px solid var(--rule)" }}>
      <div className="wrap">
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 22 }}>
          <span className="rule-thick" />
          <span className="eyebrow">Membership · Free, open application</span>
        </div>
        <h1 className="t-display" style={{ maxWidth: 880 }}>
          Apply to join the Society.
        </h1>
        <p className="lede" style={{ marginTop: 22, maxWidth: 640 }}>
          Membership is free and open to clinicians, researchers, students, and professionals working in digital mental health.
        </p>
      </div>
    </section>
  );
}

function Form() {
  return (
    <section style={{ padding: "72px 0 96px" }}>
      <div className="wrap">
        <div className="grid-apply">
          <form className="card" style={{ padding: 36 }} onSubmit={e => e.preventDefault()}>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 24 }}>
              <span style={{ fontFamily: "var(--type-mono)", fontSize: 11, letterSpacing: "0.1em", color: "var(--ink-4)" }}>/ 01</span>
              <span className="eyebrow">Application</span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <div className="field">
                <label>First name</label>
                <input type="text" placeholder="Your given name" />
              </div>
              <div className="field">
                <label>Last name</label>
                <input type="text" placeholder="Your family name" />
              </div>
            </div>
            <div className="field" style={{ marginTop: 16 }}>
              <label>Email</label>
              <input type="email" placeholder="name@institution.org" />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 16 }}>
              <div className="field">
                <label>Affiliation</label>
                <input type="text" placeholder="Institution or organization" />
              </div>
              <div className="field">
                <label>Country</label>
                <input type="text" placeholder="Where you're based" />
              </div>
            </div>
            <div className="field" style={{ marginTop: 16 }}>
              <label>Role</label>
              <select defaultValue="">
                <option value="" disabled>Select your primary role</option>
                <option>Clinician (psychiatrist, psychologist, nurse, etc.)</option>
                <option>Researcher / Academic</option>
                <option>Student / Trainee</option>
                <option>Industry / Technology</option>
                <option>Lived experience / Advocate</option>
                <option>Other</option>
              </select>
            </div>
            <div className="field" style={{ marginTop: 16 }}>
              <label>Areas of interest (optional)</label>
              <textarea rows="4" placeholder="Briefly describe your work in or interest in digital mental health"></textarea>
            </div>
            <div style={{ marginTop: 28, display: "flex", gap: 12, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap" }}>
              <span className="caption">By applying you agree to receive Society communications. Free to join.</span>
              <button type="submit" className="btn btn-primary">Submit application</button>
            </div>
          </form>

          <aside style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div className="card">
              <span className="eyebrow">Who can apply</span>
              <ul style={{ listStyle: "none", padding: 0, margin: "14px 0 0", display: "flex", flexDirection: "column", gap: 8 }}>
                {["Clinicians in mental health", "Researchers & academics", "Students & trainees", "Technologists & industry", "Lived experience advocates"].map(x => (
                  <li key={x} className="body-sm" style={{ display: "flex", gap: 10 }}>
                    <span style={{ color: "var(--indigo-500)", fontFamily: "var(--type-mono)" }}>—</span>{x}
                  </li>
                ))}
              </ul>
            </div>
            <div className="card" style={{ background: "var(--indigo-900)", borderColor: "var(--indigo-900)", color: "white", position: "relative", overflow: "hidden" }}>
              <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 100% 0%, rgba(139,134,224,0.25), transparent 55%)" }} />
              <div style={{ position: "relative" }}>
                <span className="eyebrow" style={{ color: "var(--indigo-300)" }}>What you receive</span>
                <ul style={{ listStyle: "none", padding: 0, margin: "14px 0 0", display: "flex", flexDirection: "column", gap: 8 }}>
                  {["Webinar invitations & recordings", "Access to working groups", "Member directory access", "Discounted JMIR Mental Health rates"].map(x => (
                    <li key={x} className="body-sm" style={{ display: "flex", gap: 10, color: "rgba(255,255,255,0.85)" }}>
                      <span style={{ color: "var(--indigo-300)", fontFamily: "var(--type-mono)" }}>—</span>{x}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
            <div className="caption" style={{ padding: "0 4px" }}>
              Questions? Email <a href="mailto:info@sodpsych.com" style={{ color: "var(--indigo-500)" }}>info@sodpsych.com</a>.
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function ApplyPage() {
  return (
    <>
      <Nav active="apply" />
      <Header />
      <Form />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ApplyPage />);