/* service.html — サービス一覧 / 3本柱詳細 / 選び方フロー（株式会社労務ニュース版） */

const PILLARS = [
  {
    id: 'pillar-team',
    num: '01',
    tag: 'LEADERSHIP',
    tagSub: 'マネジ・幹部育成',
    title: <>リーダー育成</>,
    tagline: '「指示しないと動かない」「会議で決まらない」「役員と現場が分断」── 機能不全を解くのは、研修だけでも仕組みだけでもありません。体験型の学びと、現場が回り出すまでの伴走を組み合わせて、チームを内側から動かします。',
    features: [
      'DiSC体験型ワークで、相互理解と役割期待を可視化',
      'チームの5つの機能不全フレームで、組織課題を診断',
      '1on1の設計・運用支援（目的・問いの設計・記録）',
      '経営会議・幹部会のファシリテーション（月1〜2回）',
      '管理職向け 半年〜1年の伴走プログラム'
    ],
    price: '研修＋伴走 要相談',
    priceNote: '期間・対象人数・組合せでお見積もり。単発の研修のみのご依頼も承ります。',
    href: 'contact.html',
    sticker: <>「答え」を渡すのではなく、<br/><em>考える場</em>を作ります。</>,
    phTag: 'マネジ研修・経営会議ファシリの場',
    photo: 'assets/co-team.jpg',
    detail: 'service-leadership.html',
    flip: false
  },
  {
    id: 'pillar-ai',
    num: '02',
    tag: 'AI',
    tagSub: 'オマカセAIマナブくん',
    title: <>AI活用支援</>,
    tagline: 'AIを「入れた」で終わらせず、現場で動き続ける状態にします。1ブランド2形態（研修／AI顧問）で、社内のAI推進を伴走します。リスキリング助成金を活用すれば、実質負担8万強／名で受講可能です。',
    features: [
      '各種AI研修（単発・3か月集中：月2回×3か月）',
      '若手・新入社員向けAI活用研修「思考拡張の6日間」── 行動力と発想力を引き出す実践型',
      'ChatGPT／Claude／Gemini／Gamma／Workspace 等を業務へ落とし込み',
      'AI顧問（月次伴走）── 社内AI推進の右腕として常駐',
      'リスキリング助成金 申請設計のサポートあり',
      '満足度 9.0／10（n=59）／9割以上が「日常的にAIを使うように」'
    ],
    price: '研修 385,000円／名・顧問 月額制',
    priceNote: '助成金活用で実質負担 8万強／名（人材開発支援助成金 リスキリング支援コース）。AI顧問は範囲・社員数で個別お見積もり。',
    href: 'contact.html',
    sticker: <>研修だけで終わらせず、<br/><em>動き続ける</em>仕組みに。</>,
    phTag: 'AI研修・AI顧問の現場',
    photo: 'assets/co-ai.jpg',
    detail: 'service-ai.html',
    flip: true,
    links: [
      { label: 'リスキリング研修（AI導入・活用支援）', href: '/reskilling/' },
      { label: '若手社員向けAI活用研修（思考拡張の6日間）', href: 'service-wakate.html' },
      { label: 'AIエージェント入門講座（Claude Code）', href: '/ai-agent/' },
      { label: 'AI顧問・AI伴走パートナー', href: '/ai-advisor/' }
    ]
  },
  {
    id: 'pillar-align',
    num: '03',
    tag: 'ALIGNMENT',
    tagSub: '人事評価制度',
    title: <>評価のしくみづくり</>,
    tagline: '「評価が形骸化」「給与が古い」「等級と実態がずれている」── 等級・賃金・評価（業績／行動）を設計し直し、運用が定着するまで伴走します。AI支援の内部ツールで設計スピードを上げつつ、判断は人で決めます。',
    features: [
      '等級制度（5〜7段階）の設計＋役割定義書',
      '賃金テーブル（基本給・諸手当・賞与・退職金）の再設計',
      '業績評価／行動評価 2軸の評価表とウェイト設計',
      '運用ガイド・評価者研修・1on1運用との連動',
      '導入後 半年〜1年の運用伴走（運用が定着するまで横にいる）'
    ],
    price: '設計＋運用伴走 要相談',
    priceNote: '社員数・既存制度の有無・対象範囲によって個別お見積もり。設計フェーズと運用伴走フェーズを分けて契約可能。',
    href: 'contact.html',
    sticker: <>制度を「作って終わり」にしません。<br/><em>運用が回るまで</em>横にいます。</>,
    phTag: '人事評価設計セッション',
    photo: 'assets/co-align.jpg',
    detail: 'service-hyoka.html',
    flip: false
  }
];

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 · 3本柱の詳細</Eyebrow>
        <h2>「チーム」を動かす、<br/>3つの仕組み。</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>
            {p.links && (
              <div style={{display:'flex', flexWrap:'wrap', gap:'10px 20px', margin:'2px 0 18px'}}>
                {p.links.map((l, i) => (
                  <a key={i} href={l.href} style={{fontFamily:'var(--font-mono)', fontSize:12.5, letterSpacing:'.03em', color:'var(--accent)', fontWeight:600, borderBottom:'1px solid rgba(230,126,34,.45)', paddingBottom:2, display:'inline-flex', alignItems:'center', gap:5}}>
                    {l.label} <Arrow/>
                  </a>
                ))}
              </div>
            )}
            <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.detail}>このサービスの詳細へ <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: 'LEADERSHIP · マネジ・幹部育成',
    name: 'リーダー育成',
    one: 'DiSC・チームの5つの機能不全・1on1設計・経営会議ファシリを組み合わせた、ファシリテーション型のマネジ・幹部育成支援。',
    price: <>研修＋伴走 <strong>要相談</strong></>,
    href: 'service-leadership.html'
  },
  {
    num: '02',
    role: 'AI · オマカセAIマナブくん',
    name: 'AI活用支援',
    one: 'ChatGPT・Claude等を業務に落とし込む「各種AI研修」と、月次で人事部の伴走をする「AI顧問」。1ブランド2形態。',
    price: <>研修 <strong>385,000円／名</strong> / 顧問 月額制</>,
    href: 'service-ai.html'
  },
  {
    num: '03',
    role: 'ALIGNMENT · 人事評価制度',
    name: '評価のしくみづくり',
    one: '等級・賃金・評価（業績／行動）を設計し直し、運用が定着するまで伴走。AI支援の内部ツールで設計スピードを上げつつ、判断は人で。',
    price: <>設計＋運用伴走 <strong>要相談</strong></>,
    href: 'service-hyoka.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>LEADERSHIP / AI / ALIGNMENT ──<br/>「チーム」を動かす3本柱。</h2>
        <p className="lead" style={{marginTop:16, maxWidth:'68ch'}}>
          すべての会社に同じものを勧めません。
          <strong>「いま一番痛みのある一本」</strong>から始められます。
          迷う場合は、下のフローチャートか<a href="contact.html" style={{color:'var(--accent)', textDecoration:'underline'}}>無料相談</a>で一緒に選びます。
        </p>
      </div>
      <div className="smap" style={{gridTemplateColumns:'repeat(auto-fit, minmax(240px, 1fr))'}}>
        {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 ServiceCrossLink = () => (
  <section style={{padding:'80px 0', background:'var(--paper-2)'}} data-screen-label="02 Cross Link">
    <div className="container">
      <div className="section-head" style={{marginBottom:36, maxWidth:'60ch'}}>
        <Eyebrow>BACKED BY PRACTICE · 実務に裏打ちされた助言</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'}}>約80社の実務</em>を見続けている社労士法人。</h2>
        <p className="lead" style={{marginTop:16, maxWidth:'62ch'}}>
          コンサル単独でもなく、士業単独でもない。<strong>「実務感覚を持ったまま、戦略と育成と評価を語れる」</strong>のが、私たちの立ち位置です。
          手続き・助成金・freee運用・規程整備のご依頼は、隣の社労士法人で。
        </p>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(240px, 1fr))', gap:20}}>
        {[
          { n:'01', t:'労務手続き・給与計算', d:'入退社・社保・労災・給与計算。約80社の運用を見続けてきた社労士法人が日常運用を担当します。' },
          { n:'02', t:'助成金申請代行', d:'累計6億円超の申請実績。育成・評価・採用と一体で設計するから、申請の動線が自然です。' },
          { n:'03', t:'freee人事労務 導入・運用', d:'freee認定アドバイザー資格保持。研修＋AI顧問の動きとの相性も良いです。' },
          { n:'04', t:'就業規則・諸規程', d:'評価制度・育成方針との整合性まで取れるのが、二法人体制の強み。' },
          { n:'05', t:'労務トラブル対応', d:'問題社員対応・トラブル仲裁。経営判断のサポートまで含めて対応します。' },
          { n:'06', t:'法改正アラート', d:'施行日・対応事項を月次で提供。育成・評価制度の見直しタイミングと連動。' }
        ].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>株式会社と社労士法人は、別契約・別請求</h4>
        <p>
          研修・AI顧問・人事評価制度は<strong>株式会社労務ニュース</strong>と、労務手続き・助成金・freee運用・規程は<strong>社会保険労務士法人 労務ニュース</strong>とご契約いただきます。
          倉田諒が両社に携わっている（株式会社の代表取締役／社労士法人の執行役員）ため、契約は別でも、対応は一貫しています。
        </p>
        <div style={{marginTop:14}}>
          <a className="btn btn--ghost btn--sm" href="../index.html">社労士法人サイトを見る <Arrow/></a>
        </div>
      </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-leadership.html">
              <div className="rec">RECOMMEND</div>
              <div className="nm">リーダー育成</div>
              <div className="pr">研修＋伴走 要相談</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. AIの活用は、社内で進んでいますか？</h3>

        <div className="flowchart__branches">
          <div className="flowchart__branch">
            <div className="flowchart__label">No — 入れたけど止まっている／詳しい人がいない</div>
            <a className="flowchart__answer" href="service-ai.html">
              <div className="rec">RECOMMEND</div>
              <div className="nm">AI活用支援</div>
              <div className="pr">研修 385,000円／名・顧問 月額制</div>
            </a>
          </div>
          <div className="flowchart__branch">
            <div className="flowchart__label">Yes — AIは現場で動いている</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}}>Q3. 評価制度は、機能していますか？（給与・等級と実態がそろっている状態）</h3>

        <div className="flowchart__branches">
          <div className="flowchart__branch">
            <div className="flowchart__label">No — 形骸化している／給与が古い／等級と実態がずれている</div>
            <a className="flowchart__answer" href="service-hyoka.html">
              <div className="rec">RECOMMEND</div>
              <div className="nm">評価のしくみづくり</div>
              <div className="pr">設計＋運用伴走 要相談</div>
            </a>
          </div>
          <div className="flowchart__branch">
            <div className="flowchart__label">Yes — 評価制度は回っている</div>
            <a className="flowchart__answer" href="contact.html">
              <div className="rec">CONSULT</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'}}>無料相談（60分）</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'}}>60分の無料相談</em>から。
      </h2>
      <p style={{fontSize:16, lineHeight:2, color:'rgba(255,255,255,.85)', marginBottom:28}}>
        「何を頼めばいいか分からない」状態のままで大丈夫です。
        現状を伺いながら、3本柱のどこから手を付けるべきか（または別テーマか）を正直にお伝えします。
      </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:05057843599" style={{color:'#fff', borderColor:'rgba(255,255,255,.4)'}}>
          050-5784-3599
        </a>
      </div>
    </div>
  </section>
);

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