/* care-pages.jsx  --  5 Treatment Pages  --  Claremont Orthodontics */

/* ===================================================================
   Traditional Braces
   =================================================================== */

function BracesPage() {
  return (
    <main data-screen-label="Treatment  --  Traditional Braces">

      <ServiceHero
        eyebrow="Traditional Braces"
        title={<>The proven approach to <em>precise results.</em></>}
        lede="Metal brackets and wires give your orthodontist maximum control over tooth movement  --  effective for every complexity, every age."
        photoLabel="Traditional braces" image="images/treatment-braces.png"
        photoSub="Close-up, metal brackets on teeth"
      />

      <hr className="divider-rule" />

      {/* What to expect */}
      <section className="section">
        <div className="shell shell--narrow">
          <Numbered n={1} label="What to expect" />
          <h2 className="display h3" style={{ marginBottom: 48 }}>
            How traditional braces <em>work.</em>
          </h2>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>
            {[
              ['Brackets bonded to your teeth', 'Small metal brackets are carefully bonded to the front surface of each tooth. This is painless and typically takes about an hour.'],
              ['Archwire connects the brackets', 'A thin metal archwire threads through each bracket, creating a continuous system that applies gentle, consistent pressure to guide your teeth into position.'],
              ['Regular adjustments', 'Every 4 - 6 weeks, Dr Denize will adjust the wire tension and check your progress. Each adjustment is a short appointment  --  usually 20 - 30 minutes.'],
              ['Treatment completion', 'Once your teeth have reached their final positions  --  typically 12 - 24 months  --  the brackets are removed and you receive retainers to maintain your result.'],
            ].map(([h, p], i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '64px 1fr', gap: 24, paddingBottom: i < 3 ? 48 : 0, borderBottom: i < 3 ? '1px solid var(--rule)' : 'none' }}>
                <span className="numbered__num">0{i + 1}</span>
                <div>
                  <h3 className="display h4" style={{ margin: '0 0 12px' }}>{h}</h3>
                  <p className="body-md" style={{ margin: 0, maxWidth: 560 }}>{p}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <hr className="divider-rule" />

      {/* Who is this for */}
      <section className="section" style={{ background: 'var(--cream-deep)' }}>
        <div className="shell">
          <div className="grid-2" style={{ alignItems: 'start' }}>
            <div>
              <Numbered n={2} label="Who is this for" />
              <h2 className="display h3" style={{ marginBottom: 24 }}>
                The most versatile option <em>available.</em>
              </h2>
              <p className="body-lg" style={{ maxWidth: 480 }}>
                Traditional braces remain the treatment of choice for the most complex cases. If precision and predictability are priorities, this is where Dr Denize\'s specialist training delivers the greatest advantage.
              </p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 28, paddingTop: 16 }}>
              {[
                'Complex crowding and spacing',
                'Significant bite misalignment (overbite, underbite, crossbite)',
                'Jaw alignment issues requiring coordinated tooth movement',
                'Cases where maximum orthodontic control is needed',
                'Children, teens, and adults of any age',
              ].map((item, i) => (
                <div key={i} style={{ display: 'flex', gap: 16, alignItems: 'baseline' }}>
                  <span style={{ color: 'var(--gold-deep)', fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 20 }}>&bull;</span>
                  <span className="body-md">{item}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Key facts */}
      <section className="section">
        <div className="shell">
          <Numbered n={3} label="Key details" />
          <div className="grid-3" style={{ marginTop: 48 }}>
            {[
              ['Treatment duration', '12 - 24 months', 'Depending on complexity. Dr Denize will give you a personalised estimate at your consultation.'],
              ['Adjustments', 'Every 4 - 6 weeks', 'Short appointments to check progress and adjust wire tension.'],
              ['Effectiveness', 'All complexities', 'Traditional braces can address cases that other options cannot. No limitations on treatment scope.'],
            ].map(([label, value, desc], i) => (
              <div key={i} style={{ borderTop: '1px solid var(--rule)', paddingTop: 32 }}>
                <div className="eyebrow eyebrow--gold" style={{ marginBottom: 12 }}>{label}</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 28, fontStyle: 'italic', lineHeight: 1.2, marginBottom: 12 }}>{value}</div>
                <p className="body-sm tone-mute">{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <ClosingCTA
        title={<>Ready to explore <em>your options?</em></>}
        body="Book a free consultation* and Dr Denize will assess your case, explain every option, and help you choose the right path."
      />

    </main>
  );
}

/* ===================================================================
   Ceramic Braces
   =================================================================== */

function CeramicPage() {
  return (
    <main data-screen-label="Treatment  --  Ceramic Braces">

      <ServiceHero
        eyebrow="Ceramic Braces"
        title={<>The precision of braces. <em>The discretion of ceramic.</em></>}
        lede="Tooth-coloured brackets that blend with your smile  --  the same proven mechanics as traditional braces, with a more subtle appearance."
        photoLabel="Ceramic braces" image="images/treatment-ceramic.png"
        photoSub="Tooth-coloured brackets, smile close-up"
      />

      <hr className="divider-rule" />

      {/* What to expect */}
      <section className="section">
        <div className="shell shell--narrow">
          <Numbered n={1} label="What to expect" />
          <h2 className="display h3" style={{ marginBottom: 48 }}>
            The same approach, <em>a different look.</em>
          </h2>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>
            {[
              ['Tooth-coloured brackets', 'Ceramic brackets are made from translucent or tooth-coloured material that blends naturally with your teeth. The archwire can also be coated for additional discretion.'],
              ['Same proven mechanics', 'Ceramic braces use the same bracket-and-wire system as traditional braces. The treatment process, adjustment schedule, and results are equivalent for most cases.'],
              ['Regular adjustments', 'Like traditional braces, you will visit Dr Denize every 4 - 6 weeks for adjustments. Each appointment is a short visit to check progress and fine-tune your treatment.'],
              ['Slightly larger brackets', 'Ceramic brackets are slightly larger than their metal counterparts. This is a trade-off for the aesthetic benefit  --  Dr Denize will discuss whether this matters for your case.'],
            ].map(([h, p], i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '64px 1fr', gap: 24, paddingBottom: i < 3 ? 48 : 0, borderBottom: i < 3 ? '1px solid var(--rule)' : 'none' }}>
                <span className="numbered__num">0{i + 1}</span>
                <div>
                  <h3 className="display h4" style={{ margin: '0 0 12px' }}>{h}</h3>
                  <p className="body-md" style={{ margin: 0, maxWidth: 560 }}>{p}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <hr className="divider-rule" />

      {/* Who is this for */}
      <section className="section" style={{ background: 'var(--cream-deep)' }}>
        <div className="shell">
          <div className="grid-2" style={{ alignItems: 'start' }}>
            <div>
              <Numbered n={2} label="Who is this for" />
              <h2 className="display h3" style={{ marginBottom: 24 }}>
                Popular with adults <em>and image-conscious teens.</em>
              </h2>
              <p className="body-lg" style={{ maxWidth: 480 }}>
                If you want the precision and reliability of fixed braces but prefer a less noticeable appearance, ceramic braces offer the best of both worlds.
              </p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 28, paddingTop: 16 }}>
              {[
                'Adults who want effective treatment with a subtle look',
                'Teens who are self-conscious about metal brackets',
                'Moderate to complex cases where aligners may not be suitable',
                'Anyone who values both aesthetics and proven results',
                'Most cases that traditional braces can treat',
              ].map((item, i) => (
                <div key={i} style={{ display: 'flex', gap: 16, alignItems: 'baseline' }}>
                  <span style={{ color: 'var(--gold-deep)', fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 20 }}>&bull;</span>
                  <span className="body-md">{item}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Key facts */}
      <section className="section">
        <div className="shell">
          <Numbered n={3} label="Key details" />
          <div className="grid-3" style={{ marginTop: 48 }}>
            {[
              ['Treatment duration', '12 - 24 months', 'Similar timeline to traditional braces. Your personalised plan will be mapped out at your consultation.'],
              ['Appearance', 'Tooth-coloured', 'Translucent or colour-matched ceramic brackets that blend with your natural teeth.'],
              ['Effectiveness', 'Most cases', 'Suitable for the majority of orthodontic cases. Dr Denize will advise if traditional braces would be more appropriate for your specific needs.'],
            ].map(([label, value, desc], i) => (
              <div key={i} style={{ borderTop: '1px solid var(--rule)', paddingTop: 32 }}>
                <div className="eyebrow eyebrow--gold" style={{ marginBottom: 12 }}>{label}</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 28, fontStyle: 'italic', lineHeight: 1.2, marginBottom: 12 }}>{value}</div>
                <p className="body-sm tone-mute">{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <ClosingCTA
        title={<>Discreet treatment, <em>specialist care.</em></>}
        body="Book a free consultation* to find out if ceramic braces are the right option for your smile."
      />

    </main>
  );
}

/* ===================================================================
   Clear Aligners
   =================================================================== */

function AlignersPage() {
  return (
    <main data-screen-label="Treatment  --  Clear Aligners">

      <ServiceHero
        eyebrow="Clear Aligners"
        title={<>Removable. Discreet. <em>Custom-made for your smile.</em></>}
        lede="A series of custom-made clear trays that gradually move your teeth  --  removable for eating and brushing, virtually invisible when worn."
        photoLabel="Clear aligners" image="images/treatment-aligners.png"
        photoSub="Transparent aligner tray on model"
      />

      <hr className="divider-rule" />

      {/* What to expect */}
      <section className="section">
        <div className="shell shell--narrow">
          <Numbered n={1} label="What to expect" />
          <h2 className="display h3" style={{ marginBottom: 48 }}>
            The treatment plan is the skill  --  <em>aligners are the tool.</em>
          </h2>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>
            {[
              ['Digital planning', 'Dr Denize creates a precise digital treatment plan using 3D scans of your teeth. Every movement is mapped before your first aligner is made.'],
              ['Custom-made clear trays', 'Each aligner is custom-fabricated to your teeth. You wear them for 20 - 22 hours per day, removing them only for eating, drinking (anything other than water), and brushing.'],
              ['Progressive changes', 'You change to a new set of aligners every 1 - 2 weeks. Each set moves your teeth incrementally toward the final position.'],
              ['Regular check-ins', 'Dr Denize monitors your progress with regular appointments, adjusting the plan if needed. Specialist oversight ensures complex movements are carefully managed throughout treatment.'],
            ].map(([h, p], i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '64px 1fr', gap: 24, paddingBottom: i < 3 ? 48 : 0, borderBottom: i < 3 ? '1px solid var(--rule)' : 'none' }}>
                <span className="numbered__num">0{i + 1}</span>
                <div>
                  <h3 className="display h4" style={{ margin: '0 0 12px' }}>{h}</h3>
                  <p className="body-md" style={{ margin: 0, maxWidth: 560 }}>{p}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <hr className="divider-rule" />

      {/* Honest about limitations */}
      <section className="section" style={{ background: 'var(--ink)', color: 'var(--cream)' }}>
        <div className="shell shell--narrow" style={{ textAlign: 'center' }}>
          <HandDivider color="var(--gold)" width={120} style={{ margin: '0 auto 24px' }} />
          <h2 className="display h3" style={{ color: 'var(--cream)', marginBottom: 24 }}>
            Aligners are not suitable <em style={{ color: 'var(--gold)' }}>for every case.</em>
          </h2>
          <p className="body-lg" style={{ color: 'rgba(244, 236, 222, 0.78)', maxWidth: 600, margin: '0 auto' }}>
            We believe in honesty over sales. Clear aligners work well for mild to moderate crowding and spacing  --  but complex bite issues, significant jaw misalignment, or severe crowding may require fixed braces for the best result. Dr Denize will tell you upfront what will and won\'t work.
          </p>
        </div>
      </section>

      {/* Who is this for */}
      <section className="section" style={{ background: 'var(--cream-deep)' }}>
        <div className="shell">
          <div className="grid-2" style={{ alignItems: 'start' }}>
            <div>
              <Numbered n={2} label="Who is this for" />
              <h2 className="display h3" style={{ marginBottom: 24 }}>
                Ideal for mild to moderate <em>cases.</em>
              </h2>
              <p className="body-lg" style={{ maxWidth: 480 }}>
                Dr Denize\'s specialist training means he can manage complex aligner cases that require specialist-level treatment planning. But he will also tell you honestly if braces would give you a better result.
              </p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 28, paddingTop: 16 }}>
              {[
                'Mild to moderate crowding or spacing',
                'Adults and teens who prioritise discretion',
                'Patients who need the flexibility to remove their appliance',
                'Cases where specialist planning can achieve what a GP prescription cannot',
                'Patients committed to wearing aligners 20 - 22 hours per day',
              ].map((item, i) => (
                <div key={i} style={{ display: 'flex', gap: 16, alignItems: 'baseline' }}>
                  <span style={{ color: 'var(--gold-deep)', fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 20 }}>&bull;</span>
                  <span className="body-md">{item}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Key facts */}
      <section className="section">
        <div className="shell">
          <Numbered n={3} label="Key details" />
          <div className="grid-3" style={{ marginTop: 48 }}>
            {[
              ['Wear time', '20 - 22 hours/day', 'Removed only for eating, drinking, and oral hygiene. Compliance is essential for results.'],
              ['Aligner changes', 'Every 1 - 2 weeks', 'Each new set moves your teeth incrementally. Total number of aligners varies by case.'],
              ['The specialist advantage', 'Treatment planning', 'The aligners themselves are a commodity. The treatment plan  --  how your teeth are moved, in what sequence, and by how much  --  is where specialist training matters.'],
            ].map(([label, value, desc], i) => (
              <div key={i} style={{ borderTop: '1px solid var(--rule)', paddingTop: 32 }}>
                <div className="eyebrow eyebrow--gold" style={{ marginBottom: 12 }}>{label}</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 28, fontStyle: 'italic', lineHeight: 1.2, marginBottom: 12 }}>{value}</div>
                <p className="body-sm tone-mute">{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <ClosingCTA
        title={<>Find out if aligners are <em>right for you.</em></>}
        body="Book a free consultation* and Dr Denize will give you an honest assessment  --  including whether aligners or braces would deliver the best result for your case."
      />

    </main>
  );
}

/* ===================================================================
   Pre-Teen & Early Intervention
   =================================================================== */

function PreteenPage() {
  return (
    <main data-screen-label="Treatment  --  Pre-Teen & Early Intervention">

      <ServiceHero
        eyebrow="Pre-Teen & Early Intervention"
        title={<>The right care, <em>at the right time.</em></>}
        lede="Interceptive orthodontics for children aged 7 - 12. Guiding jaw growth and creating space while your child is still growing."
        photoLabel="Pre-teen orthodontic assessment" image="images/treatment-preteen.png"
        photoSub="Child at orthodontic appointment"
      />

      <hr className="divider-rule" />

      {/* Why age 7 */}
      <section className="section">
        <div className="shell">
          <div className="grid-2" style={{ alignItems: 'start', gap: 80 }}>
            <div>
              <Numbered n={1} label="Why age 7" />
              <h2 className="display h3" style={{ marginBottom: 24 }}>
                The Australian Society of Orthodontists recommends <em>assessment by age 7.</em>
              </h2>
              <p className="body-lg" style={{ maxWidth: 480 }}>
                At seven, your child has a mix of baby and adult teeth  --  and enough growth remaining for an orthodontist to identify developing problems and intervene before they become complex.
              </p>
            </div>
            <div>
              <PullQuote size="md" attr="Dr Stewart Denize">
                Not every child needs early treatment. But every child benefits from knowing whether they do  --  and planning ahead if they don\'t.
              </PullQuote>
            </div>
          </div>
        </div>
      </section>

      <hr className="divider-rule" />

      {/* What to expect */}
      <section className="section" style={{ background: 'var(--cream-deep)' }}>
        <div className="shell shell--narrow">
          <Numbered n={2} label="What early intervention can address" />
          <h2 className="display h3" style={{ marginBottom: 48 }}>
            Guiding growth, <em>not just straightening teeth.</em>
          </h2>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>
            {[
              ['Jaw growth guidance', 'Plates and expanders can widen a narrow upper jaw, encourage forward growth, or correct asymmetry  --  but only while the jaw is still growing.'],
              ['Creating space for adult teeth', 'Space maintainers and arch development appliances can prevent crowding before it happens, reducing the need for extractions later.'],
              ['Correcting crossbites', 'A crossbite in a growing child can cause the jaw to shift and develop asymmetrically. Early correction prevents permanent skeletal changes.'],
              ['Reducing future complexity', 'A short course of interceptive treatment at age 8 - 10 can simplify  --  or even eliminate  --  the need for full braces in the teenage years.'],
            ].map(([h, p], i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '64px 1fr', gap: 24, paddingBottom: i < 3 ? 48 : 0, borderBottom: i < 3 ? '1px solid var(--rule)' : 'none' }}>
                <span className="numbered__num">0{i + 1}</span>
                <div>
                  <h3 className="display h4" style={{ margin: '0 0 12px' }}>{h}</h3>
                  <p className="body-md" style={{ margin: 0, maxWidth: 560 }}>{p}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Treatment options */}
      <section className="section">
        <div className="shell">
          <Numbered n={3} label="Treatment options" />
          <h2 className="display h3" style={{ marginBottom: 48 }}>
            Appliances designed for <em>growing jaws.</em>
          </h2>
          <div className="grid-3" style={{ marginTop: 48 }}>
            {[
              ['Plates', 'Removable appliances that apply gentle pressure to widen the jaw or move specific teeth. Worn most of the time and adjusted regularly.'],
              ['Expanders', 'Fixed appliances that gradually widen the upper jaw over several weeks. Most effective during the growth years when the palatal suture is still flexible.'],
              ['Space maintainers', 'Hold space open for adult teeth when baby teeth are lost early. Prevents neighbouring teeth from drifting and creating crowding.'],
            ].map(([title, desc], i) => (
              <div key={i} style={{ borderTop: '1px solid var(--rule)', paddingTop: 32 }}>
                <div style={{
                  width: 48, height: 48, borderRadius: '50%',
                  background: 'var(--navy)', color: 'var(--gold)',
                  display: 'grid', placeItems: 'center',
                  fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 16,
                  marginBottom: 20,
                }}>
                  0{i + 1}
                </div>
                <h4 style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.2, marginBottom: 8 }}>{title}</h4>
                <p className="body-sm tone-mute">{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Honest note */}
      <section className="section--sm" style={{ borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
        <div className="shell shell--narrow" style={{ textAlign: 'center', padding: '48px 0' }}>
          <HandDivider color="var(--gold-deep)" width={100} style={{ margin: '0 auto 20px' }} />
          <p className="body-lg" style={{ maxWidth: 600, margin: '0 auto' }}>
            Dr Denize will only recommend early treatment when there is a clear clinical benefit. Many children are best served by monitoring their growth and starting comprehensive treatment in their early teens.
          </p>
        </div>
      </section>

      <ClosingCTA
        title={<>Book a growth <em>assessment.</em></>}
        body="A free consultation* for your child gives you a clear picture of their dental development  --  and a plan for the future, whether that means treatment now or watchful waiting."
      />

    </main>
  );
}

/* ===================================================================
   Adult Orthodontics
   =================================================================== */

function AdultPage() {
  return (
    <main data-screen-label="Treatment  --  Adult Orthodontics">

      <ServiceHero
        eyebrow="Adult Orthodontics"
        title={<>It&rsquo;s never too late for <em>specialist care.</em></>}
        lede="More adults are seeking orthodontic treatment than ever before. Your teeth, your bite, and your confidence deserve specialist attention  --  at any age."
        photoLabel="Adult orthodontic consultation" image="images/treatment-adult.png"
        photoSub="Professional adult, orthodontic consultation"
      />

      <hr className="divider-rule" />

      {/* Why adults are different */}
      <section className="section">
        <div className="shell shell--narrow">
          <Numbered n={1} label="The adult difference" />
          <h2 className="display h3" style={{ marginBottom: 24 }}>
            Adult orthodontics is not the same <em>as treating teens.</em>
          </h2>
          <p className="body-lg dropcap" style={{ maxWidth: 640, marginBottom: 36 }}>
            Adult teeth move differently. Bone density is higher, gum health may need attention first, and aesthetic expectations are more specific. Adults may also have missing teeth, dental restorations, or gum recession that require specialist assessment before treatment begins. This is precisely why seeing a specialist orthodontist  --  matters for achieving the right outcome.
          </p>
        </div>
      </section>

      <hr className="divider-rule" />

      {/* Treatment options for adults */}
      <section className="section" style={{ background: 'var(--cream-deep)' }}>
        <div className="shell">
          <Numbered n={2} label="Your options" />
          <h2 className="display h3" style={{ marginBottom: 48 }}>
            Options designed with <em>your lifestyle in mind.</em>
          </h2>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>
            {[
              ['Ceramic braces', 'Tooth-coloured brackets that blend with your smile. The same precision as traditional braces with a more subtle appearance. Popular for professional adults who want effective treatment without drawing attention.'],
              ['Clear aligners', 'Removable, virtually invisible trays that fit your schedule. Dr Denize\'s specialist treatment planning means complex cases can be managed with aligners thanks to specialist-level treatment planning.'],
              ['Traditional braces', 'For the most complex cases, metal braces offer maximum control. Some adults prefer the directness  --  and the treatment efficiency  --  of traditional braces.'],
              ['Lingual braces', 'Brackets fitted to the back of your teeth, completely hidden from view. An option for adults who want the precision of fixed braces with zero visible hardware.'],
            ].map(([h, p], i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '64px 1fr', gap: 24, paddingBottom: i < 3 ? 48 : 0, borderBottom: i < 3 ? '1px solid var(--rule)' : 'none' }}>
                <span className="numbered__num">0{i + 1}</span>
                <div>
                  <h3 className="display h4" style={{ margin: '0 0 12px' }}>{h}</h3>
                  <p className="body-md" style={{ margin: 0, maxWidth: 560 }}>{p}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Considerations */}
      <section className="section">
        <div className="shell">
          <Numbered n={3} label="What to consider" />
          <h2 className="display h3" style={{ marginBottom: 48 }}>
            Additional factors for <em>adult treatment.</em>
          </h2>
          <div className="grid-3" style={{ marginTop: 48 }}>
            {[
              ['Treatment timeline', 'May take slightly longer than teens due to denser bone tissue. Dr Denize will give you a realistic timeline, not an optimistic one.'],
              ['Gum and bone health', 'Periodontal health is assessed before treatment begins. Existing gum recession or bone loss may affect treatment options.'],
              ['Existing dental work', 'Crowns, bridges, implants, and missing teeth all factor into your treatment plan. Specialist assessment ensures nothing is overlooked.'],
            ].map(([title, desc], i) => (
              <div key={i} style={{ borderTop: '1px solid var(--rule)', paddingTop: 32 }}>
                <div style={{
                  width: 48, height: 48, borderRadius: '50%',
                  background: 'var(--navy)', color: 'var(--gold)',
                  display: 'grid', placeItems: 'center',
                  fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 16,
                  marginBottom: 20,
                }}>
                  0{i + 1}
                </div>
                <h4 style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.2, marginBottom: 8 }}>{title}</h4>
                <p className="body-sm tone-mute">{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <ClosingCTA
        title={<>Your smile has <em>no age limit.</em></>}
        body="Book a free consultation* and Dr Denize will assess your teeth, your bite, and your goals  --  then give you every option, clearly explained."
      />

    </main>
  );
}

/* expose to app.jsx */
Object.assign(window, {
  BracesPage, CeramicPage, AlignersPage, PreteenPage, AdultPage,
});