// MostlyQR — competitor comparison pages. One reusable, data-driven page that
// powers /Compare (vs QRTiger, the flagship) plus a per-competitor "<X> alternative"
// page at /Compare/<slug>. Each page leads with the wedge (our differentiator as a
// sourced fact), then a fact-by-fact table. SEO: each page targets the high-intent
// "<competitor> alternative" query; the others are cross-linked at the bottom so the
// set reinforces itself.
//
// The honest competitive picture — each competitor's genuine strengths (`strong`)
// and where we're behind (`catchup`) — is intentionally NOT rendered on the public
// page (it's more candor than a marketing page needs). Those fields are kept here as
// the structured source for the internal docs:
// docs/apps/mostly-qr/competitive/COMPETITIVE-POSITIONING.md (the full honest read)
// and docs/apps/mostly-qr/competitive/ROADMAP.md (the gaps we're closing). Keep all
// three in sync.
//
// Facts sourced from draft/getqr competitor analysis (8 June 2026) — qrtiger,
// flowcode, uniqode, qr-code-generator. MostlyQR's own facts come from
// billing.config.js (Free: 3 dynamic codes, unlimited scans / analytics to 500, no watermark, no card;
// Lite $4 / Pro $9 / Team $29) and the never-expire / freeze-on-cancel promise.
// Keep in sync with billing.config / seo.config. Body copy is English by design
// (matches the MostlyRender compare pattern — zero tr() in the page body).
const { Icon: IconCMP, MQMark: MQMarkCMP, Wordmark: WordmarkCMP } = window.MQR;
const { Button: BtnCMP, Badge: BadgeCMP } = window.ForgeDesignSystem_e40d74;

// Locale-aware home, mirroring Landing.jsx. Marketing copy stays English, but the
// brand link should keep the visitor inside their locale's tree.
const I18N_CMP = (typeof window !== 'undefined' && window.ForgeI18n) || { locale: 'en' };
const HOME_CMP = (I18N_CMP.locale && I18N_CMP.locale !== 'en') ? '/' + I18N_CMP.locale + '/' : '/';

// Display order for the "More comparisons" grid + the route slugs (= COMPETITORS keys).
const COMPARE_ORDER = ["qrtiger", "getqr", "flowcode", "uniqode", "qr-code-generator"];

