/* service.html — サービス一覧 / 比較 / 選び方フロー */

/* ---------- Hi-fi pillar detail section (復元版) ---------- */

const PILLARS = [
  {
    id: 'roumu-kun',
    num: '01',
    tag: 'CORE SERVICE',
    tagSub: '月次顧問',
    title: <>日々の労務、<br/>まとめて引き取る顧問契約。</>,
    tagline: '「オマカセロウムくん」は、中小企業の労務実務をまるごと引き受ける月額顧問サービス。給与計算・手続き・相談対応・規則の維持まで、社長の頭から労務を消します。',
    features: [
      '社員の入退社・社保・労災手続きを全部引き取り',
      '給与計算の監修／計算代行（オプション）',
      '社員からの労務相談を代行（チャット相談し放題）',
      '就業規則の小幅改訂・法改正アラートも月額内',
      'freee人事労務を前提にした運用設計'
    ],
    price: '月額 5万円〜',
    priceNote: '社員数・範囲で決まる3プラン。初期費用は0円。半年ごとに在籍人数で見直し。',
    href: 'service-roumu.html',
    sticker: <>「うちの労務、<em>全部ここに</em>聞けばいい」<br/>——そういう一本道の窓口をつくります。</>,
    phTag: '業務風景 — 労務担当とのミーティング',
    photo: 'assets/svc-roumu.jpg',
    flip: false
  },
  {
    id: 'joseikin',
    num: '02',
    tag: 'SPOT SERVICE',
    tagSub: '助成金特化',
    title: <>取れる助成金を、<br/><em>取れるタイミング</em>で。</>,
    tagline: '累計6億円超の申請実績。助成金は「知っているかどうか」ではなく「取り方の設計」で決まる。私たちは、会社の動きごと逆算して設計し、漏らさず取り切ります。',
    features: [
      '人材採用・定着／育成／働き方改革／両立支援の4領域',
      '取れる助成金の初期診断は完全無料',
      '完全成功報酬型（受給額の20〜30%）',
      '着手金0円・月額0円・不受給なら0円',
      '取れない案件は、正直に「やりません」と伝える'
    ],
    price: '完全成功報酬型',
    priceNote: '初期診断は無料。受給確定後に、受給額の20〜30%（助成金の種類による）を報酬として請求。',
    href: 'joseikin.html',
    sticker: <>「要件から逆算して、<em>自然に取れる動き</em>」<br/>——会社の動きごと設計します。</>,
    phTag: '助成金申請の書類設計',
    photo: 'assets/svc-joseikin.jpg',
    flip: true
  },
  {
    id: 'freee',
    num: '03',
    tag: 'IMPLEMENTATION',
    tagSub: '労務DX',
    title: <>freee人事労務を、<br/><em>使える状態</em>まで。</>,
    tagline: '「freeeを入れたが使えていない」を解決する、約4ヶ月の伴走型プロジェクト。設計→設定→社員研修→初回運用→定着チェックまで、現場で回る状態まで持っていきます。',
    features: [
      'freee認定アドバイザー資格を保持する社労士法人',
      '業務設計・マスタ構築・勤怠連携・banking まで設定代行',
      '社員向け説明会／担当者トレーニング込み',
      '会社専用の運用マニュアルを作成',
      '他クラウド（KoT／MFなど）からの乗り換えも対応'
    ],
    price: '600,000円〜（4ヶ月一括）',
    priceNote: '社員数で決まる定額プロジェクト型。途中で追加費用は発生しません。',
    href: 'freee.html',
    sticker: <>設定代行ではなく、<em>4ヶ月の伴走</em>。<br/>現場で回る状態まで、横に居続けます。</>,
    phTag: 'freee画面での設計セッション',
    photo: 'assets/svc-freee.jpg',
    flip: false
  },
  {
    id: 'rules',
    num: '04',
    tag: 'RULE DESIGN',
    tagSub: '就業規則',
    title: <>あえて「<em>オマカセできない</em>」<br/>就業規則。</>,
    tagline: '雛形のコピペでは、会社も社員も守れません。社長が自分の言葉で「こう決めた」と言える状態を目指し、決めるべき論点を全部テーブルに並べ、判断と合意のプロセスを横で回します。',
    features: [
      '現状診断（既存規則／運用／トラブル履歴の棚卸し）',
      '論点ワークショップで選択肢とリスクを可視化',
      '社長＋経営チームとの読み合わせで合意形成',
      '本則＋賃金／退職金／育介／ハラスメント／在宅規程',
      '労基署届出・社員説明会までサポート'
    ],
    price: '250,000円〜',
    priceNote: '新規作成で3〜4ヶ月、全面改訂で2〜3ヶ月。規模・扱う規程数で決まります。',
    href: 'rules.html',
    sticker: <>代わりに決めません。<br/>決めるための<em>論点を並べ</em>ます。</>,
    phTag: '就業規則の論点ワークショップ',
    photo: 'assets/svc-rules.jpg',
    flip: true
  }
];

