const { PillButton } = window.AequitasCapitalDesignSystem_4533c9;

function Contact() {
  const [sent, setSent] = React.useState(false);
  return (
    <section id="contact" className="v2-sec">
      <div className="v2-wrap">
        <div className="v2-contact">
          <div className="lp-reveal">
            <span className="v2-eyebrow">Contact</span>
            <h2 className="v2-h2">By invitation only.</h2>
            <p className="v2-contact__lead">{FUND.contactLead}</p>
            <dl className="v2-office">
              {FUND.office.map(([k, v]) => <div key={k}><dt>{k}</dt><dd>{v}</dd></div>)}
            </dl>
          </div>
          <div className="v2-formcard lp-reveal">
            {sent ? (
              <div className="v2-formcard__done">
                <h3>Thank you.</h3>
                <p>A member of our team will be in contact. We typically respond within two business days.</p>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                <h3>Request an introduction</h3>
                <div className="v2-field"><label htmlFor="v2fn">Full name</label><input id="v2fn" type="text" required /></div>
                <div className="v2-field"><label htmlFor="v2em">Email</label><input id="v2em" type="email" required /></div>
                <div className="v2-field">
                  <label htmlFor="v2ct">Client classification</label>
                  <select id="v2ct" required defaultValue="">
                    <option value="" disabled>Select</option>
                    <option>Professional Client</option>
                    <option>Eligible Counterparty</option>
                    <option>Institutional investor</option>
                  </select>
                </div>
                <div className="v2-field"><label htmlFor="v2ms">Message</label><textarea id="v2ms" rows="3" required></textarea></div>
                <PillButton tone="dark" as="button" type="submit">Submit</PillButton>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="v2-footer">
      <div className="v2-wrap">
        <div className="v2-footer__top">
          <img src="assets/images/aequitas-logo-trim-2x.png" alt="Aequitas Capital Partners" />
          <ul>
            {SECTIONS.map((s) => <li key={s.id}><button onClick={() => goTo(s.id)}>{s.label}</button></li>)}
            {/* Recruitment lives in the footer, not the nav — it should not compete
                with the mandate for a prospective investor's attention. */}
            <li><a href="/team">Team</a></li>
            <li><a href="/careers">Careers</a></li>
            <li><button onClick={toPortal}>Client login</button></li>
          </ul>
        </div>
        <div className="v2-rule v2-rule--static"></div>
        <div className="v2-footer__legal">
          <p>{FUND.legal}</p>
          <p><strong>Risk Warning &amp; Audience Restriction:</strong><br />{FUND.risk_warning}</p>
        </div>
        <div className="v2-footer__base">
          <span>© {new Date().getFullYear()} Aequitas Capital Partners LLP</span>
          <span>Administered by P11 Management</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Contact, Footer });