/* Stats — 数字で安心感 */
function Stats() {
  const stats = [
    { val: '100', unit: '%', label: '電子帳簿法 対応', sub: '長期保存・改ざん防止・検索性' },
    { val: '6', unit: '+', label: '対応プラットフォーム', sub: 'Amazon・楽天・Yahoo!ほか' },
    { val: '4', unit: '形式', label: '全データ形式対応', sub: '画像・PDF・動画・3D' },
  ];

  return (
    <section style={{ position: 'relative', padding: '80px 0', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute',
        inset: 0,
        background: 'linear-gradient(180deg, transparent 0%, rgba(245,200,66,0.04) 50%, transparent 100%)',
      }} />
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
          gap: 24,
          padding: '48px 32px',
          background: 'linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 100%)',
          border: '1px solid var(--line-strong)',
          borderRadius: 24,
          position: 'relative',
          overflow: 'hidden',
        }}>
          {/* corner accents */}
          {[
            { top: -1, left: -1, borderTop: '2px solid var(--gold)', borderLeft: '2px solid var(--gold)' },
            { top: -1, right: -1, borderTop: '2px solid var(--gold)', borderRight: '2px solid var(--gold)' },
            { bottom: -1, left: -1, borderBottom: '2px solid var(--gold)', borderLeft: '2px solid var(--gold)' },
            { bottom: -1, right: -1, borderBottom: '2px solid var(--gold)', borderRight: '2px solid var(--gold)' },
          ].map((style, i) => (
            <span key={i} style={{ position: 'absolute', width: 28, height: 28, ...style }} />
          ))}

          {stats.map((s, i) => (
            <Reveal key={s.label} delay={i * 100}>
              <div style={{ textAlign: 'center', position: 'relative' }}>
                {i > 0 && (
                  <span style={{
                    position: 'absolute',
                    left: -12,
                    top: '50%',
                    transform: 'translateY(-50%)',
                    width: 1,
                    height: 60,
                    background: 'var(--line)',
                    display: 'none',
                  }} className="stat-divider" />
                )}
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 4 }}>
                  <span className="serif" style={{
                    fontSize: 'clamp(56px, 7vw, 88px)',
                    fontWeight: 700,
                    lineHeight: 1,
                    background: 'linear-gradient(180deg, #FFE38B 0%, #F5C842 60%, #B8902A 100%)',
                    WebkitBackgroundClip: 'text',
                    WebkitTextFillColor: 'transparent',
                    backgroundClip: 'text',
                    letterSpacing: '-0.02em',
                  }}>{s.val}</span>
                  <span className="serif" style={{
                    fontSize: 'clamp(24px, 3vw, 36px)',
                    fontWeight: 600,
                    color: 'var(--gold)',
                  }}>{s.unit}</span>
                </div>
                <div style={{
                  marginTop: 12,
                  fontSize: 15,
                  fontWeight: 700,
                  color: 'var(--ink)',
                  letterSpacing: '0.04em',
                }}>{s.label}</div>
                <div className="mono" style={{
                  marginTop: 6,
                  fontSize: 11,
                  color: 'var(--ink-3)',
                  letterSpacing: '0.05em',
                }}>{s.sub}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Stats = Stats;