// MostlyPrivacy — cross-product SUITE integration page (R17 · F151). The reciprocal
// of mostlyrender.com/integrations/mostlyprivacy: it tells the "MostlyPrivacy +
// MostlyRender" story — how the PDF export of a generated legal document is produced
// by MostlyRender (a sibling Chromium render API) — and interlinks the Mostly Tiny
// suite so the set ranks as one suite. Targets the high-intent "privacy policy PDF
// export" / "MostlyPrivacy + MostlyRender" query.
//
// This is a STANDALONE, server-renderable page (it does NOT boot the SPA App router),
// so the prerenderer emits real HTML and App.jsx hydrates the same markup at runtime.
// Copy stays plain English (zero tr()), exactly like mp/compare.jsx and MostlyRender's
// integration pages — localized routes fall back to English, and no new i18n keys are
// added to the strict gate. SEO head strings live in seo.config.js.
(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;

// The one sibling this page pairs with. Kept as a small data object (not hardcoded
// into the JSX) so the page mirrors MostlyRender's data-driven integrationsSuite.jsx
// and stays easy to extend to a second sibling later.
const SIBLING = {
  name: "MostlyRender",
  url: "https://mostlyrender.com",
  tag: "A Chromium render API — HTML and templates to pixel-perfect PDFs.",
};
const EYEBROW = "MostlyPrivacy + MostlyRender";
const H1 = "Export your privacy policy, cookie policy and terms as branded PDFs";
const LEAD = "MostlyPrivacy generates statute-grounded privacy policies, cookie policies and terms, localized in 30+ languages, and publishes each to a hosted URL. MostlyRender turns that page into a clean, branded, paginated A4 PDF — the download button that produces a real file, one per language.";

const STEPS = [
  ["Generate and publish the document", "MostlyPrivacy assembles your privacy policy, cookie policy or terms from statute-grounded templates — localized across 30+ languages — and publishes each version to a hosted, public URL."],
  ["Render it to a paginated PDF", "MostlyRender captures that published page with a real headless browser and returns a print-ready A4 PDF: proper page breaks, margins, fonts and your branding — the same render seam every Mostly Tiny product shares."],
  ["Download, attach or archive", "Your customer gets a real file to download, print or send to counsel — one PDF per locale, with no copy-paste, no screenshot and no broken export."],
];

const FAQS = [
  ["How does MostlyPrivacy export my policy to PDF?", "It publishes the finished document to a hosted URL, then MostlyRender renders that URL to a paginated A4 PDF. The export is produced by the internal render seam shared across the Mostly Tiny suite — not a third-party PDF service."],
  ["Can I download the document in every language?", "Yes. Each localized version is its own hosted page, so MostlyRender produces a clean PDF per locale — your German, French or Japanese policy downloads exactly as well as the English one."],
  ["Is the PDF a real, paginated file or a screenshot?", "A real file. MostlyRender uses a headless Chromium browser, so page breaks, margins, fonts and your branding are preserved across A4 pages — it is not a flat image capture."],
  ["Do I need a separate MostlyRender account?", "No. Both are part of the Mostly Tiny suite — you sign in once with your Mostly Tiny account, and the PDF export just works from inside MostlyPrivacy."],
];

// Local Nav mirroring compare.jsx's chrome, but pointing at real URLs so this is a
// crawlable, standalone, server-renderable page.
function IntNav({ 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", "documents")}>Get started</Button>
          </> : <span className="mk-comingsoon"><span className="mk-comingsoon__dot" />{tr("landing.comingsoon")}</span>}
        </div>
      </div>
    </header>
  );
}

function IntFooter({ 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: "Integrations", links: [
          { label: "MostlyRender (PDF export)", href: "/integrations/mostlyrender" },
        ] },
        { heading: "Company", links: [
          { label: "Home", onClick: () => nav("landing") },
          { label: "Pricing", onClick: () => nav("pricing") },
          { label: "Compare", onClick: () => nav("compare", null, "compare") },
        ] },
      ]}
      suiteSelf="https://mostlyprivacy.com"
      version="MostlyPrivacy · v1.0"
    />
  );
}

