// Cases — 困りごと → 解決 の2列対比(3件)
// HeroC の下に続く、同じ美学のセクション。

const CASES = [
  {
    id: 'case-01',
    tag: '経理 / 伝票照合',
    client: '自社プロダクト',
    problem: {
      title: '紙の伝票で、毎月 1,000 時間の照合作業。',
      body: '経理部門が月末のたびに紙の伝票と会計データを突き合わせ、延べ 1,000 時間超を費やしていた。照合ミスによる年間の損失額はおよそ 150 万円。',
    },
    solution: {
      title: 'AI エージェントが、照合を代わりに引き受ける。',
      body: '伝票を読み取り、明細単位で会計データと突き合わせる AI エージェントを構築。人がやるのは例外のレビューだけ、に変えた。',
      metrics: [
        { k: '月あたり作業', v: '1,000h → 10h' },
        { k: '削減率',       v: '約 99 %' },
        { k: '年間損失',     v: '約 150 万円 → ゼロ' },
      ],
    },
  },
  {
    id: 'case-02',
    tag: '営業 / 顧客リスト生成',
    client: '自社プロダクト',
    problem: {
      title: '「次にどこへ営業するか」が、勘だった。',
      body: '営業リストの作成は属人的で、担当者の経験と勘に依存。新規開拓の再現性が低く、受注までの距離が読めないという課題。',
    },
    solution: {
      title: '企業情報をベクトル化し、受注確度で並べる。',
      body: '公開情報から営業先候補を自動収集し、自社の過去受注と意味的な近さでスコアリング。「いま連絡すべき順」でリスト化して渡す。',
      metrics: [
        { k: 'リスト生成',    v: '数日 → 数分' },
        { k: '初回商談化率',  v: '約 2.4 倍' },
        { k: '対応企業数',    v: '約 44 万社' },
      ],
    },
  },
  {
    id: 'case-03',
    tag: '受託開発全般',
    client: '',
    problem: {
      title: '要件は決まっていないが、イメージはある。',
      body: '「かたちにしたいもの」の輪郭は見えているが、仕様はまだ言語化しきれていない段階。既存システムへの組み込みや、検証用プロトタイプの立ち上げなど、形の定まらない依頼。',
    },
    solution: {
      title: 'ヒアリングから運用まで、同じチームで。',
      body: '要件の輪郭を一緒につくるところから、設計・実装・運用・改善まで同じ小さなチームで引き受ける。引き継ぎのロスがない。',
      metrics: [
        { k: '初回 PoC',     v: '最短 2 週間' },
        { k: '担当',         v: '専任 2〜3 名' },
        { k: '領域',         v: 'Web / AI / 受託全般' },
      ],
    },
  },
];

function Cases() {
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  const rootStyle = isMobile ? { ...casesStyles.root, padding: '0 20px 80px' } : casesStyles.root;
  return (
    <section id="work" style={rootStyle}>
      {/* Section label — 中央に置いた罫の上に乗るラベル */}
      <div style={casesStyles.sectionLabelWrap}>
        <span style={casesStyles.sectionLabel}>開発実績</span>
      </div>

      {/* Case rows */}
      <div style={casesStyles.list}>
        {CASES.map((c, i) => (
          <React.Fragment key={c.id}>
            {i > 0 && <div style={casesStyles.rowSep} />}
            <CaseRow caseData={c} index={i} isMobile={isMobile} />
          </React.Fragment>
        ))}
      </div>
    </section>
  );
}

