const Mission = () => {
  return (
    <section className="sec-mission" id="about">
      <div className="mission-side-num">
        <span className="num">01</span>
        <span>OUR&nbsp;MISSION</span>
      </div>
      <div className="container">
        <div className="mission-head">
          <div className="sec-eyebrow">
            <span className="sec-eyebrow-num">01</span>
            <span className="sec-eyebrow-bar"/>
            <span>OUR&nbsp;MISSION</span>
          </div>
          <h2 className="big-jp-title" style={{fontSize:'30px', lineHeight:1.55}}>
            生徒の変化、講師の成長、校舎の前進。<br/>
            そのすべてに関われることが、<br/>
            正学館の<span className="mark">校長職</span>のやりがい。
          </h2>
          <p className="lead" style={{fontSize:14, lineHeight:2.1, color:'var(--ink-700)', letterSpacing:'0.04em', margin:0}}>
            「<strong>正しい努力を積み重ねることで夢を実現できる人間を育てる</strong>」<br/>
            正学館は、受験を通過点として捉え、生徒が自分の力で未来を選び取れる状態をつくる「学習リテラシー」を育てる塾です。<br/>
            ここでは、私たちが大切にしている想いと、求める人物像をご紹介します。
          </p>
        </div>

        {/* Team / classroom photo strip — adds warmth and visual context */}
        <div className="mission-photos">
          <div className="mission-photo mission-photo-main">
            <img src="assets/team-ceremony.webp" alt="正学館の社員・講師チーム" loading="lazy" style={{objectPosition:'center 35%'}}/>
            <div className="mission-photo-caption">
              <span className="mission-photo-tag">OUR&nbsp;TEAM</span>
              <span className="mission-photo-text">「ありがとう」を支える、ひとり一人の力。</span>
            </div>
          </div>
          <div className="mission-photo-sub">
            <div className="mission-photo">
              <img src="assets/classroom-booths.webp" alt="正学館の教室" loading="lazy"/>
            </div>
            <div className="mission-photo">
              <img src="assets/teacher-explaining.webp" alt="講師による指導" loading="lazy"/>
            </div>
          </div>
        </div>

        <div className="values-grid">
          <div className="value-circle">
            <span className="value-num">01</span>
            <div className="value-name">一緒に楽しむ</div>
            <div className="value-desc">
              生徒の「できた！」を自分の喜びにできる。<br/>
              共に笑い、共に成長する関係を大切にします。
            </div>
          </div>
          <div className="value-circle">
            <span className="value-num">02</span>
            <div className="value-name">憧れの存在になる</div>
            <div className="value-desc">
              生徒が目標を持つきっかけに。<br/>
              「この先生のようになりたい」と<br/>
              思ってもらえる存在を目指します。
            </div>
          </div>
          <div className="value-circle">
            <span className="value-num">03</span>
            <div className="value-name">正学館を通じて、<br/>社会人として成長する</div>
            <div className="value-desc">
              挑戦や経験を通して、自分の可能性を広げる。<br/>
              仕事を通じて、未来の自分を育てていきます。
            </div>
          </div>
        </div>

        <div className="quote-card">
          <div className="quote-mark">"</div>
          <div className="quote-inner">
            <div className="quote-text">
              素直に学び、周囲と向き合い、<br/>
              主体的に動ける人へ。
            </div>
            <div className="quote-body">
              正学館が求めているのは、肩書きや経験よりも、「素直さ」と「人を想う気持ち」を持った人です。仲間と学び合いながら、生徒や社会に貢献できる人を、私たちは待っています。
            </div>
          </div>
        </div>

        {/* SGグループの事業 */}
        <div className="group-biz">
          <div className="group-biz-head">
            <span className="group-biz-eyebrow">SG GROUP</span>
            <h3 className="group-biz-title">
              SGエデュケーションは、<br className="sp-br"/>「教育」を軸に地域の未来をつくるグループです。
            </h3>
            <p className="group-biz-lead">
              個別指導塾「正学館」を中核に、保育・スポーツなど、子どもたちの成長を多面的に支える事業を展開しています。
              採用は<strong>グループ全体での募集</strong>。あなたの強みや志向に合わせて、活躍のフィールドが広がります。
            </p>
          </div>
          <div className="group-biz-grid">
            <a className="group-biz-card biz-seigaku" href="https://www.sg-seigaku.co.jp" target="_blank" rel="noopener noreferrer">
              <div className="group-biz-logo"><img src="assets/group_logos/seigaku.webp" alt="正学館"/></div>
              <div className="group-biz-cat">教育</div>
              <div className="group-biz-desc">小・中・高対象の個別指導塾。千葉県市川・船橋・柏エリアで12校舎を展開。</div>
              <div className="group-biz-link">公式サイト →</div>
            </a>
            <a className="group-biz-card biz-whizz" href="https://whizzkids.jp" target="_blank" rel="noopener noreferrer">
              <div className="group-biz-logo"><img src="assets/group_logos/whizzkids.webp" alt="Whizz Kids"/></div>
              <div className="group-biz-cat">保育・幼児教育</div>
              <div className="group-biz-desc">遊びと学びを通じて、子どもたちの「生きる力」を育む保育事業。</div>
              <div className="group-biz-link">公式サイト →</div>
            </a>
            <a className="group-biz-card biz-gunners" href="https://fcichikawagunners.jp/" target="_blank" rel="noopener noreferrer">
              <div className="group-biz-logo"><img src="assets/group_logos/gunners.webp" alt="FC市川GUNNERS"/></div>
              <div className="group-biz-cat">スポーツ</div>
              <div className="group-biz-desc">地域に根ざしたサッカークラブ。スポーツを通じた人材育成に取り組む。</div>
              <div className="group-biz-link">公式サイト →</div>
            </a>
            <a className="group-biz-card biz-icsc" href="http://www.icsc.or.jp" target="_blank" rel="noopener noreferrer">
              <div className="group-biz-logo"><img src="assets/group_logos/icsc.webp" alt="市川シティスポーツクラブ"/></div>
              <div className="group-biz-cat">スポーツ</div>
              <div className="group-biz-desc">地域の人々が運動・交流できる総合型スポーツクラブを運営。</div>
              <div className="group-biz-link">公式サイト →</div>
            </a>
            <div className="group-biz-card biz-gm">
              <div className="group-biz-logo group-biz-logo-text"><span className="biz-text-name">GM経営ソリューション</span></div>
              <div className="group-biz-cat">経営支援</div>
              <div className="group-biz-desc">グループで培った経営ノウハウを活かし、事業の成長を支援するコンサルティング事業。</div>
              <div className="group-biz-link group-biz-link-static">SGグループ会社</div>
            </div>
            <div className="group-biz-card biz-gc">
              <div className="group-biz-logo group-biz-logo-text"><span className="biz-text-name biz-text-gc">GC <small>CORPORATION</small></span></div>
              <div className="group-biz-cat">グループ事業</div>
              <div className="group-biz-desc">SGグループの多角的な事業展開を支えるコーポレート部門。</div>
              <div className="group-biz-link group-biz-link-static">SGグループ会社</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Mission = Mission;