// MostlyQR — Enterprise page at /Enterprise.
//
// The landing sells the SMB promise (print once, never expires). This page sells
// the ONE thing in the whole portfolio no competitor markets: a unique, verifiable
// code on EVERY physical unit — serialized minting + GS1 Digital Link + ECC200
// DataMatrix + per-unit analytics + anti-counterfeit clone detection. It is
// outcome-led (anti-counterfeit, the GS1 Sunrise 2027 mandate, multi-location ops,
// programmatic batch) rather than feature-led, and routes the procurement buyer to
// a sales conversation rather than self-serve checkout.
//
// HONESTY (mirrors compare.jsx + CONSTITUTION P8): only capabilities that actually
// ship are claimed as built. SSO/SAML/SCIM/SOC 2 are NOT yet live (F018 is code-done
// but infra-pending per R02 Wave 4) — they live in the "On the roadmap" column, never
// the "Built today" one. Don't promote one across the line until the gate is green.
//
// Body copy is English by design (same as the /Compare pages — zero tr() in the body);
// SEO head strings live in seo.config.js (pages.enterprise) + web/i18n/en.json.
// IIFE-scoped: marketing page modules are loaded as global <script type="text/babel"> tags that
// SHARE one global scope, so a top-level name here (e.g. UseCases) would clobber Landing.jsx's
// same-named one and break hydration. Keep everything local; only export window.MQREnterprise.
(function () {
const { Icon: IconENT, MQMark: MQMarkENT, Wordmark: WordmarkENT, QR: QRENT } = window.MQR;
const { Button: BtnENT, Badge: BadgeENT } = window.ForgeDesignSystem_e40d74;

const I18N_ENT = (typeof window !== 'undefined' && window.ForgeI18n) || { locale: 'en' };
const HOME_ENT = (I18N_ENT.locale && I18N_ENT.locale !== 'en') ? '/' + I18N_ENT.locale + '/' : '/';

const REDUCED_MOTION_ENT = typeof window !== "undefined" && window.matchMedia
  && window.matchMedia("(prefers-reduced-motion: reduce)").matches;

const MAILTO_DEMO = "mailto:hi@mostlyqr.com?subject=MostlyQR%20Enterprise%20%E2%80%94%20book%20a%20demo&body=Tell%20us%20a%20little%20about%20your%20product%20line%20(category%2C%20units%2Fyear%2C%20where%20codes%20get%20applied)%20and%20we'll%20set%20up%20a%20walkthrough.";
const MAILTO_SALES = "mailto:hi@mostlyqr.com?subject=MostlyQR%20Enterprise%20%E2%80%94%20talk%20to%20sales";

/* Reveal-on-scroll (self-contained copy of Landing's useInView, SSR-safe). */
function useInViewENT(opts) {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el || seen) return;
    if (REDUCED_MOTION_ENT || typeof IntersectionObserver === "undefined") { setSeen(true); return; }
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) if (e.isIntersecting) { setSeen(true); io.disconnect(); break; }
    }, Object.assign({ threshold: 0.18, rootMargin: "0px 0px -8% 0px" }, opts || {}));
    io.observe(el);
    return () => io.disconnect();
  }, [seen]);
  return [ref, seen];
}

