// app.jsx — композиция лендинга + Tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "Бархат",
  "accent": "#7fae5a",
  "headFont": "Playfair",
  "showSoon": true,
  "heroFan": true
}/*EDITMODE-END*/;

const DIR_MAP = { "Бархат": "a", "Кость": "b", "Изумруд": "c" };
const ACCENTS = ["#7fae5a", "#c98a3f", "#bb5566", "#8a86c8"];
const FONT_MAP = {
  "Playfair": "'Playfair Display', Georgia, serif",
  "PT Serif": "'PT Serif', Georgia, serif",
  "Spectral": "'Spectral', Georgia, serif",
};

function useReveal(dep) {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.in)");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [dep]);
}

function Hero({ author, flagship, books, fan, onOpen }) {
  const others = books.filter((b) => b.id !== flagship.id).slice(0, 2);
  return (
    <header className="hero">
      <div className="wrap hero-grid">
        <div className="reveal in">
          <div className="hero-eyebrow">
            <span className="eyebrow">Любовное фэнтези</span>
            <span className="dia" style={{ width: 5, height: 5, background: "var(--gold)", transform: "rotate(45deg)" }} />
            <span className="eyebrow">Попаданки</span>
            <span className="dia" style={{ width: 5, height: 5, background: "var(--gold)", transform: "rotate(45deg)" }} />
            <span className="eyebrow">Юмор</span>
          </div>
          <h1>Попаданки, которые <span className="em">знают своё дело</span></h1>
          <p className="lead">{author.blurb}</p>
          <div className="hero-cta">
            <a className="btn btn-primary" href={flagship.readUrl} target="_blank" rel="noopener">Читать бесплатно</a>
            <a className="btn btn-ghost" href="#books">Все книги</a>
          </div>
          <div className="hero-meta">
            <div className="mi"><b>4</b><span>книги</span></div>
            <div className="vr" />
            <div className="mi"><b>2</b><span>уже доступны</span></div>
            <div className="vr" />
            <div className="mi"><b>2</b><span>скоро выйдут</span></div>
          </div>
        </div>

        <div className={"cover-stack" + (fan ? "" : " single")} onClick={() => onOpen(flagship)} style={{ cursor: "pointer" }}>
          {fan && others[0] && (<div className="cv back-l"><CoverImage src={others[0].cover} alt="" title={others[0].title} /></div>)}
          {fan && others[1] && (<div className="cv back-r"><CoverImage src={others[1].cover} alt="" title={others[1].title} /></div>)}
          <div className="cv front"><CoverImage src={flagship.cover} alt={flagship.title} title={flagship.title} /></div>
          <div className="cover-badge">✦ {flagship.title.split(" ").slice(0, 2).join(" ")}…</div>
        </div>
      </div>
    </header>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [filter, setFilter] = React.useState("all");
  const [active, setActive] = React.useState(null);
  const author = window.AUTHOR;
  const books = window.BOOKS;
  const flagship = books.find((b) => b.flagship) || books[0];
  const soonBooks = books.filter((b) => b.status === "soon");

  // apply tweaks to :root
  React.useEffect(() => {
    const r = document.documentElement;
    r.setAttribute("data-direction", DIR_MAP[t.direction] || "a");
    r.style.setProperty("--accent", t.accent);
    r.style.setProperty("--font-display", FONT_MAP[t.headFont] || FONT_MAP.Playfair);
  }, [t.direction, t.accent, t.headFont]);

  const visible = books.filter((b) => {
    if (!t.showSoon && b.status === "soon") return false;
    if (filter === "all") return true;
    return b.status === filter;
  });

  useReveal(filter + t.showSoon);

  const openAt = (book) => setActive(books.indexOf(book));
  const goSubscribe = () => { const el = document.getElementById("subscribe"); if (el) el.scrollIntoView({ behavior: "smooth" }); };
  const navModal = (d) => setActive((i) => (i == null ? null : (i + d + books.length) % books.length));

  const filters = [
    { id: "all", label: "Все" },
    { id: "available", label: "Доступно" },
    { id: "soon", label: "Скоро" },
  ];

  return (
    <React.Fragment>
      {/* TOPBAR */}
      <div className="topbar">
        <div className="wrap row">
          <a className="brandmark" href="#top">
            <span className="nm">{author.name}</span>
            <span className="by">Любовное фэнтези</span>
          </a>
          <nav className="topnav">
            <a className="link hide-sm" href="#books">Книги</a>
            <a className="link hide-sm" href="#method">Метод</a>
            <a className="link hide-sm" href="#reviews">Отзывы</a>
            <a className="btn btn-ghost btn-sm" href={author.profileUrl} target="_blank" rel="noopener">ЛитГород</a>
          </nav>
        </div>
      </div>

      <span id="top" />
      <Hero author={author} flagship={flagship} books={books} fan={t.heroFan} onOpen={openAt} />

      <MethodSection books={books} />

      {/* КНИГИ */}
      <section className="section" id="books">
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="eyebrow">Каталог</div>
              <h2 style={{ marginTop: 14 }}>Книги</h2>
              <p className="sub">Доступные — читайте бесплатно на ЛитГороде целиком. «Скоро» — подпишитесь, чтобы не пропустить первую главу.</p>
            </div>
            <div className="right filters">
              {filters.map((f) => (
                <button key={f.id} className={"filter-btn" + (filter === f.id ? " active" : "")} onClick={() => setFilter(f.id)}>{f.label}</button>
              ))}
            </div>
          </div>
          <div className="books-grid">
            {visible.map((b) => (
              <BookCard key={b.id} book={b} onOpen={openAt} onSubscribe={goSubscribe} />
            ))}
          </div>
          {visible.length === 0 && (
            <p style={{ color: "var(--ink-faint)", fontFamily: "var(--font-mono)", textAlign: "center", padding: 40 }}>Ничего не найдено в этом фильтре.</p>
          )}
        </div>
      </section>

      <QuoteBand book={flagship} />

      <Reviews flagship={flagship} />

      <Subscribe soonBooks={soonBooks} />

      <Footer author={author} />

      {active != null && (
        <BookModal
          book={books[active]}
          onClose={() => setActive(null)}
          onPrev={() => navModal(-1)}
          onNext={() => navModal(1)}
          onSubscribe={goSubscribe}
        />
      )}

      {/* TWEAKS */}
      <TweaksPanel>
        <TweakSection label="Направление" />
        <TweakRadio label="Палитра" value={t.direction}
          options={["Бархат", "Кость", "Изумруд"]}
          onChange={(v) => setTweak("direction", v)} />
        <TweakColor label="Акцент" value={t.accent} options={ACCENTS} onChange={(v) => setTweak("accent", v)} />
        <TweakSelect label="Шрифт заголовков" value={t.headFont}
          options={["Playfair", "PT Serif", "Spectral"]}
          onChange={(v) => setTweak("headFont", v)} />
        <TweakSection label="Контент" />
        <TweakToggle label="Показывать «Скоро»" value={t.showSoon} onChange={(v) => setTweak("showSoon", v)} />
        <TweakToggle label="Веер обложек в hero" value={t.heroFan} onChange={(v) => setTweak("heroFan", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);