/* ============================================================
   form.jsx — Contact section + MKBridge widget mount
   ============================================================ */

function Contact() {
  return (
    <section className="section contact" id="contact">
      <div className="container">
        <div className="contact-grid">
          <div className="contact-body">
            <span className="eyebrow eyebrow-yellow">Contact</span>
            <h2>
              Een offerte begint<br/>
              met <em>een gesprek</em>.
            </h2>
            <p>
              Vul het formulier in. Een huisbezoek voor een offerte is altijd kosteloos en vrijblijvend.
            </p>
            <div className="contact-cards">
              <a className="contact-card" href={`tel:${window.SITE.phone}`}>
                <span className="ico"><IconPhone/></span>
                <span>
                  <span className="lbl">Bel ons</span><br/>
                  <span className="val">{window.SITE.phone}</span>
                </span>
              </a>
              <a className="contact-card" href={`mailto:${window.SITE.email}`}>
                <span className="ico"><IconMail/></span>
                <span>
                  <span className="lbl">E-mail</span><br/>
                  <span className="val">{window.SITE.email}</span>
                </span>
              </a>
              <div className="contact-card">
                <span className="ico"><IconPin/></span>
                <span>
                  <span className="lbl">Adres</span><br/>
                  <span className="val">{window.SITE.address}</span>
                </span>
              </div>
            </div>
          </div>
          <ContactForm/>
        </div>
      </div>
    </section>
  );
}

function ContactForm() {
  React.useEffect(() => {
    if (document.getElementById("mkbridge-widget-script")) return;
    const s = document.createElement("script");
    s.id = "mkbridge-widget-script";
    s.src = "https://platform.mkbridge.nl/lead-form.js";
    s.setAttribute("data-org-key", "a3ac4ea7-947b-4a6f-bc78-edf6972fae17");
    document.body.appendChild(s);
  }, []);

  return <div id="lead-form" className="form-card"></div>;
}

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