/* about.html — 会社概要 */

const AbMission = () => (
  <section style={{padding:'72px 0', background:'var(--paper)'}} id="message" data-screen-label="01 Mission">
    <div className="container" style={{display:'grid', gridTemplateColumns:'1fr 1.3fr', gap:64, alignItems:'start'}}>
      <div>
        <Eyebrow>MISSION · 私たちの想い</Eyebrow>
        <h2 style={{marginTop:16}}>労務を「ストレス」から「経営のリソース」に。</h2>
      </div>
      <div className="prose">
        <p>
          中小企業の社長が抱えるストレスの正体は、「手続きが大変」ではありません。
          <strong>「いつまでに、何を、どうすればいいのか分からない」</strong>という、判断できない状態そのものです。
        </p>
        <p>
          私たちは、その判断を引き取り、会社が前を向く余白をつくることを仕事にしています。
          手続きの正確さ、助成金の設計力、freeeの運用力、就業規則の設計力——
          ひとつひとつは手段で、目指しているのは「社長と社員が同じ方向を向いて働ける状態」です。
        </p>
        <p style={{marginTop:24, padding:'20px 22px', background:'var(--navy-050)', borderLeft:'3px solid var(--accent)', fontFamily:'var(--font-serif)', fontWeight:700, fontSize:17, color:'var(--ink-900)', lineHeight:1.85}}>
          経営者のストレスを減らし、<br/>企業の成長を後押しする。
        </p>
      </div>
    </div>
  </section>
);

const LEADERS_FULL = [
  {
    role: '執行役員 / 株式会社労務ニュース 代表取締役',
    name: '倉田 諒',
    en: 'KURATA RYO',
    photo: 'assets/kurata.jpg',
    certs: ['経営心理士', '人材定着指導士', 'Everything DiSC® 認定講師', 'freee 認定アドバイザー'],
    msg: '経営者と社員が同じ方向を向き、協力し合える組織づくり——それが私のテーマです。証券会社の営業を経て、生命保険会社で生命保険代理店の立ち上げを支援してきた経験から、「事業をゼロから立ち上げる現場感覚」を労務領域に持ち込みました。社会保険労務士法人では執行役員として日々の顧問対応・人事コンサル・freeeの定着を、株式会社労務ニュースでは代表取締役として会議ファシリテーション代行やAI研修を担当しています。"現場で使える"支援を心がけています。',
    career: [
      ['出身', '千葉県'],
      ['専門', '顧問対応 / 人事コンサル / freee運用設計 / 組織づくり / AI研修'],
      ['資格', '経営心理士 ／ 人材定着指導士 ／ Everything DiSC® 認定講師 ／ freee 認定アドバイザー'],
      ['略歴', '証券会社の営業を経て、生命保険会社で生命保険代理店の立ち上げを支援。2020年より社会保険労務士法人 労務ニュースに参画。社会保険労務士法人では執行役員として顧問対応・人事コンサル・freee運用設計を担当し、株式会社労務ニュースでは代表取締役として会議ファシリテーション代行・AI研修・サービス企画を手がける。'],
      ['発信', 'ブログ『中小企業の労務DX』／note『労務の現場から』']
    ]
  },
  {
    role: '代表社員 / 社会保険労務士',
    name: '山本 義幸',
    en: 'YAMAMOTO YOSHIYUKI',
    photo: 'assets/yamamoto.jpg',
    certs: ['社会保険労務士', '助成金申請一筋 / 累計6億円+'],
    msg: '社労士の仕事は、手続きを代行することではなく、社長の頭から労務の心配事を消すことだと考えています。私は特に助成金申請を通じて、「取れるはずの助成金を、取り切れる形で届ける」ことにこだわってきました。累計6億円超という数字は、その積み重ねです。社員数30〜100名の中小企業こそ、設計の良し悪しで結果が大きく変わる領域。一社一社に、責任を持って伴走します。',
    career: [
      ['出身', '千葉県'],
      ['専門', '助成金申請設計に専念'],
      ['資格', '社会保険労務士'],
      ['略歴', '社労士事務所を経て、2020年に社会保険労務士法人 労務ニュースを設立。助成金申請に特化し、累計6億円超の申請を実績化。'],
      ['役割分担', '日常の労務相談・就業規則・顧問対応は執行役員の倉田が担当。山本は助成金申請の設計と申請実務に専念。']
    ]
  }
];

