// Section 02 — Mission / Vision
// Big section number on left (carry-over from current site), title +
// long-form manifesto on right. Quote-style pull-out + signature.
const MissionSection = () =>
<section className="ej-root" style={{
  width: 1440, padding: '120px 64px', background: 'var(--off-white)', position: 'relative'
}}>
    {/* Section head */}
    <div style={{
    display: 'grid', gridTemplateColumns: '180px 1fr',
    alignItems: 'start', gap: 56,
    paddingBottom: 64, borderBottom: '1px solid var(--rule)', marginBottom: 88
  }}>
      <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(--teal)', letterSpacing: '-0.04em'
      }}>
          02
        </div>
        <div style={{ width: 56, height: 1, background: 'var(--teal)', marginTop: 18 }}></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 MISSION.
        </h2>
        <div className="ej-jp" style={{
        marginTop: 18, fontSize: 15, color: 'var(--ink-60)', letterSpacing: '0.08em'
      }}>経営者と並走し、DX/AXを実現し成果が出る組織を作る。

      </div>
      </div>
    </div>

    {/* Body — large statement */}
    <div style={{ maxWidth: 1040 }}>
      {/* Pull quote */}
      <p className="ej-jp" style={{
      margin: 0, fontSize: 44, lineHeight: 1.5, fontWeight: 600, color: 'var(--navy)',
      letterSpacing: '0.02em'
    }}>
        「貴社に最適な業務効率化を<br />
        あなたの手の元に。」
      </p>

      <p className="ej-jp" style={{
      marginTop: 48, fontSize: 20, lineHeight: 1.95, color: 'var(--ink)', maxWidth: 880
    }}>
        人手不足で業務が回らない中小企業に足りない業務効率化の仕組みを、生成AIで構築します。<br />
        <strong className="ej-mark-yellow" style={{ color: 'var(--navy)', fontWeight: 600 }}>・カスタマイズではコストが合わず導入を見送った</strong><br />
        <strong className="ej-mark-yellow" style={{ color: 'var(--navy)', fontWeight: 600 }}>・費用対効果が合わず業務効率化を推進できなかった</strong><br />
        この経験をお持ちの方のご期待に応えます。<br />
        <strong className="ej-mark-yellow" style={{ color: 'var(--navy)', fontWeight: 600 }}>貴社固有のオペレーションに合わせたシステム</strong>をオーダーメイドで設計し、現場の社員が自ら拡張し続けられる状態まで伴走します。
      </p>
    </div>

    {/* TWO PILLARS — AI最適化ソリューションの開発 / AI・DX基盤構築 */}
    <div style={{
    marginTop: 80, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0,
    borderTop: '1px solid var(--rule)'
  }}>
      {[
    {
      num: '01',
      en: 'CUSTOM BUILD',
      jp: 'AI最適化ソリューションの開発',
      body: 'パッケージでは届かない領域は、貴社固有のオペレーションに合わせてゼロから開発。御社の業務フローそのものに馴染む、唯一無二のシステムを作り込みます。'
    },
    {
      num: '02',
      en: 'AI / DX FOUNDATION',
      jp: 'AI・DX基盤構築',
      body: '全社で生成AIを使いこなすためのAI・DX基盤を構築。セキュアな環境を整え、業務データと生成AIをつなぐ土台をつくることで、全部門でAI活用を推進できる状態へ引き上げます。'
    }].
    map((p, i) =>
    <div key={i} style={{
      padding: '40px 36px 36px',
      borderRight: i < 1 ? '1px solid var(--rule)' : 'none'
    }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 22 }}>
            <span className="ej-en" style={{ fontSize: 40, fontWeight: 400, color: 'var(--teal)', letterSpacing: '-0.03em', lineHeight: 1 }}>
              {p.num}
            </span>
            <span className="ej-en" style={{ fontSize: 18, fontWeight: 400, color: 'var(--navy)', letterSpacing: '-0.01em' }}>
              {p.en}
            </span>
          </div>
          <div className="ej-jp" style={{ fontSize: 18, fontWeight: 600, color: 'var(--navy)', marginBottom: 14, lineHeight: 1.4 }}>
            {p.jp}
          </div>
          <p className="ej-jp" style={{ margin: 0, fontSize: 14, lineHeight: 1.9, color: 'var(--ink)' }}>
            {p.body}
          </p>
        </div>
    )}
    </div>
  </section>;


window.MissionSection = MissionSection;