/* Count up to target once `on` (mirrors Landing's useCountUp). */
function useCountUpENT(target, on, ms = 1400) {
  const [v, setV] = React.useState(REDUCED_MOTION_ENT ? target : 0);
  React.useEffect(() => {
    if (!on || REDUCED_MOTION_ENT) { setV(target); return; }
    let raf, start;
    const tick = (t) => {
      if (start == null) start = t;
      const p = Math.min(1, (t - start) / ms);
      const eased = 1 - Math.pow(1 - p, 4);
      setV(Math.round(target * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, on, ms]);
  return v;
}

// Zero-padded serial, e.g. 847 → "00 084 7" styling handled in CSS; here just digits.
const serial = (n) => String(n).padStart(7, "0").replace(/(\d{3})(\d{2})(\d{2})/, "$1 $2 $3");

/* ── Nav — real <a> links so the page is crawlable, "Talk to sales" CTA. ── */
function EntNav() {
  return (
    <header className="mk-nav ent-nav">
      <div className="mk-wrap mk-nav__inner">
        <a className="mk-brand" href={HOME_ENT}><MQMarkENT animate /><WordmarkENT /></a>
        <nav className="mk-nav__links">
          <a href="#used-for">What it's for</a>
          <a href="#gs1">GS1 Digital Link</a>
          <a href="#capabilities">Capabilities</a>
          <a href="/#pricing">Pricing</a>
        </nav>
        <div className="mk-nav__cta">
          <a href={MAILTO_SALES} style={{ textDecoration: "none" }}>
            <BtnENT variant="primary" size="sm" iconRight={<IconENT name="arrow" size={15} />}>Talk to sales</BtnENT>
          </a>
        </div>
      </div>
    </header>
  );
}

/* ── Hero — dark, threat/mandate-led. A live "mint" readout ticks toward a million
   unique serials so the core idea (one code per UNIT, at scale) lands in two seconds. ── */
function MintReadout() {
  const [ref, seen] = useInViewENT({ threshold: 0.3 });
  const minted = useCountUpENT(1000000, seen, 1800);
  const [rows, setRows] = React.useState([847123, 847124, 847125, 847126]);
  React.useEffect(() => {
    if (!seen || REDUCED_MOTION_ENT) return;
    const iv = setInterval(() => setRows((r) => {
      const next = r[r.length - 1] + 1 + Math.floor(Math.random() * 2);
      return [...r.slice(1), next];
    }), 900);
    return () => clearInterval(iv);
  }, [seen]);
  const flaggedRow = rows[1];
  return (
    <div className="ent-mint" ref={ref}>
      <div className="ent-mint__bar">
        <span className="ent-mint__dot" /><span className="ent-mint__dot" /><span className="ent-mint__dot" />
        <span className="ent-mint__title">batch · spring-run-04 · DataMatrix</span>
      </div>
      <div className="ent-mint__body">
        <div className="ent-mint__head">
          <div>
            <span className="ent-mint__label">Unique units minted</span>
            <span className="ent-mint__count">{minted.toLocaleString()}</span>
          </div>
          <BadgeENT tone="good" dot>minting</BadgeENT>
        </div>
        <div className="ent-mint__rows">
          {rows.map((n, i) => (
            <div className={"ent-mint__row" + (n === flaggedRow ? " is-flag" : "")} key={n} style={{ "--i": i }}>
              <span className="ent-mint__dm">
                <DataMatrixMark size={32} n={12} seed={n} radius={5}
                  fg={n === flaggedRow ? "#d4313b" : "#1d1d1f"} bg="#ffffff" />
              </span>
              <span className="ent-mint__sn">SN&nbsp;{serial(n)}</span>
              {n === flaggedRow
                ? <span className="ent-mint__state is-flag"><IconENT name="shield" size={12} sw={2.4} /> 3 cities · flagged</span>
                : <span className="ent-mint__state"><IconENT name="check" size={12} sw={2.6} /> verified</span>}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function EntHero() {
  return (
    <section className="ent-hero">
      <div className="ent-hero__grid" aria-hidden="true" />
      <div className="mk-wrap ent-hero__inner">
        <div className="ent-hero__copy">
          <span className="ent-eyebrow">MostlyQR Enterprise</span>
          <h1 className="ent-h1">A unique, verifiable code<br />on <span className="ent-mark">every unit</span> you make.</h1>
          <p className="ent-lead">
            Not one QR per product line — one per <strong>item</strong>. Mint serialized codes by
            the million, carry <strong>GS1 Digital Link</strong> and <strong>DataMatrix</strong> right
            on the package, track every unit individually, and catch counterfeits the moment one
            serial scans in two places at once.
          </p>
          <div className="ent-hero__actions">
            <a href={MAILTO_DEMO} style={{ textDecoration: "none" }}>
              <BtnENT variant="primary" size="lg" iconRight={<IconENT name="arrow" size={16} />}>Book a demo</BtnENT>
            </a>
            <a href={MAILTO_SALES} style={{ textDecoration: "none" }}>
              <BtnENT variant="secondary" size="lg">Talk to sales</BtnENT>
            </a>
          </div>
          <div className="ent-hero__meta">
            <span><IconENT name="check" size={15} /> GS1 Sunrise 2027-ready</span>
            <span><IconENT name="check" size={15} /> Per-unit analytics</span>
            <span><IconENT name="check" size={15} /> Your own domain</span>
          </div>
        </div>
        <div className="ent-hero__art">
          <MintReadout />
        </div>
      </div>
    </section>
  );
}

/* ── The centerpiece: "every unit, not every SKU." One SKU fans out into a grid of
   uniquely-serialized units — one flagged as a clone. This is the concept the whole
   tier rests on, so it gets its own full section with a real diagram. ── */
function EveryUnit() {
  const [ref, seen] = useInViewENT({ threshold: 0.2 });
  // 12 unit tiles; index 5 is the flagged clone.
  const units = Array.from({ length: 12 }, (_, i) => 847120 + i);
  const FLAG = 5;
  return (
    <section className="ent-eu" id="every-unit" ref={ref} data-reveal={seen ? "in" : "out"}>
      <div className="mk-wrap">
        <div className="mk-section-head">
          <span className="mk-eyebrow">The shift that unlocks everything</span>
          <h2 className="mk-h2">Every unit, not every SKU.</h2>
          <p className="mk-lead" style={{ marginInline: "auto", maxWidth: "40em" }}>
            A normal QR generator gives you one code for a product. Enterprise gives every
            single item its own — so analytics, recalls and authenticity work at the unit level,
            not the catalogue level.
          </p>
        </div>

        <div className="ent-eu__diagram">
          <div className="ent-eu__sku">
            <div className="ent-eu__box">
              <IconENT name="layers" size={26} sw={1.8} />
              <span className="ent-eu__boxlabel">1 SKU</span>
              <span className="ent-eu__boxsub">“Spring Roast 250g”</span>
            </div>
          </div>
          <div className="ent-eu__fan" aria-hidden="true">
            <span /><span /><span /><span />
          </div>
          <div className="ent-eu__units">
            <div className="ent-eu__unitsbar">
              <span className="ent-eu__unitscount">1,000,000 units</span>
              <span className="ent-eu__unitseach">each its own scannable identity</span>
            </div>
            <div className="ent-eu__grid">
              {units.map((n, i) => (
                <div className={"ent-eu__unit" + (i === FLAG ? " is-clone" : "")} key={n} style={{ "--i": i }}>
                  <QRENT data={"mqr.sh/u/" + n} size={38} quiet={1}
                    fg={i === FLAG ? "#d4313b" : "#1d1d1f"} eyeColor={i === FLAG ? "#d4313b" : "var(--accent)"}
                    bodyShape="square" frameShape="square" ballShape="square" />
                  <span className="ent-eu__sn">{serial(n)}</span>
                  {i === FLAG && <span className="ent-eu__clonetag"><IconENT name="shield" size={11} sw={2.4} /> clone</span>}
                </div>
              ))}
            </div>
          </div>
        </div>
        <p className="ent-eu__foot">
          <IconENT name="shield" size={15} sw={2.2} />
          One serial, scanned 600 km apart within the hour — flagged automatically. That’s a
          counterfeit you’d never see with a single SKU-level code.
        </p>
      </div>
    </section>
  );
}

/* ── What enterprise gets used for — outcome-led, ranked by willingness-to-pay:
   anti-counterfeit, the GS1 mandate, multi-location ops, programmatic batch. ── */
const USE_CASES = [
  {
    icon: "shield", c: "#d4313b",
    kicker: "Loss prevention",
    t: "Stop counterfeits & diversion",
    d: "Every unit carries a serial that verifies on scan. Clone detection flags the same serial scanning in two places, and gray-market diversion shows up as scans where you never shipped.",
    proof: "Protects margin, not just marketing",
  },
  {
    icon: "grid", c: "#5b8def",
    kicker: "Retail mandate",
    t: "Be ready for GS1 Sunrise 2027",
    d: "Retailers are moving the barcode to a QR carrying a GS1 Digital Link. Encode GTIN, batch, expiry and a serial in one code that scans at the till and opens a product page for shoppers.",
    proof: "A board-mandated, dated migration",
  },
  {
    icon: "users", c: "#2f9e6f",
    kicker: "Operations at scale",
    t: "Run codes across every location",
    d: "One brand, hundreds of sites. Team seats and roles, folders per region, bulk CSV, and routing that sends each scan to the right local destination — with an audit log of who changed what.",
    proof: "High-volume, recurring spend",
  },
  {
    icon: "zap", c: "#7c5cff",
    kicker: "Embedded & programmatic",
    t: "Mint millions over the API",
    d: "Generate and manage codes as a job over the REST API — packaging runs, event tickets, asset tags, or QR-as-a-feature inside your own product, all under your own domain.",
    proof: "Breadth: QR as infrastructure",
  },
];
function UseCases() {
  const [ref, seen] = useInViewENT({ threshold: 0.12 });
  return (
    <section className="ent-uses" id="used-for" ref={ref} data-reveal={seen ? "in" : "out"}>
      <div className="mk-wrap">
        <div className="mk-section-head">
          <span className="mk-eyebrow">What teams use it for</span>
          <h2 className="mk-h2">Four jobs that earn the tier.</h2>
        </div>
        <div className="ent-uses__grid">
          {USE_CASES.map((u, i) => (
            <article className="ent-use" key={u.t} style={{ "--i": i }}>
              <span className="ent-use__ic" style={{ background: u.c }}><IconENT name={u.icon} size={20} sw={2} /></span>
              <span className="ent-use__kicker">{u.kicker}</span>
              <h3 className="ent-use__t">{u.t}</h3>
              <p className="ent-use__d">{u.d}</p>
              <span className="ent-use__proof"><IconENT name="arrow" size={13} sw={2.2} /> {u.proof}</span>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── GS1 Digital Link — the one differentiator with no competitor checkmark. A
   stylised DataMatrix + a Digital Link breakdown, plus the "only one in the
   category" honest flex (sourced from our own compare set). ── */
function DataMatrixMark({ size = 132, n = 16, seed = 7, fg = "#1d1d1f", bg = "#ffffff", radius = 10 }) {
  // Illustrative ECC200-style square-module mark (NOT a real DataMatrix encoder — we
  // render real DataMatrix in-product via @mostly-tiny/serialize). Deterministic per
  // `seed` so SSR + client match and each unit's mark looks distinct. Solid L finder
  // + dashed clock track, inline fills so it works on light and dark tiles alike.
  const N = n, cell = size / (N + 2), pad = cell;
  const cells = [];
  let s = (seed >>> 0) || 1; const rnd = () => { s = (s * 1103515245 + 12345) & 0x7fffffff; return s / 0x7fffffff; };
  for (let r = 0; r < N; r++) for (let c = 0; c < N; c++) {
    const finder = c === 0 || r === N - 1;                 // solid L
    const clock = (r === 0 && c % 2 === 0) || (c === N - 1 && r % 2 === 1); // dashed track
    const on = finder || clock || rnd() > 0.5;
    if (on) cells.push(<rect key={r + "-" + c} x={pad + c * cell} y={pad + r * cell} width={cell + 0.5} height={cell + 0.5} fill={fg} />);
  }
  return (
    <svg className="ent-dm" width={size} height={size} viewBox={`0 0 ${size} ${size}`} aria-hidden="true">
      <rect x="0" y="0" width={size} height={size} rx={radius} fill={bg} />
      {cells}
    </svg>
  );
}

// Illustrative EAN-13-style linear barcode (decorative; real barcodes render in-product
// via @mostly-tiny/barcode — Code 128 + EAN-13). Deterministic bars, extended guard bars
// at start/middle/end, and a human-readable number — so legacy retail scanners stay in
// the story alongside the 2D symbologies.
function BarcodeMark({ width = 300, height = 96, fg = "#1d1d1f", digits = "0 95012 34567 8" }) {
  let s = 91; const rnd = () => { s = (s * 1103515245 + 12345) & 0x7fffffff; return s / 0x7fffffff; };
  const top = 10, barH = height - 34, guardH = barH + 12, mid = width / 2, end = width - 12;
  const bars = [];
  let x = 12;
  while (x < end) {
    const w = 1 + Math.round(rnd() * 3);
    const isGuard = Math.abs(x - 12) < 6 || Math.abs(x - mid) < 6 || Math.abs(x - end) < 7;
    if (isGuard || rnd() > 0.42) bars.push(<rect key={x} x={x} y={top} width={w} height={isGuard ? guardH : barH} fill={fg} />);
    x += w + (1 + Math.round(rnd() * 2));
  }
  return (
    <svg className="ent-bc" width={width} height={height} viewBox={`0 0 ${width} ${height}`} aria-hidden="true">
      <rect x="0" y="0" width={width} height={height} rx="8" fill="#fff" />
      {bars}
      <text x={width / 2} y={height - 8} textAnchor="middle" fill={fg} className="ent-bc__digits">{digits}</text>
    </svg>
  );
}
function GS1Section() {
  const PARTS = [
    { k: "GTIN", v: "095012345678", d: "the product" },
    { k: "Batch", v: "L-2027-04", d: "the run" },
    { k: "Expiry", v: "2027-09-01", d: "freshness" },
    { k: "Serial", v: "00 084 7", d: "this exact unit" },
  ];
  return (
    <section className="ent-gs1" id="gs1">
      <div className="mk-wrap ent-gs1__inner">
        <div className="ent-gs1__copy">
          <span className="mk-eyebrow" style={{ color: "var(--accent)" }}>The differentiator</span>
          <h2 className="mk-h2">GS1 Digital Link, built in.</h2>
          <p className="mk-lead">
            One code that does two jobs: it scans at the retail till like a barcode and opens a
            rich product page for the shopper. We encode the full GS1 application identifier set —
            rendered as a QR, a space-saving ECC200 DataMatrix for tight packaging, <em>or</em> a
            classic EAN-13 / Code 128 linear barcode for the scanners already on the shelf.
          </p>
          <div className="ent-gs1__parts">
            {PARTS.map((p) => (
              <div className="ent-gs1__part" key={p.k}>
                <span className="ent-gs1__partk">{p.k}</span>
                <span className="ent-gs1__partv">{p.v}</span>
                <span className="ent-gs1__partd">{p.d}</span>
              </div>
            ))}
          </div>
          <div className="ent-gs1__flex">
            <IconENT name="check" size={16} sw={2.6} />
            <span>Of the QR platforms teams compare us against — QR&nbsp;TIGER, Uniqode, GetQR,
            Flowcode — <strong>none market GS1 Digital Link</strong>. We ship it.</span>
          </div>
        </div>
        <div className="ent-gs1__art">
          <div className="ent-gs1__symbols">
            <div className="ent-gs1__sym">
              <QRENT data="id.gs1.org/01/09501234567/21/000847" size={132} quiet={1}
                fg="#1d1d1f" eyeColor="var(--accent)" bodyShape="rounded" frameShape="rounded" ballShape="rounded" />
              <span className="ent-gs1__symlabel">QR · Digital Link</span>
            </div>
            <div className="ent-gs1__sym">
              <DataMatrixMark size={132} seed={847} />
              <span className="ent-gs1__symlabel">ECC200 · DataMatrix</span>
            </div>
          </div>
          <div className="ent-gs1__sym ent-gs1__sym--wide">
            <BarcodeMark width={300} height={92} />
            <span className="ent-gs1__symlabel">EAN-13 · linear barcode</span>
          </div>
          <code className="ent-gs1__url">id.gs1.org/01/<b>09501234567</b>/10/<b>L-2027-04</b>/21/<b>000847</b></code>
        </div>
      </div>
    </section>
  );
}

/* ── Capabilities — what actually ships today (R02 Waves 1–3 + F019/F026). ── */
const CAPS = [
  { icon: "hash", t: "Serialized minting", d: "Mint millions of unique codes as an async batch job — manage and bulk-export by run." },
  { icon: "grid", t: "GS1 + DataMatrix", d: "GS1 Digital Link application identifiers, rendered as QR or ECC200 DataMatrix." },
  { icon: "sliders", t: "Linear barcodes", d: "EAN-13 and Code 128 too — stay compatible with the retail scanners already in the field." },
  { icon: "shield", t: "Anti-counterfeit", d: "Clone detection on duplicate-serial scans, plus diversion signals from unexpected geos." },
  { icon: "chart", t: "Per-unit + per-batch analytics", d: "Scan history down to the individual item, rolled up by batch, region and time." },
  { icon: "zap", t: "Batch REST API", d: "Generate, repoint and report on codes programmatically — QR as infrastructure." },
  { icon: "globe", t: "Custom domain isolation", d: "Codes resolve on your own domain, kept separate from shared redirect traffic." },
  { icon: "users", t: "Team seats, roles & audit log", d: "Unlimited seats with role-based access and an audit trail of every change." },
];
function Capabilities() {
  const [ref, seen] = useInViewENT({ threshold: 0.1 });
  return (
    <section className="ent-caps" id="capabilities" ref={ref} data-reveal={seen ? "in" : "out"}>
      <div className="mk-wrap">
        <div className="mk-section-head">
          <span className="mk-eyebrow">Built today</span>
          <h2 className="mk-h2">The enterprise toolkit.</h2>
          <p className="mk-lead" style={{ marginInline: "auto", maxWidth: "38em" }}>
            Everything below is shipping now — no “coming soon” asterisks on the things you’d buy us for.
          </p>
        </div>
        <div className="ent-caps__grid">
          {CAPS.map((f, i) => (
            <div className="ent-cap" key={f.t} style={{ "--i": i }}>
              <span className="ent-cap__ic"><IconENT name={f.icon} size={18} sw={2} /></span>
              <span className="ent-cap__t">{f.t}</span>
              <p className="ent-cap__d">{f.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Trust & compliance — split honestly into shipping vs roadmap (P8). We never
   show SSO/SAML/SOC 2 as live until the gate is green; they sit in "On the roadmap". ── */
const TRUST_NOW = [
  "Custom-domain isolation for your codes",
  "Role-based access & full audit log",
  "Destination malware / phishing scanning",
  "Data residency in europe-west2",
];
const TRUST_SOON = [
  "SSO / SAML single sign-on",
  "SCIM user provisioning",
  "Enforced 2FA for all seats",
  "SOC 2 attestation",
];
function Trust() {
  return (
    <section className="ent-trust">
      <div className="mk-wrap">
        <div className="mk-section-head">
          <span className="mk-eyebrow">Trust & governance</span>
          <h2 className="mk-h2">Honest about what’s live.</h2>
          <p className="mk-lead" style={{ marginInline: "auto", maxWidth: "36em" }}>
            We separate what ships today from what’s on the roadmap — so procurement can plan
            against facts, not a feature wishlist.
          </p>
        </div>
        <div className="ent-trust__cols">
          <div className="ent-trust__col is-now">
            <div className="ent-trust__h"><IconENT name="check" size={16} sw={2.6} /> Available now</div>
            <ul>{TRUST_NOW.map((t) => <li key={t}><IconENT name="check" size={14} sw={2.6} /> {t}</li>)}</ul>
          </div>
          <div className="ent-trust__col is-soon">
            <div className="ent-trust__h"><IconENT name="refresh" size={15} sw={2.2} /> On the enterprise roadmap</div>
            <ul>{TRUST_SOON.map((t) => <li key={t}><IconENT name="arrow" size={13} sw={2.2} /> {t}</li>)}</ul>
            <span className="ent-trust__note">Talk to us about timelines — several are in active development.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Final CTA — two paths, both to a human (quote-based tier). ── */
function EntCTA() {
  return (
    <section className="ent-cta">
      <div className="mk-wrap">
        <div className="ent-cta__inner">
          <div className="ent-cta__mark"><MQMarkENT s={48} /></div>
          <h2 className="ent-cta__h">Put a code on every unit.</h2>
          <p className="ent-cta__lead">
            Tell us your category, your volume, and where the codes get applied. We’ll show you
            serialized minting, GS1 Digital Link and clone detection on your own product — and
            quote it.
          </p>
          <div className="ent-cta__actions">
            <a href={MAILTO_DEMO} style={{ textDecoration: "none" }}>
              <BtnENT variant="primary" size="lg" iconRight={<IconENT name="arrow" size={16} />}>Book a demo</BtnENT>
            </a>
            <a href={MAILTO_SALES} style={{ textDecoration: "none" }}>
              <BtnENT variant="secondary" size="lg">Talk to sales</BtnENT>
            </a>
          </div>
          <span className="ent-cta__contact"><IconENT name="mail" size={14} /> hi@mostlyqr.com</span>
        </div>
      </div>
    </section>
  );
}

/* ── Verification — the payoff of serialization for everyone DOWNSTREAM. A shopper or
   reseller scans the code with any phone camera (no app) and lands on a verify page on
   the brand's own domain: genuine, or flagged. Two result states, side by side, plus the
   three audiences who use it. ── */
function VerifyResult({ flagged }) {
  return (
    <div className={"ent-vf__card" + (flagged ? " is-flagged" : " is-genuine")}>
      <div className="ent-vf__bar">
        <IconENT name="lock" size={11} sw={2.4} /> verify.northbrew.co
      </div>
      <div className="ent-vf__result">
        <span className={"ent-vf__badge" + (flagged ? " is-bad" : " is-good")}>
          <IconENT name={flagged ? "shield" : "check"} size={22} sw={2.4} />
        </span>
        <span className="ent-vf__verdict">{flagged ? "Check this one" : "Genuine"}</span>
        <span className="ent-vf__sub">{flagged ? "We couldn’t confirm this unit" : "Authenticity confirmed"}</span>
      </div>
      <dl className="ent-vf__rows">
        <div><dt>Product</dt><dd>Spring Roast 250g</dd></div>
        <div><dt>Serial</dt><dd className="ent-mono">00 084 7</dd></div>
        <div><dt>Batch</dt><dd className="ent-mono">L-2027-04</dd></div>
        <div className={flagged ? "is-bad" : ""}>
          <dt>{flagged ? "Seen" : "First scan"}</dt>
          <dd>{flagged ? "3× · 3 regions · 1 hr" : "London · just now"}</dd>
        </div>
      </dl>
    </div>
  );
}
const VERIFY_AUD = [
  { icon: "user", t: "Shoppers", d: "Scan with any phone camera — no app — for instant proof it’s the real thing." },
  { icon: "users", t: "Resellers & distributors", d: "Bulk-verify inbound stock before accepting a pallet; catch diverted or duplicated serials." },
  { icon: "chart", t: "You", d: "Every check is a first-party touchpoint — and a data point on where your product really travels." },
];
function VerifySection() {
  return (
    <section className="ent-vf" id="verify">
      <div className="mk-wrap">
        <div className="mk-section-head">
          <span className="mk-eyebrow">Trust, all the way to the shelf</span>
          <h2 className="mk-h2">Anyone can verify a unit is real.</h2>
          <p className="mk-lead" style={{ marginInline: "auto", maxWidth: "40em" }}>
            The same serialized code your customers and resellers scan resolves to a verification
            page on <strong>your own domain</strong> — a clear genuine-or-flagged answer, backed by
            the unit’s real scan history.
          </p>
        </div>
        <div className="ent-vf__cards">
          <VerifyResult flagged={false} />
          <VerifyResult flagged={true} />
        </div>
        <div className="ent-vf__try">
          <a href="/Verify" style={{ textDecoration: "none" }}>
            <BtnENT variant="secondary" size="lg" iconRight={<IconENT name="arrow" size={16} />}>Try the live verifier</BtnENT>
          </a>
          <span className="ent-vf__tryhint">Open the real verification page — enter any serial (try one ending in <b>5</b> for a flagged result).</span>
        </div>
        <div className="ent-vf__aud">
          {VERIFY_AUD.map((a) => (
            <div className="ent-vf__audcard" key={a.t}>
              <span className="ent-vf__audic"><IconENT name={a.icon} size={17} sw={2} /></span>
              <span className="ent-vf__audt">{a.t}</span>
              <p className="ent-vf__audd">{a.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Certificate of authenticity — portfolio cross-sell: a verified unit or batch turns
   into a branded PDF certificate rendered on demand by MostlyRender (our render engine).
   NOTE: aspirational — wired as a capability story, not yet a shipped feature; keep it out
   of the "Built today" list until the MostlyRender pipeline ships. ── */
function CertDoc() {
  return (
    <div className="ent-certdoc">
      <div className="ent-certdoc__seal"><IconENT name="shield" size={22} sw={2} /></div>
      <span className="ent-certdoc__kicker">Certificate of Authenticity</span>
      <span className="ent-certdoc__product">Spring Roast 250g</span>
      <dl className="ent-certdoc__rows">
        <div><dt>Serial</dt><dd className="ent-mono">00 084 7</dd></div>
        <div><dt>Batch</dt><dd className="ent-mono">L-2027-04</dd></div>
        <div><dt>Issued</dt><dd className="ent-mono">2026-06-16</dd></div>
      </dl>
      <div className="ent-certdoc__foot">
        <span className="ent-certdoc__qr">
          <QRENT data="verify.northbrew.co/u/000847" size={44} quiet={1} fg="#1d1d1f"
            eyeColor="var(--accent)" bodyShape="rounded" frameShape="rounded" ballShape="rounded" />
        </span>
        <span className="ent-certdoc__by">Issued by Northbrew<br /><b>Verified by MostlyQR</b></span>
      </div>
    </div>
  );
}
function CertificateSection() {
  return (
    <section className="ent-cert" id="certificates">
      <div className="mk-wrap ent-cert__inner">
        <div className="ent-cert__copy">
          <span className="mk-eyebrow" style={{ color: "var(--accent)" }}>Powered by MostlyRender</span>
          <h2 className="mk-h2">Issue a certificate of authenticity.</h2>
          <p className="mk-lead">
            Turn any verified unit or batch into a branded PDF certificate, generated on demand by
            <strong> MostlyRender</strong> — our rendering engine. Hand resellers proof of provenance,
            attach one to high-value items, or let a customer download theirs after a successful scan.
          </p>
          <ul className="ent-cert__list">
            <li><IconENT name="check" size={15} sw={2.6} /> Your brand, your template — logo, seal and signature</li>
            <li><IconENT name="check" size={15} sw={2.6} /> Per-unit or per-batch, minted alongside the codes</li>
            <li><IconENT name="check" size={15} sw={2.6} /> Pulled live from each unit’s real scan history</li>
          </ul>
        </div>
        <div className="ent-cert__art">
          <CertDoc />
        </div>
      </div>
    </section>
  );
}

function Enterprise() {
  return (
    <div className="mk-root ent-root">
      <EntNav />
      <EntHero />
      <EveryUnit />
      <UseCases />
      <GS1Section />
      <VerifySection />
      <CertificateSection />
      <Capabilities />
      <Trust />
      <EntCTA />
      <window.MQRFooter />
    </div>
  );
}

window.MQREnterprise = Enterprise;
})();