/* Section 7 — Representative (株式会社労務ニュース版・倉田諒のみ) */

const LEADERS = [
  {
    role: '株式会社労務ニュース 代表取締役 ／ 顧問ファシリテーター',
    name: '倉田 諒',
    kana: 'KURATA RYO',
    photo: 'assets/kurata.jpg',
    photoTag: 'PORTRAIT — 倉田 諒',
    sign: '経営会議に、もう一人。いうべきことを、いう。',
    quote: '中小企業の人事の現場には、答えのない問いが日々飛び交っています。「管理職が育たない」「会議で決まらない」「社員が辞める」── 一つひとつは違う悩みに見えて、根っこは「チームが機能していない」ことに集約されることが多い。私の役割は、外から答えを差し込むことではなく、チームが自分たちで考え、語り、決められる場をつくることです。社労士法人を並列で運営し、約80社の現場で実務を見続けてきた感覚を背負ったまま、戦略・育成・AI・評価の話をする。机上の人事論ではない、地に足のついた伴走を届けます。'
  }
];

const CREDENTIALS = [
  { label: '経営心理士' },
  { label: '人材定着指導士' },
  { label: 'DiSC 認定資格者' },
  { label: 'BNI つくよみチャプター メンバー' },
  { label: '経営実践研究会 メンバー' }
];

const Representative = () => (
  <section className="representative" id="about" data-screen-label="07 Greeting">
    <div className="container">
      <div className="section-head" style={{alignItems:'center',textAlign:'center',maxWidth:820,margin:'0 auto 56px'}}>
        <Eyebrow>GREETING · 会社あいさつ</Eyebrow>
        <h2>「経営会議に、もう一人」<br/>として、人事を動かす。</h2>
        <p className="lead" style={{marginTop:20,textAlign:'center',marginInline:'auto'}}>
          株式会社労務ニュースは、社員30〜200名の中小企業を中心に、<b>育成・AI活用・人事評価</b>の3本柱で「チームを動かす人事」を伴走する会社です。<br/>
          隣で社会保険労務士法人 労務ニュースを並列運営し、約80社の現場で蓄えた実務感覚を背景に、机上の人事論ではない、地に足のついた助言を心がけています。
        </p>
        <a className="btn btn--ghost btn--sm" href="about.html" style={{marginTop:20}}>会社概要・代表プロフィール <Arrow/></a>
      </div>

      <div className="rep-spread">
        {LEADERS.map((p, i) => (
          <article className={`rep-row ${i % 2 ? 'rep-row--r' : 'rep-row--l'}`} key={i}>
            <div className="rep-row__media">
              <span className="rep-row__plate" aria-hidden="true"/>
              <div className="rep-row__photo">
                {p.photo
                  ? <img src={p.photo} alt={p.name}/>
                  : <Placeholder tag={p.photoTag} style={{height:'100%'}}/>}
              </div>
            </div>
            <div className="rep-row__body">
              <div className="rep-row__role">{p.role}</div>
              <h3 className="rep-row__name">
                <span className="jp">{p.name}</span>
                <span className="en">{p.kana}</span>
              </h3>
              <blockquote className="rep-row__quote">{p.quote}</blockquote>
              <div className="rep-row__sign">— {p.sign}</div>
              <div style={{marginTop:24, display:'flex', flexWrap:'wrap', gap:8}}>
                {CREDENTIALS.map(c => (
                  <span key={c.label} style={{fontSize:11, letterSpacing:'.06em', padding:'5px 12px', border:'1px solid var(--paper-line)', borderRadius:999, background:'var(--paper-2)', color:'var(--ink-700)', fontWeight:600}}>{c.label}</span>
                ))}
              </div>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

window.Representative = Representative;