const COMPETITORS = {
  qrtiger: {
    name: "QR TIGER", logo: "Q", route: "Compare",
    tagline: "Real free dynamic codes — no watermark, no scan cap.",
    lead: "QR TIGER is a genuinely capable platform — established, broad, and trusted by a lot of teams. Here’s where we differ, stated as facts from its own pricing and pages, so you can decide for your own campaign.",
    strong: "QR TIGER has a real depth advantage: unlimited scans on every paid tier, a broad feature set (bulk to 3,000/batch, REST API, geofencing, password protection, white-label on higher tiers), strong ISO 27001 / SOC 2 / GDPR trust positioning, and years of brand and SEO behind it. If you need geofencing or white-label today, that’s a fair reason to choose them — and we’ll say so.",
    wedge: [
      { lbl: "The free tier that actually works", big: "No watermark", sub: "QR TIGER’s free plan puts a QR TIGER logo/ad popup on your codes and caps you at 500 scans each; ours is clean and never caps scans — your codes redirect forever (free analytics shows up to 500)" },
      { lbl: "And when you stop paying", big: "Freeze, don’t die", alt: true, sub: "your printed MostlyQR code keeps resolving forever — it never expires, even after you cancel" },
    ],
    rows: [
      { f: "Watermark on free codes", us: "None", them: "QR TIGER logo/ad popup", fact: true },
      { f: "Free dynamic codes", us: "3", them: "3", fact: true },
      { f: "Scan cap on free codes", us: "None — scans never stop", them: "500 per code", fact: true },
      { f: "Printed code on cancel", us: "Keeps working (frozen)", them: "Subject to plan limits", fact: true },
      { f: "Monthly billing shown honestly", us: true, them: "Headline price is annual", fact: true },
      { f: "Public pricing page", us: true, them: true },
      { f: "Edit destination after printing", us: true, them: true },
      { f: "Scan analytics", us: true, them: true },
      { f: "Geofencing", us: false, them: true, win: "them", fact: true },
      { f: "White-label domain", us: "Team plan ($29)", them: "Advanced+ tiers", fact: true },
      { f: "Years in market", us: "Newer entrant", them: "Established brand", win: "them" },
    ],
    catchup: "We’re a newer entrant. QR TIGER has geofencing and password protection we don’t ship yet, a bigger brand, and more years of edge cases ironed out. If those features are core to your campaign today, that’s a fair reason to choose them. Where we win: a free tier with no watermark and no per-code scan cap, honest monthly pricing, and a printed code that never expires on you.",
  },

  getqr: {
    name: "GetQR", logo: "G", route: "Compare/getqr",
    tagline: "Pricing you can see — and a code that never deactivates.",
    lead: "GetQR markets itself as the “#1 QR code generator” — 1.1M+ users, 33M+ scans, and one of the most polished funnels in the category. Here’s where we differ, stated as facts from its own site and public reviews, so you can decide for your own campaign.",
    strong: "GetQR has one of the most conversion-focused landing experiences in the category and genuinely granular design control — independent body, eye-frame and eye-ball shapes, HEX colors and logo upload — plus high-res SVG/PDF export for print, a clean real-time analytics dashboard, and a very low-friction ~3-minute setup. If you want the prettiest generator and the fastest first code, it’s genuinely strong — and we’ll say so.",
    wedge: [
      { lbl: "What it costs to find out", big: "Published vs hidden", sub: "GetQR shows no public pricing — /pricing, /plans and /create all 404, and the real price only appears in checkout after a $1 charge; MostlyQR’s full pricing is on the page (Free, Lite $4, Pro $9, Team $29)" },
      { lbl: "And when you stop paying", big: "Freeze, don’t die", alt: true, sub: "GetQR codes are reported to deactivate when the subscription lapses or is cancelled; a MostlyQR code freezes to its last destination and keeps resolving forever" },
    ],
    rows: [
      { f: "Public pricing page", us: true, them: "Hidden (/pricing 404s)", fact: true },
      { f: "Real free dynamic plan", us: "3 dynamic codes", them: "None ($1 to start)", fact: true },
      { f: "Printed code on cancel", us: "Keeps working (frozen)", them: "Deactivates on lapse", fact: true },
      { f: "Entry price to a dynamic code", us: "$0 (free plan)", them: "$1 → $39.99/yr (reported)", fact: true },
      { f: "Edit destination after printing", us: true, them: true },
      { f: "Scan analytics (location/device/time)", us: true, them: true },
      { f: "High-res SVG / PDF export", us: true, them: true },
      { f: "Granular eye/shape design control", us: "Core styles", them: "Independent body/eye shapes", win: "them", fact: true },
      { f: "Localized (8 languages)", us: true, them: "English-only", fact: true },
      { f: "Team seats · API · bulk", us: "Pro + Team plans", them: false, fact: true },
    ],
    catchup: "GetQR’s design control and funnel polish are ahead of ours — independent eye-shape styling, a refined generator, a fast first code. If the prettiest possible code is your priority, weigh it. We win on the things its own reviewers complain about: pricing you can see before you pay, a free plan that’s genuinely dynamic, codes that never deactivate when you stop paying — plus team seats, API and 8-language localization GetQR doesn’t offer.",
  },

  flowcode: {
    name: "Flowcode", logo: "F", route: "Compare/flowcode",
    tagline: "Flows and integrations at $9 — not gated at $250.",
    lead: "Flowcode is a polished, design-led, enterprise-grade platform. Here’s where we differ — stated as facts from its own pricing — so you can decide for your own workload.",
    strong: "Flowcode has one of the strongest brand and design stories in the category, real first-party-data tooling (FlowID identity, 360° profiles), and enterprise CRM/CDP depth with Fortune 500 social proof. If you’re an enterprise marketing team whose core need is identity resolution and a CDP integration, it’s genuinely strong — and we’ll say so.",
    wedge: [
      { lbl: "What integrations cost", big: "$9 vs $250", sub: "Flowcode walls CRM integrations and API access behind its Growth tier at $250/year; MostlyQR’s flows + integrations land on Pro at $9/month" },
      { lbl: "And the free tier", big: "Unlimited scans", alt: true, sub: "Flowcode’s free plan caps you at 500 scans across just 2 codes; ours never caps scans — codes redirect forever, with free analytics up to 500 and full analytics on Pro" },
    ],
    rows: [
      { f: "Integrations / API entry price", us: "$9 / mo (Pro)", them: "$250 / yr (Growth)", fact: true },
      { f: "Monthly billing on the integrations tier", us: true, them: "Growth is annual-only", fact: true },
      { f: "Free dynamic codes", us: "3", them: "2", fact: true },
      { f: "Free scan allowance", us: "Unlimited (analytics to 500)", them: "500 scans", fact: true },
      { f: "Printed code on cancel", us: "Keeps working (frozen)", them: "Subject to plan limits", fact: true },
      { f: "Edit destination after printing", us: true, them: true },
      { f: "Scan analytics with geo", us: true, them: true },
      { f: "CRM/CDP identity layer (FlowID)", us: false, them: true, win: "them", fact: true },
      { f: "Enterprise pricing visible self-serve", us: true, them: "Demo-gated", fact: true },
      { f: "Brand / design tooling depth", us: "Newer", them: "Highly refined", win: "them" },
    ],
    catchup: "Flowcode’s design studio, FlowID identity layer and enterprise CRM/CDP depth are more mature than ours, and for a Fortune 500 marketing team that matters. We’re not chasing that buyer. We win when you want flows, integrations and an API without a $250 annual jump — and a printed code that never deactivates on you.",
  },

  uniqode: {
    name: "Uniqode", logo: "U", route: "Compare/uniqode",
    tagline: "Real monthly billing — and a free plan that’s actually dynamic.",
    lead: "Uniqode (formerly Beaconstac) is a deep, analytics-led platform. Here’s where we differ — stated as facts from its own pricing — so you can decide for your own workload.",
    strong: "Uniqode has a serious analytics and attribution story, a strong enterprise/governance posture (SSO/SAML, RBAC, sub-accounts, SOC 2 / HIPAA / ISO 27001), a huge integration surface (5,000+ via Zapier/Make/Workato plus API), and two product lines (QR + digital business cards). For a mid-market or enterprise team that needs compliance and governance, it’s a real option — and we’ll say so.",
    wedge: [
      { lbl: "How you pay", big: "Monthly vs annual-only", sub: "Uniqode’s QR plans are annual-only — there’s no monthly billing — so you commit a year up front; MostlyQR bills month to month" },
      { lbl: "The free tier", big: "Dynamic vs static-only", alt: true, sub: "Uniqode’s free plan is static codes only — no editing after print, no analytics; ours gives real dynamic codes with analytics on free" },
    ],
    rows: [
      { f: "Monthly billing option", us: true, them: "Annual-only on QR plans", fact: true },
      { f: "Dynamic codes on the free plan", us: "3", them: "0 (static only)", fact: true },
      { f: "Analytics on the free plan", us: true, them: false, fact: true },
      { f: "Printed code on cancel", us: "Keeps working (frozen)", them: "Subject to plan limits", fact: true },
      { f: "Custom domain", us: "Team plan ($29/mo)", them: "~$2,000/yr add-on", fact: true },
      { f: "Edit destination after printing", us: true, them: true },
      { f: "Scan analytics (location/device/time)", us: true, them: true },
      { f: "Zapier / webhooks / integrations", us: true, them: true },
      { f: "SSO / RBAC / compliance (SOC 2, HIPAA)", us: false, them: true, win: "them", fact: true },
      { f: "Digital business cards", us: false, them: true, win: "them", fact: true },
    ],
    catchup: "Uniqode is deeper on enterprise governance — SSO, role-based access, SOC 2 / HIPAA compliance, sub-accounts — and it ships digital business cards we don’t. If you need that compliance posture today, weigh it. We win on real monthly billing, a free plan that’s genuinely dynamic with analytics, a custom domain that doesn’t cost ~$2,000/year extra, and a code that never expires.",
  },

  "qr-code-generator": {
    name: "QR Code Generator", logo: "G", route: "Compare/qr-code-generator",
    tagline: "Your printed code never deactivates mid-campaign.",
    lead: "QR Code Generator (the Bitly-owned PRO platform) is the category’s SEO leader with a polished funnel. Here’s where we differ — stated as facts from its own pricing — so you can decide for your own campaign.",
    strong: "QR Code Generator has genuine strengths: strong brand trust and SEO as the Bitly-owned leader, a polished modern UI with a frictionless 3-step flow, truly unlimited free static codes with no expiration, and a full enterprise feature set (analytics, API, bulk, team seats, white-label). If you mainly need unlimited free static codes from a trusted name, it’s hard to beat — and we’ll say so.",
    wedge: [
      { lbl: "The complaint that defines the category", big: "Never deactivated", sub: "QR Code Generator’s trial and cancelled-plan codes stop working mid-campaign even after they’re printed; a MostlyQR code freezes to its last destination and keeps resolving" },
      { lbl: "Dynamic codes for your money", big: "3 vs 2", alt: true, sub: "its $5 Starter plan gives only 2 dynamic codes; our free plan already gives 3 — with no card" },
    ],
    rows: [
      { f: "Printed code on cancel", us: "Keeps working (frozen)", them: "Deactivates mid-campaign", fact: true },
      { f: "Dynamic codes on the free plan", us: "3", them: "0 (static only)", fact: true },
      { f: "Dynamic codes at ~$5", us: "10 (Lite, $4/mo)", them: "2 (Starter, $5/user)", fact: true },
      { f: "Per-seat pricing", us: "Flat per account", them: "Per user/seat", fact: true },
      { f: "Analytics on the free plan", us: true, them: false, fact: true },
      { f: "Edit destination after printing", us: true, them: true },
      { f: "Vector / high-res export on free", us: true, them: "JPG only on free", fact: true },
      { f: "Monthly billing on every tier", us: true, them: "Mid/top tiers annual-only", fact: true },
      { f: "Bulk + API", us: "Pro plan ($9/mo)", them: "Advanced+ tiers", fact: true },
      { f: "Brand trust / SEO", us: "Newer entrant", them: "Bitly-owned leader", win: "them" },
    ],
    catchup: "QR Code Generator has the brand, the SEO and the polish of the category leader, plus unlimited free static codes. We’re newer. Where we win is the thing people complain about most: our printed codes never deactivate mid-campaign. Add real dynamic codes (and analytics) on the free plan, flat instead of per-seat pricing, and monthly billing on every tier.",
  },
};

