/* Platforms — 対応EC一覧 */
function Platforms() {
  const tweaks = window.useHubTweaks();
  // Original abstract badges (NOT recreated brand logos) — generic geometric marks + name text
  const platforms = [
    { name: 'Amazon', label: '世界最大のマーケットプレイス', color: 'oklch(0.7 0.13 60)', mark: 'A' },
    { name: '楽天市場', label: '国内最大級のショッピングモール', color: 'oklch(0.65 0.18 20)', mark: '楽' },
    { name: 'Yahoo!ショッピング', shortName: 'Yahoo!\nショッピング', label: 'PayPay経済圏との連携', color: 'oklch(0.65 0.14 290)', mark: 'Y' },
    { name: 'Qoo10', label: '若年層に強いプラット', color: 'oklch(0.75 0.13 145)', mark: 'Q' },
    { name: 'BASE', label: 'D2C・小規模事業者向け', color: 'oklch(0.78 0.1 180)', mark: 'B' },
    { name: 'STORES', label: 'ノーコードECプラット', color: 'oklch(0.7 0.05 260)', mark: 'S' },
    { name: 'Shopify', label: 'グローバルECの定番基盤', color: 'oklch(0.72 0.14 150)', mark: 'Sh' },
  ];

  return (
    <section id="platforms" style={{ position: 'relative', padding: '120px 0', overflow: 'hidden' }}>
      <Starfield density={Math.round((tweaks.starDensity || 80) / 2)} gold={3} />

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <Reveal>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 80px' }}>
            <span className="section-tag">◆ Platforms · 対応モール</span>
            <h2 className="section-h2">
              主要ECプラットフォームを<span className="gold-text serif">網羅。</span>
            </h2>
            <p style={{ marginTop: 24, color: 'var(--ink-3)', fontSize: 14, letterSpacing: '0.04em' }}>
              現在対応中・順次拡大予定 ── ご希望のモールがあればお問い合わせください。
            </p>
          </div>
        </Reveal>

        {/* Platforms — orbit layout on desktop, grid on mobile */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          gap: 16,
          maxWidth: 1100,
          margin: '0 auto',
        }}>
          {platforms.map((p, i) => (
            <Reveal key={p.name} delay={i * 80}>
              <div className="card" style={{
                display: 'flex',
                gap: 14,
                alignItems: 'center',
                padding: '22px 22px 22px 22px',
                cursor: 'default',
                position: 'relative',
              }}>
                <span className="mono" style={{
                  position: 'absolute',
                  top: 12,
                  right: 12,
                  fontSize: 10,
                  color: 'var(--gold)',
                  letterSpacing: '0.15em',
                  padding: '3px 7px',
                  border: '1px solid rgba(245,200,66,0.3)',
                  borderRadius: 4,
                  background: 'rgba(245,200,66,0.04)',
                }}>READY</span>
                <div style={{
                  width: 52, height: 52, minWidth: 52,
                  borderRadius: '50%',
                  background: `radial-gradient(circle at 30% 30%, ${p.color}, ${p.color.replace('0.65', '0.4').replace('0.7', '0.45').replace('0.75', '0.5').replace('0.78', '0.5')})`,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontFamily: 'Noto Serif JP, serif',
                  fontSize: 22,
                  fontWeight: 700,
                  color: 'rgba(10,14,26,0.85)',
                  boxShadow: `0 0 24px ${p.color.replace(')', ' / 0.3)')}, 0 1px 0 inset rgba(255,255,255,0.3)`,
                }}>
                  {p.mark}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--ink)', letterSpacing: '0.04em', lineHeight: 1.35, whiteSpace: 'pre-line', wordBreak: 'keep-all' }}>{p.shortName || p.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 4, letterSpacing: '0.02em' }}>{p.label}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        {/* Future platforms */}
        <Reveal delay={400}>
          <div style={{
            marginTop: 32,
            display: 'flex',
            gap: 16,
            justifyContent: 'center',
            flexWrap: 'wrap',
            alignItems: 'center',
            fontFamily: 'JetBrains Mono, monospace',
            fontSize: 11,
            color: 'var(--ink-3)',
            letterSpacing: '0.15em',
          }}>
            <span>NEXT:</span>
            <span style={{ padding: '4px 12px', border: '1px dashed var(--line-strong)', borderRadius: 999 }}>au PAY マーケット</span>
            <span style={{ padding: '4px 12px', border: '1px dashed var(--line-strong)', borderRadius: 999 }}>makeshop</span>
            <span style={{ padding: '4px 12px', border: '1px dashed var(--line-strong)', borderRadius: 999 }}>+ more</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.Platforms = Platforms;