/* service-hyoka.html — 評価のしくみづくり（人事評価制度の設計・運用） */

const HyWhy = () => (
  <section style={{padding:'80px 0 56px', background:'var(--paper)'}} data-screen-label="01 Why">
    <div className="container" style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(300px, 1fr))', gap:64, alignItems:'start'}}>
      <div>
        <Eyebrow>WHY · なぜ評価制度か</Eyebrow>
        <h2 style={{marginTop:16}}>評価が形骸化すると、<br/>頑張る人から辞めていく。</h2>
        <img src="assets/co-align.jpg" alt="" style={{width:'100%', aspectRatio:'4/3', objectFit:'cover', borderRadius:'var(--radius)', marginTop:28, display:'block'}}/>
      </div>
      <div className="prose">
        <p>
          「評価が形だけになっている」「給与テーブルが古い」「等級と実態がずれている」——
          こうした状態を放置すると、<strong>一番貢献している社員ほど“報われない”と感じ、静かに離れていきます</strong>。
        </p>
        <p>
          私たちは、等級・賃金・評価（業績／行動）を設計し直し、<strong>運用が定着するまで伴走</strong>します。
          AI支援の内部ツールで設計スピードは上げつつ、<strong>判断は必ず人で決める</strong>。
          会社の価値観を、評価という形で全員に伝わる状態にします。
        </p>
        <p>
          「作って終わり」の制度ほど、現場で使われません。運用が回るまで横にいるのが、私たちのやり方です。
        </p>
      </div>
    </div>
  </section>
);

const HY_SCOPE = [
  { t: '等級制度の設計', d: '5〜7段階の等級と、各等級の「期待役割」を言葉に。役割定義書まで作成します。' },
  { t: '賃金テーブルの再設計', d: '基本給・諸手当・賞与・退職金を、市場相場と自社の体力に合わせて再構築。' },
  { t: '評価表（2軸）の設計', d: '業績評価と行動評価、それぞれのウェイトと評価項目を、自社の価値観から設計。' },
  { t: '評価者研修', d: '評価がブレない・部下が納得する評価面談のやり方を、評価者に身につけてもらう。' },
  { t: '1on1・目標管理との連動', d: '評価を「年1回の儀式」にしない。日常の1on1・目標設定とつなげて運用します。' },
  { t: '導入後の運用伴走', d: '半年〜1年。初回運用に同席し、現場で回り、定着するまで支えます。' }
];

