/* ============================================================
   СТРАНИЦЫ: Главная (витрина), О себе, Блог
   ============================================================ */

/* ---- ГЛАВНАЯ ---- */
function Home({ go, onOpen }) {
  const feature = PHOTO;
  const [i, setI] = useState(0);
  const n = feature.length;
  const ref = useReveal();

  useEffect(() => {
    const t = setInterval(() => setI((v) => (v + 1) % n), 5200);
    return () => clearInterval(t);
  }, [n]);

  const cur = feature[i];

  return (
    <div className="page">
      <section className="home wrap">
        <div className="home__masthead">
          <h1 className="home__title"><em>архив</em><br />света</h1>
          <p className="home__sub">
            Плёночная фотография и рисунок.<br />
            Вера Маркелова — Москва.<br />
            Снято на 35&nbsp;мм и средний формат, 2022—2025.
          </p>
        </div>

        {/* витрина — A2: пружина сшита с фото слева, разворот справа */}
        <div className="stage">
          <div className="stage__pair">
            <div className="stage__rail" aria-hidden="true">
              <Coil count={18} />
            </div>
            <div
              className="stage__frame"
              onClick={() => onOpen("photo", i)}
              role="button" tabIndex={0}
              aria-label={"Открыть: " + cur.title}
              onKeyDown={(e) => { if (e.key === "Enter") onOpen("photo", i); }}
            >
              {feature.map((w, k) => (
                <div className={"slide" + (k === i ? " is-active" : "")} key={w.id}>
                  <Placeholder ratio="1:1" src={w.src} pos={w.pos} tone={w.tone} label={w.label} alt={w.title} />
                </div>
              ))}
            </div>
          </div>

          <div className="stage__meta">
            <span className="stage__eyebrow">Избранное · {String(i + 1).padStart(2, "0")}</span>
            <div className="stage__now" key={cur.id}>
              <h2 className="stage__wtitle">{cur.title}</h2>
              <span className="stage__wmeta">{cur.meta}</span>
            </div>
            <hr className="rule stage__divider" />
            <div className="stage__dots">
              <div className="wrap-dots">
                {feature.map((_, k) => (
                  <button key={k} className={"dot" + (k === i ? " is-active" : "")} onClick={() => setI(k)} aria-label={"Кадр " + (k + 1)} />
                ))}
              </div>
              <span className="stage__count">{String(i + 1).padStart(2, "0")} — {String(n).padStart(2, "0")}</span>
            </div>
            <div className="stage__ctrl">
              <button onClick={() => setI((i - 1 + n) % n)} aria-label="Назад"><Icon.left /></button>
              <button onClick={() => setI((i + 1) % n)} aria-label="Вперёд"><Icon.right /></button>
            </div>
          </div>
        </div>

        {/* индекс: избранные фото */}
        <div className="home__index" ref={ref}>
          <div className="section-head">
            <h2>Фотография</h2>
            <a href="#photo" onClick={(e) => { e.preventDefault(); go("photo"); }}>Все плёночные работы <Icon.arrow /></a>
          </div>
          <div className="grid">
            {PHOTO.slice(0, 6).map((w, k) => (
              <figure className="grid__item reveal" key={w.id} onClick={() => onOpen("photo", k)} role="button" tabIndex={0}
                onKeyDown={(e) => { if (e.key === "Enter") onOpen("photo", k); }}>
                <Placeholder ratio={w.ratio} src={w.src} pos={w.pos} tone={w.tone} label={w.label} alt={w.title} no={String(k + 1).padStart(2, "0")} />
                <figcaption className="tile-cap">
                  <span className="t">{w.title}</span>
                  <span className="m">{w.meta}</span>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>

        {/* индекс: арт */}
        <div className="home__index">
          <div className="section-head">
            <h2>Рисунок</h2>
            <a href="#art" onClick={(e) => { e.preventDefault(); go("art"); }}>Все арт-работы <Icon.arrow /></a>
          </div>
          <div className="grid">
            {ART.slice(0, 3).map((w, k) => (
              <figure className="grid__item reveal" key={w.id} onClick={() => onOpen("art", k)} role="button" tabIndex={0}
                onKeyDown={(e) => { if (e.key === "Enter") onOpen("art", k); }}>
                <Placeholder ratio={w.ratio} tone={w.tone} label={w.label} no={String(k + 1).padStart(2, "0")} />
                <figcaption className="tile-cap">
                  <span className="t">{w.title}</span>
                  <span className="m">{w.meta}</span>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---- О СЕБЕ ---- */
function About() {
  return (
    <section className="about wrap page">
      <div className="eyebrow" style={{ marginBottom: 26 }}>О моём творчестве</div>
      <div className="about__top">
        <p className="about__lead">
          Я снимаю на плёнку и рисую. <span className="q">Меня занимает тихий свет —
          тот, что ложится на стену утром и держится недолго.</span> Кадр и линия для меня —
          один и тот же способ замедлиться и посмотреть внимательно.
        </p>
        <figure className="about__portrait">
          <Placeholder ratio="4:5" src={window.__resources.p044} pos="center" alt="Портрет, плёнка" />
          <figcaption>Из серии «У стены» · плёнка, средний формат</figcaption>
        </figure>
      </div>

      <div className="about__body">
        <div>
          <h3>Коротко</h3>
        </div>
        <div>
          <div className="about__cols">
            <p>
              Я работаю с плёнкой — 35&nbsp;мм и средним форматом. Мне важна
              не резкость, а воздух: зерно, мягкая тень, лёгкая ошибка экспозиции.
              Снимаю в одни и те же часы, когда свет боковой и медленный, и почти
              никогда не делаю дублей — пусть остаётся то, что случилось.
            </p>
            <p>
              Рисунок появился раньше фотографии и никуда не делся. Каждое утро —
              короткий этюд тушью или карандашом, без задачи и без зрителя. Эта
              ежедневная линия учит смотреть, а не изображать; та же привычка
              потом возвращается в кадр.
            </p>
            <p>
              Фотографии и рисунки в этом архиве собраны вместе намеренно. Мне
              кажется, между ними нет границы — это одна работа про внимание,
              тишину и свет, просто разными материалами.
            </p>
          </div>

          <div className="meta-list" style={{ marginTop: 44 }}>
            <div className="mrow"><span className="k">Город</span><span className="v">Москва</span></div>
            <div className="mrow"><span className="k">Техника · фото</span><span className="v">35 мм, средний формат 6×6</span></div>
            <div className="mrow"><span className="k">Техника · рисунок</span><span className="v">тушь, графит, акварель, уголь</span></div>
            <div className="mrow"><span className="k">Печать</span><span className="v">ручная, серебро-желатин</span></div>
            <div className="mrow"><span className="k">Период</span><span className="v">2022 — 2025</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- БЛОГ ---- */
function Blog({ onOpenNote }) {
  const ref = useReveal();
  return (
    <section className="blog wrap page">
      <div className="gallery__head" style={{ marginBottom: 0 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Заметки</div>
          <h1 className="gallery__title">Блог</h1>
        </div>
        <p className="gallery__lead">Короткие записи о плёнке, печати и ежедневном рисунке. Без расписания — когда есть что сказать.</p>
      </div>

      <div className="notebook" ref={ref} style={{ marginTop: 48 }}>
        <div className="notebook__spine" aria-hidden="true">
          <Coil count={34} />
        </div>
        <div className="notelist">
          {NOTES.map((nt) => (
            <article className="note reveal" key={nt.id} onClick={() => onOpenNote(nt)} role="button" tabIndex={0}
              onKeyDown={(e) => { if (e.key === "Enter") onOpenNote(nt); }}>
              <span className="note__date">{nt.date}</span>
              <div>
                <h2 className="note__title">{nt.title}</h2>
                <p className="note__excerpt">{nt.excerpt}</p>
              </div>
              <span className="note__tag">{nt.tag}</span>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Home, About, Blog });