/* kylie.jsx  --  Dr Kylie Lewis Personal Brand Page  --  Claremont Orthodontics */

function KyliePage() {
  return (
    <main data-screen-label="06 Dr Kylie Lewis">

      {/* ============ HERO ============ */}
      <section className="section--lg" style={{ paddingTop: 96 }}>
        <div className="shell">
          <div className="grid-2" style={{ gap: 80, alignItems: 'end' }}>
            <div>
              <PageEyebrow>Orthodontic Therapist</PageEyebrow>
              <h1 className="display h1" style={{ margin: '28px 0 20px' }}>
                Dr Kylie <em>Lewis</em>
              </h1>
              <p className="body-sm tone-mute" style={{ fontFamily: 'var(--mono)', letterSpacing: '0.12em', marginBottom: 28 }}>
                BDS with Credit (University of Otago, 2004)
              </p>
              <p className="lede" style={{ maxWidth: 520 }}>
                A qualified dentist with over a decade of orthodontic therapy experience. The familiar face you will see at every adjustment  --  and the clinical care that keeps your treatment on track.
              </p>
            </div>
            <div>
              <div className="photo photo--4x5">
                <img src="images/kylie.png" alt="Dr Kylie Lewis, Orthodontic Therapist at Claremont Orthodontics" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
            </div>
          </div>
        </div>
      </section>

      <hr className="divider-rule" />

      {/* ============ THE STORY ============ */}
      <section className="section">
        <div className="shell shell--read">
          <Numbered n={1} label="The story" />
          <h2 className="display h3" style={{ marginBottom: 36 }}>
            A decade of <em>orthodontic care.</em>
          </h2>

          <p className="body-lg dropcap" style={{ marginBottom: 28 }}>
            Kylie graduated with a Bachelor of Dental Surgery (with Credit) from the University of Otago, New Zealand in 2004. She is a fully qualified dentist who chose to specialise her career in orthodontic therapy  --  working alongside specialist orthodontists to provide the hands-on clinical care that keeps treatment on track, day after day.
          </p>
          <p className="body-md" style={{ marginBottom: 28 }}>
            Over the past decade-plus, Kylie has built deep expertise in the practical side of orthodontic treatment: adjustments, wire changes, bracket bonding, appliance management, and the kind of patient communication that turns a long treatment journey into a comfortable one.
          </p>
          <p className="body-md" style={{ marginBottom: 28 }}>
            Before Claremont, Kylie worked alongside Stewart at Albany Orthodontics  --  spending years as part of the same clinical team, treating patients across the Great Southern region. That working relationship means a level of coordination and trust that new teams simply cannot replicate. Patients from Albany still remark on how seamlessly they work together.
          </p>
          <p className="body-md">
            When Stewart opened Claremont Orthodontics, Kylie joined him  --  bringing continuity of care for patients who had known them both for years, and the same standard of care for every new patient walking through the door.
          </p>
        </div>
      </section>

      <hr className="divider-rule" />

      {/* ============ ROLE AT THE PRACTICE ============ */}
      <section className="section" style={{ background: 'var(--cream-deep)' }}>
        <div className="shell">
          <Numbered n={2} label="Role at the practice" />
          <h2 className="display h3" style={{ marginBottom: 48 }}>
            The familiar face <em>at every visit.</em>
          </h2>

          <div className="grid-3">
            {[
              ['Day-to-day clinical care', 'Kylie provides hands-on orthodontic treatment under Dr Denize\'s specialist direction. Adjustments, wire changes, bracket bonding, and progress monitoring are all part of her daily clinical work.'],
              ['Regular adjustments', 'When you come in for your scheduled appointments  --  every 4 - 6 weeks throughout your treatment  --  Kylie is the clinician you will see. That consistency matters when tracking progress over months and years.'],
              ['A comfortable experience', 'Orthodontic treatment can span 12 - 24 months. Having a familiar, experienced clinician who knows your case, your concerns, and your progress makes every appointment feel personal  --  because it is.'],
            ].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: 12 }}>{title}</h4>
                <p className="body-sm tone-mute">{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============ THE PARTNERSHIP ============ */}
      <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 28px' }} />
          <h2 className="display h3" style={{ color: 'var(--cream)', marginBottom: 24 }}>
            Two clinicians. <em style={{ color: 'var(--gold)' }}>One team.</em>
          </h2>
          <p className="body-lg" style={{ color: 'rgba(244, 236, 222, 0.78)', maxWidth: 600, margin: '0 auto' }}>
            Stewart plans your treatment. Kylie delivers the day-to-day care. Between them, they cover every aspect of your orthodontic journey  --  with no handoffs to unfamiliar faces, no rotating clinicians, and no gaps in continuity.
          </p>
        </div>
      </section>

      {/* ============ OUTSIDE THE PRACTICE ============ */}
      <section className="section">
        <div className="shell">
          <div className="grid-2" style={{ gap: 80, alignItems: 'start' }}>
            <div>
              <Numbered n={3} label="Outside the practice" />
              <h2 className="display h3" style={{ marginBottom: 24 }}>
                Beyond <em>the clinic.</em>
              </h2>
              <p className="body-md" style={{ maxWidth: 480 }}>
                Outside of work, Kylie enjoys running, swimming, and socialising. She brings the same warmth and energy to her personal life that her patients experience at every appointment.
              </p>
              <p className="body-md" style={{ maxWidth: 480, marginTop: 20 }}>
                Kylie and Stewart are parents to young children. They live in Perth.
              </p>
            </div>
            <div style={{ paddingTop: 32 }}>
              <PullQuote size="lg" attr="Dr Kylie Lewis">
                {/* PLACEHOLDER: verify with Kylie  --  use her own words if available */}
                The most rewarding part of this work is watching someone grow more confident with every appointment. By the end of treatment, the smile was always there  --  we just helped it show.
              </PullQuote>
            </div>
          </div>
        </div>
      </section>

      <ClosingCTA
        title={<>Meet the team <em>in person.</em></>}
        body="Book a free consultation* and see the practice where Kylie and Stewart work together to deliver specialist orthodontic care."
      />

    </main>
  );
}

window.KyliePage = KyliePage;
