// contact-sales-page.jsx — "Talk to sales" lead-capture page for organizations.
const { useState: csS } = React;
const CSI = window.AICONS;

const TEAM_SIZES = ["10–49", "50–199", "200–999", "1 000+"];

const HELPS = [
  { icon: "scale",    text: "Volume pricing on bulk exam seats" },
  { icon: "doc",      text: "Purchase by invoice or purchase order" },
  { icon: "lock",     text: "SSO and centralized seat management" },
  { icon: "shield",   text: "Security and compliance review" },
];

function ContactSalesApp() {
  window.useReveal();

  return (
    <React.Fragment>
      <Nav />
      <Breadcrumb trail={[["For Organizations", "employers.html"], ["Talk to sales", null]]} />
      <RoleBanner />

      <main>
        {/* ── hero ── */}
        <section className="cs-hero">
          <div className="wrap">
            <span className="label label-accent">For Organizations</span>
            <h1>Talk to our team</h1>
            <p className="cs-lead">For organizations purchasing 50+ seats, requiring invoice or purchase-order billing, or needing a security and compliance review before procurement.</p>
          </div>
        </section>

        {/* ── form + sidebar ── */}
        <section className="cs-body">
          <div className="wrap cs-grid">
            <div className="cs-form-col">
              <ContactForm />
            </div>
            <div className="cs-side-col">
              <Sidebar />
            </div>
          </div>
        </section>

        {/* ── self-serve exit ── */}
        <section className="cs-exit section--soft">
          <div className="wrap cs-exit-inner reveal">
            <p>For small teams, you can buy seats instantly — no sales call needed.</p>
            <a href="org-pricing.html" className="btn btn-outline">See Team pricing <CSI.arrow style={{ width: 16, height: 16 }} /></a>
          </div>
        </section>
      </main>

      <Footer />
    </React.Fragment>
  );
}

/* ── Contact form (front-end only) ── */
function ContactForm() {
  const [submitted, setSubmitted] = csS(false);
  const [size, setSize] = csS("");

  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div className="cs-confirm reveal">
        <CSI.check style={{ width: 28, height: 28, color: "var(--accent)" }} />
        <h2>Thank you</h2>
        <p>We've received your inquiry and will respond within one business day.</p>
      </div>
    );
  }

  return (
    <form className="cs-form reveal" onSubmit={handleSubmit}>
      <div className="cs-field">
        <label htmlFor="cs-name">Name</label>
        <input id="cs-name" type="text" required autoComplete="name" placeholder="Full name" />
      </div>

      <div className="cs-field">
        <label htmlFor="cs-email">Work email</label>
        <input id="cs-email" type="email" required autoComplete="email" placeholder="you@company.com" />
      </div>

      <div className="cs-field">
        <label htmlFor="cs-org">Organization</label>
        <input id="cs-org" type="text" required placeholder="Company or institution name" />
      </div>

      <div className="cs-field">
        <label htmlFor="cs-size">Team size</label>
        <select id="cs-size" required value={size} onChange={(e) => setSize(e.target.value)}>
          <option value="" disabled>Select estimated seats</option>
          {TEAM_SIZES.map((s) => <option key={s} value={s}>{s} seats</option>)}
        </select>
      </div>

      <div className="cs-field">
        <label htmlFor="cs-msg">Message <span className="cs-opt">(optional)</span></label>
        <textarea id="cs-msg" rows="4" placeholder="Tell us about your goals or any specific requirements."></textarea>
      </div>

      <button type="submit" className="btn btn-primary btn-lg cs-submit">
        Submit inquiry <CSI.arrow style={{ width: 17, height: 17 }} />
      </button>
    </form>
  );
}

/* ── Sidebar: what to expect + what sales can help with ── */
function Sidebar() {
  return (
    <aside className="cs-sidebar reveal">
      <div className="cs-sb-section">
        <h3>What to expect</h3>
        <p>A member of our team will respond within <strong>one business day</strong>. We'll schedule a short call or answer by email — whichever you prefer.</p>
      </div>

      <hr className="cs-sb-rule" />

      <div className="cs-sb-section">
        <h3>What sales can help with</h3>
        <ul className="cs-help-list">
          {HELPS.map((h) => {
            const Icon = CSI[h.icon];
            return (
              <li key={h.text}>
                <Icon style={{ width: 20, height: 20, flexShrink: 0 }} />
                <span>{h.text}</span>
              </li>
            );
          })}
        </ul>
      </div>
    </aside>
  );
}

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