/* group.html — 労務ニュースグループの全体像。
   割れていた会社概要（/about.html と /co/about.html）を1枚にまとめる受け皿。
   理念の文言は 02_自社/02_自社向け/経営管理/理念/ の4ファイル（Single Source of Truth）どおり。 */

/* ---- 01 グループとは ---- */
const GrIntro = () => (
  <section style={{padding:'72px 0', background:'var(--paper)'}} id="about" data-screen-label="01 グループとは">
    <div className="container" style={{maxWidth:900, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:26}}>
        <Eyebrow>GROUP · 労務ニュースグループ</Eyebrow>
        <h2>ひとつのミッションを、<br/>二つの法人で果たしています。</h2>
      </div>
      <div className="prose">
        <p>
          労務ニュースグループは、<strong>株式会社労務ニュース</strong>と<strong>社会保険労務士法人 労務ニュース</strong>で構成しています。
          人事労務のご相談はグループでまとめて受け、<strong>ご相談内容に応じて、それぞれの法人がサービスの提供・契約を担当します</strong>。
        </p>
        <p>
          制度をつくる話と、毎月の実務を回す話は、本来つながっています。
          けれども多くの場合、コンサルティング会社は現場の実務を持たず、社労士事務所は制度を語りません。
          両方を同じグループの中に持っているのが、私たちの形です。
        </p>
      </div>
    </div>
  </section>
);

/* ---- 02 役割分担 ---- */
const GR_SPLIT = [
  ['AI活用の導入支援', 'AI研修、AI活用診断、人事部へのAI導入顧問', '株式会社'],
  ['人事評価', '等級・評価・昇給の設計から、運用が定着するまでの伴走', '株式会社'],
  ['幹部育成・会議運営', '管理職の育成と、経営会議の立て直し（顧問ファシリテーター）', '株式会社'],
  ['採用', '採用のコンセプト設計と、求人票づくり', '株式会社'],
  ['給与計算・社会保険手続き', '毎月の給与計算、入退社・社保の手続き、社員からの問い合わせ対応', '社会保険労務士法人'],
  ['助成金', '使える助成金の見極めから、申請の設計と代行まで', '社会保険労務士法人'],
  ['就業規則・各種規程', '規程の作成・改訂と、労働基準監督署への届出', '社会保険労務士法人'],
  ['労務のDX化', 'freee人事労務の導入から、日々の運用と法改正対応まで', '社会保険労務士法人']
];

