/* Section 4 — Services (株式会社労務ニュース版・3本柱) */

const PILLARS = [
  {
    num: '01',
    role: 'LEADERSHIP · リーダー育成',
    name: <>リーダー育成</>,
    sub: '管理職・幹部が、自分で動かせる組織に',
    one: '「指示しないと動かない」「会議で決まらない」「役員と現場が分断」── 機能不全を解くのは、研修だけでも仕組みだけでもない。体験型の学びと、現場が回り出すまでの伴走で、チームを内側から動かす。',
    means: 'オマカセファシリくん（マネジ・幹部育成支援）／DiSC・チームの5つの機能不全・1on1設計／経営会議・幹部会のファシリテーション',
    price: '研修＋伴走 要相談',
    href: 'service-leadership.html'
  },
  {
    num: '02',
    role: 'AI · AI活用支援',
    name: <>AI活用支援</>,
    sub: '使える人を増やし、止まらない仕組みに',
    one: '「AIを入れたが、定着しない」「人事部だけが手作業」── 業務に落とし込む研修と、月次で社内AI推進を伴走する顧問で、AIを「使える人事部」を作る。',
    means: 'オマカセAIマナブくん ── 各種AI研修（単発・3か月集中）／AI顧問（月次伴走）',
    price: '研修 385,000円／名・顧問 月額制',
    href: 'service-ai.html',
    twoModes: [
      { tag: '研修', label: '各種AI研修', note: '単発・3か月集中（月2回×3か月）' },
      { tag: '顧問', label: 'AI顧問', note: '月次伴走・社内AI推進の右腕' }
    ]
  },
  {
    num: '03',
    role: 'ALIGNMENT · 評価のしくみづくり',
    name: <>評価のしくみづくり</>,
    sub: '評価で、ぶれない判断軸をつくる',
    one: '「評価が形骸化」「給与が古い」「等級と実態がずれている」── 等級・賃金・評価（業績／行動）を設計し直し、運用が定着するまで伴走。AI支援の内部ツールで設計スピードを上げつつ、判断は人で決める。',
    means: '人事評価制度の設計＋運用伴走／等級・賃金テーブル／業績評価・行動評価',
    price: '設計＋運用伴走 要相談',
    href: 'service-hyoka.html'
  }
];

const Services = () => (
  <section className="services" id="services" data-screen-label="04 Services" style={{padding:'96px 0', background:'var(--paper)'}}>
    <div className="container">
      <div className="section-head" style={{marginBottom:48}}>
        <Eyebrow>THREE PILLARS · 強みの3本柱</Eyebrow>
        <h2>人事のこと、まるごと相談できる。<br/>その中でも、特に強いのは、「チーム」を動かす3本。</h2>
        <p className="lead" style={{marginTop:12, maxWidth:'62ch'}}>
          採用・定着・組織・給与体系 ── 人事のご相談はぜんぶ受けます。隣で社労士法人を並列運営している分、実務の地に足のついたノウハウが背景にあります。<br/>
          その上で、特にご依頼が多いのは「リーダー育成」「AI活用支援」「評価のしくみづくり」── チームを動かす3つの柱。
        </p>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(240px, 1fr))', gap:24}}>
        {PILLARS.map(p => (
          <a key={p.num} href={p.href} style={{
            display:'flex',
            flexDirection:'column',
            background:'#fff',
            border:'1px solid var(--paper-line)',
            borderRadius:'var(--radius)',
            padding:'32px 28px 28px',
            textDecoration:'none',
            color:'inherit',
            transition:'transform .2s, box-shadow .2s, border-color .2s',
            position:'relative'
          }}
          onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-4px)';e.currentTarget.style.boxShadow='0 12px 28px -12px rgba(20,32,60,.15)';e.currentTarget.style.borderColor='var(--navy-400)';}}
          onMouseLeave={e=>{e.currentTarget.style.transform='';e.currentTarget.style.boxShadow='';e.currentTarget.style.borderColor='var(--paper-line)';}}
          >
            <div style={{fontFamily:'var(--font-mono)', fontSize:32, fontWeight:500, color:'var(--accent)', lineHeight:1, marginBottom:18}}>{p.num}</div>
            <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.14em', color:'var(--navy-700)', marginBottom:14, fontWeight:600}}>{p.role}</div>
            <h3 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:20, color:'var(--ink-900)', margin:'0 0 8px', lineHeight:1.5, letterSpacing:'.02em', minHeight:'2.6em'}}>{p.name}</h3>
            <div style={{fontSize:13, color:'var(--accent)', fontWeight:600, letterSpacing:'.04em', marginBottom:16}}>— {p.sub}</div>
            <p style={{fontSize:13.5, lineHeight:1.9, color:'var(--ink-700)', margin:'0 0 14px'}}>{p.one}</p>
            {p.means && (
              <div style={{padding:'12px 14px', background:'var(--paper-2)', border:'1px dashed var(--paper-line)', borderRadius:8, marginBottom:16, flex:1}}>
                <div style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.12em', color:'var(--navy-700)', fontWeight:700, marginBottom:6}}>主な手段</div>
                <div style={{fontSize:12, lineHeight:1.75, color:'var(--ink-700)'}}>{p.means}</div>
              </div>
            )}
            {p.twoModes && (
              <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))', gap:8, marginBottom:16}}>
                {p.twoModes.map(m => (
                  <div key={m.tag} style={{padding:'10px 12px', background:'var(--paper-2)', border:'1px solid var(--paper-line)', borderRadius:8}}>
                    <div style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.12em', color:'var(--accent)', fontWeight:700, marginBottom:4}}>{m.tag}</div>
                    <div style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:13, color:'var(--ink-900)', lineHeight:1.4, marginBottom:3}}>{m.label}</div>
                    <div style={{fontSize:11, lineHeight:1.5, color:'var(--ink-500)'}}>{m.note}</div>
                  </div>
                ))}
              </div>
            )}
            <div style={{borderTop:'1px dashed var(--paper-line)', paddingTop:14, display:'flex', justifyContent:'space-between', alignItems:'center', gap:8}}>
              <div style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:13.5, color:'var(--navy-700)'}}>{p.price}</div>
              <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.08em', color:'var(--accent)', fontWeight:600, whiteSpace:'nowrap'}}>詳しく見る <Arrow/></div>
            </div>
          </a>
        ))}
      </div>

      <div style={{marginTop:56, padding:'28px 32px', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', background:'var(--paper-2)', display:'flex', alignItems:'center', gap:20, flexWrap:'wrap'}}>
        <div style={{flex:'1 1 280px'}}>
          <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.14em', color:'var(--navy-700)'}}>CROSS LINK</div>
          <div style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:20, lineHeight:1.55, marginTop:6}}>労務手続き・助成金・freee運用・規程整備は、隣の社労士法人で。</div>
          <div style={{fontSize:14, color:'var(--ink-500)', marginTop:6}}>株式会社（戦略・育成・AI・評価）と社労士法人（実務）の二法人体制。約80社の現場で蓄えたノウハウが、株式会社の伴走の地盤になっています。</div>
        </div>
        <a className="btn btn--navy" href="../index.html">社労士法人サイトへ <Arrow/></a>
      </div>
    </div>
  </section>
);

window.Services = Services;
