/* 모모, 테리 — 연간 커리큘럼 화면 */

function CurriculumScreen({ go }) {
  const [who, setWho] = React.useState('모모');
  const img = who === '모모' ? 'assets/curriculum-momo.webp' : 'assets/curriculum-terry.webp';

  return (
    <main>
      <div className="page-banner">
        <div className="wrap">
          <div className="crumb">홈 · 연간 커리큘럼</div>
          <h1>모모·테리 연간 교육계획</h1>
          <p>한 해 동안 아이가 만나게 될 주제와 활동을 한눈에 살펴보세요.</p>
        </div>
      </div>

      <div className="wrap">
        <div className="curriculum-tabs">
          <button type="button" className="chip" onClick={() => go('home')}>홈</button>
          <button type="button" className={'chip' + (who === '모모' ? ' active' : '')} onClick={() => setWho('모모')}>만 1세 모모</button>
          <button type="button" className={'chip' + (who === '테리' ? ' active' : '')} onClick={() => setWho('테리')}>만 2세 테리</button>
        </div>

        <div className="curriculum-img-wrap">
          <img src={img} alt={who + ' 프로그램 연간교육계획'} className="curriculum-img" />
        </div>
      </div>
      <div style={{ height: 56 }}></div>
    </main>
  );
}

Object.assign(window, { CurriculumScreen });