/* ryokin.html — 料金のご案内 */

const TAX_NOTE = '表示価格はすべて税別です。';

/* ---------- 共通の小部品（料金表） ---------- */

/** 内容/料金の2列表。先頭列はth（ラベル）、以降はtd（金額）。mergedRowで最終行だけ横結合できる。 */
const PriceTable = ({ headers, rows, highlightCols = [], wide = false, mergedRow }) => (
  <div className="pricetbl-wrap">
    <table className={`pricetbl${wide ? ' rk-pricetbl-wide' : ''}`}>
      <thead>
        <tr>
          {headers.map((h, i) => (
            <th key={i} className={highlightCols.includes(i) ? 'rk-hl-th' : ''}>{h}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {rows.map((row, ri) => (
          <tr key={ri}>
            {row.map((cell, ci) => (
              ci === 0
                ? <th key={ci}>{cell}</th>
                : <td key={ci} className={highlightCols.includes(ci) ? 'rk-hl-td' : ''}>{cell}</td>
            ))}
          </tr>
        ))}
        {mergedRow && (
          <tr>
            <th>{mergedRow.label}</th>
            <td colSpan={headers.length - 1} style={{ textAlign: 'center', color: 'var(--ink-500)', fontSize: 14, fontFamily: 'var(--font-sans)', fontWeight: 500 }}>
              {mergedRow.text}
            </td>
          </tr>
        )}
      </tbody>
    </table>
  </div>
);

/* ================= ページ内もくじ（01〜04） ================= */

const TOC_ITEMS = [
  { href: '#monthly', n: '01', t: '月額顧問サービス', d: '相談顧問／手続き顧問／手続き＋給与計算顧問／オマカセロウムくん' },
  { href: '#josei', n: '02', t: '助成金顧問', d: '月額20,000円＋成功報酬（支給決定額の20％）' },
  { href: '#spot', n: '03', t: 'スポットサービス', d: '顧問契約がなくても使える単発サービス' },
  { href: '#notes', n: '04', t: '料金に関する注意事項', d: '税別表示・追加料金が発生する条件など' },
];

const RyokinTOC = () => (
  <section style={{ padding: '44px 0 12px', background: 'var(--paper)' }} data-screen-label="00 もくじ">
    <div className="container">
      <nav className="rk-toc" aria-label="ページ内もくじ">
        {TOC_ITEMS.map(i => (
          <a key={i.n} href={i.href}>
            <div className="n">{i.n}</div>
            <div className="t">{i.t}</div>
            <div className="d">{i.d}</div>
          </a>
        ))}
      </nav>
    </div>
  </section>
);

/* ================= セクション1：月額顧問サービス ================= */

/* 4プラン（内容比較・料金・詳細ページへのリンク） */
const MONTHLY_PLANS = [
  { nm: '相談顧問', sub: '相談のみ', price: '月額20,000円～', href: 'komon.html#plan-sodan' },
  { nm: '手続き顧問', sub: '相談＋手続き', price: '月額25,000円～', href: 'komon.html#plan-tetsuzuki' },
  { nm: '手続き＋給与計算顧問', sub: '相談＋手続き＋給与', price: '月額35,000円～', href: 'komon.html#plan-kyuyo' },
  { nm: 'オマカセロウムくん', sub: '人事労務をまるごと', price: '月額50,000円～', href: 'komon.html#plan-omakase', top: true },
];

/* 人数別の月額料金 */
const MONTHLY_HEADERS = [
  '従業員数',
  <>相談顧問<small>相談のみ</small></>,
  <>手続き顧問<small>相談＋手続き</small></>,
  <>手続き＋給与計算顧問<small>相談＋手続き＋給与</small></>,
  <>オマカセロウムくん<small>人事労務をまるごと</small></>,
  <>オマカセロウムくん＋シフト設定<small>シフト設定も対応</small></>,
];
const MONTHLY_ROWS = [
  ['～5名', '20,000円', '25,000円', '35,000円', '50,000円', '60,000円'],
  ['～10名', '20,000円', '35,000円', '50,000円', '80,000円', '90,000円'],
  ['～20名', '30,000円', '50,000円', '75,000円', '140,000円', '160,000円'],
  ['～30名', '40,000円', '65,000円', '95,000円', '210,000円', '240,000円'],
  ['～40名', '50,000円', '80,000円', '120,000円', '260,000円', '300,000円'],
  ['～60名', '65,000円', '110,000円', '165,000円', '360,000円', '420,000円'],
  ['～80名', '80,000円', '140,000円', '210,000円', '460,000円', '550,000円'],
  ['～100名', '95,000円', '170,000円', '260,000円', '550,000円', '650,000円'],
];

/* サービス内容×プランの対応表。各マスは各プラン詳細（含まれるもの／含まれないもの）から導出 */
const MATRIX_ROWS = [
  { label: '経営者・人事担当者からの労務相談', on: [1, 1, 1, 1] },
  { label: '法改正や制度変更に関する情報提供', on: [1, 1, 1, 1] },
  { label: '入社・退社、社会保険・雇用保険の手続き', on: [0, 1, 1, 1] },
  { label: '算定基礎届・労働保険年度更新・通常の36協定', on: [0, 1, 1, 1] },
  { label: '毎月の給与計算・給与明細の発行', on: [0, 0, 1, 1] },
  { label: '勤怠内容の確認（打刻漏れ・不備の確認）', on: [0, 0, 0, 1] },
  { label: '従業員からの労務相談（チャット相談）', on: [0, 0, 0, 1] },
  { label: '雇用契約書・労働条件通知書の作成', on: [0, 0, 0, 1] },
];

const DetailLink = () => (
  <div className="rk-detail-link" style={{ marginTop: 32 }}>
    <div>
      <b>各プランに「含まれる業務・含まれない業務」の詳しい一覧</b>
      <span>相談顧問・手続き顧問・手続き＋給与計算顧問・オマカセロウムくんの詳細と、年次手続きの扱いをまとめています。</span>
    </div>
    <a className="btn btn--navy" href="komon.html">月額顧問サービスの詳細を見る <Arrow/></a>
  </div>
);

const RyokinMonthly = () => (
  <section id="monthly" style={{ padding: '80px 0 64px', background: 'var(--paper)' }} data-screen-label="01 月額顧問サービス">
    <div className="container">
      <div className="section-head" style={{ marginBottom: 28 }}>
        <Eyebrow>01 · 月額顧問サービス</Eyebrow>
        <h2>内容も料金も、この一覧で。</h2>
        <p className="lead" style={{ marginTop: 12, maxWidth: '58ch' }}>
          任せる範囲で4つのプランに分かれます。{TAX_NOTE}
        </p>
      </div>

      {/* PC・タブレット：統合比較表（内容✓＋料金）＋人数別料金表 */}
      <div className="rk-pc-only">
        <h3 className="rk-subhead" style={{ marginTop: 0 }}>内容と料金の比較</h3>
        <div className="pricetbl-wrap">
          <table className="pricetbl rk-matrix">
            <thead>
              <tr>
                <th>内容</th>
                {MONTHLY_PLANS.map((p, i) => (
                  <th key={i} className={p.top ? 'rk-hl-th' : ''}>{p.nm}<small>{p.sub}</small></th>
                ))}
              </tr>
            </thead>
            <tbody>
              {MATRIX_ROWS.map((r, ri) => (
                <tr key={ri}>
                  <th>{r.label}</th>
                  {r.on.map((v, ci) => (
                    <td key={ci} className={`${v ? 'on' : 'off'}${ci === 3 ? ' rk-hl-td' : ''}`}>{v ? '✓' : '—'}</td>
                  ))}
                </tr>
              ))}
              <tr className="rk-matrix__price">
                <th>月額料金（目安）</th>
                {MONTHLY_PLANS.map((p, ci) => (
                  <td key={ci} className={p.top ? 'rk-hl-td' : ''}>{p.price}</td>
                ))}
              </tr>
            </tbody>
          </table>
        </div>

        <h3 className="rk-subhead">人数別の月額料金</h3>
        <PriceTable
          headers={MONTHLY_HEADERS}
          rows={MONTHLY_ROWS}
          highlightCols={[4, 5]}
          wide
          mergedRow={{ label: '101名～', text: '個別見積もり' }}
        />
      </div>

      {/* スマホ：プラン別カード表示（内容＋人数別料金） */}
      <div className="rk-sp-only rk-sp-plans">
        {MONTHLY_PLANS.map((p, i) => (
          <div key={i} className={`rk-sp-plan${p.top ? ' is-top' : ''}`}>
            {p.top && <span className="rk-badge">おすすめ・最上位</span>}
            <div className="rk-sp-plan__nm">{p.nm}</div>
            <div className="rk-sp-plan__pr">{p.price}</div>
            <ul className="rk-sp-plan__list">
              {MATRIX_ROWS.map((r, j) => (
                <li key={j} className={r.on[i] ? 'on' : 'off'}>
                  <span className={`rk-ico ${r.on[i] ? 'rk-ico--yes' : 'rk-ico--no'}`} aria-hidden>{r.on[i] ? '✓' : '—'}</span>
                  <span>{r.label}</span>
                </li>
              ))}
            </ul>
            <details className="rk-sp-plan__prices">
              <summary>人数別の料金を見る</summary>
              <table className="rk-sp-pricetbl">
                <thead>
                  <tr>
                    <th>従業員数</th>
                    <th>{p.top ? 'ロウムくん' : '月額'}</th>
                    {p.top && <th>＋シフト設定</th>}
                  </tr>
                </thead>
                <tbody>
                  {MONTHLY_ROWS.map((row, k) => (
                    <tr key={k}>
                      <th>{row[0]}</th>
                      <td>{row[i + 1]}</td>
                      {p.top && <td>{row[5]}</td>}
                    </tr>
                  ))}
                  <tr>
                    <th>101名～</th>
                    <td colSpan={p.top ? 2 : 1} style={{ textAlign: 'center' }}>個別見積もり</td>
                  </tr>
                </tbody>
              </table>
            </details>
            <a className="rk-sp-plan__more" href={p.href}>含まれる業務・含まれない業務を見る →</a>
          </div>
        ))}
        <p style={{ fontSize: 12, color: 'var(--ink-500)', lineHeight: 1.8, margin: '4px 0 0' }}>
          ※ シフト制で勤怠管理システム上のシフト設定が必要な場合は「オマカセロウムくん＋シフト設定」の料金になります。
        </p>
      </div>

      <DetailLink />
    </div>
  </section>
);

/* ================= セクション2：助成金顧問 ================= */

const JOSEI_ROWS = [
  ['助成金顧問料', '月額20,000円'],
  ['助成金申請の成功報酬', '支給決定額の20％'],
];
const JOSEI_INCLUDE = [
  '利用できる可能性がある助成金の情報提供',
  '助成金の対象可否に関する簡易診断',
  '助成金の活用に関する相談',
  '申請スケジュールの管理',
  '必要書類の案内',
  '制度変更や新しい助成金に関する情報提供',
  '申請前の労務管理状況の確認',
];

const RyokinJosei = () => (
  <section id="josei" style={{ padding: '80px 0', background: 'var(--paper-2)' }} data-screen-label="02 助成金顧問">
    <div className="container" style={{ maxWidth: 900, margin: '0 auto' }}>
      <div className="section-head" style={{ marginBottom: 24 }}>
        <Eyebrow>02 · 助成金顧問</Eyebrow>
        <h2>助成金顧問。</h2>
      </div>

      <PriceTable headers={['内容', '料金']} rows={JOSEI_ROWS} />

      <div className="callout callout--info" style={{ marginTop: 24 }}>
        <h4>助成金顧問に含まれるもの</h4>
        <ul>
          {JOSEI_INCLUDE.map((t, i) => <li key={i}>{t}</li>)}
        </ul>
      </div>

      <div className="callout callout--warn" style={{ marginTop: 20 }}>
        <h4>注意事項</h4>
        <p>
          助成金の支給決定後に、支給決定額の20％を成功報酬として申し受けます。助成金は必ず支給されるものではありません。
          審査結果、予算の状況、会社の労務管理状況、提出書類の内容などにより、不支給となる場合があります。
        </p>
      </div>
    </div>
  </section>
);

/* ================= セクション3：スポットサービス ================= */

const SPOT_CATS = [
  {
    slug: 'spot-sodan',
    title: '労務相談',
    rows: [
      ['オンライン労務相談・60分', '40,000円'],
      ['追加相談・30分', '20,000円'],
      ['書面による回答・意見書', '80,000円～'],
    ],
    note: '相談はオンラインで実施／対面相談は行わない／当日対応、緊急対応は行わない／資料確認や個別検討が必要な場合は別途見積もり',
  },
  {
    slug: 'spot-tetsuzuki',
    title: '社会保険・労働保険手続き',
    rows: [
      ['社会保険・雇用保険の取得または喪失', '1名につき20,000円'],
      ['扶養追加・削除', '1名につき15,000円'],
      ['離職票作成', '1名につき25,000円'],
      ['月額変更届', '1名につき20,000円'],
      ['賞与支払届', '20,000円＋1名につき2,000円'],
      ['算定基礎届', '50,000円＋1名につき3,000円'],
      ['労働保険年度更新', '60,000円＋1名につき2,000円'],
      ['通常の36協定の作成・届出', '50,000円～'],
      ['特別条項付き36協定の作成・届出', '80,000円～'],
      ['複数事業場分の36協定', '1事業場追加につき30,000円～'],
      ['社会保険・労働保険の新規適用', '100,000円～'],
      ['事業所移転・名称変更等', '50,000円～'],
      ['傷病手当金・出産手当金等', '1件30,000円～'],
      ['育児休業給付関連', '1名50,000円～'],
      ['労災給付申請', '50,000円～'],
    ],
    note: '大量の入退社、複数事業所、資料未整理、短納期での対応などの場合は、追加料金が発生します。',
  },
  {
    slug: 'spot-keiyaku',
    title: '雇用契約書・労働条件通知書',
    preface: '相談顧問、手続き顧問、手続き＋給与計算顧問には、雇用契約書・労働条件通知書の作成は含まれません。オマカセロウムくんのみ、日常的な雇用契約書・労働条件通知書の作成を月額料金に含みます。',
    rows: [
      ['雇用契約書・労働条件通知書の作成', '1名につき30,000円～'],
      ['雇用契約書の内容変更・更新', '1名につき20,000円～'],
      ['雇用契約書ひな形の新規作成', '80,000円～'],
      ['正社員・契約社員・パート等、複数区分のひな形作成', '150,000円～'],
      ['固定残業代を含む雇用契約書', '1名につき50,000円～'],
      ['歩合給・変形労働時間制等を含む雇用契約書', '1名につき50,000円～'],
      ['雇用契約書・労働条件通知書の内容チェック', '1件30,000円～'],
      ['雇用条件変更に伴う変更合意書の作成', '1名につき30,000円～'],
    ],
    note: '会社から確定した労働条件を提示してもらったうえで作成／賃金、労働時間、休日、契約期間などの条件自体を設計する場合は別料金／複数名を同時に作成する場合は個別見積もり／固定残業代、歩合給、変形労働時間制、裁量労働制、管理監督者などは追加料金の可能性あり／就業規則との整合性確認が必要な場合は別途見積もり／オマカセロウムくん契約中でも、複雑な雇用条件や特殊な契約は別料金の可能性あり',
  },
  {
    slug: 'spot-kitei',
    title: '就業規則・社内規程',
    rows: [
      ['就業規則の新規作成', '300,000円～'],
      ['就業規則の全面改訂', '250,000円～'],
      ['就業規則の部分改訂', '100,000円～'],
      ['賃金規程の作成・改訂', '150,000円～'],
      ['育児・介護休業規程', '80,000円～'],
      ['パートタイマー規程', '80,000円～'],
      ['テレワーク規程', '80,000円～'],
      ['ハラスメント規程', '80,000円～'],
      ['服務規律・懲戒規定の見直し', '100,000円～'],
      ['労使協定の作成', '1件50,000円～'],
      ['36協定の作成・届出', '50,000円～'],
    ],
    note: '複数の雇用区分、変形労働時間制、複雑な賃金制度、複数事業所がある場合は、追加料金が発生します。',
  },
  {
    slug: 'spot-trouble',
    title: '労務トラブル対応',
    rows: [
      ['問題社員対応の相談・方針整理', '80,000円～'],
      ['注意指導書・警告書の作成', '60,000円～'],
      ['退職勧奨の進め方整理', '100,000円～'],
      ['解雇対応の事前整理', '150,000円～'],
      ['ハラスメント相談対応', '100,000円～'],
      ['ハラスメント調査', '250,000円～'],
      ['労働基準監督署対応', '150,000円～'],
      ['年金事務所・労働局調査対応', '150,000円～'],
      ['是正報告書の作成', '100,000円～'],
      ['従業員面談への同席', '1回80,000円～'],
    ],
    note: '紛争性が高い案件については、弁護士との連携をご案内します。',
  },
  {
    slug: 'spot-saiyo',
    title: '採用・人事支援',
    rows: [
      ['求人票の作成', '80,000円～'],
      ['Indeed求人作成・初期設定', '100,000円～'],
      ['採用サイト簡易制作', '250,000円～'],
    ],
    note: '求人広告費、有料媒体費、ドメイン費用、サーバー費用等が発生する場合は、別途実費となります。',
  },
  {
    slug: 'spot-cloud',
    title: 'クラウド・システム導入',
    rows: [
      ['freee人事労務の導入', '250,000円～'],
      ['マネーフォワードクラウドの導入', '250,000円～'],
      ['勤怠システムの導入', '250,000円～'],
      ['給与システムの初期設定', '150,000円～'],
      ['データ移行', '100,000円～'],
      ['操作研修', '1回100,000円～'],
    ],
    note: 'システム利用料、アカウント利用料、外部サービス利用料などは別途実費となります。',
  },
  {
    slug: 'spot-kenshu',
    title: '研修',
    rows: [
      ['60分研修', '80,000円～'],
      ['90分研修', '120,000円～'],
      ['半日研修', '200,000円～'],
      ['1日研修', '300,000円～'],
      ['オリジナル研修資料の作成', '50,000円～'],
    ],
    note: '研修内容、参加人数、資料作成の範囲、開催方法などにより料金が変わります。',
  },
];

const RyokinSpot = () => (
  <section id="spot" style={{ padding: '80px 0', background: 'var(--paper)' }} data-screen-label="03 スポットサービス">
    <div className="container">
      <div className="section-head" style={{ marginBottom: 24 }}>
        <Eyebrow>03 · スポットサービス</Eyebrow>
        <h2>スポットサービス。</h2>
        <p className="lead" style={{ marginTop: 12, maxWidth: '70ch' }}>
          スポットサービスは、顧問契約を締結していない会社でも利用できる単発サービスです。表示料金は標準的な目安です。
          業務量、従業員数、事業所数、資料の整理状況、対応期限などにより料金が変わる場合があります。
        </p>
      </div>

      <div className="rk-chips" aria-label="スポットサービスのカテゴリ">
        {SPOT_CATS.map(c => <a key={c.slug} href={`#${c.slug}`}>{c.title}</a>)}
      </div>

      {SPOT_CATS.map((c, i) => (
        <div className="rk-spot-card" id={c.slug} key={i}>
          <h3>{c.title}</h3>
          {c.preface && <div className="price-note" style={{ marginBottom: 18 }}>{c.preface}</div>}
          <PriceTable headers={['内容', '料金']} rows={c.rows} />
          {c.note && (
            <p style={{ fontSize: 13.5, color: 'var(--ink-500)', lineHeight: 1.9, marginTop: 14 }}>{c.note}</p>
          )}
        </div>
      ))}
    </div>
  </section>
);

/* ================= セクション4：料金に関する注意事項 ================= */

const NOTES_ITEMS = [
  '表示価格はすべて税別',
  '従業員数には、役員、正社員、契約社員、パート、アルバイトを含む',
  '従業員数、入退社件数、給与体系、雇用区分、事業所数、勤怠管理の状況によって追加料金が発生する場合がある',
  '勤怠・給与システムの利用料は別途実費',
  '給与振込代行は行わない',
  '雇用契約書・労働条件通知書の作成は、オマカセロウムくんを除き、月額顧問料には含まれない',
  '助成金申請、就業規則の新規作成・全面改訂、行政調査、労使トラブル対応は、原則として月額顧問料には含まれない',
  '短納期、資料未整理、通常より確認作業が多い場合は追加料金が発生する',
  '正確な料金は業務内容を確認したうえで案内する',
  '顧問契約の在籍人数および業務量は原則として半年ごとに見直す',
  'サービス内容や料金は、制度改正や業務内容の変更等により見直す場合がある',
];

const RyokinNotes = () => (
  <section id="notes" style={{ padding: '80px 0', background: 'var(--paper-2)' }} data-screen-label="04 料金に関する注意事項">
    <div className="container" style={{ maxWidth: 960, margin: '0 auto' }}>
      <div className="section-head" style={{ marginBottom: 24 }}>
        <Eyebrow>04 · 料金に関する注意事項</Eyebrow>
        <h2>ご確認ください。</h2>
        <p className="lead" style={{ marginTop: 12 }}>
          {TAX_NOTE} ご検討にあたっては、以下の点にご留意ください。
        </p>
      </div>
      <ul className="rk-notes-grid">
        {NOTES_ITEMS.map((t, i) => <li key={i}>{t}</li>)}
      </ul>
    </div>
  </section>
);

/* ================= 最後：CTA ================= */

const RyokinCTA = () => (
  <section style={{
    padding: '72px 0',
    background: 'linear-gradient(180deg, var(--navy-800), var(--navy-900))',
    color: '#fff',
  }} data-screen-label="05 CTA">
    <div className="container" style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.24em', color: 'rgba(255,255,255,.7)', marginBottom: 16 }}>
        FREE CONSULTATION
      </div>
      <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 'clamp(26px, 3.2vw, 36px)', lineHeight: 1.5, color: '#fff', marginBottom: 18, letterSpacing: '.04em' }}>
        まずは<em style={{ fontStyle: 'normal', background: 'linear-gradient(180deg, transparent 62%, rgba(230,126,34,.55) 62% 92%, transparent 92%)', padding: '0 4px' }}>30分</em>の無料相談から。
      </h2>
      <p style={{ fontSize: 16, lineHeight: 2, color: 'rgba(255,255,255,.85)', marginBottom: 28 }}>
        どのプランが合うか、正直にお伝えします。
      </p>
      <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
        <a className="btn btn--primary btn--lg" href="https://timerex.net/s/ryo.kurata_ada7_dad9/e55e9800" target="_blank" rel="noopener">
          無料相談を予約する <Arrow/>
        </a>
        <a className="btn btn--ghost btn--lg" href="contact.html" style={{ color: '#fff', borderColor: 'rgba(255,255,255,.4)' }}>
          フォームで相談する
        </a>
      </div>
    </div>
  </section>
);

Object.assign(window, {
  RyokinTOC, RyokinMonthly, RyokinJosei, RyokinSpot, RyokinNotes, RyokinCTA,
});