// Interior page
function PageInterior({ setPage }) {
  const [active, setActive] = useState(0);
  const rooms = [
    {t:'Entrance', jp:'エントランス', kind:'interior', note:'骨董通りから一歩。重厚な無垢扉の向こうは、静寂。'},
    {t:'Salon Lumière', jp:'サロン・リュミエール', kind:'marble', note:'季節のフラワーアレンジメントと、温かなハーブティーでお迎えします。'},
    {t:'The Counsel Room', jp:'カウンセリングルーム', kind:'interior2', note:'大理石と真鍮。90分、あなたの肌と時間の話をゆっくりと。'},
    {t:'Treatment Suite I', jp:'第一トリートメント室', kind:'serum', note:'東向きの光。朝の施術のために設計された部屋。'},
    {t:'Treatment Suite II', jp:'第二トリートメント室', kind:'orchid', note:'西向き、夕刻の静けさを取り込む部屋。'},
    {t:'Platinum Lounge', jp:'プラチナラウンジ', kind:'gold', note:'会員様専用。施術後の余韻を、好きなだけ。'},
  ];

  return (
    <div className="page active">
      <section style={{paddingTop:'calc(var(--nav-h) + 80px)', paddingBottom:64, padding:'calc(var(--nav-h) + 80px) clamp(24px,5vw,80px) 64px'}}>
        <div className="eyebrow">Interior · 内 観</div>
        <h1 className="display" style={{fontSize:'clamp(72px,10vw,180px)', marginTop:32, maxWidth:1600}}>
          Six <em>rooms.</em><br/>One <em>quietude.</em>
        </h1>
      </section>

      {/* Hero image */}
      <Photo kind={rooms[active].kind} ratio="21/9" style={{margin:'0 clamp(24px,5vw,80px)'}}>
        <div style={{position:'absolute', bottom:48, left:48, color:'var(--ivory)', mixBlendMode:'difference'}}>
          <div className="mono" style={{fontSize:11, letterSpacing:'0.3em', opacity:0.7}}>ROOM {String(active+1).padStart(2,'0')} / 06</div>
          <h2 style={{fontFamily:'var(--serif-en)', fontSize:'clamp(36px,5vw,72px)', fontWeight:300, marginTop:12, fontStyle:'italic'}}>{rooms[active].t}</h2>
          <div style={{fontFamily:'var(--serif-jp)', fontSize:14, letterSpacing:'0.3em', marginTop:8, opacity:0.9}}>{rooms[active].jp}</div>
        </div>
      </Photo>

      {/* Room picker */}
      <section style={{padding:'64px clamp(24px,5vw,80px)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)', marginTop:64}}>
        <div style={{display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:16}}>
          {rooms.map((r, i) => (
            <button key={i} onClick={()=>setActive(i)}
              style={{textAlign:'left', padding:'20px 0', borderTop: active===i ? '2px solid var(--ink)' : '1px solid var(--line)', transition:'all 0.4s'}}>
              <div className="mono" style={{fontSize:10, color: active===i ? 'var(--pink-deep)' : 'var(--mist)'}}>{String(i+1).padStart(2,'0')}</div>
              <div style={{fontFamily:'var(--serif-en)', fontSize:18, fontWeight:300, marginTop:8, fontStyle: active===i?'italic':'normal', color: active===i?'var(--ink)':'var(--stone)'}}>{r.t}</div>
              <div style={{fontFamily:'var(--serif-jp)', fontSize:11, letterSpacing:'0.25em', marginTop:4, color:'var(--mist)'}}>{r.jp}</div>
            </button>
          ))}
        </div>
      </section>

      {/* Details */}
      <section style={{padding:'100px clamp(24px,5vw,80px)'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'clamp(48px,6vw,120px)'}}>
          <div>
            <p style={{fontFamily:'var(--serif-en)', fontStyle:'italic', fontSize:'clamp(24px,2.4vw,36px)', lineHeight:1.4, color:'var(--pink-deep)'}}>
              "{rooms[active].note}"
            </p>
            <p style={{marginTop:48, fontFamily:'var(--serif-jp)', fontSize:14, lineHeight:2.2, color:'var(--graphite)'}}>
              建築設計：長坂 常 / スキーマ建築計画<br/>
              照明設計：ヤマギワ × LUCE<br/>
              素材：トラバーチン、黒漆、真鍮、和紙障子<br/>
              音：ambient tune by Ryuichi Sakamoto archive
            </p>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:16}}>
            <Photo kind="marble" ratio="3/4" />
            <Photo kind="interior2" ratio="3/4" style={{marginTop:48}}/>
            <Photo kind="dark" ratio="3/4" />
            <Photo kind="interior" ratio="3/4" style={{marginTop:48}}/>
          </div>
        </div>
      </section>

      {/* Materials */}
      <section style={{padding:'100px clamp(24px,5vw,80px)', background:'var(--pearl)'}}>
        <div className="section-head" style={{marginBottom:64}}>
          <div><div className="tag">Materials<small>素 材</small></div></div>
          <div><h2>The <em>matter</em> of calm.</h2></div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:24}}>
          {[
            {en:'Travertine', jp:'トラバーチン', c:'linear-gradient(135deg, #EFE7DC, #D4C3B2)'},
            {en:'Brass', jp:'真鍮', c:'linear-gradient(135deg, #B89968, #8A7046)'},
            {en:'Black Urushi', jp:'黒漆', c:'linear-gradient(135deg, #1A1614, #0E0E0E)'},
            {en:'Ivory Silk', jp:'絹 (象牙色)', c:'linear-gradient(135deg, #FAF6F1, #EFD9CC)'},
          ].map((m,i)=>(
            <div key={i}>
              <div style={{aspectRatio:'1/1', background:m.c}}/>
              <div style={{marginTop:20, fontFamily:'var(--serif-en)', fontSize:20, fontStyle:'italic'}}>{m.en}</div>
              <div style={{fontFamily:'var(--serif-jp)', fontSize:12, letterSpacing:'0.3em', color:'var(--stone)', marginTop:4}}>{m.jp}</div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

window.PageInterior = PageInterior;