// ─── Services list page ──────────────────────────────────────────

function Services({ go }) {
  return (
    <div className="page">
      <PageHeader
        eyebrow="SERVICES"
        num="01"
        title={<>作って終わらせない<br /><span style={{ color: "var(--accent-strong)" }}>6つの専門分野</span>で支える</>}
        lead="WordPressを中核に、開発・インフラ・SEO・コンサルティングまで。単発ではなく、事業ライフサイクル全体をカバーします。" />

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap" style={{ display: "flex", flexDirection: "column", gap: 1, background: "var(--line)", border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden" }}>
          {SERVICES.map((s, i) => <ServiceRow key={s.id} service={s} index={i} go={go} />)}
        </div>
      </section>

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

}

function PageHeader({ eyebrow, num, title, lead }) {
  return (
    <section className="page-header">
      <div className="wrap">
        <Eyebrow num={num}>{eyebrow}</Eyebrow>
        <h1 className="h-display page-header__title">{title}</h1>
        {lead && <p className="lead page-header__lead">{lead}</p>}
      </div>
    </section>);

}

function ServiceRow({ service, index, go }) {
  return (
    <div className="service-row">
      <div className="service-row-grid">
        <div>
          <div className="en service-row__meta">
            {service.num} · {service.cat}
          </div>
          <h3 className="serif service-row__name">
            {service.title.replace(/\n/g, "")}
          </h3>
        </div>
        <div>
          <p className="serif service-row__headline">{service.headline}</p>
          <p className="service-row__desc">{service.summary}</p>
        </div>
        <div>
          <ul className="service-row__bullets">
            {service.bullets.map((b, i) =>
            <li key={i} className="service-row__bullet">
                <span className="service-row__bullet-icon"><Check size={14} /></span>
                <span>{b}</span>
              </li>
            )}
          </ul>
          {service.page &&
          <button onClick={() => go(service.page)} className="btn btn-ghost btn-sm" style={{ marginTop: 24 }}>
              詳細を見る <Arrow size={12} />
            </button>
          }
        </div>
      </div>
    </div>);

}

function CompareTable() {
  const rows = [
  { f: "初期費用", own: "¥0〜（スコープに応じて）", typical: "最低50万円〜が一般的" },
  { f: "保守月額", own: "¥35,000〜（プラン制）", typical: "¥50,000〜 & スポット別途" },
  { f: "一次応答", own: "平日15分以内 / 24/365 可", typical: "翌営業日対応が一般的" },
  { f: "GitHub共有", own: "標準でご提供", typical: "追加費用 or 非対応" },
  { f: "契約期間", own: "最低3ヶ月 / 以降1ヶ月前通知", typical: "年単位の縛りが多い" },
  { f: "レポート", own: "月次 (稼働・脆弱性・CWV)", typical: "年1回 or なし" }];

  return (
    <section className="section" style={{ background: "var(--bg-alt)" }}>
      <div className="wrap">
        <SectionHeader eyebrowNum="02" eyebrow="COMPARE" title="他社との違いを、明確に。" />
        <div className="compare-table-wrap">
          <table className="compare-table">
            <thead>
              <tr>
                <th>項目</th>
                <th className="compare-table th--own">
                  <span className="compare-table__accent">●</span>UIARB
                </th>
                <th className="compare-table th--other">一般的な制作会社</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) =>
              <tr key={i}>
                  <td>{r.f}</td>
                  <td>{r.own}</td>
                  <td>{r.typical}</td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Services, PageHeader });