// MostlyQR — cross-product SUITE integration page (R17 · F151). The reciprocal of
// mostlyrender.com/integrations/mostlyqr: this one tells the "MostlyQR + MostlyRender"
// story from MostlyQR's side and links out to https://mostlyrender.com so the Mostly Tiny
// suite interlinks and ranks as one suite.
//
// Grounded in a REAL, shipped capability: the builder's "Make a flyer, poster or card"
// action (F148) composes a branded print asset around a saved dynamic code — the QR layer
// is the code's OWN mqr.sh short link, so nothing is double-minted — publishes it as a
// hosted HTML page, and MostlyRender (a headless-Chromium render API, the same suite render
// seam) captures that page as a print-ready PNG or PDF. If rendering is unavailable the
// hosted HTML flyer still works (print to PDF from the browser). One Mostly Tiny account.
//
// Body copy is English by design (same as compare.jsx / usecase.jsx — the bodies carry no
// tr(); localized pages fall back to English). SEO head strings live in seo.config.js
// (pages.integrationMostlyrender). The FAQPage JSON-LD is emitted inline from the same data
// that renders the visible FAQ, so the schema and the on-page Q&A stay one source (mirrors
// MostlyRender's mr/integrationsSuite.jsx).
//
// IIFE-scoped: marketing modules load as global <script type="text/babel"> tags that share
// one scope, so keep every name local; only export window.MQRIntegration + the slug list.
(function () {
const { Icon: IconSI, MQMark: MQMarkSI } = window.MQR;
const { Button: BtnSI } = window.ForgeDesignSystem_e40d74;

// One entry per sibling integration. MostlyQR currently ships a single suite integration
// (MostlyRender); the shape stays data-driven so more siblings drop in later.
const INTEGRATIONS = {
  mostlyrender: {
    route: "integrations/mostlyrender",
    sibling: { name: "MostlyRender", url: "https://mostlyrender.com", tag: "HTML-to-image & PDF rendering with a real headless browser." },
    eyebrow: "MostlyQR + MostlyRender",
    h1: "Branded QR flyers, rendered to a print-ready PDF",
    lead: "MostlyQR composes a branded flyer, poster, table tent or business card around your own dynamic short-link QR — no second code minted — and publishes it as a hosted HTML page. MostlyRender then captures that page as a pixel-perfect PNG or a paginated, print-ready PDF. One render call, a code that stays repointable and scan-tracked long after it is printed.",
    steps: [
      ["Compose the asset in MostlyQR", "In the builder, choose “Make a flyer, poster or card”, pick a template, and MostlyQR lays it out around your dynamic code, headline and brand colour. The QR is your existing mqr.sh short link — nothing is re-minted."],
      ["MostlyRender turns it into print-ready output", "MostlyQR hands the hosted HTML asset to MostlyRender, a real headless-Chromium render API, which captures it as a pixel-perfect PNG or a paginated, print-ready PDF at true print size — fonts, colours and layout intact."],
      ["Download, print, and repoint anytime", "Send the file to a printer, and because the QR is a dynamic code you can change where every printed copy points from the MostlyQR dashboard — with scans by place, device and time. No reprint, no re-render."],
    ],
    faqs: [
      ["How does MostlyQR create a print-ready PDF of my flyer?", "MostlyQR composes your flyer as a hosted HTML page, then MostlyRender — a headless-Chromium render API in the same Mostly Tiny family — captures that page as a print-ready PNG or PDF. It is the shared suite render seam, not a third-party export service."],
      ["Does the flyer mint a second QR code?", "No. The flyer reuses your existing MostlyQR dynamic short link, so there is one code to manage and track. Repoint it once and both the on-screen preview and every printed flyer already in the wild follow instantly."],
      ["What if rendering isn’t available?", "The hosted HTML flyer still works. You can open it and print to PDF straight from your own browser, so you always have a printable asset even when the image render step is unavailable."],
      ["Do I need two separate accounts and bills?", "No. MostlyQR and MostlyRender are both part of the Mostly Tiny suite — one sign-in and one shared account cover composing the flyer and rendering it to a file."],
    ],
  },
};

const SI_ORDER = ["mostlyrender"];

function Integration({ sibling = "mostlyrender" }) {
  const si = INTEGRATIONS[sibling] || INTEGRATIONS.mostlyrender;
  const related = SI_ORDER.filter((s) => s !== (INTEGRATIONS[sibling] ? sibling : "mostlyrender"));
  return (
    <div className="mk-root">
      <window.MQRNav />
      <section className="uc-hero">
        <div className="mk-wrap">
          <div className="mk-section-head" style={{ marginBottom: 22 }}>
            <span className="mk-eyebrow"><MQMarkSI s={18} /> {si.eyebrow}</span>
            <h1 className="mk-h1" style={{ fontSize: 46 }}>{si.h1}</h1>
            <p className="mk-lead" style={{ marginInline: "auto", maxWidth: "40em" }}>{si.lead}</p>
            <div className="mk-hero__actions" style={{ justifyContent: "center", marginTop: 22 }}>
              <a href="/qr-code-flyer" style={{ textDecoration: "none" }}>
                <BtnSI variant="primary" size="lg" iconRight={<IconSI name="arrow" size={16} />}>Make a flyer — free</BtnSI>
              </a>
              <a className="forge-btn forge-btn--secondary forge-btn--lg" href={si.sibling.url}>Visit {si.sibling.name} →</a>
            </div>
            <p className="mk-lead" style={{ marginInline: "auto", maxWidth: "34em", fontSize: 14, opacity: 0.8 }}>
              One Mostly Tiny account · your code stays dynamic and scan-tracked · {si.sibling.tag}
            </p>
          </div>

          <div className="cmp-wedge">
            <div className="cmp-wedge__col">
              <div className="cmp-wedge__lbl">In MostlyQR</div>
              <div className="cmp-wedge__big">Compose the asset</div>
              <div className="cmp-wedge__sub">A flyer, poster, table tent or business card is laid out for you around your own dynamic code — one QR, repointable forever, never minted twice.</div>
            </div>
            <div className="cmp-wedge__div" />
            <div className="cmp-wedge__col">
              <div className="cmp-wedge__lbl">With MostlyRender</div>
              <div className="cmp-wedge__big cmp-wedge__big--alt">Render to PNG or PDF</div>
              <div className="cmp-wedge__sub">A real headless browser captures the hosted flyer as a pixel-perfect, print-ready file. If rendering is unavailable, the HTML flyer still prints from your browser.</div>
            </div>
          </div>
        </div>
      </section>

      <section className="uc-values">
        <div className="mk-wrap">
          <div className="mk-section-head" style={{ marginBottom: 22 }}>
            <span className="mk-eyebrow">How it works</span>
            <h2 className="mk-h2">MostlyQR composes it, MostlyRender prints it</h2>
          </div>
          <div className="uc-values__grid">
            {si.steps.map((s, i) => (
              <div className="uc-value" key={i}>
                <span className="uc-value__ic"><IconSI name="arrow" size={20} /></span>
                <h3 className="uc-value__t">{i + 1}. {s[0]}</h3>
                <p className="uc-value__b">{s[1]}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="uc-faq">
        <div className="mk-wrap">
          <div className="mk-section-head" style={{ marginBottom: 22 }}>
            <span className="mk-eyebrow">FAQ</span>
            <h2 className="mk-h2">Questions, answered</h2>
          </div>
          <div className="uc-faq__grid">
            {si.faqs.map((f, i) => (
              <div className="uc-faq__item" key={i}>
                <h3 className="uc-faq__q">{f[0]}</h3>
                <p className="uc-faq__a">{f[1]}</p>
              </div>
            ))}
          </div>
          <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify({
            "@context": "https://schema.org", "@type": "FAQPage",
            mainEntity: si.faqs.map((f) => ({ "@type": "Question", name: f[0], acceptedAnswer: { "@type": "Answer", text: f[1] } })),
          }) }} />
        </div>
      </section>

      <section className="uc-cta">
        <div className="mk-wrap">
          <div className="mk-cta__inner">
            <h2 className="mk-h2">Design the code. Render the flyer.</h2>
            <p className="mk-lead" style={{ marginInline: "auto" }}>
              Create a real dynamic code on a free plan, compose a branded print asset around it, and let{" "}
              <a href={si.sibling.url}>MostlyRender</a> turn it into a print-ready PNG or PDF — one Mostly Tiny account.
            </p>
            <div className="mk-hero__actions" style={{ justifyContent: "center" }}>
              <a href="/qr-code-flyer" style={{ textDecoration: "none" }}>
                <BtnSI variant="primary" size="lg" iconRight={<IconSI name="arrow" size={16} />}>Make a flyer — free</BtnSI>
              </a>
              <a className="forge-btn forge-btn--secondary forge-btn--lg" href={si.sibling.url}>Visit MostlyRender →</a>
            </div>
          </div>
        </div>
      </section>

      {related.length > 0 && (
        <section className="uc-hubgrid">
          <div className="mk-wrap">
            <div className="uc-hub__grid">
              {related.map((s) => (
                <a key={s} className="uc-hub__card" href={"/" + INTEGRATIONS[s].route}>
                  <span className="uc-hub__name">{INTEGRATIONS[s].eyebrow}</span>
                  <span className="uc-hub__tag">{INTEGRATIONS[s].h1}</span>
                  <span className="uc-hub__cta">See how <IconSI name="arrow" size={14} /></span>
                </a>
              ))}
            </div>
          </div>
        </section>
      )}

      <window.MQRFooter />
    </div>
  );
}

window.MQRIntegration = Integration;
window.MQR_INTEGRATION_SLUGS = SI_ORDER;
})();