// Sections for the "Livros / Biblioteca" page
// Editorial spreads with expanded synopses + library catalogue card.

const BOOK_SYNOPSES = [
  {
    id: "livro-1",
    vol: "Livro I",
    order: 1,
    title: "O Legado do Fogo",
    epithet: "Onde a chama é acesa",
    chronology: "Saga Principal · Tempo presente",
    publishedOrder: "Publicação · 1º",
    cover: "assets/cover-1.jpg",
    href: "https://www.amazon.com.br/Legado-Fogo-Livro-Gustavo-Machado-ebook/dp/B0F1H1RVYW",
    price: "R$ 47,05",
    classification: "Romance · Fantasia medieval épica",
    featured: true,
    themes: ["Honra herdada", "Coragem", "Identidade", "Dever"],
    pull: "A verdadeira força não vem apenas da habilidade com a espada, mas da coragem de forjar seu próprio destino.",
    pullSource: "do Livro I",
    sinopse: [
      "Em um mundo dividido em três grandes reinos — Humanos, Dragões e Demônios — Lancelot, um jovem aspirante a cavaleiro, busca honrar o legado de sua família e proteger o reino dos Humanos. Filho dos fundadores da prestigiada Ordem dos Cavaleiros da Chama Sagrada, enfrenta o desafio de se provar digno de um legado de coragem e honra.",
      "Acompanhamos sua jornada desde o treinamento rigoroso até as batalhas épicas contra criaturas lendárias e forças das trevas poderosas. Em meio a lutas intensas e descobertas pessoais, Lancelot deve encontrar seu próprio caminho enquanto lida com a pressão de se comparar com uma irmã prodígio — Agni — que é tanto mentora quanto inspiração.",
      "O Legado do Fogo é uma aventura de fantasia medieval que explora dever, honra, herança familiar e a busca por identidade pessoal. Em um cenário vibrante e ameaçador, Lancelot enfrenta a dúvida, o medo e o desejo de provar seu valor enquanto luta para proteger o reino dos perigos iminentes.",
      "Prepare-se para uma jornada repleta de emoção e autodescoberta — onde a verdadeira força não vem apenas da habilidade com a espada, mas da coragem de forjar seu próprio destino.",
    ],
  },
  {
    id: "livro-2",
    vol: "Livro II",
    order: 2,
    title: "O Véu da Escuridão",
    epithet: "E se a escuridão não for o que parece?",
    chronology: "Saga Principal · Continuação direta",
    publishedOrder: "Publicação · 2º",
    cover: "assets/cover-2.jpg",
    href: "https://www.amazon.com.br/Legado-Fogo-Livro-V%C3%A9u-Escurid%C3%A3o-ebook/dp/B0F9VKWVY3",
    price: "R$ 29,99",
    classification: "Romance · Continuação · Fantasia sombria",
    themes: ["Traição", "Fuga", "Verdade oculta", "Lealdade quebrada"],
    pull: "Conforme os laços de lealdade se desfazem e a escuridão avança, a única certeza que resta é que nada será como antes.",
    pullSource: "do Livro II",
    sinopse: [
      "O Legado do Fogo · Livro II: O Véu da Escuridão continua a jornada de Lancelot, agora mergulhado em um turbilhão de caos e incerteza. Após um evento chocante — a revelação de que seu pai, Aiden, pode ter matado o rei — ele se vê forçado a fugir da Fortaleza Rubra, sendo caçado por aqueles que antes chamava de aliados.",
      "Perseguido pelos próprios Cavaleiros da Ordem da Chama Sagrada, Lancelot se refugia na sombria Floresta Negra, um território traiçoeiro repleto de perigos e mistérios antigos. Enquanto tenta entender as motivações de seu pai, descobre que há forças ocultas manipulando o destino do Reino dos Humanos.",
      "Entre batalhas sangrentas, traições inesperadas e verdades dolorosas, Lancelot deve enfrentar não apenas os inimigos ao seu redor, mas também suas próprias dúvidas e medos. Conforme os laços de lealdade se desfazem e a escuridão avança, a única certeza que resta é que nada será como antes.",
      "Mas e se a escuridão não for o que parece? O Véu da Escuridão guarda segredos esquecidos pelo tempo — e sua verdadeira natureza pode estar além de tudo o que Lancelot e o Reino dos Humanos acreditavam saber.",
    ],
  },
  {
    id: "jhon",
    vol: "Saga Paralela",
    order: 3,
    title: "Jhon na Academia de Magia",
    epithet: "Ensinar é mais difícil do que duelar",
    chronology: "Quatro anos antes do Livro I · Pode ser lido independente",
    publishedOrder: "Publicação · 3º",
    cover: "assets/cover-3.jpg",
    href: "https://a.co/d/2tXt5Kj",
    price: "R$ 19,99",
    classification: "Conto · Saga Paralela · Magia e amadurecimento",
    themes: ["Magia", "Ensino", "Propósito", "Sombras nascentes"],
    pull: "O verdadeiro legado não está apenas no sangue — mas nas escolhas que faz, nas vidas que toca e nos alunos que guia.",
    pullSource: "da Saga de Jhon",
    sinopse: [
      "Este conto se passa quatro anos antes dos eventos de O Legado do Fogo — e pode ser lido independentemente. Ideal para quem quer conhecer o universo antes de embarcar na saga principal de Lancelot.",
      "Jhon Astorio sempre foi conhecido por sua mente brilhante, sua frieza e por ser o filho do lendário Grande Sábio. Mas quando sua mãe, Alethra Astorio, o nomeia professor na Academia de Magia do Reino, ele se vê diante de um desafio que nem todos os livros e grimórios do mundo o prepararam para enfrentar: pessoas.",
      "Com uma turma formada por aprendizes inexperientes, egos inflamados e poderes descontrolados, Jhon precisará provar que não está ali por influência — e sim porque sabe o que está fazendo. Treinos intensos, duelos épicos, conflitos internos e dilemas reais o levarão a descobrir que ensinar é muito mais do que repassar conhecimento.",
      "Conforme novos inimigos surgem nas sombras e antigas forças despertam, o jovem professor começa a entender que o verdadeiro legado que carrega não está apenas no sangue — mas nas escolhas que faz, nas vidas que toca e nos alunos que guia.",
      "Uma jornada de amadurecimento, magia e propósito — com personagens marcantes, batalhas memoráveis e uma história que se conecta diretamente com os grandes eventos do universo de O Legado do Fogo.",
    ],
  },
  {
    id: "diario",
    vol: "Diário",
    order: 4,
    title: "Diário de Lancelot",
    epithet: "A Ascensão do Cavaleiro · Volume 1",
    chronology: "Infância de Lancelot · Anos antes da Saga Principal",
    publishedOrder: "Publicação · 4º",
    cover: "assets/cover-4.jpg",
    href: "https://a.co/d/cbOxhmR",
    price: "R$ 19,99",
    classification: "Companion · Diário íntimo · Material de mundo",
    themes: ["Infância", "Treinamento", "Amizades", "Despertar"],
    pull: "O primeiro ano foi só o começo. E o fogo… acaba de despertar.",
    pullSource: "do Diário de Lancelot",
    sinopse: [
      "Antes de se tornar o nome que marcaria a história do Reino dos Humanos, Lancelot era apenas um garoto tentando encontrar espaço nas sombras de uma família lendária.",
      "Aos cinco anos, ele começa sua jornada como recruta da Ordem da Chama Sagrada. Entre treinamentos brutais, amizades improváveis e descobertas profundas, Lancelot narra — com franqueza quase inocente — cada dúvida, medo, queda… e as primeiras vitórias que forjam o aço de seu caráter.",
      "Aqui não existe glória fácil: há suor, dor, silêncio — e momentos que moldam um herói.",
      "Com narrativa íntima e crescente, o Volume 1 apresenta a infância de um dos personagens mais icônicos do universo, mergulhando em relações complexas, intrigas silenciosas, batalhas internas e na chama que, agora, começa a despertar.",
      "O primeiro ano foi só o começo. E o fogo… acaba de despertar.",
    ],
  },
];

