/* service-leadership.html — リーダー育成（幹部・管理職の育成支援） */

const LdWhy = () => (
  <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-team.jpg" alt="" style={{width:'100%', aspectRatio:'4/3', objectFit:'cover', borderRadius:'var(--radius)', marginTop:28, display:'block'}}/>
      </div>
      <div className="prose">
        <p>
          「指示しないと動かない」「会議で何も決まらない」「役員と現場が分断している」——
          多くの中小企業が抱えるこの“詰まり”は、知識を詰め込む研修だけでも、制度を入れるだけでも解けません。
        </p>
        <p>
          変わるのは、<strong>幹部・管理職が「自分で考えて動かせる」状態になったとき</strong>です。
          私たちは、体験から学ぶワークと、現場が回り出すまでの伴走を組み合わせ、チームを内側から動かします。
        </p>
        <p>
          「答え」を渡すのではなく、<strong>考える場をつくる</strong>。
          経営会議に入って“いうべきことをいう”——顧問ファシリテーターの立ち位置です。
        </p>
      </div>
    </div>
  </section>
);

const LD_SCOPE = [
  { t: 'DiSC 体験型ワーク', d: '一人ひとりの行動スタイルを可視化し、相互理解と「役割への期待」をすり合わせます。' },
  { t: 'チームの5つの機能不全', d: 'レンシオーニの framework で、いま組織のどこが詰まっているかを言葉にします。' },
  { t: '1on1 の設計・運用支援', d: '目的・問いの立て方・記録の残し方まで設計。形だけの1on1にしません。' },
  { t: '経営会議・幹部会のファシリテーション', d: '月1〜2回、第三者として会議に入り、論点整理と意思決定を前に進めます。' },
  { t: '管理職向け 伴走プログラム', d: '半年〜1年。研修で終わらせず、現場で実践→振り返りのサイクルを回します。' },
  { t: '社員総会・合宿の設計', d: 'ビジョン・価値観の浸透の場づくり。一過性のイベントで終わらせない設計を。' }
];

const LdScope = () => (
  <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}}>
        {LD_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 LdPrice = () => (
  <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>単発研修（半日〜1日）</strong>から、<strong>半年〜1年の伴走</strong>まで。
          まずは「いま一番詰まっているところ」を一緒に見つけるところから始めます。
        </p>
      </div>
      <div className="callout callout--info">
        <h4>進め方の目安</h4>
        <p>
          単発研修は内容確定から最短2〜3週間で実施可能。継続伴走は、初回の現状把握（無料相談＋ヒアリング）のうえ、
          3か月単位で区切って契約します。「合わなければ続けない」前提なので、いきなり長期契約は求めません。
        </p>
      </div>
    </div>
  </section>
);

const LdSteps = () => (
  <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">機能不全の所在を見立て、研修・ファシリ・1on1のどれをどう組むかを設計します。</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 LdCross = () => (
  <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-ai.html"><div className="role">AI</div><div className="nm">AI活用支援</div><div className="one">育てた幹部が、AIで現場を効率化する。研修＋AI顧問で実装まで。</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-hyoka.html"><div className="role">ALIGNMENT</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="../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 LdCTA = () => (
  <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, { LdWhy, LdScope, LdPrice, LdSteps, LdCross, LdCTA });
