// ─── 汎用サービス詳細ページ（SERVICE_PAGES を描画）─────────────────

function ServiceDetail({ id, go }) {
  const d = (typeof SERVICE_PAGES !== "undefined" && SERVICE_PAGES[id]) || null;
  if (!d) return null;

  return (
    <div className="page">
      <PageHeader
        eyebrow={d.eyebrow}
        num="→"
        title={<>{d.titleA}<br /><span style={{ color: "var(--accent-strong)" }}>{d.accent}</span>{d.titleB}</>}
        lead={d.lead} />

      <section className="section" style={{ background: "var(--bg-alt)" }}>
        <div className="wrap">
          <SectionHeader eyebrowNum="01" eyebrow="PAIN POINTS" title={<>こんな状況では、<br />ありませんか？</>} />
          <div className="pain-points-grid">
            {d.pains.map((p, i) =>
            <div key={i} className="pain-card">
                <div className="en pain-card__num">CASE {p.n}</div>
                <h3 className="h3 pain-card__title">{p.t}</h3>
                <p className="pain-card__desc">{p.d}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <SectionHeader eyebrowNum="02" eyebrow="WHAT WE DO" title="実際にやること。" />
          <div className="sd-do-grid">
            {d.doing.map((x, i) =>
            <div key={i} className="sd-do">
                <div className="en sd-do__num">{String(i + 1).padStart(2, "0")}</div>
                <h3 className="h3 sd-do__title">{x.t}</h3>
                <p className="sd-do__desc">{x.d}</p>
              </div>
            )}
          </div>

          <div className="sd-stack">
            <span className="mono sd-stack__label">対応環境・技術</span>
            <p className="sd-stack__body">{d.stack}</p>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-alt)" }}>
        <div className="wrap">
          <SectionHeader
            eyebrowNum="03"
            eyebrow="CASES"
            title="実際にお受けした案件。"
            lead="守秘のためクライアント名は伏せています。金額は実際にお支払いいただいた額です。" />
          <div className="sd-case-list">
            {d.cases.map((c, i) =>
            <div key={i} className="sd-case">
                <div className="sd-case__head">
                  <h3 className="h3 sd-case__title">{c.t}</h3>
                  <span className="serif sd-case__amount">{c.a}</span>
                </div>
                <p className="sd-case__desc">{c.d}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap" style={{ maxWidth: 860 }}>
          <SectionHeader eyebrowNum="04" eyebrow="PRICE" title="費用の目安。" align="left" />
          <dl className="sd-price">
            {d.price.map((p, i) =>
            <div key={i} className="sd-price__row">
                <dt className="sd-price__key">{p.k}</dt>
                <dd className="sd-price__val">{p.v}</dd>
              </div>
            )}
          </dl>
          <p className="sd-price__note">
            上記は過去の受注実績にもとづく目安です。既存の構成や状態によって変わるため、正式なお見積りはヒアリングと調査のうえで算出します。
          </p>
          <button onClick={() => go("contact", { tab: "form" })} className="btn btn-accent" style={{ marginTop: 28 }}>
            この内容で相談する <Arrow />
          </button>
        </div>
      </section>

      <BigCTA go={go} />
    </div>);

}

Object.assign(window, { ServiceDetail });