const STORIES = [
  {
    thumb: 'assets/articles/story_furusawa_v3.webp',
    tag: 'STORY',
    date: '2026.04.17',
    title: '「生徒→講師→校舎長」内定を蹴ってまで、バイト先に就職した理由。',
    excerpt: '海神行田校 校舎長が語る、2009年の入塾から始まったSG正学館での16年間。「1日の授業が、子どもの人生に関わる」その言葉に出会って、人生が変わった。',
    url: 'https://www.wantedly.com/companies/company_4315459/post_articles/1058554',
  },
  {
    thumb: 'assets/articles/project_principal_v3.webp',
    tag: 'RECRUITING',
    date: '募集中',
    title: '【校舎長・経営者候補】「生徒の人生に関わる」を、本気でやる。',
    excerpt: '副校舎長 → 校舎長 → チームリーダー → エリアマネージャー。3〜5年で経営の中核を担うポジションへ。2035年・50校舎展開を共に推進する仲間を募集。',
    url: 'https://www.wantedly.com/projects/2312447',
  },
  {
    thumb: 'assets/articles/project_sales_v3.webp',
    tag: 'RECRUITING',
    date: '募集中',
    title: '【Sales / Business Development】教育×事業開発で、新しい市場をつくる。',
    excerpt: '個別指導塾の枠を超え、新規事業・パートナー開拓・FC展開など、教育産業の最前線で「事業を伸ばす」ことに挑む。',
    url: 'https://www.wantedly.com/projects/2373684',
  },
  {
    thumb: 'assets/articles/project_hr_v3.webp',
    tag: 'RECRUITING',
    date: '募集中',
    title: '【HR Consultant】「人が育つ」を仕組み化する組織人事。',
    excerpt: '128名の社員・250名の講師が活躍する正学館で、採用・教育・評価制度の設計から運用まで、組織の根幹を担うポジション。',
    url: 'https://www.wantedly.com/projects/2394915',
  },
  {
    thumb: 'assets/articles/project_ceo_direct_v3.webp',
    tag: 'RECRUITING',
    date: '募集中',
    title: '【社長直下セールス】CEOの隣で、事業の意思決定に関わる。',
    excerpt: '代表 扇田直下のポジション。新規プロジェクトの立ち上げ、提携交渉、戦略実行まで。経営の視座を最短で身につけたい方へ。',
    url: 'https://www.wantedly.com/projects/2434829',
  },
  {
    thumb: 'assets/articles/project_noncog_v3.webp',
    tag: 'RECRUITING',
    date: '募集中',
    title: '【非認知能力】「i-seek」個性診断で、子どもの未来を変える。',
    excerpt: '受験勉強だけでは育たない「学習リテラシー」「非認知能力」を、正学館独自のメソッドで子どもたちに届ける、新領域のポジション。',
    url: 'https://www.wantedly.com/projects/2428840',
  },
];

const StoryCard = ({ story }) => (
  <a href={story.url} target="_blank" rel="noopener noreferrer" className="story-card">
    <div className="story-thumb">
      <img src={story.thumb} alt="" loading="lazy"/>
      <span className="story-tag">{story.tag}</span>
    </div>
    <div className="story-body">
      <div className="story-meta">
        <span className="story-date">{story.date}</span>
        <span className="story-source">Wantedly</span>
      </div>
      <div className="story-title">{story.title}</div>
      <div className="story-excerpt">{story.excerpt}</div>
      <div className="story-arrow">記事を読む <span>→</span></div>
    </div>
  </a>
);

const Stories = () => {
  return (
    <section className="sec-stories" id="stories">
      <div className="container">
        <div className="stories-head">
          <div className="stories-head-left">
            <div className="sec-eyebrow">
              <span className="sec-eyebrow-num">08</span>
              <span className="sec-eyebrow-bar"/>
              <span>STORIES</span>
            </div>
            <h2 className="big-jp-title" style={{fontSize:36, margin:'10px 0 14px'}}>
              <span className="mark">関連</span>記事
            </h2>
            <p className="stories-lead">
              社員インタビュー・募集中のポジション詳細など、<br/>
              Wantedly で公開している記事をご覧いただけます。
            </p>
          </div>
          <div className="stories-head-right">
            <a href="https://www.wantedly.com/companies/company_4315459" target="_blank" rel="noopener noreferrer" className="btn btn-outline">
              <span>Wantedlyで全記事を見る</span><span className="btn-arrow"/>
            </a>
          </div>
        </div>

        <div className="stories-grid">
          {STORIES.map((s, i) => <StoryCard key={i} story={s}/>)}
        </div>
      </div>
    </section>
  );
};
window.Stories = Stories;