/* Section 1 — Hero */

const HERO_COPIES = {
  a: {
    lead: <>社長のストレスを、<br/><em>まるごと消す。</em></>,
    sub: '手続きを代行するだけじゃない。「いつまでに、何を、どうすればいいのか分からない」そのモヤモヤを、社長の頭からまるごと引き取ります。'
  },
  b: {
    lead: <>人を雇う、<em>その面倒ごと。</em><br/>ぜんぶストレスですよね。</>,
    sub: '社員との対応、ミスのない手続き、問題が起きたときの判断、助成金の見極め、規程の見直し ── 人を雇うと増え続ける「何をどうするか分からない」を、まるごと引き取ります。'
  },
  c: {
    lead: <><span className="nobr">手続きしてくれる人で</span><br/>終わらない<em>社労士事務所。</em></>,
    sub: '給与計算・社保手続きはもちろん、社員からの相談、取れる助成金の見極め、freeeの使いこなし、就業規則の整備まで。「労務まわりは、ここに聞けばいい」——そう言える一本道のパートナーを目指します。'
  }
};

const Hero = ({ copy='a', layout='A', showBadges=true }) => {
  const c = HERO_COPIES[copy] || HERO_COPIES.a;
  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; 千葉・中小企業30〜100名に強み &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 style={{fontSize:'1em',marginLeft:6}}>80</span><span className="unit">社</span></div><div className="lbl">顧問先数</div></div>
            <div className="badge"><div className="num">累計<span style={{fontSize:'1em',marginLeft:6}}>6</span><span className="unit">億円+</span></div><div className="lbl">助成金申請実績</div></div>
            <div className="badge"><div className="num">年<span style={{fontSize:'1em',marginLeft:6}}>500</span><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;