// Section 06 — Case Studies
// Two cases with alternating L/R hero layouts. Big numbers (90%, 2.4×) on
// the stat side; Challenge / Solution / Comment on the narrative side.
const CasesSection = () => {
  const cases = [
    {
      num: '01',
      industry: '建設業',
      size: '経営・現場部門',
      kicker: 'MAPPING THE BLACK BOX',
      title: '業務プロセスの可視化から、改善ポイントを構造化。',
      stats: [
        { v: '120+', l: '部門ヒアリングで洗い出した業務' },
        { v: '14日', l: '業務MAP完成までの平均期間' },
        { v: '3領域', l: '優先課題として再構造化' }
      ],
      challenge:
        '業務改善を進めたいが、各部門の業務が言語化されておらず、どこにムダ・属人化があるかを経営と現場の両者で把握できていない。「改善したい」気持ちはあっても、最初の一歩が踏み出せない状態。',
      solution:
        '営業・製造・管理など全部門でアンケート+ヒアリングを実施し、業務プロセスをMAP化。時間・頻度・属人度を数値化して優先順位を可視化。経営者と現場で「どこから手を付けるべきか」を合意し、補助金・助成金の申請資料も併走で作成。',
      comment:
        '「自分たちでは見えていなかった業務の「詰まり」を、第三者の視点で可視化してもらえた。改善の優先順位が明確になり、社内で議論が始まりました。」',
      author: '代表取締役 — 建設業A社'
    },
    {
      num: '02',
      industry: '建設業',
      size: '営業・工事管理部門',
      kicker: 'FROM TENDER DATA TO SITE SCHEDULE',
      title: '入札情報の自動取得から、工事工程の最適化までを一気通貫で。',
      stats: [
        { v: '90%', l: 'Excel業務の自動化（情報取得〜案件管理）' },
        { v: '70%', l: '作業工程表の作成時間 削減' },
        { v: '生産性向上', l: '少人数で複数案件を並行運用' }
      ],
      challenge:
        '公共工事の入札情報を毎朝、担当者が会員サイトに手作業でアクセスして取得していた。落札後も、案件ごとの作業工程表を Excel で一から組み直しており、現場ごとの最適配員・最適工程の検討に時間を割けない状態。',
      solution:
        '会員サイトからの入札情報の自動取得と、入札案件の一元管理システムを構築。落札後は、過去の類似案件・工種・人員スキルを学習した工程表の最適化AIが、推奨スケジュールを自動生成。担当者は出力された工程案を確認・微調整するだけで、少人数でも複数案件を並行して回せる体制に。',
      comment:
        '「入札情報の取得が自動化されただけでも大きかったが、工程表の最適化まで踏み込めたのが本当の転換点。同じ人数で受注量を増やせるようになりました。」',
      author: '代表取締役 — 建設業B社'
    }
  ];

  return (
    <section
      id="cases"
      data-screen-label="06 Cases"
      className="ej-root"
      style={{ width: 1440, padding: '160px 64px', background: 'var(--off-white)' }}
    >
      <FadeIn>
        <SectionHead
          num="06"
          titleEn="THE CASE STUDIES."
          titleJp="生成AIで、業務効率化のかたちを変えた現場。"
          accent="amber"
          lead={<>パッケージ導入では実現できなかった<strong style={{ color: 'var(--navy)', fontWeight: 600 }}>個社最適なシステム</strong>を、貴社の業務に合わせて設計します。下記は実装例の一部です。</>}
        />
      </FadeIn>

      <div style={{ display: 'grid', gap: 96 }}>
        {cases.map((c, i) => {
          const reversed = i % 2 === 1;
          return (
            <FadeIn key={c.num} delay={i * 100}>
              <article
                style={{
                  display: 'grid',
                  gridTemplateColumns: '1fr 1fr',
                  gap: 0,
                  border: '1px solid var(--rule)',
                  background: 'white',
                  minHeight: 600,
                }}
              >
                {/* STATS PANEL */}
                <div
                  style={{
                    order: reversed ? 2 : 1,
                    background: 'var(--navy)',
                    color: 'white',
                    padding: '56px 48px',
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-between',
                    position: 'relative',
                  }}
                >
                  <div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 36 }}>
                      <div>
                        <div className="ej-mono" style={{ fontSize: 13, color: 'var(--teal-light)', marginBottom: 14 }}>
                          CASE {c.num}
                        </div>
                        <div className="ej-en" style={{ fontSize: 18, color: 'rgba(255,255,255,0.85)', letterSpacing: '-0.005em' }}>
                          {c.kicker}
                        </div>
                      </div>
                      <div
                        className="ej-en"
                        style={{
                          fontSize: 88,
                          color: 'rgba(255,255,255,0.12)',
                          fontWeight: 400,
                          letterSpacing: '-0.04em',
                          lineHeight: 0.85,
                        }}
                      >
                        {c.num}
                      </div>
                    </div>

                    {/* big stats */}
                    <div style={{ display: 'grid', gap: 28 }}>
                      {c.stats.map((s, si) => (
                        <div
                          key={si}
                          style={{
                            display: 'grid',
                            gridTemplateColumns: '170px 1fr',
                            gap: 28,
                            alignItems: 'baseline',
                            paddingBottom: 20,
                            borderBottom: si < 2 ? '1px solid rgba(255,255,255,0.1)' : 'none',
                          }}
                        >
                          <div
                            className="ej-en"
                            style={{
                              fontSize: 88,
                              fontWeight: 400,
                              color: si === 0 ? 'var(--amber)' : si === 1 ? 'var(--teal-light)' : 'white',
                              letterSpacing: '-0.04em',
                              lineHeight: 1,
                              fontVariantNumeric: 'tabular-nums',
                            }}
                          >
                            {s.v}
                          </div>
                          <div className="ej-jp" style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6 }}>
                            {s.l}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>

                  <div
                    style={{
                      marginTop: 32,
                      paddingTop: 20,
                      borderTop: '1px dashed rgba(255,255,255,0.16)',
                      display: 'flex',
                      justifyContent: 'space-between',
                    }}
                  >
                    <span className="ej-mono" style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)' }}>
                      INDUSTRY
                    </span>
                    <span className="ej-jp" style={{ fontSize: 12, color: 'rgba(255,255,255,0.85)' }}>
                      {c.industry} / {c.size}
                    </span>
                  </div>
                </div>

                {/* NARRATIVE PANEL */}
                <div
                  style={{
                    order: reversed ? 1 : 2,
                    padding: '56px 48px',
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-between',
                  }}
                >
                  <div>
                    <h3
                      className="ej-jp"
                      style={{
                        margin: 0,
                        fontSize: 28,
                        fontWeight: 600,
                        color: 'var(--navy)',
                        lineHeight: 1.5,
                        letterSpacing: '0.02em',
                      }}
                    >
                      {c.title}
                    </h3>

                    <div style={{ marginTop: 36, display: 'grid', gap: 28 }}>
                      <div>
                        <div className="ej-mono" style={{ fontSize: 12, color: 'var(--teal)', marginBottom: 10 }}>
                          ／ CHALLENGE
                        </div>
                        <p className="ej-jp" style={{ margin: 0, fontSize: 14, lineHeight: 1.9, color: 'var(--ink)' }}>
                          {c.challenge}
                        </p>
                      </div>
                      <div>
                        <div className="ej-mono" style={{ fontSize: 12, color: 'var(--teal)', marginBottom: 10 }}>
                          ／ SOLUTION
                        </div>
                        <p className="ej-jp" style={{ margin: 0, fontSize: 14, lineHeight: 1.9, color: 'var(--ink)' }}>
                          {c.solution}
                        </p>
                      </div>
                    </div>
                  </div>

                  {/* quote */}
                  <div
                    style={{
                      marginTop: 40,
                      padding: '24px 28px',
                      background: 'var(--paper)',
                      borderLeft: '2px solid var(--amber)',
                    }}
                  >
                    <p
                      className="ej-jp"
                      style={{
                        margin: 0,
                        fontSize: 14,
                        lineHeight: 1.85,
                        color: 'var(--navy)',
                        fontWeight: 500,
                      }}
                    >
                      {c.comment}
                    </p>
                    <div className="ej-mono" style={{ fontSize: 12, color: 'var(--ink-60)', marginTop: 14 }}>
                      — {c.author}
                    </div>
                  </div>
                </div>
              </article>
            </FadeIn>
          );
        })}
      </div>
    </section>
  );
};

window.CasesSection = CasesSection;