// Hero visual — "Verification Ledger": a calm, document-grade panel
const { useState: _hS, useEffect: _hE, useRef: _hR } = React;

function HeroLedger() {
  const rows = [
    { id: 'CWE-798', t: '하드코딩된 자격증명', ai: 'FLAG', human: 'CONFIRMED', sev: 'high' },
    { id: 'CWE-89', t: 'SQL 인젝션 가능 경로', ai: 'FLAG', human: 'CONFIRMED', sev: 'high' },
    { id: 'CWE-284', t: '접근 제어 우회', ai: 'FLAG', human: 'FALSE POSITIVE', sev: 'none' },
    { id: 'PERF-04', t: 'N+1 쿼리 · 목록 API', ai: 'FLAG', human: 'CONFIRMED', sev: 'med' },
    { id: 'KR-10-2·', t: '유사 특허 · 청구항 3', ai: 'FLAG', human: 'REVIEWING', sev: 'watch' },
    { id: 'CWE-311', t: '전송 구간 미암호화', ai: 'FLAG', human: 'FALSE POSITIVE', sev: 'none' }
  ];
  const [step, setStep] = _hS(2);

  _hE(() => {
    const motion = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--motion')) || 1;
    if (motion < 0.05) { setStep(rows.length); return; }
    let i = 2;
    setStep(2);
    const id = setInterval(() => {
      i = i + 1;
      setStep(i);
      if (i >= rows.length) clearInterval(id);
    }, 700);
    return () => clearInterval(id);
  }, []);

  const sevColor = (s) => s === 'high' ? '#d92d20' : s === 'med' ? '#e08600' : s === 'watch' ? 'var(--navy)' : 'var(--fg-3)';

  return (
    <div style={{ position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'flex-start', justifyContent: 'center' }}>
      {/* hairline grid */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px)',
        backgroundSize: '48px 48px'
      }}></div>

      <div className="hero-ledger" style={{
        position: 'relative', width: '100%', maxWidth: 980,
        background: 'var(--surface)', borderLeft: '1px solid var(--line)', borderRight: '1px solid var(--line)',
        overflow: 'hidden'
      }}>
        {/* document header */}
        <div className="mono-ko" style={{ padding: '16px 26px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, background: 'var(--surface-2)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11, minWidth: 0 }}>
            <img src="assets/mark-verified.png" alt="" style={{ width: 26, height: 26, objectFit: 'contain', flexShrink: 0 }} />
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--fg)', letterSpacing: '-.01em' }}>Verification Ledger</div>
              <div className="mono" style={{ fontSize: 9, color: 'var(--fg-2)', letterSpacing: '.16em', marginTop: 2 }}>REPORT / SPECIMEN</div>
            </div>
          </div>
          <div className="mono" style={{ fontSize: 9, color: 'var(--fg-2)', letterSpacing: '.16em', textAlign: 'right', whiteSpace: 'nowrap' }}>
            REV 04 · 2026
          </div>
        </div>

        {/* column head */}
        <div className="mono hero-ledger-head" style={{ display: 'grid', gridTemplateColumns: '104px minmax(120px, 1fr) 140px', gap: 14, padding: '10px 26px', borderBottom: '1px solid var(--line)', fontSize: 8.5, color: 'var(--fg-2)', letterSpacing: '.16em' }}>
          <span>ID</span><span>AI FLAG → FINDING</span><span style={{ textAlign: 'right' }}>EXPERT</span>
        </div>

        {/* rows */}
        <div>
          {rows.map((r, i) => {
            const revealed = i < step;
            return (
              <div key={r.id} className="hero-ledger-row" style={{
                display: 'grid', gridTemplateColumns: '104px minmax(120px, 1fr) 140px', gap: 14,
                padding: '9px 26px', borderBottom: i < rows.length - 1 ? '1px solid var(--line)' : 'none',
                alignItems: 'center', fontSize: 11.5,
                opacity: revealed ? 1 : 0.62,
                transition: 'opacity .45s ease'
              }}>
                <span className="mono" style={{ fontSize: 9.5, color: 'var(--fg-2)', letterSpacing: '.04em' }}>{r.id}</span>
                <span style={{ color: 'var(--fg)', minWidth: 0, wordBreak: 'keep-all', lineHeight: 1.35 }}>{r.t}</span>
                <span className="mono" style={{
                  fontSize: 8, letterSpacing: '.08em', textAlign: 'right', fontWeight: 700,
                  color: revealed ? sevColor(r.sev) : 'var(--fg-3)',
                  whiteSpace: 'nowrap'
                }}>
                  {revealed ? r.human : 'PENDING'}
                </span>
              </div>);
          })}
        </div>

        {/* signature footer */}
        <div style={{ padding: '13px 26px', borderTop: '1px solid var(--line)', background: 'var(--surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14 }}>
          <div className="mono-ko" style={{ fontSize: 11.5, color: 'var(--fg-2)', fontWeight: 600 }}>
            <span className="mono" style={{ color: 'var(--accent)', fontWeight: 700 }}>{step} / {rows.length}</span> 재검증 완료
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
            <span className="mono" style={{ fontSize: 8.5, color: 'var(--fg-2)', letterSpacing: '.16em' }}>VERIFIED BY</span>
            <svg width="52" height="16" viewBox="0 0 60 20" style={{ color: 'var(--navy)' }}>
              <path d="M2 14 Q 8 4, 14 10 T 26 10 Q 32 2, 40 14 T 58 8" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" />
            </svg>
          </div>
        </div>
      </div>
    </div>);
}

window.HeroLedger = HeroLedger;