/* referral.jsx -- GP Referral Page -- Claremont Orthodontics */

function ReferralPage() {
  const [sent, setSent] = React.useState(false);

  return (
    <main>
      <section className="section" style={{ paddingTop: 96, paddingBottom: 96 }}>
        <div className="shell shell--narrow">
          <PageEyebrow>For referring dentists</PageEyebrow>
          <h1 className="display h2" style={{ margin: '24px 0 28px' }}>
            Refer a patient to <em>Claremont Orthodontics.</em>
          </h1>
          <p className="lede" style={{ maxWidth: 600, marginBottom: 48 }}>
            Thank you for considering us for your patient. Dr Denize personally sees every referral from first consultation through to completion, and you will receive updates at each stage of treatment.
          </p>
        </div>
      </section>

      <hr className="divider-rule" />

      <section className="section">
        <div className="shell">
          <div className="grid-2" style={{ gap: 80 }}>
            <div>
              <PageEyebrow>What to expect</PageEyebrow>
              <h2 className="display h3" style={{ margin: '20px 0 32px' }}>
                A seamless referral process.
              </h2>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
                {[
                  ['You refer', 'Complete the form on this page or call us directly. We will contact your patient within one business day to schedule their consultation.'],
                  ['We consult', 'Dr Denize sees your patient for a comprehensive orthodontic assessment. No referral fee. We communicate our findings and treatment plan back to you.'],
                  ['We treat', 'Your patient receives specialist orthodontic care. You receive progress updates and a completion letter when treatment is finished.'],
                  ['Patient returns', 'At the end of treatment, your patient returns to your care for ongoing general dental needs. The referral relationship is maintained throughout.'],
                ].map(([h, p], i) => (
                  <div key={i} style={{ paddingBottom: i < 3 ? 36 : 0, borderBottom: i < 3 ? '1px solid var(--rule)' : 'none' }}>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 8 }}>
                      <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, color: 'var(--gold-deep)' }}>0{i + 1}</span>
                      <h3 className="display h4" style={{ margin: 0 }}>{h}</h3>
                    </div>
                    <p className="body-md" style={{ margin: 0, paddingLeft: 38 }}>{p}</p>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <PageEyebrow>Online referral form</PageEyebrow>
              <h2 className="display h3" style={{ margin: '20px 0 32px' }}>
                Refer a patient now.
              </h2>

              {sent ? (
                <div style={{ padding: '48px 32px', background: 'var(--cream-deep)', border: '1px solid var(--rule)', textAlign: 'center' }}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 28, fontStyle: 'italic', color: 'var(--navy)', marginBottom: 12 }}>Referral received.</div>
                  <p className="body-md">Thank you. We will contact your patient within one business day.</p>
                </div>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--gold-deep)', marginBottom: 8, paddingBottom: 12, borderBottom: '1px solid var(--rule)' }}>Referring Dentist</div>
                  <div className="field">
                    <label>Your name</label>
                    <input type="text" required placeholder="Dr..." />
                  </div>
                  <div className="field">
                    <label>Practice name</label>
                    <input type="text" required />
                  </div>
                  <div className="field">
                    <label>Email</label>
                    <input type="email" required />
                  </div>
                  <div className="field">
                    <label>Phone</label>
                    <input type="tel" />
                  </div>

                  <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--gold-deep)', marginTop: 16, marginBottom: 8, paddingBottom: 12, borderBottom: '1px solid var(--rule)' }}>Patient Details</div>
                  <div className="field">
                    <label>Patient name</label>
                    <input type="text" required />
                  </div>
                  <div className="field">
                    <label>Patient date of birth</label>
                    <input type="date" />
                  </div>
                  <div className="field">
                    <label>Patient phone or email</label>
                    <input type="text" required />
                  </div>
                  <div className="field">
                    <label>Reason for referral</label>
                    <textarea placeholder="Please describe the orthodontic concern, relevant history, and any specific requests..." />
                  </div>
                  <div className="field">
                    <label>Urgency</label>
                    <select style={{ fontFamily: 'var(--sans)', fontSize: 17, background: 'transparent', border: 0, borderBottom: '1px solid var(--rule)', padding: '12px 0', color: 'var(--ink)' }}>
                      <option>Routine referral</option>
                      <option>Urgent -- please see within 2 weeks</option>
                    </select>
                  </div>
                  <div style={{ marginTop: 16 }}>
                    <button type="submit" className="cta">Submit referral <span className="cta__arrow">&rarr;</span></button>
                  </div>
                  <p className="body-sm tone-mute" style={{ marginTop: 12 }}>
                    We will contact your patient within one business day. You will receive confirmation of the appointment and subsequent treatment updates.
                  </p>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>

      <section style={{ borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', padding: '48px 0' }}>
        <div className="shell shell--narrow" style={{ textAlign: 'center' }}>
          <PageEyebrow>Direct contact</PageEyebrow>
          <p style={{ fontFamily: 'var(--serif)', fontSize: 22, fontStyle: 'italic', marginTop: 20 }}>
            Prefer to call? Reach Dr Denize directly on <a href="tel:0862887188" className="aul">(08) 6288 7188</a>
            <br/>or email <a href="mailto:hello@claremontorthodontics.com.au" className="aul">hello@claremontorthodontics.com.au</a>
          </p>
        </div>
      </section>

      <ClosingCTA
        title={<>Thank you for <em>trusting us</em> with your patients.</>}
        body="We look forward to working with you and your patient."
        primary="Submit a referral"
        target="referral"
      />
    </main>
  );
}

window.ReferralPage = ReferralPage;