// Section 04 — Approach
// Two core offerings:
//   A — 生成AIシステム開発（カスタムアプリ開発）: bring tools that never
//       reached adoption / didn't fit ROI into the company via generative AI.
//   B — コンサルテーション・内製化支援: 業務可視化 → AI・DX基盤構築 →
//       研修・伴走・定着まで一気通貫。
const ApproachSection = () => {
  const tracks = [
    {
      num: '01',
      en: 'CUSTOM AI\nDEVELOPMENT',
      jp: 'AI最適化ソリューションの開発',
      tag: 'AI最適化ソリューション',
      accent: 'var(--teal)',
      lead: '「ROIが合わず諦めたツール」を、生成AIで貴社のものに。',
      body:
        '過去に導入に至らなかったツールや、カスタマイズ費用が見合わずROIが合わなかった仕組みも、生成AIを活用すれば貴社固有のオペレーションに合わせて実装できます。汎用パッケージでは届かなかった領域を、オーダーメイドのシステムとして形にします。',
      bullets: [
        'オーダーメイドのAIアプリ開発',
        '貴社の業務フローに合わせたカスタム開発',
        '自動化システムの構築・既存システム連携',
        'これまで断念したツールの生成AIによる再実装',
      ],
      example: '例：生産工程 AI最適化ソリューション ／ 作業プロセス 効率化システム開発',
    },
    {
      num: '02',
      en: 'CONSULTING &\nINTERNALIZATION',
      jp: 'コンサルテーション・内製化支援',
      tag: '可視化 → 基盤構築 → 定着まで',
      accent: 'var(--sky-bright)',
      lead: '業務の見える化から、AI・DX基盤構築、定着まで現場の隣で。',
      body:
        'まず業務プロセスを可視化し、「どこにムダ・属人化があるか」を経営と現場で合意。そのうえでAI・DX基盤を構築し、研修・ハンズオン・月次伴走を通じて、現場社員が自らAIを使いこなし続けられる状態まで支援します。',
      bullets: [
        '業務プロセスの可視化（部門別ヒアリング・業務MAP）',
        'AI・DX基盤構築 ／ M365を用いたAI活用支援',
        '生成AI リテラシー研修・ハンズオン',
        '月次伴走（60分×12回）による定着・運用支援',
      ],
      example: '例：AI・DX基盤構築 ／ M365を用いたAI活用支援',
    },
  ];

  return (
    <section
      id="approach"
      data-screen-label="04 Approach"
      className="ej-root"
      style={{ width: 1440, padding: '160px 64px', background: 'var(--off-white)' }}
    >
      <FadeIn>
        <SectionHead
          num="04"
          titleEn="THE APPROACH."
          titleJp="2つのアプローチで、業務にAIを根付かせる。"
          accent="sky"
          lead={<><strong style={{ color: 'var(--navy)', fontWeight: 600 }}>貴社専用のシステム開発</strong>と、<strong style={{ color: 'var(--navy)', fontWeight: 600 }}>可視化から定着までのコンサルテーション</strong>。一社にどちらか一方、もしくは両方を組み合わせて、業務効率化を実現します。</>}
        />
      </FadeIn>

      <div style={{ display: 'grid', gap: 32 }}>
        {tracks.map((t, i) => (
          <FadeIn key={t.num} delay={i * 100}>
            <article
              style={{
                display: 'grid',
                gridTemplateColumns: '180px 1fr',
                gap: 56,
                alignItems: 'start',
                padding: '56px 0',
                borderTop: '1px solid var(--rule)',
                ...(i === tracks.length - 1 ? { borderBottom: '1px solid var(--rule)' } : {}),
              }}
            >
              {/* index */}
              <div>
                <div
                  className="ej-en"
                  style={{
                    fontSize: 96,
                    fontWeight: 400,
                    lineHeight: 0.85,
                    color: t.accent,
                    letterSpacing: '-0.045em',
                  }}
                >
                  {t.num}
                </div>
                <div className="ej-mono" style={{ fontSize: 12, color: 'var(--ink-60)', marginTop: 16 }}>
                  ／ {t.tag}
                </div>
              </div>

              {/* content */}
              <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, alignItems: 'start' }}>
                <div>
                  <div
                    className="ej-en"
                    style={{
                      fontSize: 44,
                      fontWeight: 400,
                      color: 'var(--navy)',
                      letterSpacing: '-0.025em',
                      lineHeight: 1.02,
                      whiteSpace: 'pre-line',
                    }}
                  >
                    {t.en}
                  </div>
                  <div className="ej-jp" style={{ fontSize: 20, color: 'var(--navy)', fontWeight: 600, marginTop: 14 }}>
                    {t.jp}
                  </div>
                  <p className="ej-jp" style={{ fontSize: 16, color: 'var(--navy)', lineHeight: 1.9, marginTop: 24, fontWeight: 600 }}>
                    {t.lead}
                  </p>
                  <p className="ej-jp" style={{ fontSize: 14, color: 'var(--ink-60)', lineHeight: 1.95, marginTop: 16, maxWidth: 540 }}>
                    {t.body}
                  </p>
                </div>

                <div>
                  <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 14 }}>
                    {t.bullets.map((b, bi) => (
                      <li key={bi} className="ej-jp" style={{ display: 'flex', alignItems: 'flex-start', gap: 14, fontSize: 14, color: 'var(--ink)' }}>
                        <AmberCheck size={20} />
                        <span style={{ paddingTop: 1, lineHeight: 1.6 }}>{b}</span>
                      </li>
                    ))}
                  </ul>

                  <div
                    style={{
                      marginTop: 28,
                      paddingTop: 18,
                      borderTop: '1px dashed var(--rule)',
                    }}
                  >
                    <span className="ej-mono" style={{ fontSize: 11, color: 'var(--ink-60)', letterSpacing: '0.06em', lineHeight: 1.7 }}>
                      {t.example}
                    </span>
                  </div>
                </div>
              </div>
            </article>
          </FadeIn>
        ))}
      </div>
    </section>
  );
};

window.ApproachSection = ApproachSection;