// CONTACT PAGE — using real copy from relayconsulting.nz
const { useState } = React;

function ContactHero() {
  return (
    <section className="page-hero wrap max">
      <div className="page-hero-inner reveal">
        <span className="eyebrow">— Contact</span>
        <h1>Tell me what is <em>on your mind.</em></h1>
        <p className="lede">
          A rough outline is more than enough. Use the form, or email directly if that feels easier.
        </p>
      </div>
    </section>
  );
}

function ContactForm() {
  // Posts to FormSubmit using the same endpoint as the production site.
  return (
    <form
      className="form"
      action="https://formsubmit.co/c0330e895e190f1a1219223a5ccd8734"
      method="POST"
    >
      <input type="hidden" name="_subject" value="New enquiry from relayconsulting.nz" />
      <input type="hidden" name="_captcha" value="false" />
      <input type="hidden" name="_template" value="table" />
      <input type="hidden" name="_next" value="https://relayconsulting.nz/contact?sent=1" />
      <input type="text"  name="_honey" style={{ display: 'none' }} tabIndex="-1" autoComplete="off" />

      <div className="field-row">
        <div className="field">
          <label htmlFor="name">Name</label>
          <input id="name" name="name" type="text" autoComplete="name" required />
        </div>
        <div className="field">
          <label htmlFor="email">Email</label>
          <input id="email" name="email" type="email" autoComplete="email" required />
        </div>
      </div>
      <div className="field-row">
        <div className="field">
          <label htmlFor="business">Business</label>
          <input id="business" name="business" type="text" autoComplete="organization" />
        </div>
        <div className="field">
          <label htmlFor="type">Help needed</label>
          <select id="type" name="help_needed" defaultValue="">
            <option value="" disabled>Select a type</option>
            <option>Website &amp; online presence</option>
            <option>Email, domains &amp; business essentials</option>
            <option>Day-to-day tools &amp; systems</option>
            <option>Technical direction or ongoing care</option>
            <option>Not sure yet — I just need a hand</option>
          </select>
        </div>
      </div>
      <div className="field">
        <label htmlFor="message">What is going on?</label>
        <textarea id="message" name="message" rows="4" required placeholder="A sentence or two is plenty." />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap', marginTop: 6 }}>
        <button type="submit" className="btn primary">
          Send enquiry <ArrowRight />
        </button>
        <span style={{ color: 'var(--ink-3)', fontSize: 13 }}>Reply within one working day.</span>
      </div>
    </form>
  );
}

function ContactBody() {
  return (
    <section className="section short wrap max">
      <div className="form-grid reveal">
        <div>
          <span className="eyebrow">— Start with the rough version</span>
          <h2 style={{ marginTop: 16, fontSize: 'clamp(28px, 3.4vw, 44px)', maxWidth: '14ch' }}>
            A plain-English description is <em>enough.</em>
          </h2>
          <p style={{ marginTop: 22, color: 'var(--ink-2)', fontSize: 16, lineHeight: 1.6, maxWidth: '40ch' }}>
            Tell me what is broken, confusing, slow, or risky. I can help translate that into the technical work that needs doing.
          </p>
          <dl className="contact-meta" style={{ marginTop: 36 }}>
            <div>
              <dt>Email</dt>
              <dd><a href="mailto:support@relayconsulting.nz">support@relayconsulting.nz</a></dd>
            </div>
            <div>
              <dt>Location</dt>
              <dd>Christchurch, New Zealand<br />Available across NZ</dd>
            </div>
          </dl>
        </div>

        <ContactForm />
      </div>
    </section>
  );
}

function ContactPage() {
  return (
    <Page active="contact">
      <ContactHero />
      <ContactBody />
    </Page>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<ContactPage />);