// ============================================================
// Hero
// ============================================================
function BibliotecaHero({ intensity }) {
  return (
    <section className="chapter-hero biblioteca-hero">
      <div className="chapter-hero-bg" />
      <window.EmberCanvas intensity={intensity} />

      <div className="chapter-hero-inner reveal">
        <div className="chapter-eyebrow">
          <span className="line" />
          <span className="eyebrow">A Biblioteca · O Acervo do Cavaleiro</span>
          <span className="line" />
        </div>

        <h1 className="chapter-title">
          Quatro tomos,<br />
          uma <span className="em">mesma chama</span>
        </h1>

        <p className="chapter-lede">
          Romances principais, sagas paralelas e materiais íntimos de mundo — todos os volumes de <em>O Legado do Fogo</em> reunidos num único acervo. Cada tomo registra um ângulo da mesma história: o do herói que se forja, o do feiticeiro que ensina, o do menino que ainda não sabe ser o que será.
        </p>

        <p className="chapter-sub">
          Folheie cada sinopse. Compare ordens de leitura. Encontre o volume por onde começar.
        </p>

        <div className="chapter-breadcrumbs">
          <a href="index.html">Início</a>
          <span className="sep">/</span>
          <span className="current">Livros</span>
        </div>
      </div>

      <div className="scroll-hint">
        <span>Adentre o acervo</span>
        <span className="line" />
      </div>
    </section>
  );
}

