const { Button } = window.VoxAwenDesignSystem_e48818;

function CalBookButton({ children }) {
  return (
    <button
      type="button"
      className="home-contact-call"
      data-cal-link="esther-wilson-onsbsr/15min"
      data-cal-namespace="15min"
      data-cal-config='{"layout":"month_view"}'
    >
      {children}
    </button>
  );
}

function Contact({ onNav }) {
  const [sent, setSent] = React.useState(false);
  // The three offerings, named as the site names them. Leaving the field blank
  // covers "not sure" — the placeholder says the choice is optional.
  const draws = ["Graceful Ignited Bodies", "Marketing Consultancy", "Companion Voices"];

  return (
    <section id="contact" className="home-contact" style={{ scrollMarginTop: 76 }}>
      <div className="home-contact-inner">

        <div className="home-contact-lead">
          <Eyebrow>Contact</Eyebrow>
          <h2 className="home-contact-title">Begin a conversation</h2>
          <p className="home-contact-intro">
            Send me a message and I'll get back to you within a few days.
          </p>
          <CalBookButton>Book a free 15-min call</CalBookButton>
        </div>

        {sent ? (
          <div className="home-contact-sent">
            <h3>Message received.</h3>
            <p>Thanks for getting in touch — I'll reply within a few days.</p>
            <Button variant="ghost" onClick={() => setSent(false)}>← Send another message</Button>
          </div>
        ) : (
          <form className="home-contact-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
            <div className="hc-field">
              <label htmlFor="hc-name">Your name</label>
              <input id="hc-name" name="name" type="text" />
            </div>
            <div className="hc-field">
              <label htmlFor="hc-email">Email</label>
              <input id="hc-email" name="email" type="email" placeholder="you@example.com" />
            </div>
            <div className="hc-field hc-field--wide hc-select">
              <label htmlFor="hc-draws">Which offering</label>
              <select id="hc-draws" name="draws" defaultValue="">
                <option value="" disabled>Select one, or leave blank</option>
                {draws.map((d) => <option key={d} value={d}>{d}</option>)}
              </select>
            </div>
            <div className="hc-field hc-field--wide">
              <label htmlFor="hc-where">Your message</label>
              <textarea id="hc-where" name="where" rows={5} placeholder="What would you like to ask?" />
            </div>
            <div className="home-contact-submit">
              {/* The design-system Button drops `type`, so this submits only
                  because HTML defaults a button in a form to submit. The click
                  handler makes that explicit rather than load-bearing. */}
              <Button variant="primary" size="lg" type="submit"
                onClick={() => setSent(true)}>Send message</Button>
            </div>
          </form>
        )}

      </div>
    </section>
  );
}

Object.assign(window, { Contact });