/* home.jsx — Homepage — Claremont Orthodontics */

function HomePage() {
  return (
    <main data-screen-label="01 Home">

      {/* ============ HERO ============ */}
      <section style={{
        position: 'relative',
        minHeight: '85vh',
        display: 'flex',
        alignItems: 'center',
        backgroundImage: 'url(images/hero-consultation.png)',
        backgroundSize: 'cover',
        backgroundPosition: '85% center',
      }}>
        <div style={{
          position: 'absolute',
          inset: 0,
          background: 'linear-gradient(to right, var(--cream) 42%, rgba(244, 236, 222, 0.9) 55%, rgba(244, 236, 222, 0.3) 72%, transparent 100%)',
        }} />
        <div className="shell shell--wide" style={{ position: 'relative', zIndex: 2, padding: '96px 48px' }}>
          <div style={{ maxWidth: 540 }}>
            <PageEyebrow>Claremont &middot; Perth Western Australia</PageEyebrow>
            <h1 className="display" style={{
              fontSize: 'clamp(48px, 7.5vw, 112px)',
              lineHeight: 0.95,
              margin: '36px 0 36px',
            }}>
              World-class<br/>
              orthodontics.<br/>
              <em>Family-owned.</em>
            </h1>
            <p className="lede" style={{ maxWidth: 480, marginBottom: 44 }}>
              Dr Stewart Denize is a King&rsquo;s College London-trained specialist who personally sees every patient, from first consultation through to completion.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
              <a className="cta" href="#/assessment" onClick={(e) => { e.preventDefault(); go('assessment'); }} style={{ fontSize: 16, padding: '20px 32px' }}>
                Do I need orthodontic treatment? <span className="cta__arrow">&rarr;</span>
              </a>
            </div>
            <div className="body-sm" style={{ marginTop: 12, color: 'var(--ink-mute)' }}>
              Free 3-minute assessment &middot; Personalised recommendations &middot; No obligation
            </div>
            <div style={{ marginTop: 24, display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
              <a className="cta cta--ghost" href="#/new-patients" onClick={(e) => { e.preventDefault(); go('new-patients'); }} style={{ fontSize: 14, padding: '14px 24px' }}>
                Book free consultation*
              </a>
              <div className="phone-inline">
                Or call <a href="tel:0862887188">(08) 6288 7188</a>
              </div>
            </div>
            <div className="body-sm tone-mute" style={{ marginTop: 10, fontSize: 12 }}>
              *Conditions apply. Initial consultation only.
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) {
            section[style*="hero-consultation"] { background-position: center !important; min-height: 70vh !important; }
          }
        `}</style>
      </section>

      {/* ============ TRUST BAR ============ */}
      <section style={{
        borderTop: '1px solid var(--rule)',
        borderBottom: '1px solid var(--rule)',
        padding: '48px 0',
      }}>
        <div className="shell">
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 56,
          }} className="trust-grid">
            {[
              ['You see the specialist. Every visit.', 'No rotating clinicians. No associates. The same specialist orthodontist for your entire treatment.'],
              ['King’s College London trained.', 'Master’s in Orthodontics. Royal College of Surgeons Edinburgh.'],
              ['Family-owned, not a franchise.', 'Stewart and Kylie. Two people. One practice. Personal care.'],
            ].map(([h, p], i) => (
              <div key={i} style={{ display: 'flex', gap: 20, alignItems: 'flex-start' }}>
                <span className="numbered__num" style={{ fontSize: 22, minWidth: 36 }}>0{i+1}</span>
                <div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 22, fontStyle: 'italic', lineHeight: 1.2, marginBottom: 6, color: 'var(--ink)' }}>
                    {h}
                  </div>
                  <div className="body-sm tone-mute" style={{ maxWidth: 280 }}>{p}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <style>{`@media (max-width: 800px) { .trust-grid { grid-template-columns: 1fr !important; gap: 28px !important; } }`}</style>
      </section>

      {/* ============ THE TEAM ============ */}
      <section className="section">
        <div className="shell">
          <div style={{ marginBottom: 80, maxWidth: 720 }}>
            <PageEyebrow>Your Orthodontist</PageEyebrow>
            <h2 className="display h2" style={{ margin: '24px 0 0' }}>
              World-class credentials. <em>Family-sized care.</em>
            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }} className="dr-grid">
            <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 }}>Dr Stewart Denize &middot; Specialist Orthodontist</div>
                <h3 className="display h4" style={{ margin: '0 0 8px' }}>King&rsquo;s College London &middot; Royal College of Surgeons Edinburgh</h3>
                <p className="body-md" style={{ marginBottom: 16 }}>
                  The specialist who trained across four countries, spent a decade as the sole orthodontist in regional Western Australia, and then built a family practice in Claremont.
                </p>
                <a className="link-arrow" href="#/dr-stewart" onClick={(e) => { e.preventDefault(); go('dr-stewart'); }}>
                  Read Stewart&rsquo;s full story <span>&rarr;</span>
                </a>
              </div>
            </article>
            <article style={{ marginTop: 64 }} className="dr-card-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 }}>Dr Kylie Lewis &middot; Orthodontic Therapist</div>
                <h3 className="display h4" style={{ margin: '0 0 8px' }}>University of Otago &middot; BDS</h3>
                <p className="body-md" style={{ marginBottom: 16 }}>
                  Ten years of orthodontic therapy experience. Bachelor of Dental Surgery from Otago University, New Zealand. The familiar face at every adjustment appointment.
                </p>
                <a className="link-arrow" href="#/dr-kylie" onClick={(e) => { e.preventDefault(); go('dr-kylie'); }}>
                  Read Kylie&rsquo;s full story <span>&rarr;</span>
                </a>
              </div>
            </article>
          </div>

          <div style={{ marginTop: 96, maxWidth: 880, marginLeft: 'auto', marginRight: 'auto', textAlign: 'center' }}>
            <PullQuote size="lg" attr="Dr Stewart Denize">
              Orthodontic treatment is a commitment &mdash; for you and for us. You&rsquo;ll see us every few weeks for up to two years. That&rsquo;s a relationship, not a transaction.
            </PullQuote>
          </div>
        </div>
        <style>{`@media (max-width: 860px) { .dr-grid { grid-template-columns: 1fr !important; gap: 56px !important; } .dr-card-offset { margin-top: 0 !important; } }`}</style>
      </section>

      {/* ============ SERVICES OVERVIEW (editorial, asymmetric) ============ */}
      <section className="section" style={{ background: 'var(--cream-deep)' }}>
        <div className="shell shell--wide">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, marginBottom: 80, alignItems: 'end' }} className="svc-head">
            <div>
              <PageEyebrow>Treatment options</PageEyebrow>
              <h2 className="display h2" style={{ margin: '24px 0 0' }}>
                Every option explained. <em>Your choice.</em>
              </h2>
            </div>
            <p className="body-lg" style={{ maxWidth: 520 }}>
              At Claremont Orthodontics, you&rsquo;ll be given all your treatment options and then you can make your choice. No pressure, no upselling &mdash; just honest specialist advice.
            </p>
          </div>

          {/* Editorial service list */}
          <div className="svc-list">
            {[
              { n: '01', name: 'Traditional Braces', tag: 'Fixed', target: 'braces',
                blurb: 'The proven approach. Metal brackets and wires that give your orthodontist the most precise control over tooth movement. Effective for all ages and complexities.' },
              { n: '02', name: 'Ceramic Braces', tag: 'Fixed', target: 'ceramic',
                blurb: 'The same precision as traditional braces, with tooth-coloured brackets that blend with your smile. Popular with adults and image-conscious teens.' },
              { n: '03', name: 'Clear Aligners', tag: 'Removable', target: 'aligners',
                blurb: 'Removable, discreet, and comfortable. Custom-made aligners that gradually move your teeth. The treatment plan is the skill — aligners are the tool.' },
              { n: '04', name: 'Pre-Teen & Early Intervention', tag: 'Growth', target: 'preteen',
                blurb: 'Jaw developers, plates, and interceptive orthodontics for growing children aged 7–12. Early treatment can prevent more complex work later.' },
              { n: '05', name: 'Adult Orthodontics', tag: 'Adults', target: 'adult',
                blurb: 'It’s never too late. Specialist orthodontic care designed for adults — because your teeth don’t stop moving just because you’ve grown up.' },
            ].map((s, i) => (
              <a key={s.n}
                 href={'#/' + s.target}
                 onClick={(e) => { e.preventDefault(); go(s.target); }}
                 className="svc-row">
                <span className="svc-row__n">{s.n}</span>
                <div className="svc-row__body">
                  <div className="svc-row__head">
                    <h3 className="display h4" style={{ margin: 0 }}>{s.name}</h3>
                    <span className="eyebrow eyebrow--gold">{s.tag}</span>
                  </div>
                  <p className="body-md" style={{ marginTop: 8, maxWidth: 720 }}>{s.blurb}</p>
                </div>
                <span className="svc-row__arrow">&rarr;</span>
              </a>
            ))}
          </div>

        </div>
        <style>{`
          @media (max-width: 900px) { .svc-head { grid-template-columns: 1fr !important; gap: 32px !important; } }
          .svc-row {
            display: grid;
            grid-template-columns: 80px 1fr 40px;
            gap: 32px;
            align-items: start;
            padding: 36px 0;
            border-top: 1px solid var(--rule);
            cursor: pointer;
            transition: background 0.15s ease;
          }
          .svc-list .svc-row:last-child { border-bottom: 1px solid var(--rule); }
          .svc-row:hover { background: var(--cream-light); padding-left: 16px; padding-right: 16px; }
          .svc-row__n {
            font-family: var(--serif);
            font-style: italic;
            font-size: 28px;
            color: var(--gold-deep);
          }
          .svc-row__head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 24px;
            flex-wrap: wrap;
          }
          .svc-row__arrow {
            font-size: 22px;
            color: var(--navy);
            align-self: center;
            transition: transform 0.2s ease;
          }
          .svc-row:hover .svc-row__arrow { transform: translateX(6px); }
          @media (max-width: 700px) {
            .svc-row { grid-template-columns: 50px 1fr; }
            .svc-row__arrow { display: none; }
          }
        `}</style>
      </section>

      {/* ============ THE SPECIALIST DIFFERENCE (dark section) ============ */}
      <section style={{ background: 'var(--ink)', color: 'var(--cream)', padding: '120px 0' }}>
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 64, alignItems: 'center' }} className="spec-grid">
            <div>
              <HandDivider color="var(--gold)" width={120} />
              <div className="eyebrow" style={{ color: 'var(--gold)', marginTop: 16 }}>The specialist difference</div>
            </div>
            <div>
              <h2 className="display h2" style={{ color: 'var(--cream)', marginBottom: 24 }}>
                Three years of full-time<br/>postgraduate training.<br/><em style={{ color: 'var(--gold)' }}>Focused exclusively on orthodontics.</em>
              </h2>
              <p className="body-lg" style={{ color: 'rgba(244, 236, 222, 0.78)', maxWidth: 560 }}>
                A specialist orthodontist completes three years of full-time postgraduate training after dental school &mdash; focused exclusively on tooth movement, jaw growth, and bite correction. For complex cases involving jaw growth, surgical planning, or mixed dentition in children, specialist training makes a measurable difference to the treatment outcome.
              </p>
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .spec-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
      </section>

      {/* ============ CREDENTIALS & TRUST ============ */}
      <section className="section">
        <div className="shell">
          <div style={{ marginBottom: 72, display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 32, flexWrap: 'wrap' }}>
            <div>
              <PageEyebrow>Credentials &amp; trust</PageEyebrow>
              <h2 className="display h2" style={{ margin: '24px 0 0' }}>
                The qualifications that matter.
              </h2>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 32, marginTop: 4 }}>5.0 <span style={{ color: 'var(--ink-mute)', fontSize: 18 }}>/ 5</span></div>
              <div className="eyebrow">Rated 5.0 on Google</div>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 40 }} className="cred-grid">
            {[
              ['ASO', 'Australian Society of Orthodontists', 'Professional membership'],
              ['AHPRA', 'AHPRA Registered', 'Specialist Orthodontist'],
              ['KCL', 'King’s College London', 'Master’s in Orthodontics, 2013'],
              ['RCS', 'Royal College of Surgeons', 'Edinburgh, Member'],
            ].map(([abbr, title, sub], 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,
                }}>
                  {abbr}
                </div>
                <h4 style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.2, marginBottom: 8 }}>{title}</h4>
                <div className="body-sm tone-mute">{sub}</div>
              </div>
            ))}
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .cred-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } } @media (max-width: 520px) { .cred-grid { grid-template-columns: 1fr !important; } }`}</style>
      </section>

      {/* ============ NEW PATIENTS ============ */}
      <section className="section" style={{ background: 'var(--cream-deep)', borderTop: '1px solid var(--rule)' }}>
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80 }} className="np-grid">
            <div>
              <PageEyebrow>Your first visit</PageEyebrow>
              <h2 className="display h2" style={{ margin: '24px 0 32px' }}>
                A conversation, <em>not a commitment.</em>
              </h2>
              <p className="body-lg" style={{ marginBottom: 36, maxWidth: 460 }}>
                Book a free consultation.* Meet Dr Denize. Get your questions answered. No referral needed, no obligation.
              </p>
              <a className="cta" href="#/new-patients" onClick={(e) => { e.preventDefault(); go('new-patients'); }}>
                Plan your first visit <span className="cta__arrow">&rarr;</span>
              </a>
              <div className="body-sm tone-mute" style={{ marginTop: 16 }}>
                *Conditions apply. Initial consultation only.
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
              {[
                ['Book', 'Online, by phone, or walk in. No referral required. We’ll ask about your dental history and what you’re hoping to achieve.'],
                ['Meet Dr Denize', 'A proper conversation about your options. Not a sales pitch. Stewart will examine, explain, and answer every question.'],
                ['Choose your path', 'Every treatment option explained. Your timeline mapped out. Nothing starts until you’re ready.'],
              ].map(([h, p], i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '64px 1fr', gap: 24, paddingBottom: 28, borderBottom: i < 2 ? '1px solid var(--rule)' : 0 }}>
                  <span className="numbered__num">0{i+1}</span>
                  <div>
                    <h3 className="display h4" style={{ margin: '0 0 8px' }}>{h}</h3>
                    <p className="body-md" style={{ margin: 0 }}>{p}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .np-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }`}</style>
      </section>

      {/* ============ CONTACT / MAP ============ */}
      <section className="section">
        <div className="shell shell--wide">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 64, alignItems: 'stretch' }} className="map-grid">
            <div>
              <PageEyebrow>Find us</PageEyebrow>
              <h2 className="display h3" style={{ margin: '20px 0 36px' }}>
                Opposite Christ Church Grammar, <em>on Stirling Highway.</em>
              </h2>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 6 }}>Address</div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.3 }}>
                    7/355 Stirling Highway<br/>Claremont WA 6010
                  </div>
                </div>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 6 }}>Phone</div>
                  <a href="tel:0862887188" style={{ fontFamily: 'var(--serif)', fontSize: 22 }} className="aul">(08) 6288 7188</a>
                </div>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 6 }}>Email</div>
                  <a href="mailto:hello@claremontorthodontics.com.au" style={{ fontFamily: 'var(--serif)', fontSize: 18 }} className="aul">hello@claremontorthodontics.com.au</a>
                </div>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 6 }}>Hours</div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.6 }}>
                    Mon&ndash;Fri 8am&ndash;5pm
                  </div>
                </div>
              </div>
            </div>
            <div>
              <iframe
                title="Claremont Orthodontics map"
                style={{ width: '100%', height: '100%', minHeight: 420, border: 0, filter: 'grayscale(0.4) sepia(0.15)' }}
                src="https://www.google.com/maps?q=7%2F355+Stirling+Highway+Claremont+WA+6010&output=embed"
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
              />
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 900px) { .map-grid { grid-template-columns: 1fr !important; gap: 36px !important; } }`}</style>
      </section>

    </main>
  );
}

window.HomePage = HomePage;