// Books — editorial, literary mode.

function BookCover({ tone, title, author, size = "card" }) {
  return (
    <div className={`book-card-cover cover-${tone}`}>
      <em>{author}</em>
      <b>{title}</b>
    </div>
  );
}

function BookCard({ b, lang, onSelect }) {
  return (
    <a className="book-card" onClick={onSelect}>
      <BookCover tone={b.cover} title={b.title} author={b.author} />
      {b.discount > 0 && <DiscountTag pct={b.discount} />}
      {b.subtitle === "Klassík" || b.subtitle === "Classic"
        ? <span className="book-card-badge">Klassík</span>
        : null}
      <div className="book-card-meta">
        <div className="book-card-title">{b.title}</div>
        <div className="book-card-author">{b.author}</div>
        <div className="book-card-price-row">
          <span className="book-card-price">{ISK(b.price)}</span>
          {b.was && <span className="book-card-was">{ISK(b.was)}</span>}
        </div>
        <div className="book-card-pickup">
          <PickupBadge stock={b.stock} lang={lang} compact />
        </div>
      </div>
    </a>
  );
}

function BooksPage({ lang }) {
  const books = window.PENNINN_PRODUCTS.books;
  const feature = books.find(b => b.title === "Algjör Perla") || books[2];
  const [tab, setTab] = React.useState("all");
  const [pdp, setPdp] = React.useState(null);

  if (pdp) return <BooksPDP product={pdp} lang={lang} onBack={() => setPdp(null)} />;

  const filterMap = {
    all:      () => true,
    is:       b => b.category.startsWith("Íslenskar") || b.category === "Handbækur",
    fiction:  b => b.subtitle === "Skáldsaga" || b.subtitle === "Novel",
    thriller: b => b.category === "Spennusögur",
    en:       b => b.category === "Erlendar bækur",
  };
  const tabs = [
    { id: "all",      is: "Allar", en: "All" },
    { id: "is",       is: "Íslenskar", en: "Icelandic" },
    { id: "fiction",  is: "Skáldskapur", en: "Fiction" },
    { id: "thriller", is: "Spennusögur", en: "Thrillers" },
    { id: "en",       is: "Erlendar", en: "Foreign" },
  ];
  const filtered = books.filter(filterMap[tab]);

  return (
    <div className="books-page shell">
      <Crumbs items={[t(lang,"Forsíða","Home"), t(lang,"Bækur","Books")]} />

      <section className="books-hero">
        <div className="books-hero-left">
          <span className="books-eyebrow">— {t(lang,"Lestrarvika 2025","Reading week 2025")}</span>
          <h1 className="books-hero-title">
            {t(lang,
              <>Sögur sem<br/>endast <em>lengur</em><br/>en kvöldið.</>,
              <>Stories that<br/>outlast <em>the evening.</em></>)}
          </h1>
          <p className="books-hero-lede">
            {t(lang,
              "Bókmenntir handa nóttinni, sögur sem fylgja þér í strætó, handbækur sem hjálpa, og barnabækur sem börnin biðja um aftur. Allar í verslunum okkar og með pökkun samdægurs.",
              "Books for the night, stories for the bus, handbooks that help, and children's books your kids will ask for again. All in our stores, packed same-day.")}
          </p>
          <div className="books-hero-meta">
            <div><strong>1.840</strong>{t(lang,"Íslenskar bækur","Icelandic")}</div>
            <div><strong>9.200</strong>{t(lang,"Erlendar","Foreign")}</div>
            <div><strong>240</strong>{t(lang,"Nýjar í viku","New this week")}</div>
          </div>
        </div>
        <div className="books-hero-right">
          <div className="books-hero-shelf">
            {books.slice(0,4).map(b => (
              <div key={b.id} className={"books-hero-book cover-" + b.cover}>
                <em>{b.author}</em>
                <b>{b.title}</b>
              </div>
            ))}
          </div>
        </div>
      </section>

      <div className="books-tabs">
        {tabs.map(x => (
          <button key={x.id} className={"books-tab " + (tab === x.id ? "is-on" : "")} onClick={() => setTab(x.id)}>
            {t(lang, x.is, x.en)}
          </button>
        ))}
      </div>

      <section className="books-section">
        <header className="books-section-head">
          <h2>{t(lang, <>Nýjar <em>íslenskar</em> bækur</>, <>New <em>Icelandic</em> books</>)}</h2>
          <a className="books-section-link">{t(lang,"Allar nýjar bækur","All new books")} →</a>
        </header>
        <div className="books-grid">
          {filtered.slice(0,8).map(b => <BookCard key={b.id} b={b} lang={lang} onSelect={() => setPdp(b)} />)}
        </div>
      </section>

      <section className="books-section">
        <div className="books-feature">
          <div>
            <span className="books-feature-eyebrow">— {t(lang,"Val ritstjórnar","Editor's pick")}</span>
            <h2>{feature.title}</h2>
            <blockquote>
              {t(lang,
                "„Tær frásögn sem skilur eftir sig mynd — Auður er á hátindi getu sinnar.",
                "“A clear, image-leaving narrative — Auður is at the height of her powers.”")}
            </blockquote>
            <div className="books-feature-meta">
              <span className="price">{ISK(feature.price)}</span>
              {feature.was && <span className="was">{ISK(feature.was)}</span>}
              <PickupBadge stock={feature.stock} lang={lang} compact />
            </div>
            <div className="books-feature-actions">
              <button className="btn-primary" onClick={() => setPdp(feature)}>{t(lang,"Skoða nánar","See more")} →</button>
              <button className="btn-ghost">{t(lang,"Lesa kafla","Read a chapter")}</button>
            </div>
          </div>
          <div className="books-feature-cover">
            <div className={"books-feature-cover-inner cover-" + feature.cover}>
              <em>{feature.author}</em>
              <b>{feature.title}</b>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { BooksPage });