// Treatments list page
function PageTreatments({ setPage, setTreatmentId }) {
  const [cat, setCat] = useState('All');
  const filtered = window.TREATMENTS.filter(t => cat === 'All' || t.category === cat);

  return (
    <div className="page active">
      {/* Hero */}
      <section style={{paddingTop:'calc(var(--nav-h) + 120px)', paddingBottom:80, position:'relative', overflow:'hidden', background:'var(--ivory)'}}>
        <div style={{position:'absolute', inset:0, opacity:0.5}}>
          <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)'}}>
          <div className="eyebrow">Treatments · 施 術 一 覧</div>
          <h1 className="display" style={{fontSize:'clamp(72px,10vw,180px)', marginTop:32, maxWidth:1600}}>
            A vocabulary<br/>of <em>light.</em>
          </h1>
          <p style={{marginTop:48, fontFamily:'var(--serif-jp)', fontSize:16, lineHeight:2, color:'var(--graphite)', maxWidth:560}}>
            18種の医療機器、7名の専門医。<br/>
            世界最先端の処方から、あなたにとって本当に必要なものだけを、選り分けます。
          </p>
        </div>
      </section>

      {/* Filter bar */}
      <section style={{borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)', padding:'28px clamp(24px,5vw,80px)', background:'var(--ivory)', position:'sticky', top:'var(--nav-h)', zIndex:10, backdropFilter:'blur(12px)', backgroundColor:'rgba(250,246,241,0.88)'}}>
        <div style={{display:'flex', gap:36, alignItems:'center', overflow:'auto'}}>
          <div className="mono" style={{fontSize:10, color:'var(--mist)', whiteSpace:'nowrap'}}>Filter by</div>
          {window.CATEGORIES.map(c => (
            <button key={c} onClick={()=>setCat(c)}
              style={{
                fontFamily:'var(--serif-en)',
                fontSize:14, letterSpacing:'0.18em', textTransform:'uppercase',
                padding:'6px 0', whiteSpace:'nowrap',
                borderBottom: cat===c ? '1px solid var(--ink)' : '1px solid transparent',
                color: cat===c ? 'var(--ink)' : 'var(--stone)',
                fontStyle: cat===c ? 'italic' : 'normal',
                transition:'all 0.4s var(--ease-luxe)',
              }}>
              {c}
            </button>
          ))}
          <div style={{flex:1}}/>
          <div className="mono" style={{fontSize:10, color:'var(--mist)'}}>{filtered.length.toString().padStart(2,'0')} RESULTS</div>
        </div>
      </section>

      {/* Grid */}
      <section style={{padding:'clamp(80px,10vw,140px) clamp(24px,5vw,80px)'}}>
        <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:'clamp(40px,5vw,80px) clamp(40px,5vw,80px)'}}>
          {filtered.map((t, i) => (
            <Reveal key={t.id} delay={i*60}>
              <a onClick={()=>{setTreatmentId(t.id); setPage('treatment');}} style={{cursor:'pointer', display:'block'}}>
                <Photo kind={t.kind} ratio="16/11">
                  <div style={{position:'absolute', top:24, left:24, fontFamily:'var(--serif-en)', fontSize:12, letterSpacing:'0.3em', color:'var(--ivory)', mixBlendMode:'difference'}}>
                    {t.num} / {t.category.toUpperCase()}
                  </div>
                  <div style={{position:'absolute', bottom:24, right:24, fontFamily:'var(--serif-en)', fontSize:14, letterSpacing:'0.2em', color:'var(--ivory)', mixBlendMode:'difference'}}>
                    {t.duration}  ·  {t.price}〜
                  </div>
                </Photo>
                <div style={{marginTop:28, display:'flex', alignItems:'baseline', gap:16}}>
                  <h3 style={{fontFamily:'var(--serif-en)', fontSize:40, fontWeight:300, letterSpacing:'-0.01em', lineHeight:1.05}}>
                    {t.en.split(' ').slice(0,-1).join(' ')} <em style={{fontStyle:'italic', color:'var(--pink-deep)'}}>{t.en.split(' ').slice(-1)}</em>
                  </h3>
                </div>
                <div style={{fontFamily:'var(--serif-jp)', fontSize:12, letterSpacing:'0.3em', color:'var(--stone)', marginTop:8}}>{t.jp}</div>
                <p style={{marginTop:16, fontFamily:'var(--serif-jp)', fontSize:14, lineHeight:1.9, color:'var(--graphite)', maxWidth:520}}>{t.tagline}  ——  {t.desc.substring(0, 80)}...</p>
                <div style={{marginTop:20, fontFamily:'var(--serif-en)', letterSpacing:'0.3em', fontSize:12, textTransform:'uppercase', color:'var(--pink-deep)'}}>Read More →</div>
              </a>
            </Reveal>
          ))}
        </div>
      </section>
    </div>
  );
}

window.PageTreatments = PageTreatments;