// 02b Profile (LP mini) — 写真と短いイントロのみ。詳細は profile/ ページへ。
function Profile() {
  return (
    <section className="s" id="profile">
      <div className="sect-mark reveal" style={{ marginBottom: 56 }}>
        <span>05 / Profile</span><span className="bar" /><span>Who</span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '0.7fr 1.4fr', gap: 80, alignItems: 'center' }}>
        {/* Portrait */}
        <div className="reveal" style={{ position: 'relative', paddingLeft: '8vw' }}>
          <div style={{
            borderRadius: 24,
            overflow: 'hidden',
            aspectRatio: '1 / 1',
            background: 'var(--tint)',
            border: '0.5px solid var(--rule-soft)'
          }}>
            <img
              src="assets/profile.jpg"
              alt="Ayane Nakahara"
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
          <div style={{
            position: 'absolute', left: -20, top: 0, bottom: 0,
            display: 'flex', alignItems: 'center',
            fontFamily: 'var(--mono)', fontSize: 9,
            color: 'var(--ink-faint)', letterSpacing: '0.16em',
            writingMode: 'vertical-rl',
            transform: 'rotate(180deg)',
          }}>
            PORTRAIT — SUSAMI, WAKAYAMA
          </div>
        </div>

        {/* Mini bio */}
        <div className="reveal delay-2" style={{ paddingRight: '8vw' }}>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-faint)', letterSpacing: '0.16em' }}>
            PROFILE
          </div>
          <div style={{ marginTop: 16 }}>
            <span style={{ fontFamily: 'var(--mono)', fontWeight: 400, fontSize: 22, color: 'var(--ink)', letterSpacing: '0.1em' }}>
              AYANE NAKAHARA
            </span>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-soft)', letterSpacing: '0.1em', marginTop: 8 }}>
              デザイナー × 防災士 / Founder of CONEN
            </div>
          </div>

          <div style={{ marginTop: 32, fontSize: 16, lineHeight: 2.0, color: 'var(--ink)', maxWidth: 520 }}>
            防災を「非常時の備え」ではなく、<br />
            「日常の関係性」として捉えなおすデザイナー。<br />
            東京を拠点に活動しています。
          </div>

          <div style={{ marginTop: 40, borderTop: '0.5px solid var(--rule-soft)', paddingTop: 28 }}>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-faint)', letterSpacing: '0.16em', marginBottom: 16 }}>AWARD</div>
            <div style={{ display: 'grid', gridTemplateColumns: '60px 1fr', gap: 16, alignItems: 'baseline' }}>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-faint)', letterSpacing: '0.08em' }}>2023</span>
              <span style={{ fontSize: 14, color: 'var(--ink)', lineHeight: 1.7 }}>武蔵野美術大学 卒業制作 優秀賞</span>
            </div>
          </div>

          <div style={{ marginTop: 40, display: 'flex', gap: 14 }}>
            <a href="profile/" className="cta ghost hot" style={{ fontSize: 12, padding: '12px 22px' }}>もっと見る</a>
          </div>
        </div>
      </div>
    </section>);

}
window.Profile = Profile;