const ServicePillars = () => (
  <section style={{background:'var(--paper)'}} data-screen-label="01 Service Details">
    <div className="container">
      <div className="section-head" style={{paddingTop:72, marginBottom:0}}>
        <Eyebrow>DETAIL · 4サービスの詳細</Eyebrow>
        <h2>一つずつ、<br/>何ができるかを書いておきます。</h2>
        <p className="lead" style={{marginTop:12, maxWidth:'62ch'}}>
          どれか一つから始められます。迷ったら、各サービスの詳細ページで、料金・契約までの流れ・よくある質問まで全公開しています。
        </p>
      </div>
      {PILLARS.map(p => (
        <div
          id={p.id}
          key={p.id}
          className={`pillar ${p.flip ? 'pillar--flip' : ''}`}
        >
          <div className="pillar__content">
            <div className="pillar__tag">
              <span className="pill">{p.tag}</span>
              <span>{p.tagSub}</span>
            </div>
            <div className="pillar__num">{p.num}</div>
            <h3 className="pillar__title">{p.title}</h3>
            <p className="pillar__tagline">{p.tagline}</p>
            <ul className="pillar__features">
              {p.features.map((f, i) => <li key={i}>{f}</li>)}
            </ul>
            <div className="pillar__price">
              <div className="pillar__price-v">{p.price}</div>
              <div className="pillar__price-n">{p.priceNote}</div>
            </div>
            <div className="pillar__cta">
              <a className="btn btn--navy" href={p.href}>詳しいサービスページへ <Arrow/></a>
              <a className="btn btn--ghost" href="contact.html">無料相談</a>
            </div>
          </div>
          <div className="pillar__visual">
            {p.photo
              ? <img src={p.photo} alt="" style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
              : <Placeholder tag={p.phTag} style={{height:'100%'}}/>}
            <div className="pillar__sticker">{p.sticker}</div>
          </div>
        </div>
      ))}
    </div>
  </section>
);

const SERVICES = [
  {
    num: '01',
    role: 'CORE · 月次顧問',
    name: 'オマカセロウムくん',
    one: '給与計算・社保手続き・社員対応・freee運用・就業規則の軽微改訂まで、日常の労務をまるごと引き受ける月次顧問。「対応範囲が広い」ことが最大の特徴です。',
    price: <>月額 <strong>5万円〜</strong></>,
    href: 'service-roumu.html'
  },
  {
    num: '02',
    role: 'SPOT · 助成金特化',
    name: 'オマカセ助成金申請',
    one: '累計6億円超の実績。「取れる助成金を、取れるタイミングで、確実に」。社長の代わりに申請を設計・代行します。',
    price: <>成功報酬型 / <strong>要相談</strong></>,
    href: 'joseikin.html'
  },
  {
    num: '03',
    role: 'IMPLEMENTATION · 労務DX',
    name: 'オマカセfreee導入',
    one: '「freeeを入れたが使えていない」を解決する、伴走型の導入・運用支援。約4ヶ月で社内に定着させます。',
    price: <>導入伴走 <strong>要相談</strong></>,
    href: 'freee.html'
  },
  {
    num: '04',
    role: 'RULE DESIGN · 就業規則',
    name: 'オマカセできない就業規則',
    one: '「社長と一緒につくる」就業規則。雛形のコピペでは守れない会社を、使える規則で守る設計支援です。',
    price: <>作成 <strong>要相談</strong></>,
    href: 'rules.html'
  }
];