// ============================================================
// Reading-order timeline
// ============================================================
function ReadingOrder() {
  const [order, setOrder] = React.useState("cronologica"); // "cronologica" | "publicacao"

  // Cronológica: Diário (criança) → Jhon (4 anos antes) → Livro I → Livro II
  // Publicação: Livro I → Livro II → Saga Jhon → Diário
  const orderMap = {
    cronologica: ["diario", "jhon", "livro-1", "livro-2"],
    publicacao:  ["livro-1", "livro-2", "jhon", "diario"],
  };
  const byId = Object.fromEntries(BOOK_SYNOPSES.map((b) => [b.id, b]));
  const arranged = orderMap[order].map((id) => byId[id]);

  return (
    <section className="biblioteca-order">
      <div className="atlas-rule" />
      <div className="biblioteca-order-head">
        <div>
          <span className="eyebrow">A Ordem do Acervo</span>
          <h2 className="section-title biblioteca-section-title">
            Por onde <span className="em">começar?</span>
          </h2>
          <p className="biblioteca-order-lede">
            Cada leitor encontra seu próprio caminho. Abaixo, duas trilhas possíveis — a ordem em que os livros foram publicados, e a ordem em que os fatos acontecem dentro do mundo de Maerdradus.
          </p>
        </div>

        <div className="order-toggle" role="tablist" aria-label="Trocar ordem de leitura">
          <button
            type="button"
            role="tab"
            aria-selected={order === "cronologica"}
            className={"order-toggle-btn" + (order === "cronologica" ? " active" : "")}
            onClick={() => setOrder("cronologica")}
          >
            Ordem cronológica
          </button>
          <button
            type="button"
            role="tab"
            aria-selected={order === "publicacao"}
            className={"order-toggle-btn" + (order === "publicacao" ? " active" : "")}
            onClick={() => setOrder("publicacao")}
          >
            Ordem de publicação
          </button>
        </div>
      </div>

      <ol className="order-timeline">
        {arranged.map((b, i) => (
          <li key={b.id} className="order-step reveal" style={{ transitionDelay: (i * 80) + "ms" }}>
            <a href={"#" + b.id} className="order-step-card">
              <div className="order-step-cover">
                <img src={b.cover} alt={"Capa — " + b.title} loading="lazy" />
              </div>
              <div className="order-step-body">
                <span className="order-step-num">{String(i + 1).padStart(2, "0")}</span>
                <span className="order-step-vol">{b.vol}</span>
                <span className="order-step-title">{b.title}</span>
                <span className="order-step-when">
                  {order === "cronologica" ? b.chronology : b.publishedOrder}
                </span>
              </div>
            </a>
            {i < arranged.length - 1 && (
              <span className="order-step-arrow" aria-hidden="true">→</span>
            )}
          </li>
        ))}
      </ol>
      <div className="atlas-rule" />
    </section>
  );
}

