// LUCE Clinic — Home page
function PageHome({ setPage }) {
  return (
    <div className="page active">
      {/* ============ HERO ============ */}
      <section className="hero">
        <div className="hero-bg" />
        <ParticleCanvas opts={{ density: 0.00028, color: '230, 201, 184', color2: '255, 245, 235', opacity: 0.9, maxSize: 3.0 }} />

        <div className="hero-inner">
          <div className="hero-eyebrow eyebrow">OMOTESANDŌ · Aesthetic Dermatology</div>
          <h1 className="hero-title">
            <span className="line"><CharSplit text="Be your own" delay={300} /></span>
            <span className="line"><CharSplit text="light." italic delay={700} /></span>
          </h1>
          <Reveal delay={1600} slow>
            <div className="hero-sub">光 を 纏 う、 と い う こ と 。</div>
          </Reveal>
        </div>

        <div className="hero-foot">
          <div>
            <div style={{opacity:0.6, marginBottom:6}}>Est. 2019</div>
            <div>Minami-Aoyama, Tokyo</div>
          </div>
          <div className="hero-scroll">
            <div style={{fontSize:10, letterSpacing:'0.3em'}}>SCROLL</div>
            <div className="line" />
          </div>
          <div style={{textAlign:'right'}}>
            <div style={{opacity:0.6, marginBottom:6}}>Chapter</div>
            <div>Spring / Renewal 2026</div>
          </div>
        </div>
      </section>

      {/* ============ MARQUEE ============ */}
      <div className="marquee">
        <div className="marquee-track">
          <span>
            <em>Hydrafacial</em> <span className="dot"/> <em>Potenza</em> <span className="dot"/> <em>GFR Regenerative Infusion</em> <span className="dot"/> <em>Ultherapie</em> <span className="dot"/> <em>Luminous Peel</em> <span className="dot"/> <em>Stem Essence</em> <span className="dot"/>
          </span>
          <span>
            <em>Hydrafacial</em> <span className="dot"/> <em>Potenza</em> <span className="dot"/> <em>GFR Regenerative Infusion</em> <span className="dot"/> <em>Ultherapie</em> <span className="dot"/> <em>Luminous Peel</em> <span className="dot"/> <em>Stem Essence</em> <span className="dot"/>
          </span>
        </div>
      </div>

      {/* ============ PHILOSOPHY ============ */}
      <section className="section" style={{padding:'clamp(120px,14vw,220px) 0'}}>
        <div className="section-head">
          <div>
            <div className="tag">I — Philosophy<small>哲 学</small></div>
          </div>
          <div>
            <h2>
              Light is not<br/>
              <em>applied.</em> It is<br/>
              <em>revealed.</em>
            </h2>
            <p className="desc">
              美しさとは、付け足すものではなく、取り戻すもの。<br/>
              LUCEは、医学的な確かさと、職人的な繊細さをもって、<br/>
              あなたがもとから備えていた「光」を、静かに引き出していきます。
            </p>
          </div>
        </div>

        {/* Three pillars */}
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 'clamp(24px,3vw,56px)', padding:'0 clamp(24px,5vw,80px)'}}>
          {[
            { n:'01', en:'Medical Precision', jp:'医学的精度', body:'大学病院出身の女性医師による診療。診断・施術・経過観察の全てを一人の医師が担当。', kind:'serum' },
            { n:'02', en:'Private Sanctuary', jp:'完全個室', body:'受付から退出まで他のお客様と顔を合わせない設計。静謐な時間そのものを処方します。', kind:'interior' },
            { n:'03', en:'Editorial Aesthetic', jp:'美意識', body:'素材・光・質感にこだわり抜いた空間。治療は、体験として記憶に残るものであるべき。', kind:'marble' },
          ].map((p, i) => (
            <Reveal key={p.n} delay={i * 150}>
              <div>
                <Photo kind={p.kind} ratio="4/5" />
                <div style={{marginTop:28, display:'flex', alignItems:'baseline', gap:16}}>
                  <span className="mono" style={{color:'var(--pink-deep)', fontSize:11}}>{p.n}</span>
                  <div style={{flex:1, height:1, background:'var(--line)'}}/>
                </div>
                <h3 style={{marginTop:20, fontFamily:'var(--serif-en)', fontSize:32, fontWeight:300, letterSpacing:'-0.01em'}}>{p.en}</h3>
                <div style={{fontFamily:'var(--serif-jp)', fontSize:12, letterSpacing:'0.3em', color:'var(--mist)', marginTop:6}}>{p.jp}</div>
                <p style={{marginTop:20, fontFamily:'var(--serif-jp)', fontSize:14, lineHeight:2, color:'var(--graphite)'}}>{p.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ============ SIGNATURE TREATMENTS ============ */}
      <section className="section" style={{background:'var(--pearl)'}}>
        <div className="section-head">
          <div>
            <div className="tag">II — Signature<small>代 表 施 術</small></div>
          </div>
          <div>
            <h2>The <em>rituals</em> of light.</h2>
            <p className="desc">
              肌の状態、骨格、暮らし、季節。<br/>
              すべてを見立て、一人ひとりに誂える「儀式」のような処方。
            </p>
          </div>
        </div>

        <div style={{padding:'0 clamp(24px,5vw,80px)'}}>
          {[
            {n:'01', en:'Lumière Protocol', jp:'リュミエール・プロトコル', kind:'serum', price:'¥180,000〜', dur:'120分', desc:'HydraFacial × 幹細胞エッセンス × LED光療法を組み合わせた、LUCEを象徴するシグネチャー・トリートメント。'},
            {n:'02', en:'Potenza Renaissance', jp:'ポテンツァ・ルネサンス', kind:'gold', price:'¥220,000〜', dur:'90分', desc:'高周波とマイクロニードルで真皮層に働きかける、再生医療級の肌再構築プログラム。'},
            {n:'03', en:'GFR Infusion Noir', jp:'GFR点滴 ノワール', kind:'orchid', price:'¥98,000〜', dur:'60分', desc:'グロースファクターを組み合わせた独自点滴。内側からの光を灯す、月次の儀式として。'},
            {n:'04', en:'Ultherapie Tenderness', jp:'ウルセラ・テンダネス', kind:'profile', price:'¥380,000〜', dur:'90分', desc:'HIFUの王道。輪郭の時間を巻き戻しながら、表情の柔らかさは損なわない匙加減で。'},
          ].map((t, i) => (
            <Reveal key={t.n} delay={i * 80}>
              <a href="#treatment" onClick={(e)=>{e.preventDefault(); setPage('treatment');}}
                 style={{display:'grid', gridTemplateColumns:'80px 220px 1fr 200px 140px 40px', gap:32, alignItems:'center',
                         padding:'40px 0', borderBottom:'1px solid var(--line)', cursor:'pointer',
                         transition:'padding 0.6s var(--ease-luxe), background 0.6s var(--ease-luxe)'}}
                 onMouseEnter={(e)=>{e.currentTarget.style.padding='40px 24px'; e.currentTarget.style.background='rgba(255,255,255,0.5)';}}
                 onMouseLeave={(e)=>{e.currentTarget.style.padding='40px 0'; e.currentTarget.style.background='transparent';}}>
                <span className="mono" style={{color:'var(--pink-deep)'}}>{t.n}</span>
                <Photo kind={t.kind} ratio="1/1" style={{width:220}} />
                <div>
                  <div style={{fontFamily:'var(--serif-en)', fontSize:36, fontWeight:300, letterSpacing:'-0.01em'}}>
                    {t.en.split(' ').map((w,i,arr)=> i===arr.length-1 ? <em key={i} style={{fontStyle:'italic', color:'var(--pink-deep)'}}>{w}</em> : <span key={i}>{w} </span>)}
                  </div>
                  <div style={{fontFamily:'var(--serif-jp)', fontSize:13, letterSpacing:'0.2em', color:'var(--stone)', marginTop:6}}>{t.jp}</div>
                  <p style={{marginTop:16, fontFamily:'var(--serif-jp)', fontSize:13, lineHeight:1.9, color:'var(--graphite)', maxWidth:520}}>{t.desc}</p>
                </div>
                <div>
                  <div style={{fontSize:11, letterSpacing:'0.3em', color:'var(--mist)'}}>FROM</div>
                  <div style={{fontFamily:'var(--serif-en)', fontSize:24, marginTop:4}}>{t.price}</div>
                </div>
                <div style={{fontFamily:'var(--serif-en)', letterSpacing:'0.2em', fontSize:13, color:'var(--stone)'}}>{t.dur}</div>
                <div style={{fontFamily:'var(--serif-en)', fontSize:20, color:'var(--pink-deep)'}}>→</div>
              </a>
            </Reveal>
          ))}
        </div>

        <div style={{textAlign:'center', marginTop:80}}>
          <a onClick={()=>setPage('treatments')} className="btn btn-arrow">View All Treatments</a>
        </div>
      </section>

      {/* ============ DOCTOR ============ */}
      <section className="section" style={{background:'var(--ink)', color:'var(--ivory)', overflow:'hidden', position:'relative'}}>
        <div style={{position:'absolute', inset:0, opacity:0.35}}>
          <ParticleCanvas opts={{density:0.0001, color:'230, 201, 184', color2:'255, 240, 220', opacity:0.7}}/>
        </div>
        <div style={{position:'relative', zIndex:2, display:'grid', gridTemplateColumns:'1fr 1fr', gap:'clamp(48px,6vw,120px)', padding:'0 clamp(24px,5vw,80px)', alignItems:'center'}}>
          <Reveal>
            <Photo kind="profile" ratio="4/5" />
          </Reveal>
          <Reveal delay={200}>
            <div>
              <div className="eyebrow" style={{color:'var(--pink)'}}>III — Founder & Director<small style={{display:'block', marginTop:10, letterSpacing:'0.3em', fontFamily:'var(--serif-jp)', opacity:0.5}}>院 長</small></div>
              <h2 className="display" style={{fontSize:'clamp(44px,5vw,80px)', margin:'32px 0'}}>
                Dr.&nbsp;<em>Ayaka&nbsp;Kurosaki</em>
              </h2>
              <div style={{fontFamily:'var(--serif-jp)', letterSpacing:'0.3em', fontSize:14, color:'var(--pink-soft)'}}>黒 崎 彩 香 &nbsp;M.D., Ph.D.</div>
              <p style={{marginTop:40, fontFamily:'var(--serif-jp)', fontSize:15, lineHeight:2.2, opacity:0.85, maxWidth:480}}>
                慶應義塾大学医学部卒業。東京大学医学部附属病院皮膚科にて十年間の臨床経験を積み、<br/>
                再生医療・美容皮膚科領域の研究に従事。2019年、「治療ではなく、体験としての美容医療」を標榜しLUCEを設立。
              </p>
              <blockquote style={{marginTop:48, paddingLeft:24, borderLeft:'1px solid var(--pink)', fontFamily:'var(--serif-en)', fontStyle:'italic', fontSize:22, lineHeight:1.6, color:'var(--pink-soft)'}}>
                "I don't make women beautiful.<br/>I help them <em style={{color:'var(--pink)'}}>remember</em> that they already are."
              </blockquote>
              <div style={{marginTop:48}}>
                <a onClick={()=>setPage('doctor')} className="btn btn-arrow" style={{color:'var(--ivory)'}}>Meet the Doctor</a>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ============ PLATINUM ============ */}
      <section className="section" style={{background:'var(--ivory)'}}>
        <div className="section-head">
          <div>
            <div className="tag">IV — Platinum Membership<small>プ ラ チ ナ 会 員</small></div>
          </div>
          <div>
            <h2>An <em>invitation</em>,<br/>not a subscription.</h2>
          </div>
        </div>

        <div style={{padding:'0 clamp(24px,5vw,80px)', display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:'clamp(48px,6vw,120px)', alignItems:'start'}}>
          <div>
            <Photo kind="gold" ratio="16/10" />
          </div>
          <div>
            <div style={{fontFamily:'var(--serif-en)', fontSize:88, fontWeight:300, lineHeight:1, letterSpacing:'-0.02em'}}>
              ¥<em style={{fontStyle:'italic', color:'var(--pink-deep)'}}>200,000</em>
              <span style={{fontSize:18, letterSpacing:'0.2em', color:'var(--stone)', marginLeft:12}}>/ MONTH</span>
            </div>
            <p style={{marginTop:32, fontFamily:'var(--serif-jp)', fontSize:15, lineHeight:2.2, color:'var(--graphite)', maxWidth:440}}>
              限定50名。年2回のカウンセリング、月次のシグネチャートリートメント、<br/>
              専属コンシェルジュ、出張施術、年次リトリート。日々に、光の時間を編み込む会員制度。
            </p>
            <ul style={{marginTop:40, listStyle:'none', display:'flex', flexDirection:'column', gap:18}}>
              {['Unlimited Signature Treatments', 'Personal Concierge (24/7)', 'Quarterly Regenerative Infusion', 'Private Retreat in Karuizawa', 'Annual Wardrobe with Dr. Kurosaki'].map((b,i)=>(
                <li key={i} style={{display:'flex', alignItems:'baseline', gap:20, borderBottom:'1px solid var(--line-soft)', paddingBottom:18}}>
                  <span className="mono" style={{fontSize:10, color:'var(--pink-deep)'}}>{String(i+1).padStart(2,'0')}</span>
                  <span style={{fontFamily:'var(--serif-en)', fontSize:18}}>{b}</span>
                </li>
              ))}
            </ul>
            <div style={{marginTop:48}}>
              <a onClick={()=>setPage('platinum')} className="btn btn-dark btn-arrow">Request Invitation</a>
            </div>
          </div>
        </div>
      </section>

      {/* ============ INTERIOR TEASER ============ */}
      <section style={{position:'relative', padding:'0', overflow:'hidden'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:2}}>
          <Photo kind="interior" ratio="3/4" />
          <Photo kind="marble" ratio="3/4" />
          <Photo kind="interior2" ratio="3/4" />
        </div>
        <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', pointerEvents:'none'}}>
          <div style={{textAlign:'center', pointerEvents:'auto'}}>
            <div style={{fontFamily:'var(--serif-en)', fontSize:'clamp(64px,9vw,140px)', fontWeight:300, color:'var(--ivory)', lineHeight:0.95, letterSpacing:'-0.02em', mixBlendMode:'difference'}}>
              The <em style={{fontStyle:'italic'}}>sanctuary.</em>
            </div>
            <div style={{marginTop:32}}>
              <a onClick={()=>setPage('interior')} className="btn btn-arrow" style={{color:'var(--ivory)', borderColor:'var(--ivory)', background:'rgba(14,14,14,0.3)', backdropFilter:'blur(12px)'}}>Step Inside</a>
            </div>
          </div>
        </div>
      </section>

      {/* ============ JOURNAL ============ */}
      <section className="section">
        <div className="section-head">
          <div>
            <div className="tag">V — Journal<small>ジ ャ ー ナ ル</small></div>
          </div>
          <div>
            <h2>Notes on <em>light</em>,<br/>skin, and time.</h2>
          </div>
        </div>
        <div style={{padding:'0 clamp(24px,5vw,80px)', display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:48}}>
          {[
            {tag:'ESSAY', date:'Apr. 2026', title:'Why we don\'t chase youth.', img:'mist'},
            {tag:'RITUAL', date:'Mar. 2026', title:'A morning with HydraFacial.', img:'serum'},
            {tag:'DIALOGUE', date:'Feb. 2026', title:'Dr. Kurosaki on quietness.', img:'profile'},
          ].map((j,i)=>(
            <Reveal key={i} delay={i*100}>
              <a onClick={()=>setPage('journal')} style={{cursor:'pointer', display:'block'}}>
                <Photo kind={j.img} ratio="4/5" />
                <div style={{marginTop:24, display:'flex', gap:16, fontFamily:'var(--serif-en)', fontSize:11, letterSpacing:'0.3em', color:'var(--stone)'}}>
                  <span style={{color:'var(--pink-deep)'}}>{j.tag}</span>
                  <span>·</span>
                  <span>{j.date}</span>
                </div>
                <h3 style={{marginTop:16, fontFamily:'var(--serif-en)', fontSize:28, fontWeight:300, letterSpacing:'-0.01em'}}>{j.title}</h3>
              </a>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ============ CTA BAR ============ */}
      <section style={{padding:'clamp(120px,14vw,200px) clamp(24px,5vw,80px)', background:'var(--pearl)', textAlign:'center', position:'relative', overflow:'hidden'}}>
        <div style={{position:'absolute', inset:0, opacity:0.7}}>
          <ParticleCanvas opts={{density:0.00015, color:'230, 201, 184', color2:'255, 245, 230', opacity:0.7}}/>
        </div>
        <div style={{position:'relative', zIndex:2}}>
          <div className="eyebrow" style={{justifyContent:'center', display:'inline-block'}}>Begin</div>
          <h2 className="display" style={{fontSize:'clamp(56px,8vw,140px)', margin:'32px auto', maxWidth:1200}}>
            Your <em>first</em> visit.
          </h2>
          <p style={{fontFamily:'var(--serif-jp)', fontSize:15, lineHeight:2, maxWidth:520, margin:'0 auto 48px', color:'var(--graphite)'}}>
            90分の完全個室カウンセリング。<br/>
            まずは、あなたの肌と暮らしの物語を、ゆっくりとお聞かせください。
          </p>
          <a onClick={()=>setPage('reserve')} className="btn btn-dark btn-arrow">Reserve Consultation</a>
        </div>
      </section>
    </div>
  );
}

window.PageHome = PageHome;