// 01 Hero — 縦書き組み立て、白背景、CTA Forest Green
function Hero() {
  const headlineRef = React.useRef(null);
  // 左から右に読む: ひらく、→ つなぐ、→ そなえる。
  const lines = ['ひらく、', 'つなぐ、', 'そなえる。'];

  // Build the tategaki headline char-by-char on mount.
  React.useEffect(() => {
    const el = headlineRef.current;
    if (!el) return;
    requestAnimationFrame(() => el.classList.add('in'));
  }, []);

  // Stagger via CSS variable on each char
  let counter = 0;

  return (
    <section className="s" id="top" style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', paddingTop: 140, paddingBottom: 80 }}>
      {/* Top meta strip */}
      <div className="reveal" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <div className="sect-mark">
          <span>01 / Top</span><span className="bar" /><span>2026 — current</span>
        </div>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-soft)', letterSpacing: '0.08em' }}>
          DESIGN FOR RELATIONSHIPS
        </div>
      </div>

      {/* Big tategaki catchcopy, dead-center */}
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', padding: '40px 0' }}>
        <div
          ref={headlineRef}
          className="tate-build"
          style={{
            fontSize: 'clamp(28px, 4vw, 56px)',
            fontWeight: 700,
            lineHeight: 1.85,
            letterSpacing: '0.06em',
            writingMode: 'horizontal-tb',
            display: 'flex',
            flexDirection: 'row-reverse',
            direction: 'ltr',
            alignItems: 'flex-start',
            justifyContent: 'center',
            gap: 'clamp(20px, 3.5vw, 56px)',
            color: 'var(--ink)'
          }}>

          {lines.map((line, li) =>
          <div key={li} style={{
            writingMode: 'vertical-rl',
            whiteSpace: 'nowrap',
            flex: '0 0 auto'
          }}>
              {[...line].map((c, ci) => {
              const i = counter++;
              return (
                <span key={ci} className="c" style={{ transitionDelay: `${0.4 + i * 0.08}s` }}>{c}</span>);

            })}
            </div>
          )}
        </div>

        {/* Tiny EN gloss bottom-left */}
        <div className="reveal delay-3" style={{ position: 'absolute', left: 0, bottom: 0, fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-faint)', letterSpacing: '0.14em', textTransform: 'uppercase', lineHeight: 1.8 }}>
          OPEN.<br />CONNECT.<br />PREPARE.
        </div>

        {/* Right meta */}
        <div className="reveal delay-4" style={{ position: 'absolute', right: 0, bottom: 0, textAlign: 'right' }}>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--ink-soft)', maxWidth: 280, lineHeight: 1.9, marginBottom: 24 }}>
            関係性を、設計する。<br />
            人と人のあいだに、続く仕事を。
          </div>
          <a href="#about" className="cta hot">活動を見る</a>
        </div>
      </div>

      {/* Bottom strip — scroll cue */}
      <div className="reveal delay-2" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 32, borderTop: '0.5px solid var(--rule-soft)' }}>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-soft)', letterSpacing: '0.16em' }}>
          SCROLL ↓
        </span>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-faint)', letterSpacing: '0.1em' }}>CONEN</span>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-soft)', letterSpacing: '0.16em' }}>
          01 / 06
        </span>
      </div>
    </section>);

}
window.Hero = Hero;