// Platinum members page
function PagePlatinum({ setPage }) {
  return (
    <div className="page active" style={{background:'var(--ink)', color:'var(--ivory)'}}>
      {/* Hero */}
      <section style={{minHeight:'90vh', display:'flex', alignItems:'center', justifyContent:'center', position:'relative', overflow:'hidden', paddingTop:'var(--nav-h)'}}>
        <div style={{position:'absolute', inset:0}}>
          <ParticleCanvas opts={{density:0.00022, color:'230, 201, 184', color2:'184, 153, 104', opacity:0.9, maxSize:3.4}}/>
        </div>
        <div style={{position:'relative', zIndex:2, textAlign:'center', padding:'0 24px'}}>
          <div className="eyebrow" style={{color:'var(--pink)'}}>Membership · By Invitation</div>
          <h1 className="display" style={{fontSize:'clamp(80px,12vw,200px)', margin:'40px auto', color:'var(--ivory)', lineHeight:0.92}}>
            <em>Platinum.</em>
          </h1>
          <p style={{fontFamily:'var(--serif-jp)', fontSize:16, letterSpacing:'0.3em', color:'var(--pink-soft)'}}>プ ラ チ ナ 会 員</p>
          <p style={{marginTop:48, fontFamily:'var(--serif-jp)', fontSize:15, lineHeight:2.2, maxWidth:640, margin:'48px auto 0', opacity:0.8}}>
            年間を通じて、最も深いケアと、最も静かな時間を。<br/>
            現在、50名様の席にのみご用意しております。
          </p>
        </div>
      </section>

      {/* Price card */}
      <section style={{padding:'120px clamp(24px,5vw,80px)', position:'relative'}}>
        <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:'clamp(48px,6vw,120px)', alignItems:'center'}}>
          <div>
            <div style={{border:'1px solid rgba(255,255,255,0.2)', padding:'64px 56px', position:'relative'}}>
              <div style={{position:'absolute', top:-14, left:56, background:'var(--ink)', padding:'0 16px', fontFamily:'var(--serif-en)', fontSize:11, letterSpacing:'0.4em', color:'var(--pink)'}}>LUCE · PLATINUM</div>
              <div style={{fontFamily:'var(--serif-en)', fontSize:'clamp(72px,8vw,128px)', fontWeight:300, lineHeight:1, letterSpacing:'-0.02em'}}>
                ¥<em style={{fontStyle:'italic', color:'var(--pink)'}}>200,000</em>
              </div>
              <div style={{marginTop:16, fontFamily:'var(--serif-en)', fontSize:16, letterSpacing:'0.3em', color:'var(--mist)', textTransform:'uppercase'}}>Per month · tax incl.</div>
              <div style={{marginTop:48, fontFamily:'var(--serif-jp)', fontSize:14, lineHeight:2, color:'var(--pink-soft)', opacity:0.9}}>
                入会金 ¥500,000 / 年会費込<br/>
                年2回の棚卸しカウンセリングを含む
              </div>
            </div>
          </div>
          <div>
            <div className="eyebrow" style={{color:'var(--pink)'}}>Why Platinum</div>
            <h2 className="display" style={{fontSize:'clamp(36px,4.5vw,64px)', marginTop:24, color:'var(--ivory)'}}>
              Not a <em>service.</em><br/>A <em>relationship.</em>
            </h2>
            <p style={{marginTop:40, fontFamily:'var(--serif-jp)', fontSize:15, lineHeight:2.2, opacity:0.85}}>
              一度きりの来院ではなく、年を重ねるあなたの肌と、静かに並走する。診察室、薬、時間、そして判断——すべてに、最初からあなたの名前が彫られた状態で用意されています。
            </p>
          </div>
        </div>
      </section>

      {/* A day */}
      <section style={{padding:'120px clamp(24px,5vw,80px)', borderTop:'1px solid rgba(255,255,255,0.1)'}}>
        <div className="section-head" style={{marginBottom:80}}>
          <div><div className="tag" style={{color:'var(--pink)'}}>A Day<small style={{color:'var(--pink-soft)', opacity:0.6}}>一 日</small></div></div>
          <div><h2 style={{color:'var(--ivory)'}}>A Platinum <em>day.</em></h2></div>
        </div>

        <div style={{display:'grid', gap:0}}>
          {[
            {t:'08:00', title:'Private pick-up', note:'ご自宅まで、専属ドライバーによるお迎え。', kind:'dark'},
            {t:'09:30', title:'Welcome ritual', note:'プライベートラウンジにて、季節のハーブと湯気のあるタオル。', kind:'interior'},
            {t:'10:00', title:'Wardrobe & counsel', note:'診察室にて、黒崎医師と90分の棚卸し。', kind:'profile'},
            {t:'12:00', title:'Signature infusion', note:'その日の体調に合わせ、医師が処方を調整。', kind:'orchid'},
            {t:'14:00', title:'Lumière Protocol', note:'シグネチャー施術。LEDの光のなかで眠る120分。', kind:'serum'},
            {t:'16:30', title:'Tea & tailoring', note:'アフターの茶と、翌月までの肌のしおりをお渡しします。', kind:'marble'},
          ].map((s, i) => (
            <Reveal key={i} delay={i*80}>
              <div style={{display:'grid', gridTemplateColumns:'120px 280px 1fr 1fr 40px', gap:32, alignItems:'center', padding:'32px 0', borderTop:'1px solid rgba(255,255,255,0.1)'}}>
                <div className="mono" style={{color:'var(--pink)', fontSize:14, letterSpacing:'0.3em'}}>{s.t}</div>
                <Photo kind={s.kind} ratio="4/3" style={{width:280}} />
                <div style={{fontFamily:'var(--serif-en)', fontSize:32, fontWeight:300, letterSpacing:'-0.01em', fontStyle: i%2===0?'normal':'italic'}}>{s.title}</div>
                <div style={{fontFamily:'var(--serif-jp)', fontSize:14, lineHeight:1.9, opacity:0.75}}>{s.note}</div>
                <div className="mono" style={{fontSize:10, color:'rgba(255,255,255,0.3)', textAlign:'right'}}>{String(i+1).padStart(2,'0')}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* Benefits grid */}
      <section style={{padding:'120px clamp(24px,5vw,80px)', borderTop:'1px solid rgba(255,255,255,0.1)'}}>
        <div className="section-head" style={{marginBottom:80}}>
          <div><div className="tag" style={{color:'var(--pink)'}}>Inclusions<small style={{color:'var(--pink-soft)', opacity:0.6}}>特 典</small></div></div>
          <div><h2 style={{color:'var(--ivory)'}}>Twelve <em>privileges.</em></h2></div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:'1px', background:'rgba(255,255,255,0.1)'}}>
          {[
            {n:'I',t:'Unlimited Signatures', j:'月1回までのシグネチャー施術'},
            {n:'II',t:'Personal Concierge', j:'24時間の専属コンシェルジュ'},
            {n:'III',t:'Quarterly Infusion', j:'季節ごとの再生点滴'},
            {n:'IV',t:'Home Visits', j:'年4回の自宅出張施術'},
            {n:'V',t:'Doctor\'s Line', j:'黒崎医師への直通ライン'},
            {n:'VI',t:'Karuizawa Retreat', j:'年次の軽井沢リトリート'},
            {n:'VII',t:'Global Access', j:'提携のNY/ロンドン/パリクリニック利用'},
            {n:'VIII',t:'Wardrobe Session', j:'年1回の棚卸しカウンセリング'},
            {n:'IX',t:'Anniversary Gift', j:'誕生月の特別処方'},
            {n:'X',t:'Discreet Transport', j:'専属ドライバー送迎'},
            {n:'XI',t:'Private Event Priority', j:'院内イベント最優先ご案内'},
            {n:'XII',t:'Legacy Program', j:'ご家族への一日体験ギフト'},
          ].map((b,i) => (
            <div key={i} style={{background:'var(--ink)', padding:'48px 32px', minHeight:220}}>
              <div style={{fontFamily:'var(--serif-en)', fontStyle:'italic', fontSize:14, color:'var(--pink)', letterSpacing:'0.3em'}}>{b.n}</div>
              <h3 style={{marginTop:24, fontFamily:'var(--serif-en)', fontSize:28, fontWeight:300, letterSpacing:'-0.01em'}}>{b.t}</h3>
              <p style={{marginTop:16, fontFamily:'var(--serif-jp)', fontSize:13, lineHeight:1.9, opacity:0.7}}>{b.j}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Apply */}
      <section style={{padding:'140px clamp(24px,5vw,80px)', textAlign:'center', borderTop:'1px solid rgba(255,255,255,0.1)', position:'relative', overflow:'hidden'}}>
        <div style={{position:'absolute', inset:0, opacity:0.4}}>
          <ParticleCanvas opts={{density:0.0002, color:'230, 201, 184', color2:'255, 240, 200', opacity:0.8}}/>
        </div>
        <div style={{position:'relative', zIndex:2}}>
          <div className="eyebrow" style={{color:'var(--pink)', justifyContent:'center', display:'inline-block'}}>By Invitation Only</div>
          <h2 className="display" style={{fontSize:'clamp(48px,7vw,120px)', margin:'40px auto', color:'var(--ivory)', maxWidth:1200}}>
            Request your <em>invitation.</em>
          </h2>
          <p style={{fontFamily:'var(--serif-jp)', fontSize:15, maxWidth:520, margin:'0 auto 56px', opacity:0.75, lineHeight:2}}>
            ご紹介、または面談を経てご招待差し上げます。<br/>
            年に4度、新しい会員をお迎えしています。
          </p>
          <a onClick={()=>setPage('reserve')} className="btn btn-arrow" style={{color:'var(--ivory)', borderColor:'var(--pink)'}}>Submit Interest</a>
        </div>
      </section>
    </div>
  );
}

window.PagePlatinum = PagePlatinum;