const AbLeaders = () => (
  <section style={{padding:'64px 0', background:'var(--paper-2)'}} id="leaders" data-screen-label="02 Leaders">
    <div className="container" style={{maxWidth:1040, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:36}}>
        <Eyebrow>LEADERSHIP · 代表 & 執行役員</Eyebrow>
        <h2>この2人が、現場に立っています。</h2>
      </div>
      {LEADERS_FULL.map((p, i) => (
        <div className="profile" key={i}>
          <div>
            <div className="profile__photo">
              {p.photo
                ? <img src={p.photo} alt={p.name} style={{width:'100%',height:'100%',objectFit:'cover'}}/>
                : <Placeholder tag={`PORTRAIT — ${p.name}（撮影予定）`} style={{height:'100%'}}/>}
            </div>
            <div className="profile__cert">
              {p.certs.map((c, j) => <span key={j}>{c}</span>)}
            </div>
          </div>
          <div>
            <div className="profile__role">{p.role}</div>
            <div className="profile__name">{p.name}</div>
            <div className="profile__en">{p.en}</div>
            <p className="profile__msg">{p.msg}</p>
            <div className="profile__career">
              <table>
                <tbody>
                  {p.career.map(([k,v], j) => (
                    <tr key={j}><th>{k}</th><td>{v}</td></tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      ))}
    </div>
  </section>
);

const AbCorp = () => (
  <section style={{padding:'72px 0', background:'var(--paper)'}} id="info" data-screen-label="03 Corp Info">
    <div className="container" style={{maxWidth:900, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:28}}>
        <Eyebrow>COMPANY · 法人情報</Eyebrow>
        <h2>社会保険労務士法人 労務ニュース</h2>
      </div>
      <div className="corptbl">
        <table>
          <tbody>
            <tr><th>法人名</th><td>社会保険労務士法人 労務ニュース<small>関連会社：株式会社 労務ニュース</small></td></tr>
            <tr><th>設立</th><td>2020年（社会保険労務士法人化）</td></tr>
            <tr><th>代表社員</th><td>山本 義幸（社会保険労務士）</td></tr>
            <tr><th>執行役員</th><td>倉田 諒（株式会社 労務ニュース 代表取締役 兼任）</td></tr>
            <tr><th>所在地</th><td>〒262-0018 千葉県千葉市花見川区畑町759 フォレストビル202</td></tr>
            <tr><th>電話</th><td>050-5784-3633<small>平日 9:00–18:00</small></td></tr>
            <tr><th>事業内容</th><td>
              労務顧問（オマカセロウムくん）／<br/>
              助成金申請代行（オマカセ助成金申請）／<br/>
              freee人事労務の導入・運用支援（オマカセfreee導入）／<br/>
              就業規則・諸規程の作成・改訂（オマカセできない就業規則）／<br/>
              労務・組織に関するコンサルティング
            </td></tr>
            <tr><th>顧問先数</th><td>約80社<small>千葉県内を中心に／全国オンライン対応</small></td></tr>
            <tr><th>助成金申請実績</th><td>累計6億円超<small>年間 助成金対象社員数 500名超</small></td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>
);

const AbAccess = () => (
  <section style={{padding:'64px 0', background:'var(--paper-2)'}} id="access" data-screen-label="04 Access">
    <div className="container" style={{maxWidth:900, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:28}}>
        <Eyebrow>ACCESS · 全国オンライン対応</Eyebrow>
        <h2>拠点は千葉、<br/>仕事は全国オンラインで。</h2>
        <p className="lead" style={{marginTop:12, maxWidth:'62ch'}}>
          来社いただく必要はありません。打ち合わせも、日常のやり取りも、すべてオンラインで完結します。
          2020年の法人設立以来、北海道から沖縄まで、全国のお客様に対応してきました。
        </p>
      </div>
      <div style={{background:'#fff', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', padding:32, display:'grid', gridTemplateColumns:'1fr 1fr', gap:32}}>
        <div>
          <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.14em', color:'var(--accent)', fontWeight:600, marginBottom:10}}>ONLINE MEETING</div>
          <h4 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:18, color:'var(--ink-900)', margin:'0 0 10px', letterSpacing:'.04em'}}>打ち合わせ</h4>
          <p style={{fontSize:14, lineHeight:1.95, color:'var(--ink-700)', margin:0}}>
            ZOOM／Google Meet／Microsoft Teams に対応。画面共有で freee の画面や書類を見ながら進められるので、対面よりむしろスムーズです。
          </p>
        </div>
        <div>
          <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.14em', color:'var(--accent)', fontWeight:600, marginBottom:10}}>DAILY COMMUNICATION</div>
          <h4 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:18, color:'var(--ink-900)', margin:'0 0 10px', letterSpacing:'.04em'}}>日常のやり取り</h4>
          <p style={{fontSize:14, lineHeight:1.95, color:'var(--ink-700)', margin:0}}>
            Chatwork／Slack／LINE／メール、いずれも対応。社長や担当者の「ちょっと聞きたい」に、その日のうちに返します。
          </p>
        </div>
        <div>
          <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.14em', color:'var(--accent)', fontWeight:600, marginBottom:10}}>COVERAGE</div>
          <h4 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:18, color:'var(--ink-900)', margin:'0 0 10px', letterSpacing:'.04em'}}>対応エリア</h4>
          <p style={{fontSize:14, lineHeight:1.95, color:'var(--ink-700)', margin:0}}>
            全国47都道府県対応。千葉県内はもちろん、関東／関西／地方都市まで、業種・規模を問わずお任せください。
          </p>
        </div>
        <div>
          <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.14em', color:'var(--accent)', fontWeight:600, marginBottom:10}}>VISIT</div>
          <h4 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:18, color:'var(--ink-900)', margin:'0 0 10px', letterSpacing:'.04em'}}>訪問について</h4>
          <p style={{fontSize:14, lineHeight:1.95, color:'var(--ink-700)', margin:0}}>
            原則、すべてオンラインで対応します。契約締結や就業規則の説明会など、ご希望に応じて出張も承りますが、必須ではありません。
          </p>
        </div>
      </div>
    </div>
  </section>
);

const AbCTA = () => (
  <section style={{padding:'72px 0', background:'linear-gradient(180deg, var(--navy-800), var(--navy-900))', color:'#fff'}} data-screen-label="05 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}}>NEXT STEP</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'}}>話をしてみる</em>ところから。
      </h2>
      <div style={{display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap', marginTop:18}}>
        <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, { AbMission, AbLeaders, AbCorp, AbAccess, AbCTA });