/* komon.html — 月額顧問サービス（プラン詳細） */

/* ---------- 共通の小部品（含む/含まないの表・注記・プランカード） ---------- */

/** 1列版（スマホ用）：✓の表・×の表を縦に積む */
const RkIncTableSingle = ({ label, kind, icon, items }) => (
  <table className="pricetbl rk-inc-tbl">
    <thead>
      <tr><th className={kind}>{icon} {label}</th></tr>
    </thead>
    <tbody>
      {items.map((t, i) => (
        <tr key={i}>
          <td className={kind}><span className={`rk-ico rk-ico--${kind}`} aria-hidden>{icon}</span>{t}</td>
        </tr>
      ))}
    </tbody>
  </table>
);

const RkCols = ({ include, includeLabel = '含まれるもの', exclude, excludeLabel = '含まれないもの' }) => (
  <>
    {/* PC・タブレット：含む／含まないを左右2列の表で */}
    <div className="rk-pc-only pricetbl-wrap" style={{ marginTop: 24 }}>
      <table className="pricetbl rk-inc-tbl">
        <thead>
          <tr>
            <th className="yes">✓ {includeLabel}</th>
            <th className="no">× {excludeLabel}</th>
          </tr>
        </thead>
        <tbody>
          {Array.from({ length: Math.max(include.length, exclude.length) }).map((_, i) => (
            <tr key={i}>
              <td className="yes">{include[i] != null ? <><span className="rk-ico rk-ico--yes" aria-hidden>✓</span>{include[i]}</> : ''}</td>
              <td className="no">{exclude[i] != null ? <><span className="rk-ico rk-ico--no" aria-hidden>×</span>{exclude[i]}</> : ''}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
    {/* スマホ：✓の表→×の表を縦に積む */}
    <div className="rk-sp-only rk-inc-sp" style={{ marginTop: 24 }}>
      <RkIncTableSingle label={includeLabel} kind="yes" icon="✓" items={include} />
      <RkIncTableSingle label={excludeLabel} kind="no" icon="×" items={exclude} />
    </div>
  </>
);

const RkNote = ({ label, text }) => (
  <div className="price-note" style={{ marginTop: 20 }}>
    {label && <b>{label}：</b>}{text}
  </div>
);

/** プラン詳細（含む/含まないの表＋注記）。オマカセロウムくんはhighlightで強調枠に。 */
const RkPlan = ({ eyebrowText, titleNode, desc, badge, highlight, include, includeLabel, excludeLabel, exclude, note, extraNotes = [] }) => (
  <div className={highlight ? 'rk-omakase' : undefined}>
    {badge && <span className="rk-badge">{badge}</span>}
    <div className="section-head" style={{ marginBottom: 24 }}>
      <Eyebrow>{eyebrowText}</Eyebrow>
      <h2>{titleNode}</h2>
      <p className="lead" style={{ marginTop: 12 }}>{desc}</p>
    </div>
    <RkCols include={include} includeLabel={includeLabel} exclude={exclude} excludeLabel={excludeLabel} />
    {note && <RkNote text={note} />}
    {extraNotes.map((n, i) => <RkNote key={i} label={n.label} text={n.text} />)}
  </div>
);

/* ================= 料金ページへ戻す案内バンド ================= */

const KomonToPrice = () => (
  <section style={{ padding: '40px 0 8px', background: 'var(--paper)' }} data-screen-label="料金ページへ">
    <div className="container">
      <div className="rk-detail-link">
        <div>
          <b>料金の一覧（人数別の月額料金）は料金ページに掲載しています。</b>
          <span>相談顧問・手続き顧問・手続き＋給与計算顧問・オマカセロウムくんの料金と、助成金顧問・スポットサービスの料金。</span>
        </div>
        <a className="btn btn--navy" href="ryokin.html#monthly">料金ページを見る <Arrow/></a>
      </div>
    </div>
  </section>
);

/* ---- 相談顧問 ---- */
const SODAN_INCLUDE = [
  '経営者・人事担当者からの労務相談',
  '労働時間、残業、有給休暇、休職、退職などに関する相談',
  '雇用条件や労務管理に関する相談',
  '法改正や制度変更に関する情報提供',
  '社内書式や文書の簡易チェック',
  'オンラインでの相談対応',
];
const SODAN_EXCLUDE = [
  '社会保険・労働保険に関する手続き',
  '36協定の作成・届出',
  '算定基礎届',
  '労働保険年度更新',
  '入社・退社手続き',
  '扶養変更、月額変更届、賞与支払届',
  '傷病手当金、育児休業給付等の申請',
  '給与計算',
  '雇用契約書・労働条件通知書の作成',
  '就業規則の作成・改訂',
  '行政調査や労使トラブルへの対応',
  '助成金申請',
];

const KomonSodan = () => (
  <section id="plan-sodan" style={{ padding: '64px 0', background: 'var(--paper-2)' }} data-screen-label="相談顧問">
    <div className="container" style={{ maxWidth: 960, margin: '0 auto' }}>
      <RkPlan
        eyebrowText="PLAN 01 · 相談顧問（月額20,000円～）"
        titleNode="相談顧問"
        desc="会社側で社会保険・労働保険の手続きや給与計算を行い、労務上の判断に迷ったときに相談できるプランです。"
        include={SODAN_INCLUDE}
        exclude={SODAN_EXCLUDE}
        note="相談顧問は「相談のみ」のプランです。手続き業務は一切含みません。"
      />
    </div>
  </section>
);

/* ---- 手続き顧問 ---- */
const TETSUZUKI_INCLUDE = [
  '相談顧問の内容',
  '社会保険・雇用保険の資格取得、資格喪失',
  '入社・退社に伴う基本的な手続き',
  '扶養の追加、削除',
  '月額変更届',
  '賞与支払届',
  '算定基礎届',
  '労働保険年度更新',
  '通常の36協定の作成・届出',
  '産前産後休業、育児休業に関する基本的な手続き',
  '傷病手当金等の基本的な申請手続き',
];
const TETSUZUKI_EXCLUDE = [
  '給与計算',
  '雇用契約書・労働条件通知書の作成',
  '助成金申請',
  '就業規則の作成・大規模改訂',
  '複雑な労災申請',
  '行政調査への対応',
  '労使トラブルへの対応',
  '手続き件数が著しく多い場合の追加業務',
];

const KomonTetsuzuki = () => (
  <section id="plan-tetsuzuki" style={{ padding: '64px 0', background: 'var(--paper)' }} data-screen-label="手続き顧問">
    <div className="container" style={{ maxWidth: 960, margin: '0 auto' }}>
      <RkPlan
        eyebrowText="PLAN 02 · 手続き顧問（月額25,000円～）"
        titleNode="手続き顧問"
        desc="相談顧問の内容に加え、日常的な社会保険・労働保険の手続きを代行するプランです。"
        include={TETSUZUKI_INCLUDE}
        exclude={TETSUZUKI_EXCLUDE}
      />
    </div>
  </section>
);

/* ---- 手続き＋給与計算顧問 ---- */
const KYUYO_INCLUDE = [
  '手続き顧問の内容',
  '毎月の給与計算',
  '給与明細の発行',
  '社会保険料、雇用保険料、所得税の計算',
  '住民税額の反映',
  '賞与計算',
  '有給休暇残日数の反映',
  '年末調整に必要な給与データの提供',
];
const KYUYO_EXCLUDE = [
  '雇用契約書・労働条件通知書の作成',
  '打刻漏れの本人確認',
  'シフトと勤務実績の突合',
  '残業申請の内容確認',
  '従業員への勤怠修正依頼',
  '従業員本人からの給与に関する相談',
  '給与振込代行',
  '助成金申請',
  '就業規則の作成・大規模改訂',
  '行政調査や労使トラブルへの対応',
];

const KomonKyuyo = () => (
  <section id="plan-kyuyo" style={{ padding: '64px 0', background: 'var(--paper-2)' }} data-screen-label="手続き＋給与計算顧問">
    <div className="container" style={{ maxWidth: 960, margin: '0 auto' }}>
      <RkPlan
        eyebrowText="PLAN 03 · 手続き＋給与計算顧問（月額35,000円～）"
        titleNode="手続き＋給与計算顧問"
        desc="手続き顧問の内容に加え、毎月の給与計算を行うプランです。"
        include={KYUYO_INCLUDE}
        exclude={KYUYO_EXCLUDE}
        extraNotes={[
          { label: 'ご利用条件', text: '会社側で確定した勤怠データをご提出いただき、そのデータをもとに給与計算を行います。' },
        ]}
      />
    </div>
  </section>
);

/* ---- オマカセロウムくん（最上位プラン） ---- */
const OMAKASE_INCLUDE = [
  '給与計算',
  '給与明細の発行',
  '入社・退社に伴う手続き',
  '社会保険、雇用保険、労災に関する手続き',
  '算定基礎届',
  '労働保険年度更新',
  '通常の36協定の作成・届出',
  '雇用契約書・労働条件通知書の作成',
  '勤怠内容の確認',
  '打刻漏れや勤怠不備の確認',
  '従業員からの労務相談',
  'チャット相談',
  '就業規則の小幅な改訂',
  '法改正アラート',
  '代表者・執行役員からの直接相談',
  '日常的な労務管理',
  '必要に応じた業務改善の提案',
];
const OMAKASE_EXCLUDE = [
  '勤怠・給与システムの利用料',
  'freee等のシステム利用実費',
  '健康診断に伴うシステム料',
  '助成金の本格申請',
  'freee等の新規導入',
  '就業規則の新規作成',
  '就業規則の全面改訂',
  '大規模な規程改訂',
  '複雑な雇用条件に関する雇用契約書の作成',
  '給与振込代行',
];

const KomonOmakase = () => (
  <section id="plan-omakase" style={{ padding: '72px 0', background: 'var(--paper)' }} data-screen-label="オマカセロウムくん（最上位）">
    <div className="container" style={{ maxWidth: 960, margin: '0 auto' }}>
      <RkPlan
        eyebrowText="PLAN 04 · オマカセロウムくん（月額50,000円～）"
        titleNode={<>月額<span className="rk-omakase__num">5万円</span>から、人事部をアウトソース。</>}
        desc="オマカセロウムくんは、複数のプランには分けません。日常の人事労務をまとめて引き受けるフルパッケージです。"
        badge="おすすめ・最上位プラン"
        highlight
        include={OMAKASE_INCLUDE}
        excludeLabel="別途料金となるもの"
        exclude={OMAKASE_EXCLUDE}
        extraNotes={[
          { label: 'シフト設定', text: 'シフト制で、勤怠管理システム上のシフト設定が必要な場合は、「オマカセロウムくん＋シフト設定」を利用する形になります。' },
          { label: '支払い条件', text: '月末締め、翌月末払い／銀行振込／初期費用無料／在籍人数は原則として半年ごとに見直し' },
        ]}
      />
    </div>
  </section>
);

/* ---- 年次手続きの注意事項 ---- */
const NENJI_ITEMS = [
  '特別条項付き36協定',
  '複数事業場',
  '複数の労働保険番号',
  '一括有期事業',
  '過年度訂正',
  '資料未整理',
  '労働時間制度の設計が必要な場合',
  '通常より確認・手続き量が多い場合',
];

const KomonNenji = () => (
  <section style={{ padding: '56px 0 72px', background: 'var(--paper-2)' }} data-screen-label="年次手続きの注意事項">
    <div className="container" style={{ maxWidth: 900, margin: '0 auto' }}>
      <div className="callout callout--info">
        <h4>年次手続きの注意事項</h4>
        <p>
          算定基礎届、労働保険年度更新および通常の36協定の作成・届出は、手続き顧問、手続き＋給与計算顧問、オマカセロウムくんの月額料金に含まれます。相談顧問には含まれません。
        </p>
        <p>ただし、以下の場合は別途料金が発生することがあります：</p>
        <ul>
          {NENJI_ITEMS.map((t, i) => <li key={i}>{t}</li>)}
        </ul>
      </div>
    </div>
  </section>
);

/* ================= CTA ================= */

const KomonCTA = () => (
  <section style={{
    padding: '72px 0',
    background: 'linear-gradient(180deg, var(--navy-800), var(--navy-900))',
    color: '#fff',
  }} data-screen-label="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="ryokin.html" style={{ color: '#fff', borderColor: 'rgba(255,255,255,.4)' }}>
          料金ページに戻る
        </a>
      </div>
    </div>
  </section>
);

Object.assign(window, {
  KomonToPrice, KomonSodan, KomonTetsuzuki, KomonKyuyo, KomonOmakase, KomonNenji, KomonCTA,
});