/* global React, Icon, Button, NAV */
const { useState: useStateF } = React;

function Footer() {
  const cols = [
    ["About HCDI", [["Who We Are", "who-we-are.html"], ["Leadership", "leadership.html"], ["The Dove Report", "dove-report.html"]]],
    ["Solutions", [["Health Plans", "health-plans.html"], ["Providers", "providers.html"], ["Communities", "communities.html"], ["Government", "government.html"], ["A.I.M. Platform", "aim.html"]]],
  ];
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <img className="footer-logo" src="assets/hcdi-logo-light.png" alt="HCDI" />
            <p className="footer-blurb">
              HealthCare Dynamics International — closing the distance between data and the
              people who need care most, for 30 years.
            </p>
            <div className="footer-contact">
              <a href="#"><Icon name="mapPin" size={16} className="ic" />700 K St NW, Washington, DC 20001</a>
              <a href="tel:+12027429815"><Icon name="phone" size={16} className="ic" />202.742.9815 · Washington, DC</a>
              <a href="tel:+13015528803"><Icon name="phone" size={16} className="ic" />301.552.8803 · Maryland Offices</a>
            </div>
          </div>
          {cols.map(([h, items]) => (
            <div key={h}>
              <h5>{h}</h5>
              <ul>{items.map(([t, href]) => <li key={t}><a href={href}>{t}</a></li>)}</ul>
            </div>
          ))}
          <div>
            <h5>Get in touch</h5>
            <ul>
              <li><a href="contact.html">Connect with Us</a></li>
              <li><a href="tel:+12027429815">202.742.9815</a></li>
            </ul>
            <div className="footer-certs">
              <span className="footer-cert">HITRUST</span>
              <span className="footer-cert">HIPAA</span>
              <span className="footer-cert">ACAP</span>
              <span className="footer-cert">NQIIC</span>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 HealthCare Dynamics International (HCDI). All rights reserved.</span>
          <div className="so">
            <a href="#" aria-label="LinkedIn"><Icon name="linkedin" size={16} /></a>
            <a href="contact.html" aria-label="Email"><Icon name="mail" size={16} /></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function ContactModal({ open, onClose }) {
  const [sent, setSent] = useStateF(false);
  const submit = (e) => { e.preventDefault(); setSent(true); };
  const close = () => { onClose(); setTimeout(() => setSent(false), 300); };
  return (
    <div className={`modal-back ${open ? "open" : ""}`} onClick={close}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-x" onClick={close} aria-label="Close"><Icon name="x" size={22} /></button>
        {sent ? (
          <div className="modal-success">
            <div className="ok"><Icon name="check" size={30} stroke={2.4} /></div>
            <h3>Thank you — we&rsquo;ll be in touch.</h3>
            <p className="sub" style={{ marginBottom: 24 }}>A member of the HCDI team will reach out within one business day.</p>
            <Button variant="primary" size="md" showIcon={false} onClick={close}>Back to site</Button>
          </div>
        ) : (
          <React.Fragment>
            <span className="eyebrow">Connect with us</span>
            <h3 style={{ marginTop: 10 }}>Partner with HCDI</h3>
            <p className="sub">Tell us about your population and goals — no pitch, a working conversation.</p>
            <form onSubmit={submit}>
              <div className="field-row">
                <div className="field"><label>First name</label><input required placeholder="Jordan" /></div>
                <div className="field"><label>Last name</label><input required placeholder="Avery" /></div>
              </div>
              <div className="field"><label>Work email</label><input required type="email" placeholder="you@healthplan.org" /></div>
              <div className="field-row">
                <div className="field"><label>Organization</label><input required placeholder="Cascade Health Plan" /></div>
                <div className="field">
                  <label>Organization type</label>
                  <select defaultValue="">
                    <option value="" disabled>Select</option>
                    <option>Health Plan</option>
                    <option>Provider / Risk-Bearing Group</option>
                    <option>Community Organization</option>
                    <option>Government Agency</option>
                  </select>
                </div>
              </div>
              <div className="field"><label>What are you hoping to improve?</label>
                <textarea rows="3" placeholder="HEDIS gaps, member engagement, SDoH, quality performance…"></textarea></div>
              <Button variant="grad" size="lg" type="submit">Request a conversation</Button>
            </form>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

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