/* global React, ReactDOM */
/* TORI STONE — Library page app */

function LibraryHero() {
  return (
    <section className="lib-hero" data-section-label="Library Hero">
      <div className="frame">
        <p className="eyebrow"><span className="dot"></span>The Library<span className="dot"></span></p>
        <h1 className="lib-hero__title">Every book in the <span className="ital">Tori Stone</span> world.</h1>
        <p className="lib-hero__sub">The series. The standalones. A reading map for the obsessed.</p>
      </div>
    </section>
  );
}

function LibrarySeries() {
  return (
    <section className="section">
      <div className="frame">
        <div className="section__head">
          <div className="section__eyebrow">The Main Event</div>
          <h2 className="section__title">The Ruthless <span className="ital">Series</span></h2>
          <p className="section__sub">A New Orleans mafia romance in five books, plus a free prequel.</p>
        </div>
        <div className="reading">
          {RUTHLESS.map((b) => (
            <div key={b.id} className="read-card" data-status={b.status}>
              <span className="read-card__chip">{b.statusLabel}</span>
              <a href={b.link} target={b.link.startsWith("http")?"_blank":undefined} rel="noopener noreferrer" className="read-card__cover">
                {b.cover
                  ? <img src={b.cover} alt={b.title} />
                  : <PlaceholderCover title={b.title} num={b.n} book={`Book ${b.n}`} date={b.release} />}
              </a>
              <h3 className="read-card__title">{b.title}</h3>
              <p className="read-card__sub">{b.subtitle}</p>
              <span className="read-card__date">{b.release}</span>
              <div className="read-card__heat"><HeatMeter level={b.heat || 4} /></div>
              <a href={b.link} target={b.link.startsWith("http")?"_blank":undefined} rel="noopener noreferrer" className="read-card__link">{b.status === "here" ? "Pre-Order →" : "Read →"}</a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function LibraryStandalones() {
  return (
    <section className="section section--alt">
      <div className="frame">
        <div className="section__head">
          <div className="section__eyebrow">Outside the Series</div>
          <h2 className="section__title">Standalones</h2>
          <p className="section__sub">Other dark romances from the Tori Stone universe.</p>
        </div>
        <div className="shelf">
          {STANDALONES.map((b) => (
            <a key={b.id} href={b.link} target="_blank" rel="noopener noreferrer" className="book">
              <div className="book__cover"><img src={b.cover} alt={b.title} /></div>
              <h3 className="book__title">{b.title}</h3>
              <p className="book__sub">{b.sub} · {b.year}</p>
            </a>
          ))}
        </div>
        <div style={{textAlign:"center", marginTop:"3rem"}}>
          <a href="index.html" className="btn btn--ghost">← Back to Home</a>
        </div>
      </div>
    </section>
  );
}

function LibraryApp() {
  React.useEffect(() => {
    document.documentElement.setAttribute("data-variation", "luxe");
    document.documentElement.setAttribute("data-density", "regular");
    document.body.setAttribute("data-atmosphere", "on");
  }, []);

  return (
    <>
      <AnnouncementBar />
      <Nav />
      <LibraryHero />
      <LibrarySeries />
      <LibraryStandalones />
      <Newsletter />
      <Footer />
    </>
  );
}

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