/* Problems — 課題提起 */
function Problems() {
  const problems = [
    {
      no: '01',
      title: '大切なデータが散らばっていて管理できない',
      desc: 'クラウド・PC・USB ── 写真も書類も商品データも、どこに最新版があるのか誰も把握できていない。',
      glyph: 'Layers',
    },
    {
      no: '02',
      title: '外国クラウドにデータを預けるのが不安',
      desc: '海外サーバー、不透明な利用規約、データの主権 ── 「もしも」が頭をよぎる。',
      glyph: 'Shield',
    },
    {
      no: '03',
      title: 'ECプラットフォームごとに商品情報を手作業で更新',
      desc: 'Amazon用、楽天用、Yahoo!用 ── 同じ商品なのに3回、4回と書き直す日々。',
      glyph: 'Doc',
    },
    {
      no: '04',
      title: '電帳法対応で、何を保存するべきかわからない',
      desc: '取引データ、商品情報、改ざん防止 ── 法令要件への漠然とした不安。',
      glyph: 'Cube',
    },
  ];

  return (
    <section id="problems" style={{ position: 'relative', padding: '120px 0' }}>
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <Reveal>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 80px' }}>
            <span className="section-tag">◆ Problem · 課題</span>
            <h2 className="section-h2">
              こんな<span className="gold-text">お悩み</span>、ありませんか？
            </h2>
          </div>
        </Reveal>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 24,
        }}>
          {problems.map((p, i) => {
            const G = Glyph[p.glyph];
            return (
              <Reveal key={p.no} delay={i * 100}>
                <div className="card" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24 }}>
                    <span className="mono" style={{
                      fontSize: 11,
                      color: 'var(--gold)',
                      letterSpacing: '0.15em',
                      padding: '4px 10px',
                      border: '1px solid rgba(245,200,66,0.3)',
                      borderRadius: 999,
                      background: 'rgba(245,200,66,0.04)',
                    }}>{p.no}</span>
                    <div style={{ color: 'var(--ink-4)' }}>
                      <G width="32" height="32" />
                    </div>
                  </div>
                  <h3 style={{
                    fontSize: 17,
                    fontWeight: 700,
                    lineHeight: 1.6,
                    margin: '0 0 12px',
                    color: 'var(--ink)',
                    letterSpacing: '0.02em',
                  }}>{p.title}</h3>
                  <p style={{
                    fontSize: 13,
                    color: 'var(--ink-3)',
                    margin: 0,
                    lineHeight: 1.8,
                  }}>{p.desc}</p>
                </div>
              </Reveal>
            );
          })}
        </div>

        {/* Bridge to solution */}
        <Reveal delay={500}>
          <div style={{
            marginTop: 64,
            textAlign: 'center',
            fontFamily: 'Noto Serif JP, serif',
            fontSize: 'clamp(20px, 2.5vw, 28px)',
            color: 'var(--ink-2)',
            letterSpacing: '0.04em',
            lineHeight: 1.6,
          }}>
            <span style={{ color: 'var(--gold)' }}>──</span> その全てを、<span style={{ color: 'var(--gold)', fontWeight: 600 }}>Hub2</span>が引き受けます。<span style={{ color: 'var(--gold)' }}>──</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.Problems = Problems;