function CmpCell({ v, win }) {
  if (v === true) return <span className="cmp-yes"><IconCMP name="check" size={16} /></span>;
  if (v === false) return <span className="cmp-no"><IconCMP name="x" size={15} /></span>;
  return <span className={"cmp-val" + (win ? " cmp-val--muted" : "")}>{v}</span>;
}

/* ── Nav — mirrors Landing.jsx's nav, but as real <a href> links so the
   comparison set is fully crawlable. ── */
function CmpNav() {
  return (
    <header className="mk-nav">
      <div className="mk-wrap mk-nav__inner">
        <a className="mk-brand" href={HOME_CMP}><MQMarkCMP animate /><WordmarkCMP /></a>
        <nav className="mk-nav__links">
          <a href="/#how">How it works</a>
          <a href="/Compare">Compare</a>
          <a href="/#pricing">Pricing</a>
        </nav>
        <div className="mk-nav__cta" />
      </div>
    </header>
  );
}

// The footer is the shared window.MQRFooter (defined in mqr/shared.jsx) so the
// landing page and every /Compare page render the exact same footer — see
// Compare() below.

function CompareTable({ data }) {
  return (
    <section className="cmp">
      <div className="mk-wrap">
        <div className="mk-section-head" style={{ marginBottom: 22 }}>
          <span className="mk-eyebrow">MostlyQR vs {data.name}</span>
          <h1 className="mk-h1" style={{ fontSize: 46 }}>The honest {data.name} alternative.</h1>
          <p className="mk-lead" style={{ marginInline: "auto", maxWidth: "36em" }}>{data.lead}</p>
        </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"><MQMarkCMP s={20} /> MostlyQR</div>
            <div className="cmp-table__them"><span className="cmp-themlogo">{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"><CmpCell v={r.us} win={r.win === "them"} /></div>
              <div className="cmp-table__them"><CmpCell v={r.them} win={r.win !== "them" && r.them !== true} /></div>
            </div>
          ))}
        </div>

        <div className="mk-cta__inner" style={{ marginTop: 44 }}>
          <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="/#pricing" style={{ textDecoration: "none" }}>
              <BtnCMP variant="primary" size="lg" iconRight={<IconCMP name="arrow" size={16} />}>See pricing</BtnCMP>
            </a>
            <a href="/#how" style={{ textDecoration: "none" }}>
              <BtnCMP variant="secondary" size="lg">How it works</BtnCMP>
            </a>
          </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 and reinforce it.
