const SetoLab = () => {
  const cycle = [
    { en: "Develop", ja: "開発", desc: "生成AIを活用して教育ツールを自らつくる" },
    { en: "Practice", ja: "実践", desc: "子どもたちと一緒に、現場で授業を展開" },
    { en: "Improve", ja: "改良", desc: "子どもの反応から学び、もっと良いものへ" },
  ];
  return (
    <section className="section setolab" id="setolab">
      <div className="container">
        <div className="setolab-grid">
          <div className="setolab-copy">
            <div className="setolab-eyebrow">Another Project — Setouchi Creative Lab</div>
            <h2>
              生成AIと、<br/>
              <span className="accent">子どもの学び</span>をつくる。
            </h2>
            <p>
              フジサワ企画が運営する <strong>せとうちクリエイティブラボ</strong> は、
              生成AIを活用して教育ツールを開発し、子どもたちと実践し、
              その反応からもっと良いものへ改良する——
              この「開発 → 実践 → 改良」のサイクルを、
              仲間と回し続けるクリエイティブ集団です。
            </p>
            <a href="https://setoclix.com/" target="_blank" rel="noopener noreferrer" className="setolab-cta">
              せとうちクリエイティブラボを見る
              <span className="arrow">→</span>
            </a>
          </div>

          <div className="setolab-visual">
            <div className="cycle">
              {cycle.map((c, i) => (
                <React.Fragment key={c.en}>
                  <div className="cycle-node">
                    <div className="cycle-step">STEP {i + 1}</div>
                    <div className="cycle-ja">{c.ja}</div>
                    <div className="cycle-en">{c.en}</div>
                    <p className="cycle-desc">{c.desc}</p>
                  </div>
                  {i < cycle.length - 1 && <div className="cycle-arrow">↓</div>}
                </React.Fragment>
              ))}
              <div className="cycle-loop">繰り返す</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.SetoLab = SetoLab;