const Footer = () => {
  const [activeModal, setActiveModal] = React.useState(null);

  const modalContent = {
    privacy: {
      title: "Privacy Policy",
      body: (
        <>
          <p>
            Stonecrest Recruiting respects your privacy. Information submitted through this website may be used to respond to inquiries, understand hiring needs, and communicate with practice owners or providers.
          </p>
          <p>
            We may collect basic contact details such as name, email address, phone number, practice name, and hiring preferences. This information is not sold or shared with unrelated third parties.
          </p>
          <p>
            By submitting a form or contacting Stonecrest Recruiting, you agree that we may use your information to follow up regarding recruiting services, provider placement, and related opportunities.
          </p>
        </>
      ),
    },
    terms: {
      title: "Terms of Use",
      body: (
        <>
          <p>
            This website is provided for informational purposes only. Using this website does not create a formal recruiting agreement, employment relationship, or placement guarantee.
          </p>
          <p>
            Stonecrest Recruiting works to connect qualified provider talent with medical aesthetics and wellness practices, but final hiring decisions remain the responsibility of each practice.
          </p>
          <p>
            Website content, branding, and materials may not be copied, reused, or redistributed without written permission from Stonecrest Recruiting.
          </p>
        </>
      ),
    },
    accessibility: {
      title: "Accessibility Statement",
      body: (
        <>
          <p>
            Stonecrest Recruiting is committed to making this website accessible and usable for all visitors.
          </p>
          <p>
            If you experience difficulty accessing any part of this website or need assistance, please contact us at{" "}
            <a href="mailto:natalie@stonecrestrecruiting.com">natalie@stonecrestrecruiting.com</a>.
          </p>
          <p>
            We will make reasonable efforts to improve accessibility and provide the information you need through an alternate communication method when necessary.
          </p>
        </>
      ),
    },
  };

  const closeModal = () => setActiveModal(null);

  return (
    <>
      <footer className="footer">
        <div className="container">
          <div className="footer__grid">
            <div className="footer__brand">
              <img
                className="footer__logo"
                src="assets/stonecrest-logo-footer-transparent.png"
                alt="Stonecrest Recruiting"
              />

              <p className="footer__tag">
                Provider talent, <em>quietly curated</em>
                <br />
                for medical aesthetics.
              </p>
            </div>

            <div className="footer__col">
              <h6>For Practices</h6>
              <ul>
                <li><a href="#approach">Approach</a></li>
                <li><a href="#specialties">Specialties</a></li>
                <li><a href="#providers">Roster</a></li>
                <li><a href="#contact">Book a call</a></li>
              </ul>
            </div>

            <div className="footer__col">
              <h6>For Providers</h6>
              <ul>
                <li><a href="#contact">Join the network</a></li>
                <li><a href="#approach">How Stonecrest Recruiting works</a></li>
                <li><a href="#providers">Current openings</a></li>
                <li><a href="#contact">Provider resources</a></li>
              </ul>
            </div>

            <div className="footer__col">
              <h6>Contact</h6>
              <ul>
                <li><a href="tel:6513321306">(651) 332-1306</a></li>
                <li><a href="sms:6513321306">Text us</a></li>
                <li>
                  <a href="mailto:natalie@stonecrestrecruiting.com">
                    natalie@stonecrestrecruiting.com
                  </a>
                </li>
                <li>Serving all 50 states</li>
              </ul>
            </div>
          </div>

          <div className="footer__bottom">
            <span>
              &copy; 2026 Stonecrest Recruiting. All rights reserved. &middot; Natalie Peckman, Founder.
            </span>

            <span className="footer__legal">
              <button type="button" onClick={() => setActiveModal("privacy")}>
                Privacy
              </button>
              <span>&middot;</span>
              <button type="button" onClick={() => setActiveModal("terms")}>
                Terms
              </button>
              <span>&middot;</span>
              <button type="button" onClick={() => setActiveModal("accessibility")}>
                Accessibility
              </button>
            </span>
          </div>
        </div>
      </footer>

      {activeModal && (
        <div className="legal-modal" role="dialog" aria-modal="true">
          <div className="legal-modal__backdrop" onClick={closeModal}></div>

          <div className="legal-modal__panel">
            <button
              className="legal-modal__close"
              type="button"
              aria-label="Close popup"
              onClick={closeModal}
            >
              ×
            </button>

            <span className="eyebrow eyebrow--gold">Stonecrest Recruiting</span>

            <h3>{modalContent[activeModal].title}</h3>

            <div className="legal-modal__body">
              {modalContent[activeModal].body}
            </div>
          </div>
        </div>
      )}
    </>
  );
};

Object.assign(window, { Footer });