// MostlyPrivacy — competitor comparison pages. One reusable, data-driven page that
// powers /Compare (vs Termly, the flagship) plus a per-competitor "<X> alternative"
// page at /Compare/<slug>. The Plausible move: concede each competitor's genuine
// strengths, then anchor every difference in a fact. SEO: each page targets the
// high-intent "<competitor> alternative" query; the others are cross-linked at the
// bottom so the set reinforces itself. Facts sourced from draft/termly competitor
// analysis (10 June 2026) — keep in sync with seo.config. This is a STANDALONE,
// server-renderable page (it does not boot the SPA App router), so the prerenderer
// emits real HTML; the body stays English (zero tr()), like MostlyRender's pattern.
(function () {
const F = window.ForgeDesignSystem_e40d74;
const { Button } = F;
const { Icon, ICONS, PrivacyMark, Wordmark } = window.MP;
const I18N = (typeof window !== "undefined" && window.ForgeI18n) || { t: (k) => k };
const tr = (k) => I18N.t(k);

// Public sign-up / app is CLOSED during soft launch — see Landing.jsx.
const PUBLIC_APP_OPEN = false;

// Display order for the "More comparisons" grid + the route slugs (= COMPETITORS keys).
const COMPARE_ORDER = ["termly", "cookiebot", "cookieyes", "iubenda"];

const COMPETITORS = {
  termly: {
    name: "Termly", logo: "T", route: "compare",
    tagline: "One flat price for every site — not per domain.",
    lead: "Termly is a genuinely useful product — a real free tier, broad regulatory coverage, and attorney-crafted documents. Here’s where we differ, stated as facts, so you can decide for your own sites.",
    strong: "Termly has a strong, real free tier (a working banner plus one policy), broad regulatory coverage — GDPR, UK GDPR, CCPA/CPRA, PIPEDA, CalOPPA — and documents it markets as attorney-crafted, kept up to date as laws change. For a single English-language site, it’s a capable starting point, and we’ll say so.",
    wedge: [
      { lbl: "The difference that matters most", big: "Flat vs per-domain", sub: "one account-wide price covers every site; Termly sells a separate per-website licence for each domain" },
      { lbl: "And on languages", big: "30+ vs Pro+ only", alt: true, sub: "multi-language is built in for us; on Termly it’s gated to the Pro+ tier and only works on hosted policies" },
    ],
    rows: [
      { f: "Pricing model", us: "Flat, account-wide", them: "Per-website licence", fact: true },
      { f: "Multi-language documents & banner", us: "Built in (30+ languages)", them: "Pro+ only, hosted-only", fact: true },
      { f: "Document languages", us: "30+", them: "7 (banner: 13)", fact: true },
      { f: "Banner views", us: "Unmetered", them: "10k Free / 50k Starter", fact: true },
      { f: "Geo-aware banner (GDPR / CCPA)", us: "Included", them: "Pro+ only (regional rules)", fact: true },
      { f: "Auto-blocks trackers before consent", us: true, them: true },
      { f: "Google Consent Mode v2", us: true, them: true },
      { f: "Privacy, cookie & terms generators", us: true, them: true },
      { f: "Auto-updating hosted policies", us: true, them: true },
      { f: "IAB TCF 2.3 framework", us: false, them: "Pro+", win: "them", fact: true },
      { f: "Number of document generators", us: "Focused suite", them: "20+ generators", win: "them", fact: true },
      { f: "Years in market", us: "Newer entrant", them: "Established brand", win: "them", fact: true },
    ],
    catchup: "We’re newer. Termly has an established brand with a deep library of 20+ document generators, and it supports the IAB TCF 2.3 framework on Pro+ — we don’t yet. If you’re a publisher who needs TCF for ad partners today, that’s a fair reason to choose them. If you run more than one site and want every language without a Pro+ upgrade, that’s us.",
  },

  cookiebot: {
    name: "Cookiebot", logo: "C", route: "compare/cookiebot",
    tagline: "Flat pricing — no per-domain bill, no silent tier hikes.",
    lead: "Cookiebot is a mature, widely deployed consent platform. Here’s where we differ — stated as facts — so you can decide for your own sites.",
    strong: "Cookiebot is one of the most-deployed CMPs in Europe, backed by Usercentrics, with a genuine automatic scanner, IAB TCF 2.3 support, and 47+ banner languages. For a single high-traffic publisher that needs deep ad-tech signaling, it’s a serious tool — and we’ll say so.",
    wedge: [
      { lbl: "The difference that matters most", big: "Flat vs per-domain", sub: "one account-wide price; Cookiebot bills per domain — ten sites at the Medium tier runs into the hundreds per month" },
      { lbl: "And on your bill", big: "Predictable", alt: true, sub: "no silent tier escalation; Cookiebot auto-bumps you to a pricier tier when a scan finds more subpages" },
    ],
    rows: [
      { f: "Pricing model", us: "Flat, account-wide", them: "Per-domain", fact: true },
      { f: "Subdomains", us: "Included", them: "Billed as separate domains", fact: true },
      { f: "Silent auto-tier escalation", us: "Never", them: "Yes — bumps on subpage count", fact: true },
      { f: "Geo-aware banner (GDPR / CCPA)", us: "Included", them: "Paid only", fact: true },
      { f: "Multi-language banner & documents", us: "Built in (30+)", them: "47+ banner langs (paid)", win: "them", fact: true },
      { f: "Auto-blocks trackers before consent", us: true, them: true },
      { f: "Google Consent Mode v2", us: true, them: true },
      { f: "Privacy, cookie & terms generators", us: true, them: "Cookie declaration only", fact: true },
      { f: "Automatic cookie scanner", us: true, them: true },
      { f: "IAB TCF 2.3 framework", us: false, them: "Paid", win: "them", fact: true },
      { f: "Scanner maturity", us: "Newer, smaller DB", them: "Mature, widely deployed", win: "them" },
    ],
    catchup: "Cookiebot has a more mature scanner and a larger deployment footprint than ours, plus IAB TCF 2.3 and 47+ banner languages on its paid tiers. If you’re a publisher who needs TCF and the deepest scanner today, weigh that. We win on flat pricing that doesn’t bill per domain or silently escalate, plus a full document suite — not just a cookie declaration.",
  },

  cookieyes: {
    name: "CookieYes", logo: "C", route: "compare/cookieyes",
    tagline: "Languages and geo-targeting free — not gated to paid.",
    lead: "CookieYes is a clean, popular, Google-certified consent platform. Here’s where we differ — stated as facts — so you can decide for your own sites.",
    strong: "CookieYes is a Google-certified CMP with a huge install base, a mature WordPress plugin, broad platform coverage (WordPress, Shopify, Wix, Webflow, Squarespace), and a deep library of 175+ banner languages on its paid tiers. As a turnkey single-site CMP, it’s well-built — and we’ll say so.",
    wedge: [
      { lbl: "The difference that matters most", big: "Free vs $10+", sub: "geo-aware banners and multi-language are built in for us; on CookieYes both are gated to paid (Basic for languages, Pro for geo-targeting)" },
      { lbl: "And on your bill", big: "Flat & unmetered", alt: true, sub: "one account-wide price, no pageview overage; CookieYes bills per domain and adds $0.30 per 1,000 extra pageviews" },
    ],
    rows: [
      { f: "Pricing model", us: "Flat, account-wide", them: "Per-domain", fact: true },
      { f: "Multi-language banner", us: "Built in (30+)", them: "Paid (Basic $10+)", fact: true },
      { f: "Geo-targeting (EU opt-in / US opt-out)", us: "Included", them: "Pro ($25) only", fact: true },
      { f: "Pageview overage", us: "Unmetered", them: "+$0.30 / 1,000 (Basic/Pro)", fact: true },
      { f: "Auto-blocks trackers before consent", us: true, them: true },
      { f: "Google Consent Mode v2", us: true, them: true },
      { f: "Privacy & cookie policy generators", us: true, them: true },
      { f: "Terms generator", us: true, them: false, fact: true },
      { f: "Platform plugins (WordPress, Shopify…)", us: "Newer", them: "Broad, mature", win: "them", fact: true },
      { f: "IAB TCF 2.3 framework", us: false, them: "Pro+", win: "them", fact: true },
      { f: "Scanner page depth", us: "Newer, smaller DB", them: "Up to 8,000 pages/scan", win: "them", fact: true },
    ],
    catchup: "CookieYes has broader, more mature platform plugins, a bigger scanner (up to 8,000 pages per scan), and IAB TCF 2.3 on its higher tiers — we’re newer on all three. If you need a battle-tested WordPress plugin or TCF today, that’s a fair reason to choose them. We win by giving you geo-aware banners and every language without paying to unlock them, and a terms generator they don’t offer.",
  },

  iubenda: {
    name: "iubenda", logo: "i", route: "compare/iubenda",
    tagline: "Every language on every plan — not paywalled to Advanced.",
    lead: "iubenda is a serious, lawyer-backed compliance suite. Here’s where we differ — stated as facts — so you can decide for your own sites.",
    strong: "iubenda’s core moat is real: an in-house legal team, lawyer-drafted documents (no AI translation) that auto-update as laws change, broad GDPR/CCPA/LGPD coverage, and IAB TCF with 800+ ad partners. If you’re buying trust and liability coverage, that’s a genuine strength — and we’ll say so.",
    wedge: [
      { lbl: "The difference that matters most", big: "All langs vs Advanced", sub: "we include every language on every plan; iubenda hard-caps Free and Essentials to ONE language — multi-language is paywalled to Advanced at $27.99/mo per site" },
      { lbl: "And on your bill", big: "Flat & unmetered", alt: true, sub: "one account-wide price, no overage; iubenda bills per site and adds $0.06 per 1,000 extra pageviews" },
    ],
    rows: [
      { f: "Pricing model", us: "Flat, account-wide", them: "Per-site", fact: true },
      { f: "Multi-language on cheap/free tiers", us: "Every plan", them: "One language until Advanced ($27.99)", fact: true },
      { f: "Pageview overage", us: "Unmetered", them: "+$0.06 / 1,000", fact: true },
      { f: "Banner UI languages", us: "30+", them: "~8", fact: true },
      { f: "Geo-aware banner (GDPR / CCPA)", us: "Included", them: "Advanced+ only", fact: true },
      { f: "Auto-blocks trackers before consent", us: true, them: true },
      { f: "Privacy, cookie & terms generators", us: true, them: true },
      { f: "Auto-updating documents", us: true, them: true },
      { f: "One unified dashboard", us: true, them: "Fragmented product silos", fact: true },
      { f: "Lawyer-drafted, in-house legal team", us: false, them: true, win: "them", fact: true },
      { f: "IAB TCF (800+ ad partners)", us: false, them: true, win: "them", fact: true },
    ],
    catchup: "iubenda’s lawyer-drafted documents and in-house legal team are a real trust moat — our documents are generated templates, not attorney-signed, and we don’t offer IAB TCF for ad partners yet. If you’re buying legal liability coverage or you’re a publisher who needs TCF, that’s a fair reason to choose them. We win by giving every language to every plan, one flat account-wide price, and a single unified dashboard instead of separate billed silos.",
  },
};

function Cell({ v, win }) {
  if (v === true) return <span className="cmp-yes"><Icon d={ICONS.check} size={15} /></span>;
  if (v === false) return <span className="cmp-no"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12" /></svg></span>;
  return <span className={"cmp-val" + (win ? " cmp-val--muted" : "")}>{v}</span>;
}

function CompareTable({ nav, data }) {
  return (
    <section className="cmp">
      <div className="mp-wrap">
        <div className="mp-section-head" style={{ marginBottom: 22 }}>
          <span className="mp-eyebrow">MostlyPrivacy vs {data.name}</span>
          <h1 className="mp-h1" style={{ fontSize: 46 }}>The honest {data.name} alternative.</h1>
          <p className="mp-lead" style={{ marginInline: "auto", maxWidth: "36em" }}>{data.lead}</p>
        </div>

        {/* concede first — the trust move */}
        <div className="cmp-concede">
          <div className="cmp-concede__icon"><Icon d={ICONS.check} size={20} /></div>
          <div>
            <div className="cmp-concede__t">Where {data.name} is genuinely strong</div>
            <p className="cmp-concede__d">{data.strong}</p>
          </div>
        </div>

        {/* the core difference, as a fact */}
        <div className="cmp-wedge">
          <div className="cmp-wedge__col">
            <div className="cmp-wedge__lbl">{data.wedge[0].lbl}</div>
            <div className="cmp-wedge__big">{data.wedge[0].big}</div>
            <div className="cmp-wedge__sub">{data.wedge[0].sub}</div>
          </div>
          <div className="cmp-wedge__div" />
          <div className="cmp-wedge__col">
            <div className="cmp-wedge__lbl">{data.wedge[1].lbl}</div>
            <div className={"cmp-wedge__big" + (data.wedge[1].alt ? " cmp-wedge__big--alt" : "")}>{data.wedge[1].big}</div>
            <div className="cmp-wedge__sub">{data.wedge[1].sub}</div>
          </div>
        </div>

        {/* the table */}
        <div className="cmp-table">
          <div className="cmp-table__head">
            <div className="cmp-table__feat">Feature</div>
            <div className="cmp-table__us"><PrivacyMark s={20} /> MostlyPrivacy</div>
            <div className="cmp-table__them"><span className="cmp-logo">{data.logo}</span> {data.name}</div>
          </div>
          {data.rows.map((r, i) => (
            <div className="cmp-table__row" key={i}>
              <div className="cmp-table__feat">{r.f}{r.fact && <span className="cmp-fact">fact</span>}</div>
              <div className="cmp-table__us"><Cell v={r.us} win={r.win === "them"} /></div>
              <div className="cmp-table__them"><Cell v={r.them} win={r.win !== "them" && r.them !== true} /></div>
            </div>
          ))}
        </div>

        {/* concede where we lose — the second trust move */}
        <div className="cmp-concede cmp-concede--alt">
          <div className="cmp-concede__icon cmp-concede__icon--warn"><Icon d={ICONS.clock} size={20} /></div>
          <div>
            <div className="cmp-concede__t">Where we’re still catching up</div>
            <p className="cmp-concede__d">{data.catchup}</p>
          </div>
        </div>

        <div className="cmp-cta">
          <h2 className="mp-h2">Try it across all your sites.</h2>
          <p className="mp-lead" style={{ marginInline: "auto" }}>A real free tier — geo-aware banner, every language, no per-domain bill. Bring your sites and see the difference.</p>
          <div className="mp-hero__actions" style={{ justifyContent: "center", marginTop: 22 }}>
            <Button variant="primary" size="lg" iconRight={<Icon d={ICONS.arrow} size={16} />} onClick={() => nav("app", "banner")}>Start free</Button>
            <Button variant="secondary" size="lg" onClick={() => nav("pricing")}>See pricing</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

// The cross-link grid — every comparison except the one you're on. Real <a href>s so
// crawlers follow the set; onClick keeps it a same-origin client nav.
function MoreComparisons({ nav, current }) {
  const others = COMPARE_ORDER.filter((k) => k !== current);
  const href = (k) => "/" + COMPETITORS[k].route.replace(/^compare/, "Compare");
  return (
    <section className="cmp-more">
      <div className="mp-wrap">
        <div className="mp-section-head" style={{ marginBottom: 22 }}>
          <span className="mp-eyebrow">More comparisons</span>
          <h2 className="mp-h2">See how MostlyPrivacy stacks up</h2>
          <p className="mp-lead" style={{ marginInline: "auto", maxWidth: "34em" }}>Honest, fact-by-fact comparisons against the consent and privacy tools teams evaluate most.</p>
        </div>
        <div className="cmp-more__grid">
          {others.map((k) => (
            <a key={k} className="cmp-more__card" href={href(k)} onClick={(e) => { e.preventDefault(); nav("compare", null, COMPETITORS[k].route); }}>
              <div className="cmp-more__top">
                <span className="cmp-logo">{COMPETITORS[k].logo}</span>
                <span className="cmp-more__name">MostlyPrivacy vs {COMPETITORS[k].name}</span>
              </div>
              <p className="cmp-more__tag">{COMPETITORS[k].tagline}</p>
              <span className="cmp-more__cta">{COMPETITORS[k].name} alternative <Icon d={ICONS.arrow} size={14} /></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// Local Nav/Footer mirroring Landing.jsx's chrome, but pointing at real /Compare
// links so the comparison set is a crawlable, standalone, server-renderable page.
function CompareNav({ nav }) {
  return (
    <header className="mp-nav">
      <div className="mp-wrap mp-nav__inner">
        <a className="mp-brand" href="/" onClick={(e) => { e.preventDefault(); nav("landing"); }}><PrivacyMark s={28} /><Wordmark /></a>
        <nav className="mp-nav__links">
          <a href="/" onClick={(e) => { e.preventDefault(); nav("app", "banner"); }}>Cookie banner</a>
          <a href="/" onClick={(e) => { e.preventDefault(); nav("app", "documents"); }}>Documents</a>
          <a href="/Pricing" onClick={(e) => { e.preventDefault(); nav("pricing"); }}>Pricing</a>
          <a href="/Compare" onClick={(e) => { e.preventDefault(); nav("compare", null, "compare"); }}>Compare</a>
        </nav>
        <div className="mp-nav__cta">
          {PUBLIC_APP_OPEN ? <>
          <Button variant="ghost" size="sm" onClick={() => nav("auth")}>Sign in</Button>
          <Button variant="primary" size="sm" iconRight={<Icon d={ICONS.arrow} size={15} />} onClick={() => nav("app", "banner")}>Get started</Button>
          </> : <span className="mk-comingsoon"><span className="mk-comingsoon__dot" />{tr("landing.comingsoon")}</span>}
        </div>
      </div>
    </header>
  );
}

function CompareFooter({ nav }) {
  return (
    <window.ForgeKit.Footer
      brand={<a className="mp-brand" href="/" onClick={(e) => { e.preventDefault(); nav("landing"); }}><PrivacyMark s={26} /><Wordmark size={17} /></a>}
      tagline="Compliance made calm — consent and legal documents, in every language, for one flat price."
      columns={[
        { heading: "Product", links: [
          { label: "Cookie banner", onClick: () => nav("app", "banner") },
          { label: "Documents", onClick: () => nav("app", "documents") },
          { label: "Pricing", onClick: () => nav("pricing") },
          { label: "Compare", onClick: () => nav("compare", null, "compare") },
        ] },
        { heading: "Compare", links: COMPARE_ORDER.map((k) => ({
          label: "vs " + COMPETITORS[k].name,
          onClick: () => nav("compare", null, COMPETITORS[k].route),
        })) },
        { heading: "Company", links: [
          { label: "Home", onClick: () => nav("landing") },
          { label: "Sign in", onClick: () => nav("auth") },
          { label: "Get started", onClick: () => nav("app", "banner") },
          { label: "Pricing", onClick: () => nav("pricing") },
        ] },
      ]}
      version="MostlyPrivacy · v1.0"
    />
  );
}

// Standalone comparison page. `nav` defaults to a real-URL navigator so the page
// works when mounted on its own (each boot file passes window.mpNav). competitor
// selects which COMPETITORS entry to render; unknown slugs fall back to termly.
function Compare({ nav, competitor = "termly" }) {
  const go = nav || window.mpNav;
  const key = COMPETITORS[competitor] ? competitor : "termly";
  return (
    <div className="mp-root">
      <CompareNav nav={go} />
      <CompareTable nav={go} data={COMPETITORS[key]} />
      <MoreComparisons nav={go} current={key} />
      <CompareFooter nav={go} />
      <div style={{ height: 56 }} />
    </div>
  );
}

window.MP = Object.assign(window.MP || {}, { Compare });
window.MPCompare = Compare;
window.MP_COMPARE_ORDER = COMPARE_ORDER;
})();