// ============================================================
// Book spread (one per book)
// ============================================================
function BookSpread({ book, index }) {
  const flipped = index % 2 === 1;
  return (
    <article
      id={book.id}
      className={"book-spread" + (flipped ? " flipped" : "") + (book.featured ? " featured" : "")}
    >
      <div className="book-spread-folio">
        <span className="folio-num">{String(book.order).padStart(2, "0")}</span>
        <span className="folio-rule" />
        <span className="folio-vol">{book.vol}</span>
      </div>

      <div className="book-spread-grid">
        <div className="book-spread-cover-col">
          <div className="book-spread-cover">
            <img src={book.cover} alt={"Capa — " + book.title} loading="lazy" />
            <span className="book-spread-cover-shine" aria-hidden="true" />
          </div>

          {/* Catalogue card — library-style index */}
          <aside className="ficha">
            <div className="ficha-head">
              <span className="ficha-stamp">FICHA · BIBLIOTECA</span>
              <span className="ficha-cota">{`MAE-${String(book.order).padStart(3, "0")}/${book.vol.split(" ")[0].toUpperCase()}`}</span>
            </div>
            <dl className="ficha-list">
              <div><dt>Autor</dt><dd>Gustavo Machado</dd></div>
              <div><dt>Categoria</dt><dd>{book.classification}</dd></div>
              <div><dt>Cronologia</dt><dd>{book.chronology}</dd></div>
              <div><dt>Formato</dt><dd>eBook (Kindle)</dd></div>
              <div><dt>Selo</dt><dd>O Legado do Fogo</dd></div>
            </dl>
            <div className="ficha-price">
              <span className="ficha-price-label">eBook</span>
              <span className="ficha-price-value">{book.price}</span>
            </div>
            <a href={book.href} target="_blank" rel="noreferrer" className="ficha-cta">
              Comprar na Amazon
              <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </a>
          </aside>
        </div>

        <div className="book-spread-body">
          <header className="book-spread-head">
            <span className="book-spread-eyebrow">{book.vol} · {book.chronology}</span>
            <h2 className="book-spread-title">{book.title}</h2>
            <p className="book-spread-epithet"><em>{book.epithet}</em></p>
          </header>

          <div className="book-spread-themes">
            {book.themes.map((t) => (
              <span key={t} className="book-theme">{t}</span>
            ))}
          </div>

          <div className="book-spread-prose">
            {book.sinopse.map((p, i) => (
              <p key={i} className={"book-para" + (i === 0 ? " has-dropcap" : "")}>{p}</p>
            ))}
          </div>

          <blockquote className="book-spread-pull">
            <span className="book-pull-mark">“</span>
            <p>{book.pull}</p>
            <span className="book-pull-source">— trecho selecionado {book.pullSource}</span>
          </blockquote>
        </div>
      </div>
    </article>
  );
}

// ============================================================
// Closing collection CTA
// ============================================================
function ColecaoCompleta() {
  return (
    <section className="biblioteca-coda">
      <div className="biblioteca-coda-inner">
        <div className="biblioteca-coda-covers" aria-hidden="true">
          {BOOK_SYNOPSES.map((b, i) => (
            <img key={b.id} src={b.cover} alt="" loading="lazy" style={{
              transform: `translateX(${i * -22}px) translateY(${(i % 2 === 0 ? -6 : 6)}px) rotate(${(i - 1.5) * 3}deg)`,
              zIndex: 10 - i,
            }} />
          ))}
        </div>
        <div className="biblioteca-coda-copy">
          <span className="eyebrow">A Coleção Completa</span>
          <h2 className="biblioteca-coda-title">Quatro tomos. <span className="em">Um único legado.</span></h2>
          <p className="biblioteca-coda-lede">
            Comece pelo romance principal, ou siga a ordem cronológica. Acompanhe os passos de Lancelot desde a primeira espada empunhada até as fronteiras da Floresta Negra — e descubra por que tantos leitores chamaram esta saga de uma das mais marcantes da fantasia brasileira recente.
          </p>
          <div className="biblioteca-coda-actions">
            <a href="#livro-1" className="btn btn-primary">Começar pelo Livro I <span className="arrow">→</span></a>
            <a href="Chamado.html" className="btn btn-ghost">Atender o chamado</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Spread list wrapper
// ============================================================
function BibliotecaSpreads() {
  return (
    <section className="biblioteca-spreads">
      {BOOK_SYNOPSES.map((b, i) => (
        <BookSpread key={b.id} book={b} index={i} />
      ))}
    </section>
  );
}

Object.assign(window, {
  BibliotecaHero, ReadingOrder, BibliotecaSpreads, ColecaoCompleta, BOOK_SYNOPSES,
});