const GrSplit = () => (
  <section style={{padding:'72px 0', background:'var(--paper-2)'}} id="split" data-screen-label="02 役割分担">
    <div className="container" style={{maxWidth:900, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:24}}>
        <Eyebrow>WHO DOES WHAT · 担当</Eyebrow>
        <h2>どちらが、何を担当するか。</h2>
        <p className="lead" style={{marginTop:12}}>
          窓口はひとつです。そのうえで、契約と実務の主体はこう分かれています。
        </p>
      </div>
      <div className="corptbl">
        <table>
          <thead>
            <tr><th style={{width:'27%'}}>領域</th><th>内容</th><th style={{width:'25%'}}>提供・契約主体</th></tr>
          </thead>
          <tbody>
            {GR_SPLIT.map((r, i) => (
              <tr key={i}>
                <th>{r[0]}</th>
                <td>{r[1]}</td>
                <td style={{whiteSpace:'nowrap'}}>{r[2]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="callout callout--info" style={{marginTop:26}}>
        <p style={{margin:0}}>
          労働社会保険諸法令に基づく申請書等の作成・提出代行・事務代理、助成金の申請代行、就業規則の作成・届出は、
          <strong>社会保険労務士法人 労務ニュース</strong>が承ります。株式会社労務ニュースはこれらを行いません。
        </p>
      </div>
    </div>
  </section>
);

/* ---- 03 理念 ---- */
const GrPhilosophy = () => (
  <section style={{padding:'72px 0', background:'var(--paper)'}} id="philosophy" data-screen-label="03 理念">
    <div className="container" style={{maxWidth:900, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:26}}>
        <Eyebrow>PHILOSOPHY · 私たちの考え</Eyebrow>
        <h2>経営者のストレスを減らし、<br/>企業の成長を後押しする。</h2>
      </div>
      <div className="prose" style={{marginBottom:30}}>
        <p>
          人を雇うと面倒が増えます。手続きの煩わしさと、人と向き合う煩わしさ。この両方が経営者のストレスの正体です。
          私たちはそこを引き受け、そのうえで、経営者の実現したい未来に向けた攻めの支援もします。
        </p>
        <p>
          目指しているのは、<strong>経営者が「人を雇うって、いいことだな」と思える状態</strong>をつくること。
          雇用が生まれなければ社会は回りません。人を雇って、育てて、一緒に成長する。その循環を止めないための仕事です。
        </p>
      </div>
      <h3 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:18, color:'var(--ink-900)', margin:'0 0 16px', letterSpacing:'.03em'}}>顧客への3つの約束</h3>
      <div className="mw0" style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(240px, 1fr))', gap:16}}>
        {[
          ['01', '選択肢を出して、判断できる状態をつくる', 'いいことも悪いことも全部出します。都合のいい話だけでなく、リスクもデメリットも見せる。そのうえで、選ぶのは社長です。'],
          ['02', '面倒ごとを引き受けて、経営に集中させる', '給与計算・手続き・労務相談・社員対応を引き受けます。とくに大きいのは、社員対応のストレスを引き取ることです。'],
          ['03', '変化を届ける。現状維持はしない', '「今のままで大丈夫ですよ」は、多くの場合、変える面倒を避けているだけです。変えるべき所は、手順とリスクまで添えて申し上げます。']
        ].map((c, i) => (
          <div key={i} style={{background:'#fff', border:'1px solid var(--paper-line)', borderTop:'3px solid var(--accent)', borderRadius:'var(--radius)', padding:'22px 22px'}}>
            <div style={{fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.18em', color:'var(--accent)', fontWeight:700, marginBottom:10}}>{c[0]}</div>
            <h4 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:15.5, lineHeight:1.6, color:'var(--ink-900)', margin:'0 0 10px'}}>{c[1]}</h4>
            <p style={{fontSize:13, lineHeight:1.9, color:'var(--ink-700)', margin:0}}>{c[2]}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---- 04 2法人の概要 ---- */
const GrCorp = () => (
  <section style={{padding:'72px 0', background:'var(--paper-2)'}} id="corporate" data-screen-label="04 法人概要">
    <div className="container" style={{maxWidth:900, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:24}}>
        <Eyebrow>CORPORATE · 法人概要</Eyebrow>
        <h2>2法人の概要。</h2>
      </div>
      <div className="corptbl">
        <table>
          <thead>
            <tr><th style={{width:'22%'}}>項目</th><th>株式会社 労務ニュース</th><th>社会保険労務士法人 労務ニュース</th></tr>
          </thead>
          <tbody>
            <tr><th>商号</th><td>株式会社労務ニュース</td><td>社会保険労務士法人 労務ニュース</td></tr>
            <tr><th>代表者</th><td>代表取締役 倉田 諒</td><td>代表社員 山本 義幸（社会保険労務士）</td></tr>
            <tr><th>所在地</th><td colSpan={2}>〒262-0018 千葉県千葉市花見川区畑町759 フォレストビル202</td></tr>
            <tr><th>電話</th><td>050-5784-3599</td><td>050-5784-3633</td></tr>
            <tr><th>事業内容</th>
              <td>人事労務全般のコンサルティング（AI活用の導入支援・人事評価・幹部育成・会議運営・採用のコンセプト設計）</td>
              <td>社会保険労務士業務／労務顧問／給与計算・社会保険手続き／助成金申請代行／就業規則・各種規程の作成／freee人事労務の導入・運用支援</td>
            </tr>
            <tr><th>対応エリア</th><td colSpan={2}>全国オンライン対応（千葉県内は対面・訪問も可）</td></tr>
          </tbody>
        </table>
      </div>
      <p style={{fontSize:12.5, lineHeight:1.95, color:'var(--ink-500)', marginTop:16}}>
        「労務ニュースグループ」は2法人の総称で、法人格ではありません。ご契約はいずれかの法人と結んでいただきます。
      </p>
    </div>
  </section>
);

/* ---- 05 代表・体制 ---- */
const GrLeaders = () => (
  <section style={{padding:'72px 0', background:'var(--paper)'}} id="leaders" data-screen-label="05 代表・体制">
    <div className="container" style={{maxWidth:900, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:24}}>
        <Eyebrow>LEADERSHIP · 体制</Eyebrow>
        <h2>グループを動かしている人。</h2>
      </div>
      <div className="mw0" style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))', gap:18}}>
        {[
          ['倉田 諒', 'KURATA RYO',
            '労務ニュースグループ 代表 ／ 社会保険労務士法人 労務ニュース 執行役員 ／ 株式会社労務ニュース 代表取締役',
            '社員10名の会社を経営する当事者として、社長の「人の問題」に向き合っています。顧問ファシリテーターとして経営会議に入り、育成・AI・人事評価を担当。経営心理士／組織分析アドバイザー®／Everything DiSC® 認定資格者。'],
          ['山本 義幸', 'YAMAMOTO YOSHIYUKI',
            '社会保険労務士法人 労務ニュース 代表社員（社会保険労務士）',
            '社会保険労務士として、労務顧問・給与計算・社会保険手続き・助成金申請の実務を統括。とくに助成金は申請の設計から代行まで一貫して担当し、累計獲得額6億円超の実績を支えています。']
        ].map((m, i) => (
          <div key={i} style={{background:'#fff', border:'1px solid var(--paper-line)', borderTop:'3px solid var(--accent)', borderRadius:'var(--radius)', padding:'24px 24px'}}>
            <div style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:21, color:'var(--ink-900)', letterSpacing:'.06em'}}>{m[0]}</div>
            <div style={{fontFamily:'var(--font-mono)', fontSize:10.5, letterSpacing:'.16em', color:'var(--ink-500)', margin:'4px 0 12px'}}>{m[1]}</div>
            <div style={{fontSize:12, lineHeight:1.85, color:'var(--accent)', fontWeight:700, marginBottom:12, paddingBottom:12, borderBottom:'1px dashed var(--paper-line)'}}>{m[2]}</div>
            <p style={{fontSize:13, lineHeight:1.9, color:'var(--ink-700)', margin:0}}>{m[3]}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---- 06 数字 ---- */
const GrNumbers = () => (
  <section style={{padding:'64px 0', background:'var(--navy-800)', color:'#fff'}} data-screen-label="06 数字">
    <div className="container" style={{maxWidth:900, margin:'0 auto'}}>
      <div style={{marginBottom:22}}>
        <Eyebrow style={{color:'var(--accent)'}}>BY THE NUMBERS</Eyebrow>
        <h2 style={{color:'#fff', fontFamily:'var(--font-serif)', fontWeight:700, fontSize:'clamp(21px,3vw,28px)', margin:'10px 0 0', letterSpacing:'.03em'}}>数字で見る、労務ニュース。</h2>
      </div>
      <div className="mw0" style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(150px, 1fr))', gap:14}}>
        {[['約80社', '顧問先'], ['6億円+', '助成金 累計獲得額'], ['2020年〜', '千葉から中小企業を支援'], ['30〜200名', '主なお客様の規模']].map((n, i) => (
          <div key={i} style={{background:'rgba(255,255,255,.06)', border:'1px solid rgba(255,255,255,.14)', borderRadius:'var(--radius)', padding:'20px 18px'}}>
            <div style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:23, letterSpacing:'.02em'}}>{n[0]}</div>
            <div style={{fontSize:12, color:'rgba(255,255,255,.7)', marginTop:6, lineHeight:1.7}}>{n[1]}</div>
          </div>
        ))}
      </div>
      <p style={{fontSize:12, lineHeight:1.9, color:'rgba(255,255,255,.6)', marginTop:16, marginBottom:0}}>
        顧問先数・助成金の実績は、社会保険労務士法人 労務ニュースの数字です。
      </p>
    </div>
  </section>
);

/* ---- 07 導線 ---- */
const GrLinks = () => (
  <section style={{padding:'72px 0', background:'var(--paper)'}} data-screen-label="07 導線">
    <div className="container" style={{maxWidth:900, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:24}}>
        <Eyebrow>NEXT · 次にご覧いただくページ</Eyebrow>
        <h2>ご相談内容から探す。</h2>
      </div>
      <div className="mw0" style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(250px, 1fr))', gap:16}}>
        {[
          ['労務をまるごと任せたい', 'オマカセロウムくん（給与計算・手続き・社員対応）', 'service-roumu.html', '社会保険労務士法人'],
          ['助成金を取りたい', 'オマカセ助成金申請', 'joseikin.html', '社会保険労務士法人'],
          ['就業規則を整えたい', 'オマカセできない就業規則', 'rules.html', '社会保険労務士法人'],
          ['freeeを使いこなしたい', 'freeeに強い社労士', 'freee.html', '社会保険労務士法人'],
          ['料金を知りたい', '料金・費用の一覧', 'ryokin.html', '社会保険労務士法人'],
          ['AI活用・人事評価・育成', '株式会社労務ニュースのサービス', '/co/', '株式会社']
        ].map((c, i) => (
          <a key={i} href={c[2]} style={{background:'#fff', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', padding:'20px 20px', textDecoration:'none', color:'inherit', display:'flex', flexDirection:'column', gap:8, boxShadow:'0 12px 30px -18px rgba(20,32,60,.26)'}}>
            <span style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:15.5, color:'var(--ink-900)', lineHeight:1.6}}>{c[0]}</span>
            <span style={{fontSize:13, color:'var(--ink-700)', lineHeight:1.8, flexGrow:1}}>{c[1]}</span>
            <span style={{fontFamily:'var(--font-mono)', fontSize:10.5, letterSpacing:'.08em', color:'var(--ink-500)', fontWeight:700}}>{c[3]}</span>
            <span style={{fontSize:12.5, fontWeight:700, color:'var(--accent)'}}>くわしく <Arrow/></span>
          </a>
        ))}
      </div>
    </div>
  </section>
);

/* ---- 08 アクセス ---- */
const GrAccess = () => (
  <section style={{padding:'72px 0', background:'var(--paper-2)'}} id="access" data-screen-label="08 アクセス">
    <div className="container" style={{maxWidth:900, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:20}}>
        <Eyebrow>ACCESS · アクセス</Eyebrow>
        <h2>事務所所在地。</h2>
      </div>
      <div className="prose">
        <p style={{margin:'0 0 8px'}}>〒262-0018 千葉県千葉市花見川区畑町759 フォレストビル202</p>
        <p style={{margin:0, fontSize:13.5, color:'var(--ink-700)'}}>両法人とも同一の所在地です。全国オンライン対応（Zoom／LINE／Chatwork／Slack）。</p>
      </div>
      <a className="btn btn--ghost btn--sm" href="https://maps.app.goo.gl/qRKGsTjV9gA5qxv27" target="_blank" rel="noopener" style={{marginTop:18}}>Google マップで見る <Arrow/></a>
    </div>
  </section>
);

/* ---- 09 CTA ---- */
const GrCTA = () => (
  <section style={{padding:'76px 0', background:'linear-gradient(135deg, var(--navy-800), var(--navy-900))', color:'#fff'}} data-screen-label="09 CTA">
    <div className="container" style={{maxWidth:900, margin:'0 auto', textAlign:'center'}}>
      <h2 style={{color:'#fff', fontFamily:'var(--font-serif)', fontWeight:700, fontSize:'clamp(22px,3vw,30px)', lineHeight:1.5, margin:'0 0 14px', letterSpacing:'.03em'}}>
        人事労務のこと、一度まとめて話してみませんか。
      </h2>
      <p style={{fontSize:15, lineHeight:1.95, color:'rgba(255,255,255,.85)', maxWidth:'56ch', margin:'0 auto 26px'}}>
        どちらの法人が担当するかは、伺ってからこちらでご案内します。まずは困っていることをそのままお話しください。
      </p>
      <div style={{display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap'}}>
        <a className="btn btn--primary btn--lg" href="https://timerex.net/s/ryo.kurata_ada7_dad9/e55e9800" target="_blank" rel="noopener">カレンダーで予約 <Arrow/></a>
        <a className="btn btn--white btn--lg" href="contact.html">メール・フォームで相談 <Arrow/></a>
      </div>
    </div>
  </section>
);

Object.assign(window, { GrIntro, GrSplit, GrPhilosophy, GrCorp, GrLeaders, GrNumbers, GrLinks, GrAccess, GrCTA });