const HyScope = () => (
  <section style={{padding:'64px 0', background:'var(--paper-2)'}} data-screen-label="02 Scope">
    <div className="container">
      <div className="section-head" style={{marginBottom:32}}>
        <Eyebrow>SCOPE · できること</Eyebrow>
        <h2>等級・賃金・評価を、<br/>ひとつながりで設計する。</h2>
        <p className="lead" style={{marginTop:12, maxWidth:'60ch'}}>
          設計フェーズと運用伴走フェーズを分けて契約できます。「まず設計だけ」「運用から手伝ってほしい」、どちらも可能です。
        </p>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(240px, 1fr))', gap:20}}>
        {HY_SCOPE.map((s, i) => (
          <div key={i} style={{background:'#fff', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', padding:'26px 24px'}}>
            <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.16em', color:'var(--navy-700)', marginBottom:10}}>0{i+1}</div>
            <h4 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:16, color:'var(--ink-900)', marginBottom:10, letterSpacing:'.04em', lineHeight:1.5}}>{s.t}</h4>
            <p style={{fontSize:13, lineHeight:1.9, color:'var(--ink-700)', margin:0}}>{s.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const HyPrice = () => (
  <section style={{padding:'72px 0', background:'var(--paper)'}} data-screen-label="03 Price">
    <div className="container" style={{maxWidth:760, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:20}}>
        <Eyebrow>PRICE · 料金</Eyebrow>
        <h2 style={{display:'flex', alignItems:'baseline', flexWrap:'wrap', gap:'12px'}}>
          <span>設計＋運用伴走</span>
          <span style={{fontFamily:'var(--font-serif)', fontWeight:900, fontSize:'1.5em', color:'var(--accent)', lineHeight:1}}>要相談</span>
        </h2>
        <p className="lead" style={{marginTop:12, maxWidth:'62ch'}}>
          社員数・既存制度の有無・対象範囲によって個別にお見積もりします。
          <strong>設計フェーズ</strong>と<strong>運用伴走フェーズ</strong>を分けて契約できるので、予算に合わせて段階的に進められます。
        </p>
      </div>
      <div className="callout callout--info">
        <h4>AIで設計を速く、判断は人で</h4>
        <p>
          等級・賃金・評価表のたたき台づくりにはAI支援の内部ツールを使い、設計スピードと比較検討の幅を上げます。
          ただし<strong>「どう評価する会社にするか」という判断は、必ず経営者と一緒に人で決めます</strong>。AIに会社の価値観は決めさせません。
        </p>
      </div>
    </div>
  </section>
);

const HySteps = () => (
  <section style={{padding:'72px 0', background:'var(--paper-2)'}} data-screen-label="04 Steps">
    <div className="container">
      <div className="section-head" style={{marginBottom:32}}>
        <Eyebrow>FLOW · 進め方</Eyebrow>
        <h2>設計して終わり、にしない。</h2>
      </div>
      <div className="steps">
        <div className="step"><div className="step__n">1</div><div className="step__t">無料相談（30分）</div><div className="step__b">いまの評価・給与の状態と、社内の不満の所在を伺います。</div></div>
        <div className="step"><div className="step__n">2</div><div className="step__t">現状診断・方針決め</div><div className="step__b">既存制度・賃金実態を棚卸しし、どこから設計し直すかの方針を合意します。</div></div>
        <div className="step"><div className="step__n">3</div><div className="step__t">等級・賃金・評価の設計</div><div className="step__b">役割定義・賃金テーブル・評価表を、経営者と一緒に作り込みます。</div></div>
        <div className="step"><div className="step__n">4</div><div className="step__t">運用・定着伴走</div><div className="step__b">評価者研修・初回運用への同席。回り、定着するまで横で支えます。</div></div>
      </div>
    </div>
  </section>
);

const HyCross = () => (
  <section style={{padding:'64px 0', background:'var(--paper)'}} data-screen-label="05 Related">
    <div className="container">
      <div className="section-head" style={{marginBottom:24}}>
        <Eyebrow>RELATED · あわせて見られています</Eyebrow>
        <h2>評価を、現場で機能させるなら。</h2>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(240px, 1fr))', gap:16}}>
        <a className="smap__card" href="service-leadership.html"><div className="role">LEADERSHIP</div><div className="nm">リーダー育成</div><div className="one">評価を運用するのは管理職。評価者が機能してこそ、制度は活きる。</div><div style={{marginTop:14, fontFamily:'var(--font-mono)', fontSize:12, color:'var(--accent)', fontWeight:600}}>詳しく見る <Arrow/></div></a>
        <a className="smap__card" href="service-ai.html"><div className="role">AI</div><div className="nm">AI活用支援</div><div className="one">生産性が上がったぶんを、評価と報酬に正しく反映する設計を。</div><div style={{marginTop:14, fontFamily:'var(--font-mono)', fontSize:12, color:'var(--accent)', fontWeight:600}}>詳しく見る <Arrow/></div></a>
        <a className="smap__card" href="../index.html"><div className="role">社労士法人</div><div className="nm">就業規則・規程との整合</div><div className="one">評価・賃金制度と就業規則の整合は、社労士法人が引き取ります。</div><div style={{marginTop:14, fontFamily:'var(--font-mono)', fontSize:12, color:'var(--accent)', fontWeight:600}}>サイトを見る <Arrow/></div></a>
      </div>
    </div>
  </section>
);

const HyCTA = () => (
  <section style={{padding:'72px 0', background:'linear-gradient(180deg, var(--navy-800), var(--navy-900))', color:'#fff'}} data-screen-label="06 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'}}>60分の無料相談</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="contact.html">無料相談を予約する <Arrow/></a>
        <a className="btn btn--ghost btn--lg" href="service.html" style={{color:'#fff', borderColor:'rgba(255,255,255,.4)'}}>サービス一覧へ</a>
      </div>
    </div>
  </section>
);

Object.assign(window, { HyWhy, HyScope, HyPrice, HySteps, HyCross, HyCTA });
