/* Section 1 — Hero (株式会社労務ニュース版) */

const HERO_COPIES = {
  a: {
    lead: <>人事のこと、ぜんぶ、<br/><em>誰に相談していますか？</em></>,
    sub: '採用、定着、育成、評価、組織、給与体系 ── 人事の悩みは1つでは終わらない。隣で社労士法人を並列運営し、約80社の現場で蓄えた人事ノウハウを背景に、人事全般を任せられる顧問ファシリテーターを、一人。'
  },
  b: {
    lead: <>人事部の、<em>隣にいる人。</em></>,
    sub: '育成も、AI活用も、評価も、採用も、組織課題も。バラバラに頼まず、一人のファシリテーターに任せられる。社労士法人と並列で運営しているから、実務にも強い。それが、株式会社労務ニュース。'
  },
  c: {
    lead: <>経営会議に、もう一人。<br/><em>いうべきことを、いう。</em></>,
    sub: '労務現場を知るファシリテーターが、育成・AI・評価・採用・組織課題まで、経営の右腕として伴走します。手続きや助成金は、隣の社労士法人で。'
  }
};

const Hero = ({ copy='c', layout='A', showBadges=true }) => {
  const c = HERO_COPIES[copy] || HERO_COPIES.c;
  return (
    <section className="hero" data-layout={layout} data-screen-label="01 Hero">
      <div className="hero__photo">
        <img src="assets/hero.jpg" alt="" style={{width:'100%',height:'100%',objectFit:'cover',objectPosition:'center 30%'}}/>
      </div>
      <div className="container hero__inner">
        <div className="hero__brand">
          <span className="hero__brand-co">株式会社</span>
          <span className="hero__brand-name">労務ニュース</span>
        </div>
        <h1>{c.lead}</h1>
        <p className="hero__sub">{c.sub}</p>
        <p className="hero__legal">株式会社 労務ニュース &nbsp;/&nbsp; 顧問ファシリテーター 倉田諒 &nbsp;/&nbsp; 全国オンライン対応</p>
        <div className="hero__cta">
          <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="phone" href="tel:05057843633">
            <div>
              <span className="lbl">電話で相談 平日 9:00–18:00</span>
              <span className="num">050-5784-3633</span>
            </div>
          </a>
        </div>
        {showBadges && (
          <div className="hero__badges">
            <div className="badge"><div className="num">育成<span className="unit">×AI×評価</span></div><div className="lbl">3本柱で伴走</div></div>
            <div className="badge"><div className="num">DiSC<span className="unit">認定</span></div><div className="lbl">代表 倉田諒</div></div>
            <div className="badge"><div className="num">経営<span className="unit">心理士</span></div><div className="lbl">人材定着指導士</div></div>
            <div className="badge"><div className="num">20<span style={{fontSize:'1em'}}>20</span><span className="unit">年〜</span></div><div className="lbl">千葉から中小企業を支援</div></div>
            <div className="badge"><div className="num">全国<span className="unit">オンライン</span></div><div className="lbl">ZOOM／LINE／Chatwork／Slack</div></div>
          </div>
        )}
      </div>
    </section>
  );
};

window.Hero = Hero;