/* Section 7 — Greeting + Leadership intro */

const LEADERS = [
  {
    role: '執行役員 / 株式会社労務ニュース 代表取締役',
    name: '倉田 諒',
    kana: 'KURATA RYO',
    photo: 'assets/kurata.jpg',
    photoTag: 'PORTRAIT — 倉田 諒 執行役員',
    sign: '日常の労務とfreee運用、現場で使える支援を。',
    quote: '経営者と社員が同じ方向を向き、協力し合える組織づくり——それが私たちのテーマです。証券会社の営業を経て、生命保険会社で生命保険代理店の立ち上げを支援してきた経験を活かし、日常の労務・freeeの運用・制度設計まで「実務で使える」支援をお届けします。経営と現場の隙間を埋め、組織が前向きに動き続ける状態をつくる。それが私の役割です。'
  },
  {
    role: '代表社員 / 社会保険労務士',
    name: '山本 義幸',
    kana: 'YAMAMOTO YOSHIYUKI',
    photo: 'assets/yamamoto.jpg',
    photoTag: 'PORTRAIT — 山本 義幸 代表社員',
    sign: '助成金申請、累計6億円超。',
    quote: '私は社労士として、助成金申請一筋でやってきました。累計6億円を超える申請をお客様と一緒に進めてきた中で分かったのは、助成金は「知っているかどうか」ではなく「漏らさず使い切れるかどうか」で結果が変わるということです。申請できる助成金を、申請できるタイミングで、確実に。そこが私の仕事です。'
  }
];

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'}}>
          中小企業の社長が抱えるストレスの正体は、「労務の手続きが大変」ではありません。
          「いつまでに、何を、どうすればいいのか分からない」こと、そのものです。<br/>
          <br/>
          私たちは、そのストレスをまるごと引き取る社会保険労務士法人 労務ニュースです。
          手続きを代行するのではなく、社長の頭の中から労務の心配事を消すこと——それが仕事だと考えています。
          約80社の顧問先と累計6億円超の助成金申請実績は、その積み重ねです。
        </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>
          </article>
        ))}
      </div>
    </div>
  </section>
);

window.Representative = Representative;