const Work = () => {
  return (
    <section className="sec-work" id="work">
      <svg className="sec-work-bg" viewBox="0 0 200 200" aria-hidden>
        <circle cx="150" cy="80" r="80" fill="none" stroke="var(--green-700)" strokeWidth="1"/>
        <circle cx="80" cy="120" r="60" fill="none" stroke="var(--green-700)" strokeWidth="1"/>
      </svg>
      <div className="container">
        <div className="work-head-grid">
          <div>
            <div className="sec-eyebrow">
              <span className="sec-eyebrow-num">02</span>
              <span className="sec-eyebrow-bar"/>
              <span>WORK&nbsp;STYLE</span>
            </div>
            <h2 className="work-giant">
              <span className="mark" style={{color:'var(--green-700)'}}>仕事</span>を<br/>知る<span className="period">。</span>
            </h2>
            <p className="work-lead">
              SG正学館の仕事は、教えることだけではありません。<br/>
              生徒の成長、教室の運営、未来の仲間づくりまで、<br/>
              会社の成長を支える多様な役割があります。
            </p>
          </div>

          <div>
            <div className="work-right-label">
              <span className="inline-divider">主な職種紹介</span>
            </div>
            <div className="jobs-grid">
              <div className="job-card">
                <div className="job-photo">
                  <img src="assets/classroom-booths.webp" alt="教室" style={{objectPosition:'center 60%'}}/>
                </div>
                <div className="job-name">教室運営</div>
                <div className="job-desc">
                  生徒・保護者との面談や学習サポート、講師のマネジメントなど、教室の成果と成長をつくります。
                </div>
              </div>
              <div className="job-card">
                <div className="job-photo">
                  <img src="assets/teacher-explaining.webp" alt="カリキュラム開発" style={{objectPosition:'75% center'}}/>
                </div>
                <div className="job-name">開発（カリキュラム）</div>
                <div className="job-desc">
                  教材・カリキュラムの開発や指導メソッドの設計など、正学館の教育の根幹をつくる仕事です。
                </div>
              </div>
              <div className="job-card">
                <div className="job-photo">
                  <img src="assets/recruit-meeting.webp" alt="採用広報・企画" style={{objectPosition:'center 40%'}}/>
                </div>
                <div className="job-name">採用広報・企画</div>
                <div className="job-desc">
                  未来の仲間にSG正学館の魅力を届け、採用活動や広報・企画を通じて、会社の未来をつくります。
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="movie-band">
          <div>
            <div className="movie-tag">
              <Icons.Movie style={{width:14, height:14}}/>
              採用ムービー
            </div>
            <div className="movie-title">
              人を知る、仕事を知る、<br/>未来を知る。
            </div>
            <div className="movie-lead">
              SG正学館で働く人の想い、仕事のやりがい、<br/>
              そして会社の未来を、映像でご紹介します。
            </div>
            <a className="btn btn-outline" style={{minWidth:180}} href="#interview">
              <span>社員の声を見る</span><span className="btn-arrow"/>
            </a>
          </div>
          <div className="movie-player">
            <img src="assets/group-four.webp" alt=""/>
            <div className="movie-play"/>
            <div className="movie-caption">
              <div className="movie-caption-eng">SG SEIGAKUKAN RECRUIT MOVIE</div>
              <div className="movie-caption-jp">人を知る、仕事を知る、未来を知る。</div>
            </div>
            <div className="movie-time">02:45</div>
          </div>
        </div>

        <div className="work-more-btn">
          <a className="btn btn-outline" style={{minWidth:220}} href="#recruit">
            <span>募集要項を見る</span><span className="btn-arrow"/>
          </a>
        </div>
      </div>
    </section>
  );
};

window.Work = Work;