function CaseRow({ caseData, index, isMobile }) {
  const idx = String(index + 1).padStart(2, '0');
  const rowStyle = isMobile ? { ...casesStyles.row, padding: '40px 0', gap: 22 } : casesStyles.row;
  const colsStyle = isMobile
    ? { ...casesStyles.cols, gridTemplateColumns: '1fr', gap: 28 }
    : casesStyles.cols;
  const dividerStyle = isMobile
    ? { display: 'none' }
    : casesStyles.divider;
  const colTitleStyle = isMobile ? { ...casesStyles.colTitle, fontSize: 18, lineHeight: 1.5 } : casesStyles.colTitle;
  const colBodyStyle = isMobile ? { ...casesStyles.colBody, fontSize: 14, lineHeight: 1.85 } : casesStyles.colBody;
  const metricsStyle = isMobile
    ? { ...casesStyles.metrics, gridTemplateColumns: 'repeat(2, 1fr)', gap: 14, paddingTop: 16 }
    : casesStyles.metrics;
  const metricVStyle = isMobile ? { ...casesStyles.metricV, fontSize: 18 } : casesStyles.metricV;

  return (
    <article style={rowStyle}>
      {/* Row meta — 上部に薄く */}
      <div style={casesStyles.rowMeta}>
        <span style={casesStyles.rowIdx}>{idx}</span>
        <span style={casesStyles.rowTag}>{caseData.tag}</span>
        {caseData.client ? (<>
          <span style={casesStyles.rowSep}>·</span>
          <span style={casesStyles.rowClient}>{caseData.client}</span>
        </>) : null}
      </div>

      {/* 2 columns — 左:困りごと / 右:解決 */}
      <div style={colsStyle}>
        {/* 困りごと */}
        <div style={casesStyles.colProblem}>
          <div style={casesStyles.colLabel}>困りごと</div>
          <h3 style={colTitleStyle}>{caseData.problem.title}</h3>
          <p style={colBodyStyle}>{caseData.problem.body}</p>
        </div>

        {/* 縦の罫 */}
        <div style={dividerStyle} />

        {/* 解決 */}
        <div style={casesStyles.colSolution}>
          <div style={{ ...casesStyles.colLabel, color: 'var(--ink)' }}>解決</div>
          <h3 style={colTitleStyle}>{caseData.solution.title}</h3>
          <p style={colBodyStyle}>{caseData.solution.body}</p>

          <dl style={metricsStyle}>
            {caseData.solution.metrics.map((m, j) => (
              <div key={j} style={casesStyles.metric}>
                <dt style={casesStyles.metricK}>{m.k}</dt>
                <dd style={metricVStyle}>{m.v}</dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
    </article>
  );
}

const casesStyles = {
  root: {
    padding: '0 44px 140px',
    background: 'var(--paper)',
    color: 'var(--ink)',
    fontFamily: 'var(--sans)',
  },

  sectionLabelWrap: {
    maxWidth: 1100, margin: '0 auto',
    position: 'relative',
    height: 1,
    background: 'var(--ink-15)',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  sectionLabel: {
    background: 'var(--paper)',
    padding: '0 24px',
    transform: 'translateY(-0.5px)',
    fontFamily: 'var(--serif-jp)',
    fontSize: 14,
    fontWeight: 500,
    letterSpacing: '0.5em',
    color: 'var(--ink-75)',
    textIndent: '0.5em',  /* compensate right margin of last char for optical centering */
  },

  intro: {
    maxWidth: 1100, margin: '0 auto 72px',
    display: 'flex', flexDirection: 'column', gap: 18,
  },
  introLabel: {
    fontSize: 12, letterSpacing: 2.4, textTransform: 'uppercase',
    color: 'var(--ink-55)',
    fontFamily: 'var(--sans)',
  },
  introTitle: {
    fontFamily: 'var(--serif-jp)',
    fontSize: 'clamp(28px, 3.2vw, 44px)',
    fontWeight: 500,
    lineHeight: 1.4,
    margin: 0,
    letterSpacing: '-0.01em',
    maxWidth: '28ch',
  },
  introLede: {
    fontFamily: 'var(--serif-jp)',
    fontSize: 16, lineHeight: 1.95,
    color: 'var(--ink-75)',
    maxWidth: 640, margin: 0,
    textWrap: 'pretty',
  },

  list: {
    maxWidth: 1100, margin: '0 auto',
    display: 'flex', flexDirection: 'column',
    gap: 0,
  },
  rowSep: {
    height: 1,
    background: 'var(--ink-15)',
  },
  row: {
    display: 'flex', flexDirection: 'column', gap: 28,
    padding: '56px 0',
  },
  rowMeta: {
    display: 'flex', alignItems: 'baseline', gap: 14,
    fontSize: 13, color: 'var(--ink-60)',
    fontFamily: 'var(--mono)',
  },
  rowIdx: {
    fontSize: 13, color: 'var(--ink-50)',
    letterSpacing: 0.6,
  },
  rowTag: {
    color: 'var(--ink-75)',
    letterSpacing: 0.4,
  },
  rowSep: { color: 'var(--ink-35)' },
  rowClient: { color: 'var(--ink-55)' },

  cols: {
    display: 'grid',
    gridTemplateColumns: '1fr 1px 1.2fr',
    gap: 48,
    alignItems: 'start',
  },
  divider: {
    width: 1, alignSelf: 'stretch',
    background: 'var(--ink-15)',
    minHeight: 160,
  },
  colProblem: { display: 'flex', flexDirection: 'column', gap: 16 },
  colSolution: { display: 'flex', flexDirection: 'column', gap: 16 },
  colLabel: {
    fontSize: 11, letterSpacing: 2.0, textTransform: 'uppercase',
    color: 'var(--ink-55)',
    fontFamily: 'var(--sans)',
  },
  colTitle: {
    fontFamily: 'var(--serif-jp)',
    fontSize: 22, lineHeight: 1.55, fontWeight: 500,
    margin: 0,
    letterSpacing: '-0.005em',
    textWrap: 'pretty',
  },
  colBody: {
    fontFamily: 'var(--serif-jp)',
    fontSize: 15, lineHeight: 1.95,
    color: 'var(--ink-75)',
    margin: 0,
    textWrap: 'pretty',
  },

  metrics: {
    margin: '12px 0 0',
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 20,
    borderTop: '1px solid var(--ink-15)',
    paddingTop: 20,
  },
  metric: { display: 'flex', flexDirection: 'column', gap: 6 },
  metricK: {
    fontSize: 11, letterSpacing: 1.4, textTransform: 'uppercase',
    color: 'var(--ink-55)',
    margin: 0,
  },
  metricV: {
    fontFamily: 'var(--serif)',
    fontSize: 22, fontWeight: 500,
    letterSpacing: -0.2,
    color: 'var(--ink)',
    margin: 0,
  },
};

window.Cases = Cases;