function MoreComparisons({ current }) {
  const others = COMPARE_ORDER.filter((k) => k !== current);
  const href = (k) => "/" + COMPETITORS[k].route;
  return (
    <section className="cmp-more">
      <div className="mk-wrap">
        <div className="mk-section-head" style={{ marginBottom: 22 }}>
          <span className="mk-eyebrow">More comparisons</span>
          <h2 className="mk-h2">See how MostlyQR stacks up</h2>
          <p className="mk-lead" style={{ marginInline: "auto", maxWidth: "34em" }}>Honest, fact-by-fact comparisons against the QR platforms teams evaluate most.</p>
        </div>
        <div className="cmp-more__grid">
          {others.map((k) => (
            <a key={k} className="cmp-more__card" href={href(k)}>
              <div className="cmp-more__top">
                <span className="cmp-themlogo">{COMPETITORS[k].logo}</span>
                <span className="cmp-more__name">MostlyQR vs {COMPETITORS[k].name}</span>
              </div>
              <p className="cmp-more__tag">{COMPETITORS[k].tagline}</p>
              <span className="cmp-more__cta">{COMPETITORS[k].name} alternative <IconCMP name="arrow" size={14} /></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Compare({ competitor = "qrtiger" }) {
  const key = COMPETITORS[competitor] ? competitor : "qrtiger";
  return (
    <div className="mk-root">
      <CmpNav />
      <CompareTable data={COMPETITORS[key]} />
      <MoreComparisons current={key} />
      <window.MQRFooter />
    </div>
  );
}

window.MQRCompare = Compare;
window.MQR_COMPARE_COMPETITORS = COMPARE_ORDER;