// Journal page
function PageJournal({ setPage }) {
  const posts = [
    {tag:'ESSAY', date:'Apr 2026', author:'Dr. Ayaka Kurosaki', title:'Why we don\'t chase youth.', titleJp:'若さを、追わない理由。', excerpt:'美容医療は、若さを取り戻す技術ではなく、今の自分に居心地よくいるための静かな手段。', img:'mist', featured:true, read:'8 min'},
    {tag:'RITUAL', date:'Mar 2026', author:'LUCE Editorial', title:'A morning with HydraFacial.', titleJp:'ハイドラフェイシャルの朝。', excerpt:'土曜の午前10時。カウンセリングルームの光が、ちょうど頬にかかる時刻から。', img:'serum', read:'5 min'},
    {tag:'DIALOGUE', date:'Feb 2026', author:'Interview', title:'Dr. Kurosaki on quietness.', titleJp:'医師が語る、静けさについて。', excerpt:'「診察室でいちばん大切にしていることは、何も言わない時間をつくることです。」', img:'profile', read:'12 min'},
    {tag:'NOTES', date:'Jan 2026', author:'Dr. Ayaka Kurosaki', title:'Winter, and the skin.', titleJp:'冬の、肌のこと。', excerpt:'冷えが肌の深いところに溜まる季節。処方は、軽く、あたたかく、内側から。', img:'marble', read:'6 min'},
    {tag:'INGREDIENT', date:'Dec 2025', author:'LUCE Editorial', title:'Growth factor, gently explained.', titleJp:'グロースファクターを、やさしく。', excerpt:'「再生」という言葉に、誤解が多すぎるから。', img:'orchid', read:'10 min'},
    {tag:'RITUAL', date:'Nov 2025', author:'LUCE Editorial', title:'The bath, after Potenza.', titleJp:'ポテンツァの夜、湯船で。', excerpt:'施術後の48時間を、どう過ごすか。医師からの静かなお手紙。', img:'dark', read:'4 min'},
  ];

  return (
    <div className="page active">
      <section style={{paddingTop:'calc(var(--nav-h) + 80px)', paddingBottom:80, padding:'calc(var(--nav-h) + 80px) clamp(24px,5vw,80px) 80px'}}>
        <div className="eyebrow">Journal · ジ ャ ー ナ ル</div>
        <h1 className="display" style={{fontSize:'clamp(72px,10vw,180px)', marginTop:32}}>
          Notes on <em>light.</em>
        </h1>
        <p style={{marginTop:48, fontFamily:'var(--serif-jp)', fontSize:15, lineHeight:2.2, maxWidth:560, color:'var(--graphite)'}}>
          肌のこと、時間のこと、光のこと。<br/>
          LUCEの診察室から、ゆっくりとお届けする読みもの。
        </p>
      </section>

      {/* Featured */}
      <section style={{padding:'0 clamp(24px,5vw,80px) 120px'}}>
        <Reveal>
          <a style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:'clamp(32px,5vw,80px)', alignItems:'center', cursor:'pointer'}}>
            <Photo kind={posts[0].img} ratio="4/3" />
            <div>
              <div style={{display:'flex', gap:24, fontFamily:'var(--serif-en)', fontSize:11, letterSpacing:'0.3em', color:'var(--stone)'}}>
                <span style={{color:'var(--pink-deep)'}}>{posts[0].tag}</span>
                <span>·</span>
                <span>{posts[0].date}</span>
                <span>·</span>
                <span>{posts[0].read}</span>
              </div>
              <h2 className="display" style={{fontSize:'clamp(40px,5vw,80px)', margin:'24px 0'}}>
                {posts[0].title.split(' ').slice(0,-1).join(' ')} <em>{posts[0].title.split(' ').slice(-1)}</em>
              </h2>
              <div style={{fontFamily:'var(--serif-jp)', fontSize:13, letterSpacing:'0.3em', color:'var(--mist)', marginBottom:32}}>{posts[0].titleJp}</div>
              <p style={{fontFamily:'var(--serif-jp)', fontSize:15, lineHeight:2.2, color:'var(--graphite)', marginBottom:32}}>{posts[0].excerpt}</p>
              <div style={{fontFamily:'var(--serif-en)', fontSize:13, letterSpacing:'0.2em', textTransform:'uppercase', color:'var(--stone)'}}>By&nbsp;<em style={{fontStyle:'italic', color:'var(--ink)'}}>{posts[0].author}</em></div>
              <div style={{marginTop:48}}>
                <span className="btn btn-arrow">Read Essay</span>
              </div>
            </div>
          </a>
        </Reveal>
      </section>

      {/* Grid */}
      <section style={{padding:'80px clamp(24px,5vw,80px) 120px', borderTop:'1px solid var(--line)'}}>
        <div className="mono" style={{fontSize:11, color:'var(--mist)', marginBottom:48}}>ARCHIVE · 過去の記事</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:'clamp(32px,4vw,64px)'}}>
          {posts.slice(1).map((p, i) => (
            <Reveal key={i} delay={i*80}>
              <a style={{display:'block', cursor:'pointer'}}>
                <Photo kind={p.img} ratio="4/5" />
                <div style={{marginTop:24, display:'flex', gap:16, fontFamily:'var(--serif-en)', fontSize:10, letterSpacing:'0.3em', color:'var(--stone)'}}>
                  <span style={{color:'var(--pink-deep)'}}>{p.tag}</span>
                  <span>·</span>
                  <span>{p.date}</span>
                  <span>·</span>
                  <span>{p.read}</span>
                </div>
                <h3 style={{marginTop:16, fontFamily:'var(--serif-en)', fontSize:28, fontWeight:300, lineHeight:1.2, letterSpacing:'-0.01em'}}>
                  {p.title.split(' ').slice(0,-1).join(' ')} <em style={{fontStyle:'italic', color:'var(--pink-deep)'}}>{p.title.split(' ').slice(-1)}</em>
                </h3>
                <div style={{fontFamily:'var(--serif-jp)', fontSize:11, letterSpacing:'0.3em', color:'var(--mist)', marginTop:8}}>{p.titleJp}</div>
                <p style={{marginTop:16, fontFamily:'var(--serif-jp)', fontSize:13, lineHeight:1.9, color:'var(--graphite)'}}>{p.excerpt}</p>
              </a>
            </Reveal>
          ))}
        </div>
      </section>

      {/* Newsletter */}
      <section style={{padding:'120px clamp(24px,5vw,80px)', background:'var(--pearl)', textAlign:'center'}}>
        <div className="eyebrow" style={{justifyContent:'center', display:'inline-block'}}>Letters</div>
        <h2 className="display" style={{fontSize:'clamp(40px,5vw,72px)', margin:'32px auto', maxWidth:900}}>
          A quiet <em>letter,</em> monthly.
        </h2>
        <p style={{fontFamily:'var(--serif-jp)', fontSize:14, color:'var(--graphite)', maxWidth:480, margin:'0 auto 40px', lineHeight:2}}>
          月に一度、黒崎医師からのお便り。<br/>
          季節の肌のこと、静かな音楽の話、ときどきレシピ。
        </p>
        <div style={{display:'flex', maxWidth:480, margin:'0 auto', border:'1px solid var(--ink)'}}>
          <input type="email" placeholder="your@email.com"
            style={{flex:1, padding:'20px 24px', border:'none', background:'transparent', fontFamily:'var(--serif-en)', fontSize:16, outline:'none'}}/>
          <button style={{background:'var(--ink)', color:'var(--ivory)', padding:'0 32px', fontFamily:'var(--serif-en)', fontSize:12, letterSpacing:'0.3em', textTransform:'uppercase', cursor:'pointer'}}>Subscribe</button>
        </div>
      </section>
    </div>
  );
}

window.PageJournal = PageJournal;