/* new-patients.jsx  --  New Patients Page  --  Claremont Orthodontics */

function NewPatientsPage() {
  return (
    <main data-screen-label="03 New Patients">

      {/* ============ HERO ============ */}
      <section className="section" style={{ paddingBottom: 64 }}>
        <div className="shell shell--narrow">
          <PageEyebrow>New Patients</PageEyebrow>
          <h1 className="display h1" style={{ margin: '28px 0 28px' }}>
            Your first visit is just <em>a conversation.</em>
          </h1>
          <p className="lede" style={{ maxWidth: 600 }}>
            No referral needed. No obligation. Meet Dr Denize, get your questions answered, and leave with a clear plan.
          </p>
        </div>
      </section>

      {/* ============ PRIMARY CTA  --  SCOREAPP ============ */}
      <section style={{ background: 'var(--navy)', color: 'var(--cream)', padding: '96px 0' }}>
        <div className="shell shell--narrow" style={{ textAlign: 'center' }}>
          <HandDivider color="var(--gold)" width={120} style={{ margin: '0 auto 28px' }} />
          <h2 className="display h2" style={{ color: 'var(--cream)', marginBottom: 20 }}>
            Not sure if you need <em style={{ color: 'var(--gold)' }}>orthodontic treatment?</em>
          </h2>
          <p className="body-lg" style={{ color: 'rgba(244, 236, 222, 0.82)', maxWidth: 540, margin: '0 auto 40px' }}>
            Take our free 3-minute assessment. Answer 15 questions and get personalised recommendations  --  instantly.
          </p>
          <a className="cta" href="#/assessment" onClick={(e) => { e.preventDefault(); go('assessment'); }} style={{ fontSize: 17, padding: '22px 40px' }}>
            Start Your Assessment <span className="cta__arrow">&rarr;</span>
          </a>
          <div style={{ marginTop: 20, fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(244, 236, 222, 0.5)' }}>
            Free &middot; No obligation &middot; Takes 3 minutes
          </div>
        </div>
      </section>

      {/* ============ SECONDARY CTA  --  BOOK ============ */}
      <section className="section--sm" style={{ background: 'var(--cream-deep)', textAlign: 'center', padding: '56px 0' }}>
        <div className="shell shell--narrow">
          <p className="body-lg" style={{ marginBottom: 8 }}>
            Already know you want to get started?
          </p>
          <p className="lede" style={{ marginBottom: 28 }}>
            Book your free consultation* directly.
          </p>
          <a className="cta cta--ghost" href="#/contact" onClick={(e) => { e.preventDefault(); go('contact'); }}>
            Book Free Consultation* <span className="cta__arrow">&rarr;</span>
          </a>
          <div className="body-sm tone-mute" style={{ marginTop: 16 }}>
            *Conditions apply. Initial consultation only.
          </div>
        </div>
      </section>

      <hr className="divider-rule" />

      {/* ============ WHAT TO EXPECT  --  3 STEPS ============ */}
      <section className="section">
        <div className="shell">
          <div style={{ marginBottom: 64, maxWidth: 720 }}>
            <Numbered n={1} label="What to expect" />
            <h2 className="display h3">
              Three steps to <em>clarity.</em>
            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 56 }} className="steps-grid">
            {[
              ['Book', 'Online, by phone, or walk in. No referral required. We will ask about your dental history and what you are hoping to achieve.'],
              ['Meet Dr Denize', 'A proper conversation about your options. Examination, x-rays if needed, and an honest assessment. Not a sales pitch  --  a specialist opinion.'],
              ['Choose your path', 'Every treatment option explained. Your timeline mapped out. Costs discussed upfront. Nothing starts until you are ready.'],
            ].map(([h, p], i) => (
              <div key={i} style={{ borderTop: '1px solid var(--rule)', paddingTop: 32 }}>
                <span style={{
                  display: 'inline-grid', placeItems: 'center',
                  width: 48, height: 48, borderRadius: '50%',
                  background: 'var(--navy)', color: 'var(--gold)',
                  fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 20,
                  marginBottom: 24,
                }}>
                  0{i + 1}
                </span>
                <h3 className="display h4" style={{ margin: '0 0 12px' }}>{h}</h3>
                <p className="body-md" style={{ margin: 0, maxWidth: 340 }}>{p}</p>
              </div>
            ))}
          </div>
        </div>
        <style>{`@media (max-width: 800px) { .steps-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
      </section>

      <hr className="divider-rule" />

      {/* ============ WHAT TO BRING ============ */}
      <section className="section" style={{ background: 'var(--cream-deep)' }}>
        <div className="shell">
          <div className="grid-2" style={{ alignItems: 'start' }}>
            <div>
              <Numbered n={2} label="What to bring" />
              <h2 className="display h3" style={{ marginBottom: 24 }}>
                Come prepared, <em>leave informed.</em>
              </h2>
              <p className="body-md" style={{ maxWidth: 440 }}>
                Your first visit is about giving Dr Denize the full picture  --  and giving you all the information you need to make a confident decision.
              </p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
              {[
                ['Health fund details', 'We can check your coverage and rebates on the spot.'],
                ['Any referral letters', 'Not required, but bring them if your dentist has provided one.'],
                ['List of medications', 'Including any supplements. Some medications affect tooth movement.'],
                ['Your questions', 'Write them down. No question is too simple or too detailed.'],
              ].map(([title, desc], i) => (
                <div key={i} style={{ paddingBottom: 24, borderBottom: i < 3 ? '1px solid var(--rule)' : 'none' }}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 20, fontStyle: 'italic', lineHeight: 1.3, marginBottom: 6 }}>{title}</div>
                  <p className="body-sm tone-mute" style={{ margin: 0 }}>{desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ============ FAQ ============ */}
      <section className="section">
        <div className="shell shell--narrow">
          <Numbered n={3} label="Common questions" />
          <h2 className="display h3" style={{ marginBottom: 48 }}>
            Frequently asked <em>questions.</em>
          </h2>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {[
              ['Do I need a referral?', 'No. You can book directly with us. Some patients are referred by their dentist, but it is not required.'],
              ['What does the first consultation cost?', 'Your initial consultation is free.* This includes an examination with Dr Denize, discussion of your options, and a preliminary treatment plan. *Conditions apply.'],
              ['How long does treatment take?', 'Treatment duration varies by case. Simple aligners may take 6 - 12 months. Complex braces cases may take 18 - 24 months. Dr Denize will give you a personalised timeline at your consultation.'],
              ['What are the costs?', 'Treatment costs depend on complexity and the appliance chosen. We discuss all costs upfront at your consultation  --  no hidden fees. Payment plans are available.'],
              ['Do you offer payment plans?', 'Yes. We offer flexible payment plans to spread the cost of treatment. Ask about your options at your consultation.'],
              ['What age should my child first see an orthodontist?', 'The Australian Society of Orthodontists recommends an initial assessment by age 7. At this age, Dr Denize can identify developing issues and plan ahead  --  even if treatment is not needed immediately.'],
            ].map(([q, a], i) => (
              <div key={i} style={{ padding: '32px 0', borderBottom: '1px solid var(--rule)' }}>
                <h3 style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.3, marginBottom: 12 }}>{q}</h3>
                <p className="body-md" style={{ margin: 0, maxWidth: 600 }}>{a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============ CLOSING  --  ScoreApp as 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 }}>Ready to take <em>the next step?</em></h2>
              <p className="lede" style={{ maxWidth: 460 }}>Find out where you stand  --  in 3 minutes.</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>
              <a className="cta cta--ghost" href="#/contact" onClick={(e) => { e.preventDefault(); go('contact'); }}>
                Book Free Consultation* <span className="cta__arrow">&rarr;</span>
              </a>
              <div className="phone-inline">
                Or call <a href="tel:0862887188">(08) 6288 7188</a>
              </div>
              <div className="body-sm tone-mute">*Conditions apply. Initial consultation only.</div>
            </div>
          </div>
        </div>
      </section>

    </main>
  );
}

window.NewPatientsPage = NewPatientsPage;