// Section 03 — Challenges (V1)
// 4 quadrant card grid. Each card: large index, EN/JP headline, body,
// "現場の声" italic micro-quote at bottom.
const ChallengesV1 = () => {
  const items = [
  {
    n: '01', en: 'NO VISIBILITY', jp: '現場の業務プロセスが見えない',
    body: 'そもそも現場レベルの業務プロセスがわからず、どこにムダ・属人化があるのか経営からは把握できない。改善の出発点となる「現状の可視化」でつまずいてしまう。',
    voice: '“そもそも現場レベルの業務プロセスがわからない”'
  },
  {
    n: '02', en: 'OFF-THE-SHELF GAP', jp: '既存ツールが自社の課題に合わない',
    body: '世の中の汎用ツールやパッケージでは、自社固有の業務・オペレーションにフィットしない。導入しても「帯に短し襷に長し」で、本当の課題が解決されない。',
    voice: '“既存の外部ツールでは自社の課題に対応していない”'
  },
  {
    n: '03', en: 'ROI MISMATCH', jp: 'カスタマイズはROIが合わなかった',
    body: '自社に合わせたカスタマイズ開発は費用が大きく、業務ボリュームの割にリターンが見合わない。結果として、導入そのものを見送らざるを得なかった。',
    voice: '“カスタマイズはROIが合わず導入を見送った”'
  },
  {
    n: '04', en: 'OPERATION UNCLEAR', jp: '導入しても運用が定着しない',
    body: 'ツールを導入しても、適切な運用方法がわからず社内に根付かない。使いこなせないまま放置され、ツールが増えるほど管理も煩雑になっていく。',
    voice: '“ツール導入をしても適切な運用がわからない”'
  }];


  return (
    <section className="ej-root" style={{
      width: 1440, padding: '120px 64px', background: 'var(--paper)', position: 'relative'
    }}>
      {/* Section head — same pattern as Section 02 */}
      <div style={{
        display: 'grid', gridTemplateColumns: '180px 1fr',
        alignItems: 'start', gap: 56,
        paddingBottom: 64, borderBottom: '1px solid var(--rule)', marginBottom: 64
      }}>
        <div>
          <div className="ej-mono" style={{ fontSize: 12, color: 'var(--ink-60)', marginBottom: 24 }}>
            ／ SECTION
          </div>
          <div className="ej-en" style={{ fontSize: 112, fontWeight: 400, lineHeight: 0.85, color: 'var(--amber-deep)', letterSpacing: '-0.04em' }}>
            03
          </div>
        </div>
        <div>
          <h2 className="ej-en" style={{
            fontSize: 80, fontWeight: 400, lineHeight: 0.95,
            color: 'var(--navy)', letterSpacing: '-0.035em', margin: 0,
            textTransform: 'uppercase'
          }}>
            THE CHALLENGES.
          </h2>
          <div className="ej-jp" style={{ marginTop: 18, fontSize: 15, color: 'var(--ink-60)', letterSpacing: '0.08em' }}>
            中小企業の業務効率化を阻んできた4つの壁。
          </div>
          <div className="ej-jp" style={{
            marginTop: 28, fontSize: 14, color: 'var(--ink)', lineHeight: 1.9, maxWidth: 640
          }}>
            「合わない」「わからない」と、改善を諦めてきた現場の声。<br />
            その前提が、<strong style={{ color: 'var(--navy)', fontWeight: 600 }}>生成AI・AIエージェントの台頭</strong>で崩れ始めています。
          </div>
        </div>
      </div>

      {/* Cards 2x2 */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0 }}>
        {items.map((it, i) => {
          const row = Math.floor(i / 2);
          const col = i % 2;
          return (
            <div key={i} style={{
              padding: '56px 48px',
              borderTop: row === 0 ? '1px solid var(--rule)' : 'none',
              borderBottom: '1px solid var(--rule)',
              borderRight: col === 0 ? '1px solid var(--rule)' : 'none',
              position: 'relative',
              background: 'transparent'
            }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 32 }}>
                <div className="ej-en" style={{
                  fontSize: 64, fontWeight: 400, color: 'var(--amber-deep)', letterSpacing: '-0.03em',
                  lineHeight: 0.9
                }}>
                  {it.n}
                </div>
              </div>

              <div className="ej-en" style={{
                fontSize: 28, fontWeight: 400, color: 'var(--navy)', letterSpacing: '-0.015em', marginBottom: 10
              }}>
                {it.en}
              </div>
              <div className="ej-jp" style={{
                fontSize: 17, color: 'var(--navy)', fontWeight: 600, marginBottom: 24
              }}>
                {it.jp}
              </div>
              <p className="ej-jp" style={{
                margin: 0, fontSize: 14, lineHeight: 1.95, color: 'var(--ink)', maxWidth: 480
              }}>
                {it.body}
              </p>
            </div>);

        })}
      </div>
    </section>);

};

window.ChallengesV1 = ChallengesV1;