// components.jsx — презентационные компоненты лендинга

const Icon = {
  eye: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>),
  chat: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><path d="M21 11.5a8.4 8.4 0 0 1-9 8.4L3 21l1.1-4A8.4 8.4 0 1 1 21 11.5Z"/></svg>),
  book: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><path d="M4 4.5A2.5 2.5 0 0 1 6.5 2H20v18H6.5A2.5 2.5 0 0 0 4 22.5Z"/><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/></svg>),
  tg: (p) => (<svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M21.9 4.3 18.6 19c-.2 1-.9 1.3-1.8.8l-4.9-3.6-2.4 2.3c-.3.3-.5.5-1 .5l.4-5 9.2-8.3c.4-.4-.1-.6-.6-.2L6.2 13 1.4 11.5c-1-.3-1-1 .2-1.5L20.6 2.8c.9-.3 1.6.2 1.3 1.5Z"/></svg>),
  vk: (p) => (<svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12.8 16.6c-5.3 0-8.7-3.7-8.8-9.8h2.7c.1 4.5 2.1 6.4 3.6 6.8V6.8h2.5v3.9c1.5-.2 3.1-1.9 3.6-3.9h2.5c-.4 2.4-2 4.1-3.2 4.8 1.2.6 3 2.1 3.7 4.9h-2.8c-.5-1.7-2-3-3.8-3.2v3.2Z"/></svg>),
};

function CoverImage({ src, alt, title }) {
  const [bad, setBad] = React.useState(false);
  if (bad || !src) {
    return (
      <div className="cover-ph">
        <span className="cph-author">Тая Подлунная</span>
        <span className="cph-title">{title}</span>
        <span className="cph-note">обложка</span>
      </div>
    );
  }
  return <img src={src} alt={alt || title} loading="lazy" onError={() => setBad(true)} />;
}

function Stat({ kind, value, label }) {
  const I = Icon[kind];
  return (
    <span className="stat" title={label}>
      <I /> {value}
    </span>
  );
}

function StatusBadge({ status, where }) {
  if (status === "available")
    return <span className={"book-badge free " + (where || "")}>Читать бесплатно</span>;
  return <span className={"book-badge soon " + (where || "")}>Скоро</span>;
}

function BookCard({ book, onOpen, onSubscribe }) {
  const s = book.stats;
  return (
    <article className="book reveal">
      <div className="cover-wrap" onClick={() => onOpen(book)}>
        <CoverImage src={book.cover} alt={book.title} title={book.title} />
        <StatusBadge status={book.status} />
      </div>
      <div className="body">
        <div className="genres">
          {book.genres.map((g) => (<span key={g} className="tag tag-genre">{g}</span>))}
        </div>
        <div>
          <h3 onClick={() => onOpen(book)}>{book.title}</h3>
          {book.subtitle && <div className="subtitle">{book.subtitle}</div>}
        </div>
        <div className="prof-line">В прошлой жизни — {book.profession}</div>
        <p className="hook">{book.hook}</p>
        {s && (
          <div className="stats">
            <Stat kind="eye" value={s.views} label="просмотров" />
            <Stat kind="chat" value={s.comments} label="комментариев" />
            <Stat kind="book" value={s.library} label="в библиотеке" />
            <span className="stat">{s.size}</span>
          </div>
        )}
        {!s && (
          <div className="stats"><span className="stat" style={{ color: "var(--gold)" }}>Готовится к выходу · {book.age}</span></div>
        )}
        <div className="actions">
          {book.status === "available" ? (
            <a className="btn btn-primary btn-sm" href={book.readUrl} target="_blank" rel="noopener">Читать</a>
          ) : (
            <button className="btn btn-primary btn-sm" onClick={onSubscribe}>Сообщить о релизе</button>
          )}
          <button className="btn btn-ghost btn-sm" onClick={() => onOpen(book)}>Аннотация</button>
        </div>
      </div>
    </article>
  );
}

function MethodSection({ books }) {
  return (
    <section className="method" id="method">
      <div className="wrap section">
        <div className="sec-head">
          <div>
            <div className="eyebrow">Метод автора</div>
            <h2 style={{ marginTop: 14 }}>Профессионалки в чужом теле</h2>
            <p className="sub">У каждой героини — настоящая земная профессия. Магии она не верит, зато верит инструкции, дозировке и мелкому шрифту. Это и есть фирменный приём Таи Подлунной.</p>
          </div>
        </div>
        <div className="method-grid">
          {books.map((b, i) => (
            <div className="method-cell" key={b.id}>
              <div className="case">Дело № {String(i + 1).padStart(2, "0")}</div>
              <div className="prof">{b.profession}</div>
              <div className="past">{b.professionPast}</div>
              <div style={{ flex: 1 }} />
              <div className="arrow">↓</div>
              <div className="role">{b.role}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function QuoteBand({ book }) {
  return (
    <section className="quoteband">
      <div className="wrap">
        <div className="orn" style={{ maxWidth: 120, margin: "0 auto" }}><span className="dia" /></div>
        <p className="q">«Семнадцать лет практики семейного права. <span className="gold">Ни разу не оказывалась внутри.</span>»</p>
        <div className="by">{book.title}</div>
      </div>
    </section>
  );
}

function Reviews({ flagship }) {
  const imgs = ["assets/rev-1.png", "assets/rev-2.png", "assets/rev-3.png", "assets/rev-4.png"];
  return (
    <section className="section" id="reviews">
      <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">
            <a className="btn btn-ghost btn-sm" href={flagship.viewUrl} target="_blank" rel="noopener">Все комментарии →</a>
          </div>
        </div>

        <div className="reviews-top">
          <div className="proof">
            <div className="p"><b>11</b><span>комментариев</span></div>
            <div className="p"><b>134</b><span>в библиотеках</span></div>
            <div className="p"><b>2</b><span>книги в работе</span></div>
          </div>
        </div>

        <div className="review-wall reveal">
          {imgs.map((src, i) => (
            <figure className="review-card" key={i}>
              <img src={src} alt="Отзыв читателя на ЛитГороде" loading="lazy" />
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function Subscribe({ soonBooks }) {
  return (
    <section className="subscribe" id="subscribe">
      <div className="wrap sub-grid">
        <div>
          <div className="eyebrow">Не пропустите релиз</div>
          <h2 style={{ marginTop: 14 }}>Две новые книги уже на подходе</h2>
          <p className="lead">«Свадьба, ножичек и пять признаков» и «Диета для чудовища» выходят совсем скоро. Подпишитесь на Telegram-канал автора — анонсы новых глав и релизов приходят туда первыми.</p>
          <div className="sub-cta">
            <a className="btn btn-primary btn-tg" href="https://t.me/taya_books" target="_blank" rel="noopener">
              <Icon.tg style={{ width: 18, height: 18 }} /> Подписаться на новинки
            </a>
            <a className="btn btn-ghost" href="https://litgorod.ru/profile/715776/books" target="_blank" rel="noopener">Профиль на ЛитГороде</a>
          </div>
          <div className="sub-note">Telegram-канал автора — новые главы, анонсы и закулисье.</div>
        </div>
        <div className="sub-covers">
          {soonBooks.map((b) => (
            <div className="sc" key={b.id}>
              <CoverImage src={b.cover} alt={b.title} title={b.title} />
              <div className="lbl">Скоро</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer({ author }) {
  return (
    <footer className="foot">
      <div className="wrap foot-row">
        <div>
          <div className="nm">{author.name}</div>
          <div className="small" style={{ marginTop: 8 }}>Любовное фэнтези · Попаданки · Юмор · 16+</div>
        </div>
        <div className="small" style={{ textAlign: "right" }}>
          <a href={author.profileUrl} target="_blank" rel="noopener">Читать на ЛитГороде</a><br />
          <a href={author.socials.telegram} target="_blank" rel="noopener">Telegram-канал автора</a><br />
          <span style={{ opacity: .7 }}>Лендинг-макет · обложки © Тая Подлунная</span>
        </div>
      </div>
    </footer>
  );
}

function BookModal({ book, onClose, onPrev, onNext, onSubscribe }) {
  React.useEffect(() => {
    const h = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowLeft") onPrev();
      if (e.key === "ArrowRight") onNext();
    };
    window.addEventListener("keydown", h);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", h); document.body.style.overflow = ""; };
  }, [book]);
  if (!book) return null;
  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="m-close" onClick={onClose}>✕</button>
        <div className="m-cover">
          <CoverImage src={book.cover} alt={book.title} title={book.title} />
          <div className="m-badge"><StatusBadge status={book.status} /></div>
        </div>
        <div className="m-body">
          <div className="genres" style={{ marginBottom: 14 }}>
            {book.genres.map((g) => (<span key={g} className="tag tag-genre">{g}</span>))}
            {book.tags.slice(0, 2).map((t) => (<span key={t} className="tag">{t}</span>))}
          </div>
          <h3>{book.title}</h3>
          {book.subtitle && <div className="m-sub">{book.subtitle}</div>}
          <div className="m-prof">В прошлой жизни — {book.profession} ({book.professionPast}) · теперь — {book.role}</div>
          <div className="m-annot">
            {book.annotation.map((p, i) => (<p key={i}>{p}</p>))}
          </div>
          <div className="m-teasers">
            <div className="tt">Вас ждут</div>
            <ul style={{ margin: 0, padding: 0 }}>
              {book.teasers.map((t, i) => (<li key={i}><span className="dia" />{t}</li>))}
            </ul>
          </div>
          <div className="m-cta">
            {book.status === "available" ? (
              <React.Fragment>
                <a className="btn btn-primary" href={book.readUrl} target="_blank" rel="noopener">Читать бесплатно</a>
                <a className="btn btn-ghost" href={book.viewUrl} target="_blank" rel="noopener">На ЛитГороде</a>
              </React.Fragment>
            ) : (
              <button className="btn btn-primary" onClick={() => { onClose(); onSubscribe(); }}>Сообщить о релизе</button>
            )}
          </div>
        </div>
        <div className="m-nav">
          <button onClick={onPrev} aria-label="Назад">‹</button>
          <button onClick={onNext} aria-label="Вперёд">›</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Icon, CoverImage, Stat, StatusBadge, BookCard, MethodSection, QuoteBand, Reviews, Subscribe, Footer, BookModal });