// 04 Research — Archive table with vertical title
function Research() {
  const rows = [
    ['2026', '05', '論考', '都市に、むらは立ち上がるか', '「むら」は地縁血縁の名残ではなく、都市でこそ必要とされているのではないか。'],
    ['2026', '04', 'ケーススタディ', 'ごとうち贈備食 — 贈ることから始まる備え', '備蓄は「自分のため」だから動けない。「大切な人のため」から始める防災。'],
    ['2026', '03', 'フィールドノート', '人口3400人のまちで暮らすということ — すさみ滞在記', '都市と地方を行き来する暮らしの中で、共助の輪郭はゆっくりと浮き上がっていた。'],
    ['2025', '02', '実践記録', '音楽 × 防災 — 非日常を日常に招き入れる試み', '「怖いから集まる」ではなく、「楽しいから集まる」。音楽を介して、防災という非日常を、暮らしの側に少しだけ招き入れる試み。'],
    ['2025', '01', '論考', '正常性バイアスと、デザインができること', '防災を遠ざけているものは情報ではなく心理だ。デザインは、その壁にどう働きかけられるか。'],
  ];
  return (
    <section className="s tint" id="research">
      <div className="inner" style={{ paddingTop: 120, paddingBottom: 120 }}>
        <div className="sect-mark reveal" style={{ marginBottom: 56 }}>
          <span>04 / Research</span><span className="bar" /><span>Archive</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 64, alignItems: 'center' }}>
          {/* Tategaki section title */}
          <div className="reveal">
            <div className="hd" style={{
              writingMode: 'vertical-rl',
              fontSize: 'clamp(24px, 2.8vw, 40px)',
              lineHeight: 1.3,
              minHeight: 380,
            }}>
              研究と、考察。
            </div>
            <div style={{ marginTop: 24, fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-soft)', letterSpacing: '0.12em' }}>
              RESEARCH NOTES<br />SINCE 2024
            </div>
          </div>

          {/* Archive */}
          <div className="reveal delay-2">
            <div style={{
              display: 'grid',
              gridTemplateColumns: '80px 80px 160px 1fr 40px',
              gap: 0,
              padding: '12px 0',
              borderBottom: '0.5px solid var(--rule)',
              fontFamily: 'var(--mono)',
              fontSize: 10,
              color: 'var(--ink-faint)',
              letterSpacing: '0.16em',
              textTransform: 'uppercase',
            }}>
              <span>Year</span><span>No.</span><span>Category</span><span>Title</span><span></span>
            </div>
            {rows.map((r, i) => (
              <a key={i} href="#" className="hot" style={{
                display: 'grid',
                gridTemplateColumns: '80px 80px 160px 1fr 40px',
                gap: 0,
                padding: '24px 0',
                borderBottom: '0.5px solid var(--rule-soft)',
                alignItems: 'baseline',
                textDecoration: 'none',
                color: 'var(--ink)',
                transition: 'padding-left .35s cubic-bezier(.3,.7,.4,1), background .35s',
              }}
                onMouseEnter={(e) => e.currentTarget.style.paddingLeft = '12px'}
                onMouseLeave={(e) => e.currentTarget.style.paddingLeft = '0'}
              >
                <span style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-soft)' }}>{r[0]}</span>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-faint)' }}>#{r[1]}</span>
                <span style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{r[2]}</span>
                <div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 18, fontWeight: 500, lineHeight: 1.4 }}>{r[3]}</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-faint)', lineHeight: 1.7, marginTop: 4, letterSpacing: '0.04em', maxWidth: 640 }}>{r[4]}</div>
                </div>
                <span style={{ textAlign: 'right', color: 'var(--ink-faint)' }}>→</span>
              </a>
            ))}

            <div style={{ marginTop: 48, display: 'flex', justifyContent: 'flex-end' }}>
              <a href="research/" className="cta ghost hot">すべてのリサーチ</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Research = Research;