/* about.jsx  --  About Page  --  Claremont Orthodontics */

function AboutPage() {
  return (
    <main data-screen-label="02 About">

      {/* ============ HERO ============ */}
      <section className="section" style={{ paddingBottom: 80 }}>
        <div className="shell shell--narrow">
          <PageEyebrow>Our Story</PageEyebrow>
          <h1 className="display h1" style={{ margin: '28px 0 28px' }}>
            World-class credentials. <em>Family-sized care.</em>
          </h1>
          <p className="lede" style={{ maxWidth: 600 }}>
            A specialist orthodontist who trained across four countries, an orthodontic therapist with over a decade of clinical experience, and a deliberate choice to stay small.
          </p>
        </div>
      </section>

      <hr className="divider-rule" />

      {/* ============ PRACTICE STORY ============ */}
      <section className="section">
        <div className="shell">
          <div className="grid-2" style={{ gap: 80, alignItems: 'start' }}>
            <div>
              <Numbered n={1} label="The practice" />
              <h2 className="display h3" style={{ marginBottom: 24 }}>
                Built by choice, <em>not by budget.</em>
              </h2>
              <p className="body-lg dropcap" style={{ maxWidth: 520 }}>
                Stewart trained at King\'s College London, worked across four countries, and spent a decade as Albany's only orthodontist  --  serving the entire Great Southern region of Western Australia. When it came time to open his own practice, he chose Claremont. And he chose to keep it small.
              </p>
              <p className="body-md" style={{ maxWidth: 520, marginTop: 24 }}>
                Claremont Orthodontics is a family practice  --  Stewart and Kylie, two clinicians who have worked together for years. No rotating associates. No franchise model. No corporate owner. Just a specialist who personally sees every patient, from first consultation through to completion.
              </p>
            </div>
            <div>
              <div className="photo photo--5x4">
                <img src="images/practice.png" alt="Claremont Orthodontics practice" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
            </div>
          </div>
        </div>
      </section>

      <hr className="divider-rule" />

      {/* ============ TEAM CARDS ============ */}
      <section className="section" style={{ background: 'var(--cream-deep)' }}>
        <div className="shell">
          <div style={{ marginBottom: 64 }}>
            <Numbered n={2} label="The team" />
            <h2 className="display h3">
              Two people. <em>One practice.</em>
            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }} className="team-grid">
            {/* Stewart */}
            <article>
              <div className="photo photo--4x5">
                <img src="images/stewart.png" alt="Dr Stewart Denize, Specialist Orthodontist" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{ marginTop: 32 }}>
                <div className="eyebrow eyebrow--gold" style={{ marginBottom: 10 }}>Specialist Orthodontist</div>
                <h3 className="display h4" style={{ margin: '0 0 8px' }}>Dr Stewart Denize</h3>
                <p className="body-sm tone-mute" style={{ marginBottom: 16 }}>
                  BDS (Otago) &middot; MSc Orthodontics (King\'s College London) &middot; MRCSEd
                </p>
                <p className="body-md" style={{ marginBottom: 20 }}>
                  King\'s College London-trained specialist who personally sees every patient. A decade as the sole orthodontist in regional WA. Published researcher. Competitive swimmer.
                </p>
                <a className="link-arrow" href="#/dr-stewart">
                  Read Stewart\'s full story <span>&rarr;</span>
                </a>
              </div>
            </article>

            {/* Kylie */}
            <article style={{ marginTop: 64 }} className="team-offset">
              <div className="photo photo--4x5">
                <img src="images/kylie.png" alt="Dr Kylie Lewis, Orthodontic Therapist" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{ marginTop: 32 }}>
                <div className="eyebrow eyebrow--gold" style={{ marginBottom: 10 }}>Orthodontic Therapist</div>
                <h3 className="display h4" style={{ margin: '0 0 8px' }}>Dr Kylie Lewis</h3>
                <p className="body-sm tone-mute" style={{ marginBottom: 16 }}>
                  BDS (University of Otago, 2004)
                </p>
                <p className="body-md" style={{ marginBottom: 20 }}>
                  Over 10 years of orthodontic therapy experience. Previously worked alongside Stewart at Albany Orthodontics. The familiar face at every adjustment appointment.
                </p>
                <a className="link-arrow" href="#/dr-kylie">
                  Read Kylie\'s full story <span>&rarr;</span>
                </a>
              </div>
            </article>
          </div>
        </div>
        <style>{`@media (max-width: 860px) { .team-grid { grid-template-columns: 1fr !important; gap: 56px !important; } .team-offset { margin-top: 0 !important; } }`}</style>
      </section>

      {/* ============ VALUES ============ */}
      <section className="section">
        <div className="shell">
          <div style={{ marginBottom: 64 }}>
            <Numbered n={3} label="What we believe" />
            <h2 className="display h3">
              Three things that <em>define us.</em>
            </h2>
          </div>

          <div className="grid-3">
            {[
              ['Continuity', 'You see the same specialist at every appointment. In an 18-month treatment, that matters. No rotating clinicians, no handoffs, no repeating your history.'],
              ['Honesty', 'Every option explained  --  including the ones we don\'t offer. If braces will give you a better result than aligners, we\'ll say so. No upselling, no pressure.'],
              ['Specialist care', 'Three years of full-time postgraduate training after dental school, focused exclusively on orthodontics. For complex cases, specialist training translates directly into treatment quality.'],
            ].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>

      {/* ============ CREDENTIALS STRIP ============ */}
      <section style={{ borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', padding: '48px 0' }}>
        <div className="shell">
          <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', justifyContent: 'center' }}>
            {[
              ['ASO', 'Australian Society of Orthodontists'],
              ['AHPRA', 'Registered Specialist'],
              ['KCL', "King\'s College London"],
              ['RCS', 'Royal College of Surgeons Edinburgh'],
            ].map(([abbr, label], i) => (
              <CredBadge key={i} icon={abbr}>{label}</CredBadge>
            ))}
          </div>
        </div>
      </section>

      <ClosingCTA
        title={<>Meet the team <em>in person.</em></>}
        body="Book a free consultation* and see for yourself why families across Perth choose Claremont Orthodontics."
      />

    </main>
  );
}

window.AboutPage = AboutPage;
/* cache bust 1780115237 */
