// Books & Templates page — reference books + the Gumroad-gated template library.
//
// The 102-template library is sold as a single product on Gumroad. This page
// previews every template grouped by module and sends buyers to Gumroad to
// purchase + download. Book buyers apply their discount code at checkout.
// No files are served from this site, so nothing downloads without paying.

const GUMROAD_URL = "https://pmosimplified.gumroad.com/l/PMOMastery-TheCompleteTemplateLibrary";

function BooksTemplatesApp() {
  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{ "themeColor": "navy" }/*EDITMODE-END*/);
  useTweakBodyClasses(tweaks);
  useLucideIcons([tweaks]);

  return (
    <>
      <SiteNav active="books-templates" />

      <header className="page-header">
        <div className="container" style={{ textAlign: "center" }}>
          <div className="bt-hero-image">
            <img src={(window.CURRENT_LANG || "en") === "en" ? "assets/books-templates-hero.png" : "assets/books-templates-hero-de.png"} alt="PMO Mastery — the complete video course, book, and module template library" />
          </div>
          <span className="eyebrow">{t("bt.eyebrow")}</span>
          <h1 className="bt-title">{t("bt.title")}</h1>
          <p>{t("bt.sub")}</p>
        </div>
      </header>

      {/* Books — Amazon KDP */}
      <section className="section">
        <div className="container">
          <div className="section-head" style={{ marginBottom: 28 }}>
            <div className="section-head-text">
              <span className="eyebrow">{t("books.booksEyebrow")}</span>
              <h2 style={{ fontSize: 28 }}>{t("books.booksTitle")}</h2>
            </div>
          </div>

          {/* Complete book — feature card with uploadable image + description */}
          <div className="book-feature">
            <div className="book-feature-cover">
              <image-slot id="combo-book-cover" shape="rounded" radius="10" fit="contain"
                          src="assets/module-ebook-cover.png"
                          placeholder="Drop the book cover"></image-slot>
            </div>
            <div className="book-feature-body">
              <span className="book-feature-eyebrow">{t("books.comboSub")}</span>
              <h3 className="book-feature-title">{t("books.comboTitle")}</h3>
              <p className="book-feature-desc">{t("books.comboDesc")}</p>
              <a href={SITE.AMAZON.fullEbook.url} target="_blank" rel="noopener noreferrer" className="btn btn--primary">
                {t("books.amazonBtn")} <i data-lucide="external-link"></i>
              </a>
            </div>
          </div>

          {/* Module ebooks 1–19 */}
          <div className="section-head" style={{ margin: "44px 0 24px" }}>
            <div className="section-head-text">
              <span className="eyebrow">{t("books.moduleEbooksTitle")}</span>
              <p>{t("books.moduleEbooksSub")}</p>
            </div>
          </div>

          <div className="ebook-module-grid">
            {SITE.MODULES.map((m) => {
              const prod = SITE.MODULE_PRODUCTS.find(p => p.num === m.num) || {};
              const url = prod.ebook && prod.ebook.url;
              const live = url && url !== "#";
              return (
                <a key={m.num}
                   href={live ? url : undefined}
                   target={live ? "_blank" : undefined}
                   rel="noopener noreferrer"
                   className={"ebook-module-card" + (live ? "" : " is-disabled")}>
                  <div className="ebook-module-head">
                    <span className="ebook-module-thumb">
                      <img src="assets/module-ebook-cover.png" alt={tx(m, "title") + " — ebook cover"} />
                    </span>
                    <span className="ebook-module-badge">{t("tpl.module")} {m.num}</span>
                  </div>
                  <h3 className="ebook-module-title">{tx(m, "title")}</h3>
                  <div className="ebook-module-foot">
                    <span className="ebook-module-cta">{t("books.moduleEbookBtn")} <i data-lucide="arrow-right"></i></span>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      {/* Template library — Gumroad */}
      <section className="section" style={{ background: "var(--color-surface-alt)", paddingBottom: 0 }}>
        <div className="container">
          <div className="section-head" style={{ marginBottom: 28 }}>
            <div className="section-head-text">
              <span className="eyebrow">{t("tpl.eyebrow")}</span>
              <h2 style={{ fontSize: 28, whiteSpace: "nowrap" }}>{t("tpl.title")}</h2>
              <p>{t("tpl.sub")}</p>
            </div>
          </div>

          <div className="tpl-buy">
            <div className="tpl-buy-text">
              <span className="tpl-buy-icon"><i data-lucide="package"></i></span>
              <h2>{t("tpl.buyTitle")}</h2>
              <p>{t("tpl.buyBody")}</p>
              <div className="tpl-buy-actions">
                <a href={GUMROAD_URL} target="_blank" rel="noopener noreferrer" className="btn btn--primary btn--lg">
                  {t("tpl.buyBtn")} <i data-lucide="arrow-right"></i>
                </a>
              </div>
              <p className="tpl-buy-note"><i data-lucide="ticket"></i> <a href={"mailto:info@pmosimplified.com?subject=" + encodeURIComponent("Book receipt — 40% template discount") + "&body=" + encodeURIComponent("Hi PMO Simplified team,\n\nI bought the book and would like the 40% discount on the template library. A copy of my receipt is attached.\n\nName:\nOrder/receipt no.:\n\nThank you!")} className="tpl-buy-note-link">{t("tpl.buyNote")}</a></p>
            </div>
          </div>
          <p className="tpl-preview-note">{t("tpl.previewNote")}</p>
        </div>
      </section>

      <section className="section" style={{ background: "var(--color-surface-alt)", paddingTop: 32 }}>
        <div className="container">
          <div className="template-modules">
            {SITE.TEMPLATE_MODULES.map((mod) => (
              <div key={mod.num} className="template-module">
                <div className="template-module-head">
                  <span className="template-module-icon"><i data-lucide={mod.icon}></i></span>
                  <div className="template-module-headtext">
                    <span className="template-module-eyebrow">{t("tpl.module")} {mod.num}</span>
                    <h2 className="template-module-title">{mod.title}</h2>
                  </div>
                  <span className="template-module-count">{mod.items.length} {t("tpl.count")}</span>
                </div>
                <ul className="template-list">
                  {mod.items.map((it, i) => (
                    <li key={i} className="template-list-item">
                      <span className="template-list-icon"><i data-lucide={it.format === "DOCX" ? "file-text" : "sheet"}></i></span>
                      <span className="template-list-name">{it.name}</span>
                      <span className="template-list-format">{it.format}</span>
                      <span className="template-list-badge"><i data-lucide="check"></i> {t("tpl.previewBadge")}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          <div className="tpl-buy tpl-buy--foot">
            <div className="tpl-buy-text">
              <h2>{t("tpl.buyTitle")}</h2>
              <div className="tpl-buy-actions">
                <a href={GUMROAD_URL} target="_blank" rel="noopener noreferrer" className="btn btn--primary btn--lg">
                  {t("tpl.buyBtn")} <i data-lucide="arrow-right"></i>
                </a>
              </div>
              <p className="tpl-buy-note"><i data-lucide="ticket"></i> <a href={"mailto:info@pmosimplified.com?subject=" + encodeURIComponent("Book receipt — 40% template discount") + "&body=" + encodeURIComponent("Hi PMO Simplified team,\n\nI bought the book and would like the 40% discount on the template library. A copy of my receipt is attached.\n\nName:\nOrder/receipt no.:\n\nThank you!")} className="tpl-buy-note-link">{t("tpl.buyNote")}</a></p>
            </div>
          </div>
        </div>
      </section>

      <SiteFooter />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio label="Primary color"
          value={tweaks.themeColor}
          onChange={v => setTweak("themeColor", v)}
          options={[
            { value: "navy",     label: "Navy" },
            { value: "graphite", label: "Graphite" },
            { value: "emerald",  label: "Emerald" },
            { value: "gold",     label: "Gold" },
          ]} />
      </TweaksPanel>
    </>
  );
}

window.BooksTemplatesApp = BooksTemplatesApp;