// site/NewsletterContact.jsx
function Newsletter({ dark, terse }) {
  return (
    <section className={`newsletter ${dark ? 'dark' : ''}`}>
      <div className="container">
        <div className="newsletter-grid">
          <div>
            <span className="eyebrow-row"><span className="bar" />Dispatch</span>
            <h2>Ideas worth gathering for<span className="period">.</span></h2>
            {!terse && <p>Monthly notes on strategy, destinations, and what we're learning from the field. No fluff, unsubscribe anytime.</p>}
          </div>
          <form action="https://weareengage.us14.list-manage.com/subscribe/post?u=e46b39cb53e61b6fb08b7ef06&id=f750a19757&f_id=00e594e1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_self" noValidate>
            <div className="field">
              <input type="email" name="EMAIL" id="mce-EMAIL" placeholder="Your work email" aria-label="Email" className="required email" required />
              <button type="submit" name="subscribe" id="mc-embedded-subscribe" className="btn btn-primary">Subscribe <span className="btn-arrow">›</span></button>
            </div>
            <div className="fineprint">One email a month. Mostly signal, occasionally opinion.</div>
            <div id="mce-responses">
              <div id="mce-error-response" style={{display: 'none'}} />
              <div id="mce-success-response" style={{display: 'none'}} />
            </div>
            <div aria-hidden="true" style={{position: 'absolute', left: '-5000px'}}>
              <input type="text" name="b_e46b39cb53e61b6fb08b7ef06_f750a19757" tabIndex={-1} defaultValue="" />
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

function Contact({ terse }) {
  // HubSpot script loads once per page; the embed div renders the form into itself.
  React.useEffect(() => {
    if (document.querySelector('script[data-hs-engage-form]')) return;
    const s = document.createElement('script');
    s.src = 'https://js.hsforms.net/forms/embed/2904544.js';
    s.defer = true;
    s.setAttribute('data-hs-engage-form', '');
    document.body.appendChild(s);
  }, []);
  return (
    <section id="contact" className="contact">
      <div className="container">
        <div className="contact-grid">
          <div>
            <span className="eyebrow-row" style={{ color: 'rgba(249,247,216,0.7)' }}><span className="bar" />Start a conversation</span>
            <h2>Tell us what you're planning<span className="period">.</span></h2>
            {!terse && <p className="blurb">Every program starts with a call. Share the basics and we'll come back within one business day with a point of view, a timeline, and a name of who you'll work with.</p>}
            <div className="deets">
              <div className="row"><span className="label">Email</span><span className="value">hello@weareengage.com</span></div>
              <div className="row"><span className="label">Offices</span><span className="value">New York · Texas · Colorado · California · Arizona</span></div>
            </div>
          </div>
          <div className="contact-form-wrap">
            <div
              className="hs-form-frame"
              data-region="na1"
              data-form-id="5fd8c5b7-5e06-4515-83aa-670d916bf798"
              data-portal-id="2904544"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

window.Newsletter = Newsletter;
window.Contact = Contact;