// Pricing page — routes every purchase to Gumroad (Option C model).
//
// Catalog-wide offers up top, then a per-module picker exposing the five
// products each module has on Gumroad. All links + prices live in
// site-data.js (SITE.CATALOG_OFFERS, SITE.MODULE_PRODUCTS). Gumroad handles
// payment + delivery; videos stream, ebooks/templates download.

const { useState } = React;

const ENROLL_DEFAULTS = /*EDITMODE-BEGIN*/{ "themeColor": "navy" } /*EDITMODE-END*/;

function priceLabel(p) {
  return (p === null || p === undefined) ? "—" : "$" + p;
}

function BuyCard({ icon, title, desc, product, popular }) {
  const url = product && product.url ? product.url : "#";
  const live = url && url !== "#";
  return (
    <div className={"buy-card" + (popular ? " is-popular" : "")}>
      <span className="buy-card-icon"><i data-lucide={icon}></i></span>
      <h3 className="buy-card-title">{title}</h3>
      <p className="buy-card-desc">{desc}</p>
      <div className="buy-card-foot">
        <span className="buy-card-price">{priceLabel(product && product.price)}</span>
        {live ? (
          <a href={url} target="_blank" rel="noopener noreferrer" className="btn btn--primary">
            {t("enroll.buyBtn")} <i data-lucide="arrow-right"></i>
          </a>
        ) : (
          <span className="btn btn--outline is-disabled" aria-disabled="true">{t("enroll.soon")}</span>
        )}
      </div>
    </div>
  );
}

function EnrollApp() {
  const [tweaks, setTweak] = useTweaks(ENROLL_DEFAULTS);
  useLucideIcons([tweaks]);
  useTweakBodyClasses(tweaks);

  const modules = SITE.MODULES;
  const initial = (() => {
    const p = new URLSearchParams(window.location.search).get("module");
    const n = parseInt(p, 10);
    return (n >= 1 && n <= modules.length) ? n : 1;
  })();
  const [modNum, setModNum] = useState(initial);

  const mod = modules.find(m => m.num === modNum) || modules[0];
  const prod = SITE.MODULE_PRODUCTS.find(p => p.num === modNum) || {};
  const cat = SITE.CATALOG_OFFERS;

  const options = [
    { key: "video",     icon: "play-circle",     title: t("enroll.optVideo"),     desc: t("enroll.optVideoDesc"),     product: prod.video },
    { key: "ebook",     icon: "book-open",        title: t("enroll.optEbook"),     desc: t("enroll.optEbookDesc"),     product: prod.ebook },
    { key: "bundle",    icon: "layers",           title: t("enroll.optBundle"),    desc: t("enroll.optBundleDesc"),    product: prod.bundle },
    { key: "templates", icon: "layout-template",  title: t("enroll.optTemplates"), desc: t("enroll.optTemplatesDesc"), product: prod.templates },
    { key: "full",      icon: "package",          title: t("enroll.optFull"),      desc: t("enroll.optFullDesc"),      product: prod.full, popular: true },
  ];

  return (
    <>
      <SiteNav active="pricing" />

      <header className="page-header">
        <div className="container">
          <span className="eyebrow">{t("enroll.eyebrow")}</span>
          <h1 style={{ fontSize: "35px" }}>{t("enroll.title")}</h1>
          <p>{t("enroll.sub")}</p>
        </div>
      </header>

      {/* Catalog-wide offers */}
      <section className="section">
        <div className="container">
          <div className="section-head" style={{ marginBottom: 28 }}>
            <div className="section-head-text">
              <span className="eyebrow">{t("enroll.catalogHeading")}</span>
            </div>
          </div>
          <div className="buy-grid buy-grid--catalog">
            <BuyCard icon="graduation-cap" title={t("enroll.completeTitle")} desc={t("enroll.completeBody")} product={cat.complete} popular={true} />
            <BuyCard icon="play-circle" title={t("enroll.completeVideoTitle")} desc={t("enroll.completeVideoBody")} product={cat.completeVideo} />
            <BuyCard icon="layout-template" title={t("enroll.tplLibTitle")}  desc={t("enroll.tplLibBody")}  product={cat.templateLib} />
          </div>
        </div>
      </section>

      {/* Per-module picker */}
      <section className="section" style={{ background: "var(--color-surface-alt)" }}>
        <div className="container">
          <div className="section-head" style={{ marginBottom: 24 }}>
            <div className="section-head-text">
              <span className="eyebrow">{t("enroll.moduleHeading")}</span>
              <h2 style={{ fontSize: 28 }}>{t("enroll.moduleSub")}</h2>
            </div>
          </div>

          <div className="module-picker">
            <label htmlFor="modsel" className="module-picker-label">{t("enroll.modulePick")}</label>
            <select id="modsel" className="module-picker-select"
              value={modNum}
              onChange={(e) => setModNum(parseInt(e.target.value, 10))}>
              {modules.map(m => (
                <option key={m.num} value={m.num}>
                  {t("tpl.module")} {m.num} — {tx(m, "title")}
                </option>
              ))}
            </select>
          </div>

          <div className="buy-grid">
            {options.map(o => (
              <BuyCard key={o.key} icon={o.icon} title={o.title} desc={o.desc} product={o.product} popular={o.popular} />
            ))}
          </div>

          <p className="buy-local-note"><i data-lucide="globe"></i> {t("enroll.localNote")}</p>
        </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.EnrollApp = EnrollApp;