/* stewart.jsx  --  Dr Stewart Denize Personal Brand Page  --  Claremont Orthodontics */

function StewartPage() {
  return (
    <main data-screen-label="05 Dr Stewart Denize">

      {/* ============ HERO ============ */}
      <section className="section--lg" style={{ paddingTop: 96 }}>
        <div className="shell">
          <div className="grid-2" style={{ gap: 80, alignItems: 'end' }}>
            <div>
              <PageEyebrow>Specialist Orthodontist</PageEyebrow>
              <h1 className="display h1" style={{ margin: '28px 0 20px' }}>
                Dr Stewart <em>Denize</em>
              </h1>
              <p className="body-sm tone-mute" style={{ fontFamily: 'var(--mono)', letterSpacing: '0.12em', marginBottom: 28 }}>
                BDS (Otago, 1997) &middot; MSc Orthodontics (King&rsquo;s College London, 2013) &middot; MRCSEd
              </p>
              <p className="lede" style={{ maxWidth: 520 }}>
                A specialist who trained across four countries, served a decade as regional WA&rsquo;s only orthodontist, and chose to build something personal in Claremont.
              </p>
            </div>
            <div>
              <div className="photo photo--4x5">
                <img src="images/stewart.png" alt="Dr Stewart Denize, Specialist Orthodontist 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 }}>
            Four countries. One <em>specialty.</em>
          </h2>

          <p className="body-lg dropcap" style={{ marginBottom: 28 }}>
            Stewart grew up in New Zealand and trained as a dentist at the University of Otago, graduating in 1997. But general dentistry was always going to be a starting point, not the destination. After graduating, he worked as a dentist in Switzerland and the United Kingdom  --  gaining clinical breadth across different healthcare systems, patient populations, and treatment philosophies.
          </p>
          {/* PLACEHOLDER: verify with Stewart  --  what specifically drew him to Switzerland and the UK */}
          <p className="body-md" style={{ marginBottom: 28 }}>
            The move to Europe was driven by curiosity. Switzerland offered exposure to a healthcare system built on precision and prevention. The UK offered something else entirely  --  access to King&rsquo;s College London, one of the world&rsquo;s leading centres for orthodontic research and postgraduate training.
          </p>
          <p className="body-md" style={{ marginBottom: 28 }}>
            Stewart enrolled as a Specialist Registrar in the postgraduate orthodontic programme at King&rsquo;s College, completing his Master&rsquo;s in Orthodontics and Craniofacial Biology in 2013. He was awarded membership of the Royal College of Surgeons of Edinburgh, and his research earned several prizes and publications in international orthodontic literature.
          </p>
          <p className="body-md" style={{ marginBottom: 28 }}>
            He then moved to Australia  --  but not to Perth. Stewart became the sole specialist orthodontist in Albany, serving the entire Great Southern region of Western Australia for approximately a decade. Regional orthodontics is a different discipline: you see everything, you manage everything, and you build relationships with families across generations. Some of those patients followed him 400 kilometres to Claremont when he moved.
          </p>
          <p className="body-md">
            When Stewart and Kylie decided to open their own practice, they chose Claremont  --  and they chose to keep it small. Not a franchise. Not a group practice with rotating associates. A family-sized operation where the specialist sees every patient, personally, from first consultation through to completion.
          </p>
        </div>
      </section>

      <hr className="divider-rule" />

      {/* ============ CREDENTIALS ============ */}
      <section className="section" style={{ background: 'var(--cream-deep)' }}>
        <div className="shell">
          <Numbered n={2} label="Credentials" />
          <h2 className="display h3" style={{ marginBottom: 48 }}>
            Qualifications <em>&amp; affiliations.</em>
          </h2>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 40 }} className="cred-detail-grid">
            {[
              ['MSc Orthodontics', "King\'s College London  --  Master's in Orthodontics and Craniofacial Biology, 2013"],
              ['MRCSEd', 'Member, Royal College of Surgeons of Edinburgh'],
              ['BDS', 'Bachelor of Dental Surgery, University of Otago, New Zealand (1997)'],
              ['ASO', 'Member, Australian Society of Orthodontists'],
              ['AHPRA', 'Registered Specialist Orthodontist (DEN0001624582)'],
              ['ADA Committees', 'Sits on two Australian Dental Association (WA) committees'],
              ['Regional representative', 'Great Southern representative for regional and remote dentistry in Western Australia'],
              ['Published researcher', 'Published author in international orthodontic literature, multiple research prizes'],
            ].map(([title, desc], i) => (
              <div key={i} style={{ display: 'flex', gap: 20, alignItems: 'flex-start', paddingBottom: 28, borderBottom: '1px solid var(--rule)' }}>
                <span style={{
                  width: 40, height: 40, minWidth: 40, borderRadius: '50%',
                  background: 'var(--navy)', color: 'var(--gold)',
                  display: 'grid', placeItems: 'center',
                  fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 14,
                  marginTop: 4,
                }}>
                  {String(i + 1).padStart(2, '0')}
                </span>
                <div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.3, marginBottom: 4 }}>{title}</div>
                  <div className="body-sm tone-mute">{desc}</div>
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 36 }}>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Languages</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 20, fontStyle: 'italic' }}>English &amp; German</div>
          </div>
        </div>
        <style>{`@media (max-width: 720px) { .cred-detail-grid { grid-template-columns: 1fr !important; } }`}</style>
      </section>

      {/* ============ THE SPECIALIST DIFFERENCE ============ */}
      <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 }}>
            One specialist. <em style={{ color: 'var(--gold)' }}>Every appointment.</em>
          </h2>
          <p className="body-lg" style={{ color: 'rgba(244, 236, 222, 0.78)', maxWidth: 600, margin: '0 auto' }}>
            Stewart personally sees every patient  --  from first consultation through to completion. In an 18-month treatment, you see the same specialist at every appointment. That continuity is not a luxury. It is how orthodontics should work.
          </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>orthodontics.</em>
              </h2>
              <p className="body-md" style={{ maxWidth: 480 }}>
                Stewart is a competitive swimmer  --  a member of multiple swimming squads in Perth, currently training for the Geographe Bay 20km Open Water Swim.
              </p>
              <p className="body-md" style={{ maxWidth: 480, marginTop: 20 }}>
                He has volunteered his dental skills in Nepal, Vanuatu, and remote communities in Western Australia  --  providing care where access to specialist treatment is limited. He is also connected to the Healing Smiles initiative, supporting trauma-informed dental care for survivors of domestic violence.
              </p>
              <p className="body-md" style={{ maxWidth: 480, marginTop: 20 }}>
                Stewart and Kylie are parents to young children. They live in Perth.
              </p>
            </div>
            <div style={{ paddingTop: 32 }}>
              <PullQuote size="lg" attr="Dr Stewart Denize">
                Orthodontic treatment is a commitment  --  for you and for us. That&rsquo;s a relationship, not a transaction.
              </PullQuote>
            </div>
          </div>
        </div>
      </section>

      <ClosingCTA
        title={<>Meet Stewart <em>in person.</em></>}
        body="Book a free consultation* and have a conversation with the specialist who will personally oversee your entire treatment."
      />

    </main>
  );
}

window.StewartPage = StewartPage;