// MostlyPrivacy — high-intent landing pages, one reusable data-driven page per search the
// product genuinely answers: /privacy-policy-generator, /cookie-policy-generator,
// /terms-and-conditions-generator and /cookie-consent-banner. Same shape as MostlyQR's
// usecase.jsx (F133): a thin boot per route (mp/<Name>.boot.jsx), a seo.config.js page per
// slug (head + the FAQ that drives FAQPage JSON-LD + llms.txt), and App.jsx's route-aware
// mount hydrating the prerendered markup.
//
// HONESTY (CONSTITUTION P7). Every capability sentence on these pages is grounded in code,
// and the limits are stated on the page, not hidden: templates are statute-cited but not
// lawyer-reviewed (packages/legaldocs reviewStatus 'unreviewed'); published documents do not
// update themselves (each generate is a new snapshot); the dashboard publishes EN/DE/FR/IT
// (36 locales through the API, ≤10 per document); the banner blocks only scripts you tag;
// the live banner shows one language today. If the code changes, change the copy with it.
//
// FULLY LOCALIZED. Structure lives here; every visible string is a catalog key —
// `sol.<slug>.*` for the page, `sol.ui.*` for shared chrome, `seo.<seoKey>.faq.<n>` for the
// FAQ — so the 36 locale copies render translated bodies (the i18n body gate refuses a
// localized page with an English body).
(function () {
const F = window.ForgeDesignSystem_e40d74;
const { Button } = F;
const { Icon, ICONS, mpPath, MPNav, MPFooter, MPFaq } = window.MP;
const I18N = (typeof window !== "undefined" && window.ForgeI18n) || { t: (k) => k };
const tr = (k, a) => I18N.t(k, a);
const P = (p) => (mpPath ? mpPath(p) : p);

// Display order = route slugs. `cta` = the app screen the primary button opens (mpNav),
// `law`/`sync`/`limits` = paragraph counts, `covers` = icons of the "what it covers" cards
// (one card per icon), `compare` = the comparison page this audience most often weighs.
const SOLUTION_ORDER = [
  "privacy-policy-generator",
  "cookie-policy-generator",
  "terms-and-conditions-generator",
  "cookie-consent-banner",
];
const SOLUTIONS = {
  "privacy-policy-generator": { seoKey: "solPrivacy", icon: ICONS.shieldCheck, cta: ["app", "wizard", "privacy"],
    law: 3, sync: 2, limits: 2, covers: [ICONS.users, ICONS.doc, ICONS.globe, ICONS.lock, ICONS.flag, ICONS.shield],
    compare: { path: "/compare", name: "Termly" } },
  "cookie-policy-generator": { seoKey: "solCookie", icon: ICONS.cookie, cta: ["app", "wizard", "cookie"],
    law: 3, sync: 2, limits: 2, covers: [ICONS.cookie, ICONS.grid, ICONS.clock, ICONS.cog, ICONS.flag, ICONS.doc],
    compare: { path: "/compare/iubenda", name: "iubenda" } },
  "terms-and-conditions-generator": { seoKey: "solTerms", icon: ICONS.doc, cta: ["app", "wizard", "terms"],
    law: 3, sync: 2, limits: 2, covers: [ICONS.users, ICONS.card, ICONS.lock, ICONS.alertTriangle, ICONS.flag, ICONS.building],
    compare: { path: "/compare/termsfeed", name: "TermsFeed" } },
  "cookie-consent-banner": { seoKey: "solBanner", icon: ICONS.cookie, cta: ["app", "banner"],
    law: 3, sync: 2, limits: 2, covers: [ICONS.globe, ICONS.zap, ICONS.shield, ICONS.code, ICONS.scan, ICONS.sites],
    compare: { path: "/compare/cookieyes", name: "CookieYes" } },
};
// Where each page's "related" grid points — the other three solutions plus the free scanner.
const RELATED = SOLUTION_ORDER.concat(["cookie-scanner"]);
const LINK_KEY = { "privacy-policy-generator": "privacy", "cookie-policy-generator": "cookie",
  "terms-and-conditions-generator": "terms", "cookie-consent-banner": "banner", "cookie-scanner": "scanner" };

const range = (n) => Array.from({ length: n }, (_, i) => i);

function Paras({ base, n }) {
  return range(n).map((i) => <p className="sol-p" key={i}>{tr(base + "." + i)}</p>);
}

function Solution({ slug = "privacy-policy-generator", nav }) {
  const go = nav || window.mpNav;
  const key = SOLUTIONS[slug] ? slug : "privacy-policy-generator";
  const d = SOLUTIONS[key];
  const K = "sol." + key + ".";
  return (
    <div className="mp-root">
      <MPNav nav={go} cta={d.cta[1]} />

      <section className="mp-hero sol-hero">
        <div className="mp-wrap">
          <div className="mp-section-head" style={{ marginBottom: 0 }}>
            <span className="mp-eyebrow"><Icon d={d.icon} size={14} /> {tr(K + "eyebrow")}</span>
            <h1 className="mp-h1 sol-h1">{tr(K + "h1")}</h1>
            <p className="mp-lead" style={{ maxWidth: "38em" }}>{tr(K + "lead")}</p>
            <div className="mp-hero__actions" style={{ justifyContent: "center", marginTop: 22 }}>
              <Button variant="primary" size="lg" iconRight={<Icon d={ICONS.arrow} size={16} />} onClick={() => go(d.cta[0], d.cta[1], d.cta[2])}>{tr(K + "cta")}</Button>
              <a className="forge-btn forge-btn--secondary forge-btn--lg" href={P("/pricing")}>{tr("sol.ui.pricing")}</a>
            </div>
          </div>
        </div>
      </section>

      <section className="mp-section sol-law">
        <div className="mp-wrap sol-prose">
          <h2 className="mp-h2">{tr(K + "law.h2")}</h2>
          <Paras base={K + "law.p"} n={d.law} />
        </div>
      </section>

      <section className="mp-section">
        <div className="mp-wrap">
          <div className="mp-section-head">
            <h2 className="mp-h2">{tr(K + "covers.h2")}</h2>
            <p className="mp-lead">{tr(K + "covers.lead")}</p>
          </div>
          <div className="mp-feature-grid">
            {d.covers.map((ic, i) => (
              <div className="int-step" key={i}>
                <span className="mp-feature__icon"><Icon d={ic} size={20} /></span>
                <h3 className="int-step__t">{tr(K + "covers." + i + ".t")}</h3>
                <p className="int-step__d">{tr(K + "covers." + i + ".b")}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="mp-section">
        <div className="mp-wrap sol-prose">
          <h2 className="mp-h2">{tr(K + "sync.h2")}</h2>
          <Paras base={K + "sync.p"} n={d.sync} />
          <h2 className="mp-h2 sol-h2--gap">{tr(K + "limits.h2")}</h2>
          <Paras base={K + "limits.p"} n={d.limits} />
        </div>
      </section>

      <MPFaq seoKey={d.seoKey} n={8} />

      <section className="mp-section">
        <div className="mp-wrap">
          <div className="mp-section-head" style={{ marginBottom: 22 }}>
            <span className="mp-eyebrow">{tr("sol.ui.related.eyebrow")}</span>
            <h2 className="mp-h2">{tr("sol.ui.related.h2")}</h2>
          </div>
          <div className="cmp-more__grid sol-related">
            {RELATED.filter((s) => s !== key).map((s) => (
              <a key={s} className="cmp-more__card" href={P("/" + s)}>
                <span className="cmp-more__name">{tr("chrome.link." + LINK_KEY[s])}</span>
                <p className="cmp-more__tag">{tr("sol.ui.related." + LINK_KEY[s])}</p>
                <span className="cmp-more__cta">{tr("sol.ui.related.open")} <Icon d={ICONS.arrow} size={14} /></span>
              </a>
            ))}
          </div>
          <p className="sol-xlink">{tr("sol.ui.comparePre")} <a href={P(d.compare.path)}>{"MostlyPrivacy vs " + d.compare.name}</a></p>
        </div>
      </section>

      <section className="cmp-cta" style={{ marginBottom: 40 }}>
        <div className="mp-wrap">
          <h2 className="mp-h2">{tr("sol.ui.cta.h2")}</h2>
          <p className="mp-lead" style={{ marginInline: "auto" }}>{tr("sol.ui.cta.lead")}</p>
          <div className="mp-hero__actions" style={{ justifyContent: "center", marginTop: 22 }}>
            <Button variant="primary" size="lg" iconRight={<Icon d={ICONS.arrow} size={16} />} onClick={() => go(d.cta[0], d.cta[1], d.cta[2])}>{tr(K + "cta")}</Button>
          </div>
        </div>
      </section>

      <MPFooter />
      <div style={{ height: 56 }} />
    </div>
  );
}

window.MP = Object.assign(window.MP || {}, { Solution });
window.MPSolution = Solution;
window.MP_SOLUTION_SLUGS = SOLUTION_ORDER;
})();