// The integration page. `nav` defaults to the real-URL navigator so it works when
// mounted on its own (the boot file passes window.mpNav).
function SuiteIntegration({ nav }) {
  const go = nav || window.mpNav;
  return (
    <div className="mp-root">
      <IntNav nav={go} />

      <section className="mp-hero">
        <div className="mp-wrap mp-hero__inner">
          <div className="mp-fadeup">
            <span className="mp-eyebrow">{EYEBROW}</span>
            <h1 className="mp-h1">{H1}</h1>
            <p className="mp-lead">{LEAD}</p>
            <div className="mp-hero__actions">
              <Button variant="primary" size="lg" iconRight={<Icon d={ICONS.arrow} size={16} />} onClick={() => go("app", "documents")}>Generate your documents</Button>
              <a className="forge-btn forge-btn--secondary forge-btn--lg" href={SIBLING.url}>Visit {SIBLING.name} →</a>
            </div>
            <div className="mp-trust">
              <span className="mp-trust__item"><Icon d={ICONS.check} size={15} /> One Mostly Tiny account</span>
              <span className="mp-trust__sep" />
              <span className="mp-trust__item"><Icon d={ICONS.globe} size={15} /> A clean PDF per language</span>
            </div>
          </div>
          <div className="mp-hero__art mp-fadeup" style={{ animationDelay: "0.08s" }}>
            <div className="int-pair">
              <span className="int-pair__row">
                <span className="int-pair__a"><PrivacyMark s={22} /> MostlyPrivacy</span>
                <span className="int-pair__plus">+</span>
                <span className="int-pair__b">MostlyRender</span>
              </span>
              <span className="int-pair__cap">{SIBLING.tag}</span>
            </div>
          </div>
        </div>
      </section>

      <section className="mp-section int-steps">
        <div className="mp-wrap">
          <div className="mp-section-head" style={{ marginBottom: 22 }}>
            <span className="mp-eyebrow">How it works</span>
            <h2 className="mp-h2">From generated document to downloadable PDF</h2>
          </div>
          <div className="int-steps__grid">
            {STEPS.map((s, i) => (
              <div className="int-step" key={i}>
                <span className="int-step__n">{i + 1}</span>
                <h3 className="int-step__t">{s[0]}</h3>
                <p className="int-step__d">{s[1]}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="mp-section int-faq">
        <div className="mp-wrap">
          <div className="mp-section-head" style={{ marginBottom: 22 }}>
            <span className="mp-eyebrow">Questions</span>
            <h2 className="mp-h2">MostlyPrivacy + MostlyRender, answered</h2>
          </div>
          <div className="int-faq__list">
            {FAQS.map((f, i) => (
              <details className="int-faq__item" key={i}>
                <summary>{f[0]}</summary>
                <p>{f[1]}</p>
              </details>
            ))}
          </div>
          {/* FAQPage JSON-LD — mirrors MostlyRender's integration pages. Plain English so
              the strict i18n gate stays green (no new translation keys). */}
          <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify({
            "@context": "https://schema.org", "@type": "FAQPage",
            mainEntity: FAQS.map((f) => ({ "@type": "Question", name: f[0], acceptedAnswer: { "@type": "Answer", text: f[1] } })),
          }) }} />
        </div>
      </section>

      <section className="cmp-cta">
        <div className="mp-wrap">
          <h2 className="mp-h2">Two products, one Mostly Tiny account.</h2>
          <p className="mp-lead" style={{ marginInline: "auto" }}>
            MostlyPrivacy writes the document; <a href="https://mostlyrender.com">MostlyRender</a> renders the PDF. Generate your policies, then download a branded file per language.
          </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("app", "documents")}>Start free</Button>
            <a className="forge-btn forge-btn--secondary forge-btn--lg" href={SIBLING.url}>Explore {SIBLING.name} →</a>
          </div>
        </div>
      </section>

      <IntFooter nav={go} />
      <div style={{ height: 56 }} />
    </div>
  );
}

window.MP = Object.assign(window.MP || {}, { SuiteIntegration });
window.MPSuiteIntegration = SuiteIntegration;
})();