const ServiceOverview = () => (
  <section style={{padding:'88px 0 64px', background:'var(--paper)'}} data-screen-label="01 Services Overview">
    <div className="container">
      <div className="section-head" style={{marginBottom:40}}>
        <Eyebrow>LINEUP · サービスの全体像</Eyebrow>
        <h2>CORE / SPOT / IMPLEMENTATION / RULE ——<br/>役割の違う4サービス。</h2>
        <p className="lead" style={{marginTop:16, maxWidth:'68ch'}}>
          すべての会社に同じものを勧めるサービスではありません。
          <strong>「いま社長が一番困っていること」</strong>に合わせて、どれか1つから始めていただけます。
          迷う場合は、下のフローチャートか<a href="contact.html" style={{color:'var(--accent)', textDecoration:'underline'}}>無料相談</a>で一緒に選びます。
        </p>
      </div>
      <div className="smap">
        {SERVICES.map(s => (
          <a className="smap__card" href={s.href} key={s.num}>
            <div className="num">{s.num}</div>
            <div className="role">{s.role}</div>
            <div className="nm">{s.name}</div>
            <div className="one">{s.one}</div>
            <div className="pr"><strong>{s.price}</strong></div>
            <div style={{marginTop:16, paddingTop:14, borderTop:'1px dashed var(--paper-line)', fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.08em', color:'var(--accent)', fontWeight:600, display:'flex', alignItems:'center', gap:6}}>
              詳しく見る <Arrow/>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const ServiceFreee = () => (
  <section style={{padding:'80px 0', background:'var(--paper-2)'}} data-screen-label="02 Freee Focus">
    <div className="container">
      <div className="section-head" style={{marginBottom:36, maxWidth:'60ch'}}>
        <Eyebrow>FREEE SPECIALIST · freee人事労務に特化した社労士法人</Eyebrow>
        <h2>私たちは、<br/><em style={{fontStyle:'normal', fontFamily:'var(--font-serif)', background:'linear-gradient(180deg, transparent 62%, rgba(230,126,34,.4) 62% 92%, transparent 92%)', padding:'0 4px'}}>freee人事労務の運用</em>を軸に、<br/>会社の労務を回す社労士です。</h2>
        <p className="lead" style={{marginTop:16, maxWidth:'62ch'}}>
          「どこの社労士に頼んでも同じ」ではありません。<strong>労務ニュースはfreee人事労務一本で運用設計する社労士法人</strong>です。
          freeeの中でデータが流れ続ける状態を前提に、月次オペレーション／助成金／就業規則まで組み立てます。
        </p>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20}}>
        {[
          {
            n:'01',
            t:'freee認定アドバイザー',
            d:'社労士法人として、freee認定アドバイザー資格を保持。freee社との連携で、現場でのつまずきを最短で解消します。'
          },
          {
            n:'02',
            t:'顧客の約9割がfreee運用',
            d:'顧問先の多くが、既にfreee人事労務を導入済み。「freeeあるある」への対処パターンが、組織内に蓄積されています。'
          },
          {
            n:'03',
            t:'他クラウドからの乗り換え支援',
            d:'KING OF TIMEやマネーフォワードからfreeeへの乗り換え案件も多数経験。現行運用を壊さず移行します。'
          },
          {
            n:'04',
            t:'freee会計との統合前提',
            d:'人事労務だけでなくfreee会計との連携を踏まえた運用設計。経理・労務を分断させません。'
          },
          {
            n:'05',
            t:'freeeで助成金も回す',
            d:'勤怠・賃金台帳・契約書の形をfreee運用と合わせて整備。助成金申請のたびに手作業でExcel、をやりません。'
          },
          {
            n:'06',
            t:'不向きなら、正直に言います',
            d:'「御社はfreeeじゃなく別ツールのほうが合います」も、正直にお伝えします。freeeに閉じ込めるための営業はしません。'
          }
        ].map(p => (
          <div key={p.n} style={{
            background:'#fff', border:'1px solid var(--paper-line)',
            borderRadius:'var(--radius)', padding:'28px 26px',
            borderTop:'3px solid var(--accent)'
          }}>
            <div style={{fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.18em', color:'var(--accent)', marginBottom:12, fontWeight:600}}>{p.n}</div>
            <h4 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:18, color:'var(--ink-900)', margin:'0 0 10px', letterSpacing:'.04em', lineHeight:1.55}}>{p.t}</h4>
            <p style={{fontSize:13, lineHeight:2, color:'var(--ink-700)', margin:0}}>{p.d}</p>
          </div>
        ))}
      </div>

      <div className="callout callout--info" style={{marginTop:36}}>
        <h4>どのサービスを選んでも、freee運用がベース</h4>
        <p>
          4つのオマカセサービスは、すべて<strong>「freee人事労務を活かす」前提</strong>で組み立てています。
          まだfreeeを入れていない会社は「オマカセfreee導入」から、すでに入れている会社は「オマカセロウムくん」から——
          どこから入っても、freeeを軸にした労務運用に収束していきます。
        </p>
      </div>
    </div>
  </section>
);

const ServiceFlow = () => (
  <section style={{padding:'80px 0', background:'var(--paper)'}} data-screen-label="03 Service Flow">
    <div className="container">
      <div className="section-head" style={{marginBottom:32}}>
        <Eyebrow>FLOW · 選び方フローチャート</Eyebrow>
        <h2>迷ったら、この順番で見てください。</h2>
        <p className="lead" style={{marginTop:12, maxWidth:'56ch'}}>
          多くの会社で、「ここからスタートすると整理しやすい」という順番があります。
          下の質問にYes/Noで答えると、最初に検討すべきサービスが分かります。
        </p>
      </div>

      <div className="flowchart">
        <h3>Q1. いま、日々の労務手続き（入退社・保険・給与に付随する処理）が、社内で回りきっていますか？</h3>

        <div className="flowchart__branches">
          <div className="flowchart__branch">
            <div className="flowchart__label">No — 回っていない / 担当者が手一杯</div>
            <a className="flowchart__answer" href="service-roumu.html">
              <div className="rec">RECOMMEND</div>
              <div className="nm">オマカセロウムくん</div>
              <div className="pr">月額 5万円〜</div>
            </a>
          </div>
          <div className="flowchart__branch">
            <div className="flowchart__label">Yes — 日々は回っている</div>
            <div style={{
              background:'#fff', border:'1px solid var(--paper-line)',
              borderRadius:'var(--radius)', padding:'18px 20px',
              fontSize:14, color:'var(--ink-700)', width:'100%', textAlign:'center'
            }}>↓ 次の質問へ</div>
          </div>
        </div>

        <div className="flowchart__arrow">
          <svg width="18" height="28" viewBox="0 0 18 28" fill="none">
            <path d="M9 2v22M2 18l7 7 7-7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>

        <h3 style={{marginTop:4}}>Q2. 会社の中で、一番「もったいない」「もっと何とかしたい」と感じているのはどれ？</h3>

        <div className="flowchart__branches" style={{gridTemplateColumns:'1fr 1fr 1fr'}}>
          <div className="flowchart__branch">
            <div className="flowchart__label">取れる助成金を<br/>取りこぼしている気がする</div>
            <a className="flowchart__answer" href="joseikin.html">
              <div className="rec">RECOMMEND</div>
              <div className="nm">オマカセ助成金申請</div>
              <div className="pr">成功報酬型</div>
            </a>
          </div>
          <div className="flowchart__branch">
            <div className="flowchart__label">freeeを入れたのに<br/>現場で使えていない</div>
            <a className="flowchart__answer" href="freee.html">
              <div className="rec">RECOMMEND</div>
              <div className="nm">オマカセfreee導入</div>
              <div className="pr">4ヶ月伴走</div>
            </a>
          </div>
          <div className="flowchart__branch">
            <div className="flowchart__label">就業規則が<br/>実態と合っていない</div>
            <a className="flowchart__answer" href="rules.html">
              <div className="rec">RECOMMEND</div>
              <div className="nm">オマカセできない<br/>就業規則</div>
              <div className="pr">要相談</div>
            </a>
          </div>
        </div>

        <div style={{
          marginTop:40, padding:'22px 26px',
          background:'var(--navy-050)', border:'1px solid var(--paper-line)',
          borderRadius:'var(--radius)', textAlign:'center',
          fontSize:14, color:'var(--ink-700)', lineHeight:1.9
        }}>
          <b style={{color:'var(--navy-700)'}}>どれにも該当しない／複数当てはまる場合は</b>、
          <a href="contact.html" style={{color:'var(--accent)', fontWeight:600, textDecoration:'underline'}}>無料相談（30分）</a>
          で一緒に整理します。「まだ何を聞けばいいか分からない」状態のままで大丈夫です。
        </div>
      </div>
    </div>
  </section>
);

const ServiceCTA = () => (
  <section style={{
    padding:'72px 0',
    background:'linear-gradient(180deg, var(--navy-800), var(--navy-900))',
    color:'#fff'
  }} data-screen-label="04 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(28px, 3.5vw, 40px)', lineHeight:1.5, letterSpacing:'.04em',
        color:'#fff', marginBottom:18
      }}>
        まずは、<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}}>
        「何を頼めばいいか分からない」状態のままで大丈夫です。
        現状を伺いながら、このページの4サービスのどれが合うか（または合わないか）を正直にお伝えします。
      </p>
      <div style={{display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap'}}>
        <a className="btn btn--primary btn--lg" href="contact.html">無料相談を予約する <Arrow/></a>
        <a className="btn btn--ghost btn--lg" href="tel:05057843633" style={{color:'#fff', borderColor:'rgba(255,255,255,.4)'}}>
          050-5784-3633
        </a>
      </div>
    </div>
  </section>
);

Object.assign(window, { ServicePillars, ServiceOverview, ServiceFreee, ServiceFlow, ServiceCTA });