/* Features — 3 strengths */
function Features() {
  const tweaks = window.useHubTweaks();
  const features = [
    {
      no: '◆ 01',
      title: '全データ形式対応',
      sub: 'Any Format, One Vault',
      desc: '画像・PDF・動画・3Dデータまで一括管理。商品にひもづく全アセットを、魔法のポケットに収める。',
      bullets: ['JPG / PNG / WebP / AVIF', 'MP4 / MOV / 3D (GLB / USDZ)', 'バージョン履歴 & プレビュー'],
      glyph: 'Cube',
      accent: 'gold',
    },
    {
      no: '◆ 02',
      title: '電子帳簿法 完全対応',
      sub: 'Compliance, Encoded',
      desc: '長期保存・改ざん防止・検索性確保 ── 法令要件の3要素を初期設定で満たす。税務リスクをゼロへ。',
      bullets: ['タイムスタンプ自動付与', '改ざん検知 (SHA-256)', 'JIIMA認証準拠 (申請中)'],
      glyph: 'Shield',
      accent: 'violet',
    },
    {
      no: '◆ 03',
      title: '全プラット一元管理',
      sub: 'One Source of Truth',
      desc: 'Amazon・楽天・Yahoo!ショッピングの商品情報を、Hub2一つで統合。一度の編集が、全プラットフォームに同期される。',
      bullets: ['SKU・価格・在庫の集約', 'プラット別属性マッピング', '差分検知 & 自動同期'],
      glyph: 'Layers',
      accent: 'teal',
    },
  ];

  const accentMap = {
    gold: { color: 'var(--gold)', glow: 'rgba(245,200,66,0.5)' },
    violet: { color: 'oklch(0.7 0.18 285)', glow: 'oklch(0.55 0.2 285 / 0.5)' },
    teal: { color: 'oklch(0.78 0.13 200)', glow: 'oklch(0.65 0.15 200 / 0.5)' },
  };

  return (
    <section id="features" style={{ position: 'relative', padding: '120px 0', overflow: 'hidden' }}>
      {tweaks.showGrid !== false && <div className="grid-lines" />}
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <Reveal>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 80px' }}>
            <span className="section-tag">◆ Feature · 3つの強み</span>
            <h2 className="section-h2">
              データを持つ全ての人のための、<span className="gold-text serif">3つの魔法。</span>
            </h2>
          </div>
        </Reveal>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
          gap: 24,
        }}>
          {features.map((f, i) => {
            const G = Glyph[f.glyph];
            const acc = accentMap[f.accent];
            return (
              <Reveal key={f.no} delay={i * 120}>
                <div className="card" style={{
                  height: '100%',
                  display: 'flex',
                  flexDirection: 'column',
                  background: `linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 100%)`,
                  borderRadius: 20,
                  padding: '36px 32px',
                  position: 'relative',
                  overflow: 'hidden',
                }}>
                  {/* corner glow */}
                  <div style={{
                    position: 'absolute',
                    top: -40, right: -40,
                    width: 200, height: 200,
                    borderRadius: '50%',
                    background: `radial-gradient(circle, ${acc.glow} 0%, transparent 70%)`,
                    filter: 'blur(40px)',
                    opacity: 0.5,
                  }} />

                  {/* Header */}
                  <div style={{ position: 'relative', zIndex: 1 }}>
                    <div className="mono" style={{
                      fontSize: 11,
                      color: acc.color,
                      letterSpacing: '0.2em',
                      marginBottom: 24,
                    }}>{f.no}</div>

                    {/* Icon */}
                    <div style={{
                      width: 64, height: 64,
                      border: `1px solid ${acc.color}`,
                      borderRadius: 16,
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      color: acc.color,
                      background: `radial-gradient(circle at 30% 30%, ${acc.glow}, transparent 70%)`,
                      marginBottom: 24,
                      boxShadow: `0 0 24px ${acc.glow}`,
                    }}>
                      <G width="28" height="28" />
                    </div>

                    <h3 className="serif" style={{
                      fontSize: 26,
                      fontWeight: 600,
                      lineHeight: 1.4,
                      margin: '0 0 4px',
                      color: 'var(--ink)',
                      letterSpacing: '0.04em',
                    }}>{f.title}</h3>
                    <div className="mono" style={{
                      fontSize: 11,
                      color: 'var(--ink-3)',
                      letterSpacing: '0.15em',
                      marginBottom: 20,
                    }}>{f.sub}</div>

                    <p style={{
                      fontSize: 14,
                      color: 'var(--ink-2)',
                      lineHeight: 1.9,
                      margin: '0 0 28px',
                    }}>{f.desc}</p>

                    <ul style={{
                      listStyle: 'none',
                      padding: 0,
                      margin: 0,
                      display: 'flex',
                      flexDirection: 'column',
                      gap: 10,
                      borderTop: '1px solid var(--line)',
                      paddingTop: 24,
                    }}>
                      {f.bullets.map((b) => (
                        <li key={b} style={{
                          display: 'flex',
                          gap: 10,
                          alignItems: 'center',
                          fontSize: 13,
                          color: 'var(--ink-2)',
                        }}>
                          <span style={{ color: acc.color, display: 'inline-flex' }}>
                            <Glyph.Check width="14" height="14" />
                          </span>
                          {b}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.Features = Features;