// Doctor page
function PageDoctor({ setPage }) {
  return (
    <div className="page active">
      {/* Hero */}
      <section style={{paddingTop:'calc(var(--nav-h) + 80px)', paddingBottom:120, background:'var(--ink)', color:'var(--ivory)', position:'relative', overflow:'hidden'}}>
        <div style={{position:'absolute', inset:0, opacity:0.45}}>
          <ParticleCanvas opts={{density:0.00012, color:'230, 201, 184', color2:'255, 240, 220', opacity:0.7}}/>
        </div>
        <div style={{position:'relative', zIndex:2, padding:'0 clamp(24px,5vw,80px)', display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:'clamp(48px,6vw,120px)', alignItems:'end'}}>
          <div>
            <div className="eyebrow" style={{color:'var(--pink)'}}>Founder · Director · M.D., Ph.D.</div>
            <h1 className="display" style={{fontSize:'clamp(64px,9vw,160px)', marginTop:32, color:'var(--ivory)'}}>
              Dr.&nbsp;Ayaka<br/><em>Kurosaki.</em>
            </h1>
            <div style={{marginTop:24, fontFamily:'var(--serif-jp)', letterSpacing:'0.4em', fontSize:16, color:'var(--pink-soft)'}}>黒 崎 彩 香</div>
          </div>
          <Photo kind="profile" ratio="3/4" />
        </div>
      </section>

      {/* Statement */}
      <section className="section">
        <div style={{padding:'0 clamp(24px,5vw,80px)', display:'grid', gridTemplateColumns:'1fr 2fr', gap:'clamp(32px,6vw,96px)'}}>
          <div className="tag">Philosophy<small>信 条</small></div>
          <div>
            <p style={{fontFamily:'var(--serif-en)', fontStyle:'italic', fontSize:'clamp(28px,3.2vw,52px)', lineHeight:1.3, color:'var(--ink)', letterSpacing:'-0.01em'}}>
              "I believe the most sophisticated aesthetic medicine is the one that <span style={{color:'var(--pink-deep)'}}>disappears</span>. What remains is simply you—just a little more at peace with your own reflection."
            </p>
            <p style={{marginTop:48, fontFamily:'var(--serif-jp)', fontSize:15, lineHeight:2.2, color:'var(--graphite)', maxWidth:640}}>
              十年間、大学病院で一人ひとりの肌と向き合う中で、私は確信しました。<br/><br/>
              美しさとは、医学と時間と、静かな対話の中にある。だからLUCEは、<strong style={{fontWeight:500, color:'var(--ink)'}}>時間のかかる医療</strong>をあえて選びます。一日に診るのは最大8名。カウンセリングは必ず90分。一人のお客様と向き合う時間が、結果として、最も確かな美しさをつくる——この信念だけで、私たちは診療を続けています。
            </p>
          </div>
        </div>
      </section>

      {/* Credentials */}
      <section className="section" style={{background:'var(--pearl)'}}>
        <div className="section-head">
          <div><div className="tag">Credentials<small>経 歴</small></div></div>
          <div><h2>A decade at <em>Todai.</em></h2></div>
        </div>
        <div style={{padding:'0 clamp(24px,5vw,80px)', display:'grid', gridTemplateColumns:'1fr 1fr', gap:80}}>
          <div>
            <h3 style={{fontFamily:'var(--serif-en)', fontSize:20, letterSpacing:'0.2em', textTransform:'uppercase', marginBottom:32, color:'var(--stone)'}}>Education</h3>
            {[
              ['2004', '慶應義塾大学医学部 入学'],
              ['2010', '同 卒業 · 医師免許取得'],
              ['2010', '東京大学医学部附属病院 初期研修'],
              ['2012', '同 皮膚科 入局'],
              ['2016', '医学博士(Ph.D.) 取得 / 再生医療研究'],
              ['2017', 'ハーバード・メディカルスクール 客員研究員'],
            ].map(([y, t], i) => (
              <div key={i} style={{display:'grid', gridTemplateColumns:'80px 1fr', gap:24, padding:'20px 0', borderTop:'1px solid var(--line)'}}>
                <div className="mono" style={{fontSize:11, color:'var(--pink-deep)'}}>{y}</div>
                <div style={{fontFamily:'var(--serif-jp)', fontSize:14, lineHeight:1.7}}>{t}</div>
              </div>
            ))}
          </div>
          <div>
            <h3 style={{fontFamily:'var(--serif-en)', fontSize:20, letterSpacing:'0.2em', textTransform:'uppercase', marginBottom:32, color:'var(--stone)'}}>Board & Memberships</h3>
            {[
              '日本皮膚科学会 専門医',
              '日本美容皮膚科学会 理事',
              '日本再生医療学会 認定医',
              'International Peeling Society Member',
              'American Society for Dermatologic Surgery',
              'Cellular & Molecular Dermatology Board',
            ].map((t, i) => (
              <div key={i} style={{padding:'20px 0', borderTop:'1px solid var(--line)', fontFamily:'var(--serif-jp)', fontSize:14}}>{t}</div>
            ))}
          </div>
        </div>
      </section>

      {/* Bookshelf / publications */}
      <section className="section">
        <div className="section-head">
          <div><div className="tag">Writings<small>著 作</small></div></div>
          <div><h2>Words, <em>carefully</em> chosen.</h2></div>
        </div>
        <div style={{padding:'0 clamp(24px,5vw,80px)', display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:40}}>
          {[
            {t:'Quiet Skin', jp:'静かな肌', year:'2024', pub:'文藝春秋'},
            {t:'Light, Medicine', jp:'光の医学', year:'2022', pub:'医学書院'},
            {t:'Dialogues', jp:'診察室の対話', year:'2021', pub:'幻冬舎'},
            {t:'On Aging, Gently', jp:'やわらかに、年を重ねる', year:'2019', pub:'新潮社'},
          ].map((b, i) => (
            <Reveal key={i} delay={i*80}>
              <div style={{aspectRatio:'3/4', background:`linear-gradient(${160+i*20}deg, var(--ink) 0%, var(--graphite) 50%, var(--pink-deep) 100%)`, padding:'32px 24px', color:'var(--ivory)', display:'flex', flexDirection:'column', justifyContent:'space-between', boxShadow:'0 20px 40px -20px rgba(14,14,14,0.3)'}}>
                <div style={{fontFamily:'var(--serif-en)', fontSize:11, letterSpacing:'0.3em', opacity:0.6}}>{b.year}</div>
                <div>
                  <div style={{fontFamily:'var(--serif-en)', fontStyle:'italic', fontSize:24, lineHeight:1.2}}>{b.t}</div>
                  <div style={{fontFamily:'var(--serif-jp)', fontSize:12, letterSpacing:'0.3em', marginTop:12, opacity:0.8}}>{b.jp}</div>
                  <div style={{fontFamily:'var(--serif-en)', fontSize:10, letterSpacing:'0.3em', marginTop:24, opacity:0.5}}>{b.pub}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      <section style={{padding:'120px clamp(24px,5vw,80px)', textAlign:'center', background:'var(--pearl)'}}>
        <h2 className="display" style={{fontSize:'clamp(40px,5vw,72px)'}}>Reserve with <em>Dr. Kurosaki</em>.</h2>
        <div style={{marginTop:48}}>
          <a onClick={()=>setPage('reserve')} className="btn btn-dark btn-arrow">Request Consultation</a>
        </div>
      </section>
    </div>
  );
}

window.PageDoctor = PageDoctor;