// MostlyPDF — cross-product SUITE integration page (R17 · F151). One data-driven
// marketing page powers /integrations/<sibling>, telling the "MostlyPDF + <sibling>"
// story and interlinking the Mostly Tiny suite so it ranks as one suite. This is the
// reciprocal of mostlyrender.com/integrations/mostlypdf.
//
// On-page copy is PLAIN ENGLISH (no i18n tr() keys) — localised pages fall back to it,
// exactly like the html-to-pdf/url-to-pdf tool pages and mostlyrender's use-case/
// integration pages. SEO head strings (title/description) live in seo.config.js.
//
// Prerendered at build time via mp/IntegrationMostlyrender.boot.jsx (the seo.config
// `entry`), and hydrated at runtime by app.jsx's path-aware mount guard — both render
// THIS exact global, so hydration is byte-identical. Kept out of app.jsx so app.jsx's
// self-mount (<App/>) never double-mounts on top of this page's SSR markup.
(function () {
  'use strict';
  const e = React.createElement;

  // Parse a "a:b;c:d" style string into a React style object (same helper shape app.jsx uses).
  function S(str) {
    const o = {};
    (str || '').split(';').forEach((decl) => {
      const i = decl.indexOf(':');
      if (i < 0) return;
      let k = decl.slice(0, i).trim();
      const v = decl.slice(i + 1).trim();
      if (!k) return;
      if (!k.startsWith('--')) k = k.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
      o[k] = v;
    });
    return o;
  }

  const Logo = (sz) => (
    <svg width={sz} height={sz} viewBox="0 0 100 100" aria-hidden="true">
      <rect x="14" y="8" width="72" height="84" rx="12" fill="var(--accent-bg-soft)" />
      <path d="M30 32h34M30 46h40M30 60h24" stroke="var(--accent)" strokeWidth="6" strokeLinecap="round" />
    </svg>
  );

  // The suite integrations MostlyPDF ships — each grounded in a real, wired capability.
  // MostlyRender is the headless-Chromium engine behind MostlyPDF's HTML→PDF and URL→PDF
  // tools (the F147 render seam). Keyed by the /integrations/<sibling> route slug.
  const SUITE_INTEGRATIONS = {
    mostlyrender: {
      sibling: { name: 'MostlyRender', url: 'https://mostlyrender.com', tag: 'A render API — HTML, URLs and templates to pixel-perfect PDFs and images.' },
      eyebrow: 'MostlyPDF + MostlyRender',
      h1: 'The headless-Chromium engine behind MostlyPDF’s HTML to PDF',
      lead: 'When you paste HTML or hand MostlyPDF a webpage URL, a real headless-Chromium browser does the rendering — that engine is MostlyRender, our sibling render API. So the fonts, CSS and page breaks come out exactly like a browser prints them, not like a lossy converter. Same account, same bill.',
      cta: { label: 'Try HTML to PDF free', href: '/html-to-pdf' },
      steps: [
        ['Paste HTML or a URL', 'Drop your markup (inline and embedded CSS welcome) or a public web address into the MostlyPDF tool — no sign-up, no watermark.'],
        ['MostlyRender renders it', 'A real headless-Chromium browser lays the page out and prints it to a paginated A4, US Letter or US Legal PDF with print margins — the same render seam every Mostly Tiny product shares.'],
        ['Download or automate', 'Grab the finished PDF, or call the flat-priced MostlyPDF API to do it at scale — overage is billed, never blocked at a cap.'],
      ],
      faqs: [
        ['What powers MostlyPDF’s HTML to PDF conversion?', 'MostlyRender — a Chromium print-to-PDF engine and our sibling product in the Mostly Tiny suite. It renders your HTML in a real headless browser, so CSS, web fonts and page breaks are preserved exactly as a browser would print them.'],
        ['Is MostlyRender a separate product I have to sign up for?', 'No. MostlyRender is used internally as the render seam behind MostlyPDF’s HTML→PDF and URL→PDF tools. If you want the wider render API directly — template→image, batch rendering, and more — it is available at mostlyrender.com under the same Mostly Tiny account and one shared bill.'],
        ['Why use a headless browser instead of a converter?', 'Rendering HTML faithfully is a browser job: only a real layout engine gets CSS, web fonts, flexbox and page breaks right. MostlyRender runs headless Chromium so the PDF matches what you see on screen — that is why MostlyPDF hands the rendering to it rather than reimplementing a converter.'],
        ['Can I do this through an API?', 'Yes. The same HTML→PDF and URL→PDF conversions are on the MostlyPDF API at a transparent flat rate — send your content with an API key and get back a hosted PDF URL. For image output and the full render surface, call MostlyRender directly; both bill to one Mostly Tiny account.'],
      ],
      // Internal cross-links — the two tools this integration powers, kept crawlable.
      related: [
        { eyebrow: 'HTML to PDF', h: 'Convert HTML to a paginated PDF, free', href: '/html-to-pdf' },
        { eyebrow: 'Webpage to PDF', h: 'Capture any URL as a clean A4 PDF', href: '/url-to-pdf' },
      ],
    },
  };

  function MpSuiteIntegration({ sibling }) {
    const si = SUITE_INTEGRATIONS[sibling] || SUITE_INTEGRATIONS.mostlyrender;
    const F = window.ForgeKit || {};
    const brand = (
      <a href="/" style={S('display:inline-flex;align-items:center;gap:9px;text-decoration:none;')}>
        {Logo(26)}
        <span style={S('font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:-0.04em;color:var(--fg);')}>Mostly<span style={S('color:var(--accent);')}>PDF</span></span>
      </a>
    );
    const header = F.AppHeader
      ? <F.AppHeader brand={brand} actions={<a className="forge-btn forge-btn--secondary" href={si.sibling.url}>Visit {si.sibling.name} →</a>} />
      : null;
    const footer = F.Footer
      ? <F.Footer brand={brand} tagline="Every PDF tool, genuinely free." columns={[]} suiteSelf="https://mostlypdf.com" version="MostlyPDF · v1.0" />
      : null;

    return (
      <div style={S('display:flex;flex-direction:column;min-height:100vh;background:var(--bg);color:var(--fg);font-family:var(--font-sans);')}>
        {header}
        <div style={S('flex:1 0 auto;padding-bottom:72px;')}>
          {/* Hero */}
          <section style={S('max-width:960px;margin:0 auto;padding:60px 28px 8px;')}>
            <span style={S('display:inline-block;font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);')}>{si.eyebrow}</span>
            <h1 style={S('font-family:var(--font-display);font-weight:600;font-size:46px;line-height:1.05;letter-spacing:-0.04em;margin:14px 0 0;max-width:16em;text-wrap:balance;')}>{si.h1}</h1>
            <p style={S('font-size:18px;line-height:1.55;color:var(--fg-muted);max-width:40em;margin:18px 0 0;text-wrap:pretty;')}>{si.lead}</p>
            <div style={S('display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;')}>
              <a className="forge-btn forge-btn--primary forge-btn--lg" href={si.cta.href}>{si.cta.label}</a>
              <a className="forge-btn forge-btn--secondary forge-btn--lg" href={si.sibling.url}>Visit {si.sibling.name} →</a>
            </div>
            <p style={S('margin-top:16px;font-size:13px;color:var(--fg-subtle);')}>One Mostly Tiny account · both products, one bill · overage billed, never blocked</p>
          </section>

          {/* How it works */}
          <section style={S('max-width:960px;margin:0 auto;padding:48px 28px 8px;')}>
            <h2 style={S('font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-0.025em;margin:0 0 22px;')}>How they work together</h2>
            <div style={S('display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;')}>
              {si.steps.map((s, i) => (
                <div key={i} className="forge-card" style={S('padding:20px;')}>
                  <span style={S('display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent-bg-soft);color:var(--accent);font-weight:700;')}>{i + 1}</span>
                  <h3 style={S('margin:14px 0 6px;font-size:16px;font-weight:600;letter-spacing:-0.012em;')}>{s[0]}</h3>
                  <p style={S('margin:0;font-size:14px;line-height:1.55;color:var(--fg-muted);text-wrap:pretty;')}>{s[1]}</p>
                </div>
              ))}
            </div>
          </section>

          {/* FAQ */}
          <section style={S('max-width:820px;margin:0 auto;padding:48px 28px 8px;')}>
            <h2 style={S('font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-0.025em;margin:0 0 18px;')}>Questions</h2>
            <div>
              {si.faqs.map((f, i) => (
                <details key={i} style={S('border-top:1px solid var(--hairline);padding:14px 0;')}>
                  <summary style={S('font-weight:600;cursor:pointer;font-size:15px;')}>{f[0]}</summary>
                  <p style={S('margin:10px 0 0;font-size:14.5px;line-height:1.6;color:var(--fg-muted);text-wrap:pretty;')}>{f[1]}</p>
                </details>
              ))}
            </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] } })),
            }) }} />
          </section>

          {/* Related tools */}
          <section style={S('max-width:960px;margin:0 auto;padding:48px 28px 8px;')}>
            <h2 style={S('font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-0.025em;margin:0 0 18px;')}>Tools this powers</h2>
            <div style={S('display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;')}>
              {si.related.map((r) => (
                <a key={r.href} href={r.href} className="forge-card forge-card--interactive" style={S('padding:20px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:6px;')}>
                  <span style={S('font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent);')}>{r.eyebrow}</span>
                  <span style={S('font-size:16px;font-weight:600;letter-spacing:-0.012em;')}>{r.h}</span>
                  <span style={S('font-size:13px;color:var(--fg-subtle);')}>Open the tool →</span>
                </a>
              ))}
            </div>
          </section>
        </div>
        {footer}
      </div>
    );
  }

  window.MpSuiteIntegration = MpSuiteIntegration;
  window.MP_SUITE_INTEGRATIONS = SUITE_INTEGRATIONS;
})();