/* contact.jsx  --  Contact Page  --  Claremont Orthodontics */

function ContactPage() {
  const [form, setForm] = React.useState({ name: '', email: '', phone: '', message: '' });
  const [sent, setSent] = React.useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  return (
    <main data-screen-label="04 Contact">

      {/* ============ HERO ============ */}
      <section className="section" style={{ paddingBottom: 64 }}>
        <div className="shell shell--narrow">
          <PageEyebrow>Contact</PageEyebrow>
          <h1 className="display h1" style={{ margin: '28px 0 28px' }}>
            Get in <em>touch.</em>
          </h1>
          <p className="lede" style={{ maxWidth: 540 }}>
            Whether you are ready to book or just have a question  --  we are here to help.
          </p>
        </div>
      </section>

      <hr className="divider-rule" />

      {/* ============ CONTACT DETAILS + FORM ============ */}
      <section className="section">
        <div className="shell">
          <div className="grid-2" style={{ gap: 80, alignItems: 'start' }}>
            {/* Left  --  Contact details */}
            <div>
              <Numbered n={1} label="Contact details" />

              <div style={{ display: 'flex', flexDirection: 'column', gap: 36, marginTop: 36 }}>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 8 }}>Address</div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 24, lineHeight: 1.3 }}>
                    7/355 Stirling Highway<br />Claremont WA 6010
                  </div>
                  <a className="link-arrow" href="https://maps.google.com/?q=7/355+Stirling+Highway+Claremont+WA+6010" target="_blank" rel="noreferrer" style={{ marginTop: 12, display: 'inline-flex' }}>
                    Get directions <span>&rarr;</span>
                  </a>
                </div>

                <div>
                  <div className="eyebrow" style={{ marginBottom: 8 }}>Phone</div>
                  <a href="tel:0862887188" style={{ fontFamily: 'var(--serif)', fontSize: 24 }} className="aul">(08) 6288 7188</a>
                </div>

                <div>
                  <div className="eyebrow" style={{ marginBottom: 8 }}>Email</div>
                  <a href="mailto:hello@claremontorthodontics.com.au" style={{ fontFamily: 'var(--serif)', fontSize: 18 }} className="aul">hello@claremontorthodontics.com.au</a>
                </div>

                <div>
                  <div className="eyebrow" style={{ marginBottom: 8 }}>Hours</div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.8 }}>
                    Monday &ndash; Friday: 8:00am &ndash; 5:00pm<br />
                    Saturday &ndash; Sunday: Closed
                  </div>
                </div>
              </div>

              <div style={{ marginTop: 48 }}>
                <a className="cta" href="#/assessment" onClick={(e) => { e.preventDefault(); go('assessment'); }}>
                  Take Free Assessment <span className="cta__arrow">&rarr;</span>
                </a>
                <div className="body-sm tone-mute" style={{ marginTop: 12 }}>Not sure yet? Start with our 3-minute online assessment.</div>
              </div>
            </div>

            {/* Right  --  Contact form */}
            <div>
              <Numbered n={2} label="Send a message" />
              <div style={{ marginTop: 36 }}>
                {sent ? (
                  <div style={{ padding: '48px 32px', background: 'var(--cream-deep)', border: '1px solid var(--rule)', textAlign: 'center' }}>
                    <HandDivider color="var(--gold-deep)" width={100} style={{ margin: '0 auto 20px' }} />
                    <h3 className="display h4" style={{ marginBottom: 12 }}>Message sent.</h3>
                    <p className="body-md tone-mute">We will get back to you within one business day.</p>
                  </div>
                ) : (
                  <form onSubmit={handleSubmit}>
                    <div className="field">
                      <label htmlFor="c-name">Your name</label>
                      <input id="c-name" type="text" required value={form.name}
                        onChange={(e) => setForm({ ...form, name: e.target.value })} />
                    </div>
                    <div className="field">
                      <label htmlFor="c-email">Email address</label>
                      <input id="c-email" type="email" required value={form.email}
                        onChange={(e) => setForm({ ...form, email: e.target.value })} />
                    </div>
                    <div className="field">
                      <label htmlFor="c-phone">Phone number</label>
                      <input id="c-phone" type="tel" value={form.phone}
                        onChange={(e) => setForm({ ...form, phone: e.target.value })} />
                    </div>
                    <div className="field">
                      <label htmlFor="c-msg">Your message</label>
                      <textarea id="c-msg" required value={form.message}
                        onChange={(e) => setForm({ ...form, message: e.target.value })} />
                    </div>
                    <button type="submit" className="cta" style={{ marginTop: 12 }}>
                      Send message <span className="cta__arrow">&rarr;</span>
                    </button>
                  </form>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ MAP ============ */}
      <section style={{ borderTop: '1px solid var(--rule)' }}>
        <iframe
          title="Claremont Orthodontics map"
          style={{ width: '100%', height: 480, border: 0, display: 'block', filter: 'grayscale(0.4) sepia(0.15)' }}
          src="https://www.google.com/maps?q=7%2F355+Stirling+Highway+Claremont+WA+6010&output=embed"
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
        />
      </section>

      {/* ============ CLOSING CTA  --  ScoreApp primary ============ */}
      <section className="section" style={{ background: 'var(--cream-deep)' }}>
        <div className="shell">
          <div className="grid-2" style={{ alignItems: 'center' }}>
            <div>
              <HandDivider color="var(--gold-deep)" width={120} style={{ marginBottom: 24 }} />
              <h2 className="display h2" style={{ marginBottom: 24 }}>Not sure if you need <em>treatment?</em></h2>
              <p className="lede" style={{ maxWidth: 460 }}>Take our free 3-minute assessment and find out where you stand.</p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 24, alignItems: 'flex-start' }}>
              <a className="cta" href="#/assessment" onClick={(e) => { e.preventDefault(); go('assessment'); }}>
                Start Your Free Assessment <span className="cta__arrow">&rarr;</span>
              </a>
              <div className="phone-inline">
                Or call <a href="tel:0862887188">(08) 6288 7188</a>
              </div>
              <div className="eyebrow" style={{ marginTop: 8 }}>
                Mon&ndash;Fri 8am&ndash;5pm
              </div>
            </div>
          </div>
        </div>
      </section>

    </main>
  );
}

window.ContactPage = ContactPage;