/* ============================================================
   ОБЩИЕ КОМПОНЕНТЫ: иконки, шапка, меню, переключатель темы
   ============================================================ */
const { useState, useEffect, useRef, useCallback } = React;

/* ---- иконки (тонкие штрихи, без «иконок ради иконок») ---- */
const Icon = {
  arrow: (p) => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...p}>
      <path d="M3 7h8M8 4l3 3-3 3" stroke="currentColor" strokeWidth="1.1" />
    </svg>
  ),
  left: (p) => (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...p}>
      <path d="M10 3 5 8l5 5" stroke="currentColor" strokeWidth="1.2" />
    </svg>
  ),
  right: (p) => (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...p}>
      <path d="M6 3l5 5-5 5" stroke="currentColor" strokeWidth="1.2" />
    </svg>
  ),
  close: (p) => (
    <svg width="13" height="13" viewBox="0 0 13 13" fill="none" {...p}>
      <path d="M1 1l11 11M12 1L1 12" stroke="currentColor" strokeWidth="1.2" />
    </svg>
  ),
  grid: (p) => (
    <svg width="13" height="13" viewBox="0 0 13 13" fill="none" {...p}>
      <rect x="0.5" y="0.5" width="5" height="5" stroke="currentColor" strokeWidth="1" />
      <rect x="7.5" y="0.5" width="5" height="5" stroke="currentColor" strokeWidth="1" />
      <rect x="0.5" y="7.5" width="5" height="5" stroke="currentColor" strokeWidth="1" />
      <rect x="7.5" y="7.5" width="5" height="5" stroke="currentColor" strokeWidth="1" />
    </svg>
  ),
  list: (p) => (
    <svg width="14" height="13" viewBox="0 0 14 13" fill="none" {...p}>
      <path d="M0 1.5h14M0 6.5h14M0 11.5h14" stroke="currentColor" strokeWidth="1" />
    </svg>
  ),
};

/* ---- мотив: спираль блокнота (вариант C) ---- */
function Coil({ count = 11, vertical = true }) {
  return (
    <div className={"coil" + (vertical ? "" : " coil--h")} aria-hidden="true">
      {Array.from({ length: count }).map((_, i) => <i key={i} />)}
    </div>
  );
}

/* ---- мотив: перфорация плёнки ---- */
function FilmPerf({ count = 7, horizontal = false }) {
  return (
    <div className={"perf" + (horizontal ? " perf--h" : "")} aria-hidden="true">
      {Array.from({ length: count }).map((_, i) => <i key={i} />)}
    </div>
  );
}

/* ---- переключатель темы ---- */
function ThemeToggle({ theme, onToggle }) {
  return (
    <button
      className="tt"
      onClick={onToggle}
      aria-label={theme === "dark" ? "Включить светлую тему" : "Включить тёмную тему"}
    >
      <span className="tt__label">{theme === "dark" ? "Тёмная" : "Светлая"}</span>
      <span className="tt__knob" />
    </button>
  );
}

const NAVITEMS = [
  { key: "home",  label: "Главная" },
  { key: "photo", label: "Фото" },
  { key: "art",   label: "Арт" },
  { key: "friends", label: "Друзья" },
  { key: "about", label: "О себе" },
  { key: "blog",  label: "Блог" },
  { key: "new",   label: "Новая версия" },
];

/* ---- шапка ---- */
function Header({ route, go, theme, onToggle, onBurger, menuOpen }) {
  return (
    <header className="header">
      <div className="wrap header__row">
        {/* пустой слот под логотип — намеренно без логотипа */}
        <a className="logoslot" href="#" onClick={(e) => { e.preventDefault(); go("home"); }} aria-label="Вера Маркелова — на главную">
          <span className="logoslot__mark" />
          <span className="logoslot__name">
            <b>Вера Маркелова</b>
            <span>Фото · Арт</span>
          </span>
        </a>

        <nav className="nav" aria-label="Основная навигация">
          {NAVITEMS.map((it, i) => (
            <a
              key={it.key}
              href={"#" + it.key}
              className="nav__link"
              aria-current={route === it.key ? "page" : undefined}
              onClick={(e) => { e.preventDefault(); go(it.key); }}
            >
              <span className="nav__num">{String(i + 1).padStart(2, "0")}</span>
              {it.label}
            </a>
          ))}
        </nav>

        <div className="header__right">
          <ThemeToggle theme={theme} onToggle={onToggle} />
          <button
            className="burger"
            aria-label="Меню"
            aria-expanded={menuOpen}
            onClick={onBurger}
          >
            <span />
          </button>
        </div>
      </div>
    </header>
  );
}

/* ---- мобильное меню ---- */
function MobileSheet({ open, route, go, onClose }) {
  return (
    <div className={"sheet" + (open ? " is-open" : "")} role="dialog" aria-modal="true" aria-hidden={!open}>
      <nav aria-label="Мобильная навигация">
        {NAVITEMS.map((it, i) => (
          <a
            key={it.key}
            href={"#" + it.key}
            className={"sheet__link" + (route === it.key ? " is-active" : "")}
            onClick={(e) => { e.preventDefault(); go(it.key); onClose(); }}
          >
            <span className="n">{String(i + 1).padStart(2, "0")}</span>
            {it.label}
          </a>
        ))}
      </nav>
      <div className="sheet__foot">
        <div className="eyebrow" style={{ marginTop: 28 }}>Архив · 2022—2025</div>
      </div>
    </div>
  );
}

/* ---- подвал (минимальный, без контактов и «поделиться») ---- */
function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__row">
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Архив работ</div>
            <a href="#about" className="footer__big" onClick={(e) => { e.preventDefault(); go("about"); }}>
              Вера Маркелова
            </a>
          </div>
          <div className="footer__meta">
            ФОТОГРАФИЯ · РИСУНОК<br />
            ПЛЁНКА · 35 ММ · 6×6<br />
            © 2025
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Icon, Coil, FilmPerf, ThemeToggle, Header, MobileSheet, Footer, NAVITEMS });