// MostlyQR — programmatic use-case landing pages (F133). One reusable, data-driven
// page that powers a high-intent SEO surface per QR content type the builder really
// supports — /dynamic-qr-code, /wifi-qr-code, /vcard-qr-code, /menu-qr-code,
// /pdf-qr-code, /link-in-bio-qr-code — plus the /qr-code-types hub that links them.
//
// Each page captures a "<thing> qr code" search, leads with the wedge that only a
// genuinely dynamic code can make (print once, repoint forever — the printed code
// never dies, even if you cancel), then a use-case-specific value section, the
// 10-question FAQ (the AEO payload), and a CTA that deep-links into the builder with
// the right type preselected (/builder?type=<type>).
//
// HONESTY (mirrors compare.jsx + enterprise.jsx, CONSTITUTION P7/P8): every one of
// these six types is dynamic in the builder — the QR encodes the repointable mqr.sh
// short link, not the raw data (see Builder.jsx STATIC_INLINE — email/sms/phone/text
// are the static-inline ones and deliberately get NO page here). So the never-expire
// claim is literally true for all six. Facts (Free: 3 dynamic codes, no watermark,
// no card, analytics to 500 scans; Lite $4; Pro $9; Team $29; freeze-on-cancel) come
// from billing.config.js — keep in sync with compare.jsx + seo.config.js.
//
// Body copy is English by design (same as compare.jsx / enterprise.jsx — the bodies
// carry no tr()). The ONE localized thing is the FAQ: it renders from the i18n catalog
// (seo.<key>.faq.<n>.q/.a) so the visible Q&A, the FAQPage JSON-LD and the 8 locales
// stay a single source. SEO head strings live in seo.config.js (pages.<key>) +
// web/i18n/en.json.
//
// IIFE-scoped: marketing page modules load as global <script type="text/babel"> tags
// that SHARE one scope, so a top-level name here would clobber Landing.jsx's. Keep
// everything local; only export window.MQRUseCase + window.MQR_USECASE_SLUGS.
(function () {
const { Icon: IconUC, MQMark: MQMarkUC } = window.MQR;
const { Button: BtnUC } = window.ForgeDesignSystem_e40d74;
const I18N_UC = (typeof window !== "undefined" && window.ForgeI18n) || { t: (k) => k, locale: "en" };
const trUC = I18N_UC.t;

// Display order = hub grid order = the route slugs (= USECASES keys for the 6 types).
const USECASE_ORDER = [
  "dynamic-qr-code",
  "wifi-qr-code",
  "vcard-qr-code",
  "menu-qr-code",
  "pdf-qr-code",
  "link-in-bio-qr-code",
];

// One entry per page. `seoKey` ties the body to seo.config.js (pages.<seoKey>) and the
// localized catalog keys (seo.<seoKey>.faq.<n>); `type` is the builder type the CTA
// preselects (/builder?type=<type>); `compare` cross-links the matching comparison page.
const USECASES = {
  "dynamic-qr-code": {
    seoKey: "ucDynamic", type: "url", faqN: 10,
    icon: "infinity", compare: { href: "/compare", label: "MostlyQR vs QR TIGER" },
    eyebrow: "Dynamic QR codes",
    tagline: "Print once, repoint forever — with analytics, on a free plan.",
    h1: "Dynamic QR codes with analytics — that never expire",
    lead: "A dynamic QR code points at a short link you control, so you can change the destination after it is printed and every copy already out there follows instantly. Every scan is tracked — location, device, time — and the printed code keeps working even after you cancel.",
    wedge: {
      a: { lbl: "Print once", big: "Repoint forever", sub: "Edit the destination of a printed code anytime — a typo, a new campaign, a retired offer — and every scan in the wild updates instantly. No reprint, no re-sticker." },
      b: { lbl: "And when you stop paying", big: "Freeze, don’t die", alt: true, sub: "Your printed code keeps resolving to its last destination forever — it never 404s mid-campaign, even after you cancel. Most tools deactivate it." },
    },
    values: [
      { icon: "link", title: "Edit the destination anytime", body: "The QR encodes a mqr.sh short link, not the raw URL — so you swap where it goes whenever you like and the printed code never has to change." },
      { icon: "chart", title: "Scan analytics built in", body: "See total scans plus location, device and time on every code. Free tracks up to 500 scans; Pro unlocks full analytics, geofencing and integrations at $9/mo." },
      { icon: "shield", title: "No watermark, no card, no expiry", body: "The free plan gives you 3 real dynamic codes with no logo stamped on them and no credit card. Cancel and the code freezes — it never deactivates on you." },
    ],
  },

  "wifi-qr-code": {
    seoKey: "ucWifi", type: "wifi", faqN: 10,
    icon: "wifi", compare: { href: "/compare", label: "MostlyQR vs QR TIGER" },
    eyebrow: "Wi-Fi QR codes",
    tagline: "Guests connect in one scan — and you can change the password without reprinting.",
    h1: "Free Wi-Fi QR code generator",
    lead: "Let guests join your network by scanning a code instead of typing a password. Print it for the café table, the Airbnb welcome card or the office wall — and because MostlyQR’s code is dynamic, you can rotate the password later without reprinting a single sticker.",
    wedge: {
      a: { lbl: "For guests", big: "Scan to join", sub: "A scan opens a clean join page with your network name and password — no spelling out “capital-B, zero, not-the-letter-O” across the room ever again." },
      b: { lbl: "When the password changes", big: "Reprint nothing", alt: true, sub: "A static Wi-Fi code bakes the password into the image, so a password change means reprinting everything. MostlyQR’s is dynamic — change it once, every printed card follows." },
    },
    values: [
      { icon: "zap", title: "One scan to connect", body: "Guests point a camera at the code and join — no fiddling with settings or reading a password off a chalkboard. Perfect for hospitality, events and rentals." },
      { icon: "refresh", title: "Rotate the password, keep the print", body: "Change your Wi-Fi password on a schedule for security? Update it once in MostlyQR and every printed code keeps working. A static code would all need reprinting." },
      { icon: "chart", title: "See how many guests connect", body: "Because it’s a dynamic code, you get scan counts and trends — something a raw WIFI: code physically cannot give you. Free covers up to 500 scans." },
    ],
  },

  "vcard-qr-code": {
    seoKey: "ucVcard", type: "vcard", faqN: 10,
    icon: "user", compare: { href: "/compare", label: "MostlyQR vs QR TIGER" },
    eyebrow: "vCard QR codes",
    tagline: "A business card that updates itself — scan to save your details.",
    h1: "vCard & business-card QR codes",
    lead: "Put a QR code on your business card, badge or email signature and let people save your full contact details — name, title, phone, email, links — in one scan. Change job, number or company later and the printed card stays correct, because MostlyQR’s vCard code is dynamic.",
    wedge: {
      a: { lbl: "On the card", big: "Scan to save", sub: "One scan adds you to their phone’s contacts — no typing a name and number off a card that ends up in a drawer." },
      b: { lbl: "When your details change", big: "Card stays right", alt: true, sub: "New role, new number, new company? A static vCard code is wrong the day you change jobs. Update MostlyQR once and the cards already in pockets resolve to the new details." },
    },
    values: [
      { icon: "smartphone", title: "Save in one scan", body: "The code opens a contact page with a one-tap “Add to contacts”, so your details land in their phone correctly the first time — no transcription errors." },
      { icon: "refresh", title: "Editable after printing", body: "Reprinting a stack of business cards for a new phone number is expensive. With a dynamic vCard code you edit the details once and every printed card is current." },
      { icon: "chart", title: "Know when it’s used", body: "Track scans on your card to see which events and intros actually convert — analytics a paper card or a static code can never give you." },
    ],
  },

  "menu-qr-code": {
    seoKey: "ucMenu", type: "menu", faqN: 10,
    icon: "utensils", compare: { href: "/compare", label: "MostlyQR vs QR TIGER" },
    eyebrow: "Restaurant menu QR codes",
    tagline: "Update tonight’s menu without reprinting the table tents.",
    h1: "Restaurant menu QR codes",
    lead: "Put a QR code on the table and let diners open your menu on their phone — no app, no laminating. Change prices, 86 a dish or swap to the brunch menu and the printed code never changes, because MostlyQR’s menu code is dynamic.",
    wedge: {
      a: { lbl: "On the table", big: "Scan to view", sub: "Diners scan and your menu loads on their phone — always the current one, always legible, no sticky laminated sheets to wipe down." },
      b: { lbl: "When the menu changes", big: "Reprint nothing", alt: true, sub: "Raised a price, sold out of the special, switched to the dinner menu? Update the destination once and every table tent and window decal is instantly correct." },
    },
    values: [
      { icon: "refresh", title: "Change the menu, keep the print", body: "Point the code at your menu page, a PDF or an ordering link — and re-point it anytime. Daily specials and seasonal prices never mean a reprint." },
      { icon: "smartphone", title: "Contactless and app-free", body: "Diners just use their camera. No download, no account — lower friction for them and a cleaner table for you." },
      { icon: "chart", title: "See scans by time and table", body: "Dynamic codes track scans, so you can see peak times and which locations get used. Free covers up to 500 scans; Pro adds full analytics." },
    ],
  },

  "pdf-qr-code": {
    seoKey: "ucPdf", type: "pdf", faqN: 10,
    icon: "file", compare: { href: "/compare", label: "MostlyQR vs QR TIGER" },
    eyebrow: "PDF QR codes",
    tagline: "Link a printed page to the latest PDF — and swap the file without reprinting.",
    h1: "PDF QR codes",
    lead: "Turn a packaging insert, flyer, manual or spec sheet into a scannable link to your PDF. Upload a new version and the printed code points at it automatically, because MostlyQR’s PDF code is dynamic — the link never has to change.",
    wedge: {
      a: { lbl: "On the page", big: "Scan to open", sub: "A scan opens your PDF on any phone — a manual, menu, catalogue, brochure or spec sheet — with no app and no hunting for a download link." },
      b: { lbl: "When the file changes", big: "Swap, don’t reprint", alt: true, sub: "Published a v2 of the manual or fixed a typo in the catalogue? Re-point the code at the new file and every printed insert serves the latest version." },
    },
    values: [
      { icon: "file", title: "Any PDF, one scannable code", body: "Point the code at a hosted PDF — manuals, brochures, price lists, event programmes — and let people open it instantly from anything printed." },
      { icon: "refresh", title: "Version without reprinting", body: "Documents get revised. With a dynamic code the link is permanent and the file behind it is whatever you upload next — no recall, no reprint." },
      { icon: "chart", title: "Track downloads", body: "See how many people open your PDF, where and when. Useful for measuring whether that insert or spec sheet is actually being read." },
    ],
  },

  "link-in-bio-qr-code": {
    seoKey: "ucSocial", type: "social", faqN: 10,
    icon: "share", compare: { href: "/compare", label: "MostlyQR vs QR TIGER" },
    eyebrow: "Link-in-bio QR codes",
    tagline: "One code to all your links — repoint it as your channels change.",
    h1: "Link-in-bio & social QR codes",
    lead: "Send people to all your links — Instagram, TikTok, shop, latest drop — from one QR code on your flyer, packaging, story or stage screen. Change which link is front and centre anytime and the printed code follows, because MostlyQR’s social code is dynamic.",
    wedge: {
      a: { lbl: "Everywhere you print", big: "One code, all links", sub: "Put one code on packaging, posters and merch that opens your link-in-bio hub — no reprinting a different code for every platform." },
      b: { lbl: "When you launch something new", big: "Re-point in seconds", alt: true, sub: "New drop, new campaign, new platform? Send the same printed code to a different destination instantly — the QR on last month’s flyer promotes this month’s launch." },
    },
    values: [
      { icon: "share", title: "All your channels, one scan", body: "Point the code at your Linktree, your own page or any single profile, and update the target whenever your priorities shift." },
      { icon: "refresh", title: "Campaign-proof printing", body: "Merch and posters outlive campaigns. A dynamic code means the thing you printed in spring still works in autumn, pointing wherever you need." },
      { icon: "chart", title: "See what converts", body: "Track scans by source so you know which poster, package or post actually drives followers and sales. Free covers up to 500 scans." },
    ],
  },
};

// The hub at /qr-code-types — an internal-linking index of every use-case page. Not a
// builder type; renders the grid instead of a single use-case body.
const HUB = {
  seoKey: "ucHub", faqN: 10,
  eyebrow: "QR code types",
  h1: "Every kind of QR code, one free builder",
  lead: "Wi-Fi, vCard, menu, PDF, link-in-bio or a plain dynamic link — MostlyQR builds them all as dynamic codes: print once, change the destination forever, and the code never expires even if you cancel. Pick a type to get started.",
};

function FaqBlock({ seoKey, n }) {
  // Reads the localized catalog so the visible FAQ, the FAQPage JSON-LD (seo.config →
  // metadata.js) and the 8 locales stay one source. English lives in seo.config.js +
  // web/i18n/en.json under seo.<seoKey>.faq.<i>.q / .a.
  const items = [];
  for (let i = 0; i < n; i++) {
    const q = trUC(`seo.${seoKey}.faq.${i}.q`);
    const a = trUC(`seo.${seoKey}.faq.${i}.a`);
    // tr() returns the key itself when missing — skip an un-authored slot rather than
    // render a raw "seo.x.faq.9.q" string.
    if (q && q.indexOf(`seo.${seoKey}.faq.`) !== 0) items.push({ q, a });
  }
  if (!items.length) return null;
  return (
    <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">
          {items.map((it, i) => (
            <div className="uc-faq__item" key={i}>
              <h3 className="uc-faq__q">{it.q}</h3>
              <p className="uc-faq__a">{it.a}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function UseCaseHero({ data }) {
  const builderHref = `/builder?type=${data.type}`;
  return (
    <section className="uc-hero">
      <div className="mk-wrap">
        <div className="mk-section-head" style={{ marginBottom: 22 }}>
          <span className="mk-eyebrow"><IconUC name={data.icon} size={14} /> {data.eyebrow}</span>
          <h1 className="mk-h1" style={{ fontSize: 46 }}>{data.h1}</h1>
          <p className="mk-lead" style={{ marginInline: "auto", maxWidth: "38em" }}>{data.lead}</p>
          <div className="mk-hero__actions" style={{ justifyContent: "center", marginTop: 22 }}>
            <a href={builderHref} style={{ textDecoration: "none" }}>
              <BtnUC variant="primary" size="lg" iconRight={<IconUC name="arrow" size={16} />}>Create your code — free</BtnUC>
            </a>
            <a href="/#pricing" style={{ textDecoration: "none" }}>
              <BtnUC variant="secondary" size="lg">See pricing</BtnUC>
            </a>
          </div>
        </div>

        <div className="cmp-wedge">
          <div className="cmp-wedge__col">
            <div className="cmp-wedge__lbl">{data.wedge.a.lbl}</div>
            <div className="cmp-wedge__big">{data.wedge.a.big}</div>
            <div className="cmp-wedge__sub">{data.wedge.a.sub}</div>
          </div>
          <div className="cmp-wedge__div" />
          <div className="cmp-wedge__col">
            <div className="cmp-wedge__lbl">{data.wedge.b.lbl}</div>
            <div className={"cmp-wedge__big" + (data.wedge.b.alt ? " cmp-wedge__big--alt" : "")}>{data.wedge.b.big}</div>
            <div className="cmp-wedge__sub">{data.wedge.b.sub}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function UseCaseValues({ data }) {
  return (
    <section className="uc-values">
      <div className="mk-wrap">
        <div className="uc-values__grid">
          {data.values.map((v, i) => (
            <div className="uc-value" key={i}>
              <span className="uc-value__ic"><IconUC name={v.icon} size={20} /></span>
              <h3 className="uc-value__t">{v.title}</h3>
              <p className="uc-value__b">{v.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function UseCaseCta({ data }) {
  const builderHref = `/builder?type=${data.type}`;
  return (
    <section className="uc-cta">
      <div className="mk-wrap">
        <div className="mk-cta__inner">
          <h2 className="mk-h2">Print one QR. Change it forever.</h2>
          <p className="mk-lead" style={{ marginInline: "auto" }}>Real dynamic codes on a free plan — no watermark, no card. And the printed code never expires, even after you leave.</p>
          <div className="mk-hero__actions" style={{ justifyContent: "center" }}>
            <a href={builderHref} style={{ textDecoration: "none" }}>
              <BtnUC variant="primary" size="lg" iconRight={<IconUC name="arrow" size={16} />}>Create your code — free</BtnUC>
            </a>
            <a href="/qr-code-types" style={{ textDecoration: "none" }}>
              <BtnUC variant="secondary" size="lg">All QR code types</BtnUC>
            </a>
          </div>
          {data.compare && (
            <p className="uc-xlink">
              Comparing tools? See the honest <a href={data.compare.href}>{data.compare.label}</a> breakdown.
            </p>
          )}
        </div>
      </div>
    </section>
  );
}

// The hub grid — every use-case page as a crawlable <a href> card.
function UseCaseHubGrid() {
  return (
    <section className="uc-hubgrid">
      <div className="mk-wrap">
        <div className="uc-hub__grid">
          {USECASE_ORDER.map((slug) => {
            const u = USECASES[slug];
            return (
              <a key={slug} className="uc-hub__card" href={"/" + slug}>
                <span className="uc-hub__ic"><IconUC name={u.icon} size={22} /></span>
                <span className="uc-hub__name">{u.h1}</span>
                <span className="uc-hub__tag">{u.tagline}</span>
                <span className="uc-hub__cta">{u.eyebrow} <IconUC name="arrow" size={14} /></span>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function UseCaseHub() {
  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"><MQMarkUC s={18} /> {HUB.eyebrow}</span>
            <h1 className="mk-h1" style={{ fontSize: 46 }}>{HUB.h1}</h1>
            <p className="mk-lead" style={{ marginInline: "auto", maxWidth: "38em" }}>{HUB.lead}</p>
          </div>
        </div>
      </section>
      <UseCaseHubGrid />
      <FaqBlock seoKey={HUB.seoKey} n={HUB.faqN} />
      <section className="uc-cta">
        <div className="mk-wrap">
          <div className="mk-cta__inner">
            <h2 className="mk-h2">Print one QR. Change it forever.</h2>
            <p className="mk-lead" style={{ marginInline: "auto" }}>Real dynamic codes on a free plan — no watermark, no card. And the printed code never expires, even after you leave.</p>
            <div className="mk-hero__actions" style={{ justifyContent: "center" }}>
              <a href="/builder" style={{ textDecoration: "none" }}>
                <BtnUC variant="primary" size="lg" iconRight={<IconUC name="arrow" size={16} />}>Create your code — free</BtnUC>
              </a>
              <a href="/#pricing" style={{ textDecoration: "none" }}>
                <BtnUC variant="secondary" size="lg">See pricing</BtnUC>
              </a>
            </div>
          </div>
        </div>
      </section>
      <window.MQRFooter />
    </div>
  );
}

function UseCase({ slug = "dynamic-qr-code" }) {
  if (slug === "qr-code-types") return <UseCaseHub />;
  const data = USECASES[slug] ? USECASES[slug] : USECASES["dynamic-qr-code"];
  return (
    <div className="mk-root">
      <window.MQRNav />
      <UseCaseHero data={data} />
      <UseCaseValues data={data} />
      <FaqBlock seoKey={data.seoKey} n={data.faqN} />
      <UseCaseCta data={data} />
      <window.MQRFooter />
    </div>
  );
}

window.MQRUseCase = UseCase;
window.MQR_USECASE_SLUGS = USECASE_ORDER;
})();