// Treatment detail page
function PageTreatment({ setPage, treatmentId }) {
  const t = window.TREATMENTS.find(x => x.id === treatmentId) || window.TREATMENTS[0];
  const [slider, setSlider] = useState(50);

  return (
    <div className="page active">
      {/* Hero */}
      <section style={{paddingTop:'calc(var(--nav-h) + 80px)', paddingBottom:80, position:'relative'}}>
        <div style={{padding:'0 clamp(24px,5vw,80px)'}}>
          <div style={{display:'flex', gap:24, fontFamily:'var(--serif-en)', fontSize:12, letterSpacing:'0.3em', textTransform:'uppercase', color:'var(--stone)'}}>
            <a onClick={()=>setPage('treatments')} style={{cursor:'pointer'}}>← Treatments</a>
            <span>/</span>
            <span>{t.category}</span>
            <span>/</span>
            <span style={{color:'var(--pink-deep)'}}>{t.num}</span>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'clamp(40px,5vw,100px)', marginTop:48, alignItems:'end'}}>
            <div>
              <div className="eyebrow">{t.category} · {t.categoryJp}</div>
              <h1 className="display" style={{fontSize:'clamp(60px,8vw,140px)', marginTop:32}}>
                {t.en.split(' ').slice(0,-1).join(' ')} <em>{t.en.split(' ').slice(-1)}</em>
              </h1>
              <div style={{marginTop:16, fontFamily:'var(--serif-jp)', fontSize:14, letterSpacing:'0.3em', color:'var(--stone)'}}>{t.jp}</div>
            </div>
            <div>
              <p style={{fontFamily:'var(--serif-en)', fontStyle:'italic', fontSize:'clamp(20px,1.8vw,28px)', lineHeight:1.5, color:'var(--pink-deep)', marginBottom:24}}>
                "{t.tagline}"
              </p>
              <p style={{fontFamily:'var(--serif-jp)', fontSize:15, lineHeight:2.2, color:'var(--graphite)'}}>
                {t.desc}
              </p>
            </div>
          </div>
        </div>
      </section>

      <Photo kind={t.kind} ratio="21/9" style={{margin:'0 clamp(24px,5vw,80px)'}} />

      {/* Key facts */}
      <section style={{padding:'80px clamp(24px,5vw,80px)', borderBottom:'1px solid var(--line)'}}>
        <div style={{display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:48}}>
          {[
            {l:'Price from', v:t.price, n:t.priceNote},
            {l:'Duration', v:t.duration},
            {l:'Downtime', v:t.downtime},
            {l:'Frequency', v:t.frequency},
            {l:'Performed by', v:'Director', n:'女性医師指名'},
          ].map((k,i)=>(
            <div key={i}>
              <div className="mono" style={{fontSize:10, color:'var(--mist)', marginBottom:12}}>{k.l}</div>
              <div style={{fontFamily:'var(--serif-en)', fontSize:28, fontWeight:300}}>{k.v}</div>
              {k.n && <div style={{fontFamily:'var(--serif-jp)', fontSize:12, color:'var(--stone)', marginTop:4}}>{k.n}</div>}
            </div>
          ))}
        </div>
      </section>

      {/* For you */}
      {t.forYou && t.forYou.length > 0 && (
      <section className="section" style={{background:'var(--pearl)'}}>
        <div className="section-head">
          <div><div className="tag">For You<small>こ の 施 術 は</small></div></div>
          <div>
            <h2>This is for <em>you</em> if...</h2>
          </div>
        </div>
        <div style={{padding:'0 clamp(24px,5vw,80px)', display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:48}}>
          {t.forYou.map((f,i)=>(
            <Reveal key={i} delay={i*100}>
              <div style={{padding:'40px 0', borderTop:'1px solid var(--ink)'}}>
                <span className="mono" style={{fontSize:10, color:'var(--pink-deep)'}}>{String(i+1).padStart(2,'0')}</span>
                <p style={{marginTop:20, fontFamily:'var(--serif-jp)', fontSize:18, lineHeight:1.9}}>{f}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>)}

      {/* Flow */}
      {t.flow && t.flow.length > 0 && (
      <section className="section">
        <div className="section-head">
          <div><div className="tag">Protocol<small>当 日 の 流 れ</small></div></div>
          <div><h2>A choreography of <em>120 minutes.</em></h2></div>
        </div>
        <div style={{padding:'0 clamp(24px,5vw,80px)'}}>
          {t.flow.map((f,i)=>(
            <Reveal key={i} delay={i*60}>
              <div style={{display:'grid', gridTemplateColumns:'100px 320px 1fr 60px', gap:48, padding:'32px 0', borderTop:'1px solid var(--line)', alignItems:'baseline'}}>
                <div className="mono" style={{fontSize:12, color:'var(--pink-deep)'}}>{f.t}</div>
                <div style={{fontFamily:'var(--serif-en)', fontSize:28, fontWeight:300, fontStyle: i%2===1?'italic':'normal'}}>{f.step}</div>
                {f.note && <div style={{fontFamily:'var(--serif-jp)', fontSize:14, color:'var(--graphite)', lineHeight:1.9}}>{f.note}</div>}
                <div className="mono" style={{fontSize:10, color:'var(--mist)', textAlign:'right'}}>{String(i+1).padStart(2,'0')}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>)}

      {/* Before/After slider */}
      <section className="section" style={{background:'var(--ink)', color:'var(--ivory)'}}>
        <div className="section-head">
          <div><div className="tag" style={{color:'var(--pink)'}}>Evidence<small style={{color:'var(--pink-soft)', opacity:0.6}}>症 例</small></div></div>
          <div><h2 style={{color:'var(--ivory)'}}>After <em>three</em> sessions.</h2></div>
        </div>
        <div style={{padding:'0 clamp(24px,5vw,80px)'}}>
          <div style={{position:'relative', aspectRatio:'16/9', overflow:'hidden', cursor:'ew-resize'}}>
            <Photo kind="face" ratio="16/9" style={{position:'absolute', inset:0}} />
            <div style={{position:'absolute', inset:0, clipPath:`inset(0 ${100-slider}% 0 0)`}}>
              <Photo kind="serum" ratio="16/9" style={{position:'absolute', inset:0}}>
                <div style={{position:'absolute', inset:0, backdropFilter:'brightness(1.15) saturate(1.1)'}}/>
              </Photo>
            </div>
            <input type="range" min={0} max={100} value={slider} onChange={e=>setSlider(+e.target.value)}
                   style={{position:'absolute', inset:0, width:'100%', height:'100%', opacity:0, cursor:'ew-resize'}}/>
            <div style={{position:'absolute', top:0, bottom:0, left:`${slider}%`, width:2, background:'var(--ivory)', pointerEvents:'none', boxShadow:'0 0 20px rgba(255,255,255,0.5)'}}>
              <div style={{position:'absolute', top:'50%', left:'50%', transform:'translate(-50%,-50%)', width:56, height:56, borderRadius:'50%', background:'var(--ivory)', color:'var(--ink)', display:'grid', placeItems:'center', fontFamily:'var(--serif-en)', fontSize:20}}>
                ⇋
              </div>
            </div>
            <div style={{position:'absolute', top:24, left:24, fontFamily:'var(--serif-en)', letterSpacing:'0.3em', fontSize:12, color:'var(--ivory)'}}>BEFORE</div>
            <div style={{position:'absolute', top:24, right:24, fontFamily:'var(--serif-en)', letterSpacing:'0.3em', fontSize:12, color:'var(--ivory)', fontStyle:'italic'}}>After</div>
          </div>
          <div style={{marginTop:32, fontFamily:'var(--serif-jp)', fontSize:13, color:'rgba(255,255,255,0.55)', textAlign:'center', lineHeight:1.8}}>
            ※ 施術効果には個人差があります。写真はイメージです。実症例は医師面談時にご覧いただけます。
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{padding:'120px clamp(24px,5vw,80px)', textAlign:'center'}}>
        <h2 className="display" style={{fontSize:'clamp(48px,6vw,96px)'}}>Reserve <em>{t.en.split(' ').slice(-1)}</em>.</h2>
        <div style={{marginTop:48, display:'inline-flex', gap:24}}>
          <a onClick={()=>setPage('reserve')} className="btn btn-dark btn-arrow">Reserve This Treatment</a>
          <a onClick={()=>setPage('treatments')} className="btn btn-arrow">All Treatments</a>
        </div>
      </section>
    </div>
  );
}

window.PageTreatment = PageTreatment;