/* Школа — расписание и домашка */
function School({ go }) {
  const D = window.DATA;
  const [cls, setCls] = useState('6 класс');
  const [tab, setTab] = useState('schedule'); // schedule | homework
  const days = ['Пн','Вт','Ср','Чт','Пт'];
  const sched = D.schedule[cls];
  const hw = D.homework[cls];

  return (
    <div className="wrap section-pad">
      <SectionHead index="02" kicker="школа"
        title="Школа в доме"
        intro="В этом году на базе пространства открылась школа для 6, 7 и 8 классов. Те же ковры, камин и двор — только с уроками. Здесь расписание и домашние задания, которые учителя подгружают сами." />

      {/* классы + вкладки */}
      <div className="flex between center school-controls">
        <div className="flex gap-s" style={{ flexWrap:'wrap' }}>
          {D.classes.map(c => (
            <button key={c} className={'chip'+(cls===c?' is-on':'')} onClick={()=>setCls(c)}>{c}</button>
          ))}
        </div>
        <div className="seg">
          {[['schedule','Расписание'],['homework','Домашка']].map(([id,l]) => (
            <button key={id} className={'seg__btn'+(tab===id?' is-on':'')} onClick={()=>setTab(id)}>{l}</button>
          ))}
        </div>
      </div>

      {tab==='schedule' ? (
        <div className="sched-wrap">
          <div className="sched">
            {days.map(d => (
              <div key={d} className="sched__col">
                <div className="sched__day">
                  <span className="serif" style={{ fontSize:22 }}>{d}</span>
                </div>
                {sched[d].map((row,i) => {
                  const [time,subj,room,teacher] = row;
                  return (
                    <div key={i} className="lesson">
                      <span className="mono lesson__time">{time}</span>
                      <span className="serif lesson__subj">{subj}</span>
                      <span className="mono lesson__meta">{room} · {teacher}</span>
                    </div>
                  );
                })}
              </div>
            ))}
          </div>
          <p className="mono faint" style={{ fontSize:12, marginTop:18 }}>
            ✦ занятия 09:00–13:30 · после уроков — двор, библиотека и форматы из ленты
          </p>
        </div>
      ) : (
        <div className="hw-list">
          {hw.map((h,i) => (
            <div key={i} className="hw">
              <div className="hw__left">
                <span className="serif hw__subj">{h.subj}</span>
                <span className="mono hw__teacher">{h.teacher}</span>
              </div>
              <p className="hw__task prettyw">{h.task}</p>
              <div className="hw__due mono">{h.due}</div>
            </div>
          ))}
          <div className="hw-note">
            <span className="mono eyebrow eyebrow--green">для учителей</span>
            <p className="prettyw" style={{ marginTop:8, maxWidth:'46ch' }}>
              Каждый учитель подгружает задания по своему предмету через личный кабинет — родители и ученики видят их здесь сразу.
            </p>
          </div>
        </div>
      )}

      {/* запись */}
      <div className="feed-cta" style={{ marginTop:'clamp(40px,6vw,72px)' }}>
        <div>
          <div className="mono eyebrow eyebrow--green" style={{ marginBottom:10 }}>набор открыт</div>
          <h3 style={{ fontSize:'clamp(26px,3.6vw,40px)', maxWidth:'20ch' }} className="wrapb">Хотите привести ребёнка в школу-дом? Познакомимся.</h3>
        </div>
        <button className="btn btn--green">Записаться на встречу <Arrow className="arr"/></button>
      </div>
    </div>
  );
}
Object.assign(window, { School });