// MostlyQR — marketing landing page.
const { Icon, MQMark, MTMark, Wordmark, QR } = window.MQR;
const F = window.ForgeDesignSystem_e40d74;
const { Button, Badge, Card, CardBody } = F;
const {
  useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor,
} = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "wordmark": "qr",
  "accent": "blue",
  "headline": "print"
}/*EDITMODE-END*/;

const ACCENTS = { indigo: "#7c69e0", blue: "#5b8def", green: "#2f9e6f", pink: "#cc5f97", amber: "#c9762f" };

/* ── Nav ───────────────────────────────────────────────── */
function Nav({ wordmark }) {
  return (
    <header className="mk-nav">
      <div className="mk-wrap mk-nav__inner">
        <a className="mk-brand" href="index.html"><MQMark animate /><Wordmark variant={wordmark} /></a>
        <nav className="mk-nav__links">
          <a href="#how">How it works</a>
          <a href="#compare">Why MostlyQR</a>
          <a href="#pricing">Pricing</a>
          <a href="Builder.html">Builder</a>
        </nav>
        <div className="mk-nav__cta">
          <a href="SignIn.html" style={{ textDecoration: "none" }}>
            <Button variant="ghost" size="sm">Sign in</Button>
          </a>
          <a href="Builder.html" style={{ textDecoration: "none" }}>
            <Button variant="primary" size="sm" iconRight={<Icon name="arrow" size={15} />}>Create a code</Button>
          </a>
        </div>
      </div>
    </header>
  );
}

/* ── Hero — live builder widget + the never-expires promise ── */
const HERO_TYPES = [
  { key: "url", label: "URL", icon: "link", data: "mqr.sh/aZ4k9" },
  { key: "menu", label: "Menu", icon: "utensils", data: "mqr.sh/Qz72m" },
  { key: "vcard", label: "vCard", icon: "user", data: "BEGIN:VCARD\nFN:Ada Vega\nTEL:+1...\nEND:VCARD" },
  { key: "wifi", label: "Wi-Fi", icon: "wifi", data: "WIFI:S:MostlyCafe;T:WPA;P:pourover;;" },
];
const HERO_COLORS = ["#1d1d1f", "#7c69e0", "#2f9e6f", "#cc5f97", "#5b8def"];
const HEADLINES = {
  print: ["Print it once.", "Change it forever."],
  expire: ["Codes that never", "expire on you."],
};

function HeroWidget({ accentHex }) {
  const [type, setType] = React.useState("url");
  const [color, setColor] = React.useState("#1d1d1f");
  const [scans, setScans] = React.useState(48231);
  const t = HERO_TYPES.find((x) => x.key === type);
  React.useEffect(() => {
    const iv = setInterval(() => setScans((s) => s + 1 + Math.floor(Math.random() * 3)), 1100);
    return () => clearInterval(iv);
  }, []);
  return (
    <div className="mk-widget">
      <div className="mk-widget__bar">
        <span className="mk-dot" style={{ background: "#ff5f57" }} />
        <span className="mk-dot" style={{ background: "#febc2e" }} />
        <span className="mk-dot" style={{ background: "#28c840" }} />
        <span className="mk-widget__title">mostlyqr.com/builder</span>
      </div>
      <div className="mk-widget__body">
        <div className="mk-widget__row">
          <div className="qr-stage">
            <QR data={t.data} fg={color} eyeColor={accentHex} bodyShape="rounded"
              frameShape="rounded" ballShape="rounded" animated quiet={2} />
            <span className="qr-scan" />
          </div>
          <div className="mk-widget__controls">
            <span className="mk-widget__label">Type</span>
            <div className="mk-typepicker">
              {HERO_TYPES.map((x) => (
                <button key={x.key} className="mk-type" data-on={type === x.key}
                  onClick={() => setType(x.key)}>
                  <Icon name={x.icon} size={13} sw={2} />{x.label}
                </button>
              ))}
            </div>
            <span className="mk-widget__label" style={{ marginTop: 4 }}>Colour</span>
            <div className="mk-swatches">
              {HERO_COLORS.map((c) => (
                <button key={c} className="mk-swatch" data-on={color === c}
                  style={{ background: c }} onClick={() => setColor(c)} aria-label={c} />
              ))}
            </div>
          </div>
        </div>
        <div className="mk-widget__foot">
          <span className="mk-widget__hint"><Icon name="infinity" size={15} sw={2} /> Edit after printing — same code</span>
          <Badge tone="good" dot>{scans.toLocaleString()} scans</Badge>
        </div>
      </div>
    </div>
  );
}

function Hero({ accentHex, headline }) {
  const [a, b] = HEADLINES[headline] || HEADLINES.print;
  return (
    <section className="mk-hero">
      <div className="mk-wrap mk-hero__inner">
        <div className="mk-hero__copy">
          <span className="mk-eyebrow">Dynamic QR codes, done right</span>
          <h1 className="mk-h1">{a}<br />{b}</h1>
          <p className="mk-lead">
            MostlyQR makes beautiful dynamic QR codes you can edit after they're
            printed. And the promise that matters most: <strong style={{ color: "var(--fg)", fontWeight: 600 }}>your
            printed codes keep working forever — even if you cancel.</strong>
          </p>
          <div className="mk-promise">
            <span className="mk-promise__ic"><Icon name="infinity" size={15} sw={2.2} /></span>
            Printed codes never expire — even on the free plan, even after you leave.
          </div>
          <div className="mk-hero__actions">
            <a href="Builder.html" style={{ textDecoration: "none" }}>
              <Button variant="primary" size="lg" iconRight={<Icon name="arrow" size={16} />}>Create a QR code</Button>
            </a>
            <a href="#how" style={{ textDecoration: "none" }}>
              <Button variant="secondary" size="lg">See how it works</Button>
            </a>
          </div>
          <div className="mk-hero__meta">
            <span><Icon name="check" size={15} /> No card required</span>
            <span><Icon name="check" size={15} /> No watermark, ever</span>
            <span><Icon name="check" size={15} /> Real dynamic codes, free</span>
          </div>
        </div>
        <div className="mk-hero__art" style={{ position: "relative" }}>
          <div className="mk-floatchip mk-floatchip--a">
            <span className="mk-floatchip__ic" style={{ background: "var(--good-soft)", color: "var(--good)" }}><Icon name="shield" size={13} sw={2.2} /></span>
            Cancel-proof
          </div>
          <HeroWidget accentHex={accentHex} />
        </div>
      </div>
    </section>
  );
}

/* ── Strategic partners ────────────────────────────────── */
function Logos() {
  return (
    <section className="mk-logos">
      <div className="mk-wrap">
        <p className="mk-logos__label">Strategic partners</p>
        <div className="mk-logos__row">
          <span>Meadow</span><span>Exoteam.ai</span><span>Untold Systems</span>
        </div>
      </div>
    </section>
  );
}

/* ── "Mostly #1" — the honest-flex dig at self-proclaimed #1s ── */
function Medal({ s = 62 }) {
  return (
    <svg width={s} height={s} viewBox="0 0 64 64" aria-hidden="true">
      <defs>
        <linearGradient id="mq-gold" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#ffe08a" />
          <stop offset="0.5" stopColor="#f5c042" />
          <stop offset="1" stopColor="#d99a26" />
        </linearGradient>
      </defs>
      <path d="M22 5 L28 31 L33 28 L27 5 Z" fill="var(--accent)" opacity="0.9" />
      <path d="M42 5 L36 31 L31 28 L37 5 Z" fill="color-mix(in srgb, var(--accent) 64%, #000)" opacity="0.9" />
      <circle cx="32" cy="42" r="18" fill="url(#mq-gold)" stroke="#c98f1f" strokeWidth="1" />
      <circle cx="32" cy="42" r="13.5" fill="none" stroke="#fff5d6" strokeWidth="1.4" opacity="0.6" />
      <path d="M32 33.2 l2.4 5 5.5 .5 -4.1 3.7 1.2 5.4 -5-2.9 -5 2.9 1.2-5.4 -4.1-3.7 5.5-.5z" fill="#b07d18" />
    </svg>
  );
}
function MostlyOne() {
  return (
    <div className="mk-wrap">
      <div className="mk-topbar">
        <Medal s={26} />
        <p className="mk-topbar__txt"><b>Mostly #1.</b> Not #1 at self-congratulation. #1 at QR codes that never expire — even on free, even after you leave.</p>
      </div>
    </div>
  );
}

/* ── How it works ──────────────────────────────────────── */
const STEPS = [
  { icon: "qr", title: "Make it", body: "Pick a type, drop in your content, and style the code to match your brand — logo, colours, shapes." },
  { icon: "download", title: "Print it", body: "Export crisp PNG, SVG or print-ready PDF. Put it on anything: a menu, a label, a billboard." },
  { icon: "infinity", title: "Change it — forever", body: "Repoint the destination any time. The printed code never changes, and never expires on you." },
];
function HowItWorks() {
  return (
    <section className="mk-features" id="how">
      <div className="mk-wrap">
        <div className="mk-section-head">
          <span className="mk-eyebrow">How it works</span>
          <h2 className="mk-h2">A code that keeps working after it's printed.</h2>
        </div>
        <div className="mk-feature-grid">
          {STEPS.map((f) => (
            <Card className="mk-feature" key={f.title}>
              <CardBody>
                <span className="mk-feature__icon"><Icon name={f.icon} size={21} /></span>
                <h3 className="mk-feature__title">{f.title}</h3>
                <p className="mk-feature__body">{f.body}</p>
              </CardBody>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Freeze, don't kill — interactive proof of the wedge ── */
function FreezeScreen({ kind, cancelled }) {
  const us = kind === "us";
  if (!us && cancelled) {
    return (
      <div className="mk-screen mk-screen--dead">
        <div className="mk-screen__bar"><span className="mk-screen__lock"><Icon name="x" size={11} sw={2.6} /></span><span className="mk-screen__url">error · 404</span></div>
        <div className="mk-screen__404">
          <div className="mk-screen__404big">404</div>
          <div className="mk-screen__404t">This QR code is no longer active</div>
          <div className="mk-screen__404btn">Upgrade to reactivate</div>
        </div>
      </div>
    );
  }
  return (
    <div className="mk-screen">
      <div className="mk-screen__bar"><span className="mk-screen__lock"><Icon name="lock" size={10} sw={2.4} /></span><span className="mk-screen__url">northbrew.co/menu</span></div>
      <div className="mk-screen__menu">
        {us && cancelled && <span className="mk-screen__frozenrib"><Icon name="infinity" size={11} sw={2.2} /> Frozen</span>}
        <div className="mk-screen__mh">Spring menu</div>
        <div className="mk-screen__mrow"><span>Cortado</span><span>4.0</span></div>
        <div className="mk-screen__mrow"><span>Pour-over</span><span>4.5</span></div>
        <div className="mk-screen__mrow"><span>Oat flat white</span><span>4.5</span></div>
      </div>
    </div>
  );
}
function FreezeCard({ kind, cancelled, accentHex }) {
  const us = kind === "us";
  const dead = !us && cancelled;
  return (
    <div className={"mk-fcard" + (us ? " mk-fcard--us" : "") + (dead ? " is-dead" : "")}>
      <div className="mk-fcard__head">
        {us
          ? <span className="mk-ctable__usbrand"><MQMark s={20} /><Wordmark size={14} /></span>
          : <span className="mk-fcard__them">A typical QR tool</span>}
        {cancelled && <Badge tone={us ? "good" : "danger"} dot>{us ? "Frozen · live" : "Deactivated"}</Badge>}
      </div>
      <div className="mk-fcard__body">
        <div className="mk-fcard__qrwrap">
          <QR data="mqr.sh/k3Rm9" size={132} quiet={2}
            fg={dead ? "#c7c7cc" : "#1d1d1f"} eyeColor={dead ? "#c7c7cc" : (us ? accentHex : "#1d1d1f")}
            bodyShape="rounded" frameShape="rounded" ballShape="rounded" />
          {dead && <span className="mk-fcard__deadx"><Icon name="x" size={20} sw={2.6} /></span>}
        </div>
        <FreezeScreen kind={kind} cancelled={cancelled} />
      </div>
      <div className="mk-fcard__note">
        {!us && !cancelled && <span><Icon name="check" size={14} /> Works while you pay.</span>}
        {!us && cancelled && <span className="is-bad"><Icon name="x" size={14} /> Printed sign now points to a dead page.</span>}
        {us && !cancelled && <span><Icon name="check" size={14} /> Editable, with full analytics.</span>}
        {us && cancelled && <span className="is-good"><Icon name="infinity" size={14} sw={2.2} /> Still redirecting — editing just pauses until you’re back.</span>}
      </div>
    </div>
  );
}
/* ── Why MostlyQR — merged: interactive freeze proof + receipts ── */
const COMPARE = [
  { label: "Printed codes keep working if you cancel", them: false, us: "Always — guaranteed" },
  { label: "Watermark on free codes", them: "Yes, on free", us: "Never" },
  { label: "Real dynamic (editable) codes on free", them: false, us: "Included" },
  { label: "Logic, conditions & integrations", them: "From ~$250/mo", us: "From $9/mo" },
  { label: "Transparent public pricing", them: "“Contact sales”", us: "On the page" },
];
function CompareCell({ v }) {
  if (v === false)
    return <span className="cell cell--bad"><span className="pip pip--bad"><Icon name="x" size={13} sw={2.4} /></span></span>;
  return <span className="cell cell--bad">{v}</span>;
}
function WhyMostly({ wordmark, accentHex }) {
  const [cancelled, setCancelled] = React.useState(false);
  return (
    <section className="mk-why" id="compare">
      <div className="mk-wrap">
        <div className="mk-section-head">
          <span className="mk-eyebrow">Why MostlyQR · freeze, don’t kill</span>
          <h2 className="mk-h2">The QR industry runs on quiet traps. We don’t.</h2>
          <p className="mk-lead">Most tools deactivate the code you printed, watermark the free tier, and hide the useful features behind enterprise pricing. Cancel your plan below and watch the difference.</p>
        </div>

        <div className="mk-why__toggle">
          <span className="mk-freeze__tl">Cancel your plan and watch</span>
          <div className="mk-segment2">
            <button data-on={!cancelled} onClick={() => setCancelled(false)}>Active</button>
            <button data-on={cancelled} onClick={() => setCancelled(true)}>Cancelled</button>
          </div>
        </div>
        <div className="mk-freeze__grid">
          <FreezeCard kind="them" cancelled={cancelled} accentHex={accentHex} />
          <FreezeCard kind="us" cancelled={cancelled} accentHex={accentHex} />
        </div>

        <div className="mk-why__receipts">The full receipts</div>
        <div className="mk-compare__card">
          <table className="mk-ctable">
            <thead>
              <tr>
                <th></th>
                <th className="col-them">Typical QR tools</th>
                <th className="col-us">
                  <span className="mk-ctable__usbrand"><MQMark s={20} /><Wordmark variant={wordmark} size={15} /></span>
                </th>
              </tr>
            </thead>
            <tbody>
              {COMPARE.map((r) => (
                <tr key={r.label}>
                  <td>{r.label}</td>
                  <td className="col-them"><CompareCell v={r.them} /></td>
                  <td className="col-us">
                    <span className="cell cell--good"><span className="pip pip--good"><Icon name="check" size={13} sw={2.6} /></span>{r.us}</span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

/* ── Node-flow teaser — integrations are the selling point ── */
const INTEGRATIONS = [
  { name: "Google Sheets", sub: "Log every scan", icon: "grid", c: "#1f9d5b" },
  { name: "Zapier", sub: "6,000+ apps", icon: "zap", c: "#ea6c3a" },
  { name: "HubSpot CRM", sub: "Create a contact", icon: "users", c: "#e8654a" },
  { name: "Webhook", sub: "Your endpoint", icon: "link", c: "#5b8def" },
];
function FlowTeaser() {
  return (
    <section className="mk-flow">
      <div className="mk-wrap">
        <div className="mk-flow__card">
          <div className="mk-flow__copy">
            <span className="mk-eyebrow" style={{ color: "var(--accent)" }}>Flows &amp; integrations</span>
            <h2 className="mk-h2">One scan. Smart routing, straight into your stack.</h2>
            <p className="mk-lead">Route people by device, time, language or location — and pipe every scan into the tools you already use. Drag-and-drop nodes, no code.</p>
            <div className="mk-flow__chips">
              {INTEGRATIONS.map((i) => (
                <span className="mk-flow__chip" key={i.name}>
                  <span className="mk-flow__chipic" style={{ background: i.c }}><Icon name={i.icon} size={12} sw={2.2} /></span>{i.name}
                </span>
              ))}
              <span className="mk-flow__chip mk-flow__chip--more">+ Slack, Notion, Make…</span>
            </div>
            <div className="mk-flow__price"><Icon name="zap" size={15} sw={2} style={{ color: "var(--accent)" }} /> The thing competitors hide behind <s>$250/mo</s> — ours starts at $9.</div>
            <div style={{ marginTop: 22 }}>
              <a href="Flow.html" style={{ textDecoration: "none" }}>
                <Button variant="primary" iconRight={<Icon name="arrow" size={15} />}>Explore flows</Button>
              </a>
            </div>
          </div>
          <div className="mk-flow__canvas">
            <svg className="mk-flow__svg" viewBox="0 0 540 360" preserveAspectRatio="none">
              <path d="M132 180 C 168 180, 168 132, 206 132" />
              <path d="M330 132 C 392 132, 392 52, 444 52" />
              <path d="M330 140 C 392 140, 392 138, 444 138" />
              <path d="M330 148 C 392 160, 392 224, 444 224" />
              <path d="M330 156 C 392 200, 392 310, 444 310" />
            </svg>
            <div className="mk-node mk-node--trigger">
              <div className="mk-node__h"><span className="mk-node__ic" style={{ background: "color-mix(in srgb, var(--accent) 32%, transparent)", color: "#fff" }}><Icon name="scan" size={13} sw={2} /></span>Scan</div>
              <div className="mk-node__sub">Trigger</div>
            </div>
            <div className="mk-node mk-node--cond">
              <div className="mk-node__h"><span className="mk-node__ic" style={{ background: "rgba(255,255,255,0.12)", color: "#fff" }}><Icon name="filter" size={13} sw={2} /></span>If device</div>
              <div className="mk-node__sub">iOS · Android · Other</div>
            </div>
            {INTEGRATIONS.map((i, idx) => (
              <div className={"mk-node mk-node--int" + idx} key={i.name}>
                <div className="mk-node__h"><span className="mk-node__ic" style={{ background: i.c, color: "#fff" }}><Icon name={i.icon} size={12} sw={2} /></span>{i.name}</div>
                <div className="mk-node__sub">{i.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Pricing ───────────────────────────────────────────── */
const PLANS = [
  { name: "Free", monthly: 0, annual: 0, desc: "Real dynamic codes, no watermark. Genuinely usable.", feat: ["3 dynamic codes", "Unlimited static codes", "Scan counter, up to 1,000 / code", "PNG / SVG / PDF export", "No watermark, ever"], cta: "Start free", variant: "secondary" },
  { name: "Pro", monthly: 9, annual: 7, desc: "For creators and small teams shipping lots of codes.", feat: ["50 dynamic codes", "Full analytics — geo, device, time", "Flows: conditions & routing", "Zapier, Sheets, CRM & webhooks", "Bulk generation + API"], cta: "Start Pro", variant: "primary", feat_flag: true },
  { name: "Team", monthly: 29, annual: 24, desc: "Custom domains, shared workspaces and seats.", feat: ["250 dynamic codes", "Codes on your own domain", "Shared workspaces & roles", "Brand kits & templates", "Priority support"], cta: "Start Team", variant: "secondary" },
];
function Pricing({ wordmark }) {
  const [annual, setAnnual] = React.useState(true);
  return (
    <section className="mk-pricing" id="pricing">
      <div className="mk-wrap">
        <div className="mk-section-head">
          <span className="mk-eyebrow">Pricing</span>
          <h2 className="mk-h2">Honest pricing. No “contact sales.”</h2>
          <p className="mk-lead">Every plan — including free — keeps your printed codes alive forever. Pick a number, see what you get.</p>
          <div className="mk-toggle">
            <button data-on={!annual} onClick={() => setAnnual(false)}>Monthly</button>
            <button data-on={annual} onClick={() => setAnnual(true)}>Annual <span className="mk-toggle__save">· save 20%</span></button>
          </div>
        </div>
        <div className="mk-plans">
          {PLANS.map((p) => (
            <div className={"mk-plan" + (p.feat_flag ? " mk-plan--feat" : "")} key={p.name}>
              {p.feat_flag && <span className="mk-plan__tag">Most popular</span>}
              <div className="mk-plan__name">{p.name}</div>
              <div className="mk-plan__price">
                <span className="mk-plan__amt">${annual ? p.annual : p.monthly}</span>
                <span className="mk-plan__per">/ mo{p.monthly ? (annual ? ", billed yearly" : "") : ""}</span>
              </div>
              <p className="mk-plan__desc">{p.desc}</p>
              <a href="Builder.html" style={{ textDecoration: "none" }}>
                <Button variant={p.variant} block>{p.cta}</Button>
              </a>
              <ul className="mk-plan__feats">
                {p.feat.map((f) => <li key={f}><Icon name="check" size={16} sw={2.2} />{f}</li>)}
              </ul>
            </div>
          ))}
        </div>
        <div className="mk-guarantee">
          <Icon name="infinity" size={20} sw={2.2} />
          Cancel anytime — your printed codes freeze at their last destination and keep redirecting forever. We never kill a code you've printed.
        </div>
      </div>
    </section>
  );
}

/* ── Testimonials ──────────────────────────────────────── */
const QUOTES = [
  { text: "We reprinted 4,000 table tents once. With MostlyQR we just repoint the code each season. Never again.", name: "Mara Lindqvist", role: "Ops, Northbrew", c: "#7c69e0" },
  { text: "The free tier is actually usable — real dynamic codes, no ugly watermark. That alone won me over.", name: "Devon Park", role: "Founder, Pixel & Press", c: "#2f9e6f" },
  { text: "Flows let us route by device without paying enterprise money. Set up in an afternoon.", name: "Priya Nair", role: "Growth, Volta", c: "#cc5f97" },
];
function Quotes() {
  return (
    <section className="mk-quotes">
      <div className="mk-wrap">
        <div className="mk-quote-grid">
          {QUOTES.map((q) => (
            <div className="mk-quote" key={q.name}>
              <div className="mk-quote__stars">
                {[0, 1, 2, 3, 4].map((i) => <Icon key={i} name="star" size={15} sw={0} d="M12 2l3 7 7 .5-5.5 4.5L18 21l-6-4-6 4 1.5-7L2 9.5 9 9z" style={{ fill: "var(--accent)" }} />)}
              </div>
              <p className="mk-quote__text">“{q.text}”</p>
              <div className="mk-quote__who">
                <span className="mk-quote__av" style={{ background: q.c }}>{q.name[0]}</span>
                <span>
                  <div className="mk-quote__name">{q.name}</div>
                  <div className="mk-quote__role">{q.role}</div>
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Final CTA ─────────────────────────────────────────── */
function CTA() {
  return (
    <section className="mk-cta">
      <div className="mk-wrap">
        <div className="mk-cta__inner">
          <div style={{ display: "flex", justifyContent: "center", marginBottom: 18 }}><MQMark s={48} /></div>
          <h2 className="mk-h2">Put a smarter code on everything.</h2>
          <p className="mk-lead">Create your first dynamic QR in under a minute. Free, no card, no watermark — and it never expires.</p>
          <div className="mk-cta__actions">
            <a href="Builder.html" style={{ textDecoration: "none" }}>
              <Button variant="primary" size="lg" iconRight={<Icon name="arrow" size={16} />}>Create a QR code</Button>
            </a>
            <a href="#pricing" style={{ textDecoration: "none" }}>
              <Button variant="secondary" size="lg">See pricing</Button>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Footer ────────────────────────────────────────────── */
function Footer({ wordmark }) {
  const cols = [
    ["Product", ["Builder", "Flows", "Analytics", "Pricing"]],
    ["Use cases", ["Menus", "Packaging", "Events", "Retail"]],
    ["Company", ["Docs", "API", "Support", "Status"]],
  ];
  return (
    <footer className="mk-footer">
      <div className="mk-footer__inner">
        <div className="mk-footer__brand">
          <a className="mk-brand" href="index.html"><MQMark s={24} /><Wordmark variant={wordmark} size={17} /></a>
          <p className="mk-footer__tag">Beautiful dynamic QR codes that never expire. We mostly just do QR — beautifully.</p>
        </div>
        {cols.map(([h, links]) => (
          <div className="mk-footer__col" key={h}>
            <div className="mk-footer__h">{h}</div>
            {links.map((l) => <a key={l} href={l === "Builder" ? "Builder.html" : l === "Support" ? "mailto:hello@mostlytiny.io" : "#"}>{l}</a>)}
          </div>
        ))}
      </div>
      <div className="mk-footer__base">
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
          <MTMark s={16} /> A <strong style={{ color: "var(--fg-muted)", fontWeight: 600 }}>Mostly Tiny</strong> product · © 2026 Mostly Tiny Ltd
        </span>
        <span className="forge-mono" style={{ fontSize: 11 }}>MostlyQR · v1.0</span>
      </div>
    </footer>
  );
}

/* ── App ───────────────────────────────────────────────── */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { document.documentElement.dataset.accent = t.accent; }, [t.accent]);
  const accentHex = ACCENTS[t.accent] || ACCENTS.indigo;
  return (
    <div className="mk-root">
      <Nav wordmark={t.wordmark} />
      <Hero accentHex={accentHex} headline={t.headline} />
      <Logos />
      <HowItWorks />
      <WhyMostly wordmark={t.wordmark} accentHex={accentHex} />
      <FlowTeaser />
      <Pricing wordmark={t.wordmark} />
      <Quotes />
      <CTA />
      <Footer wordmark={t.wordmark} />
      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakRadio label="Wordmark" value={t.wordmark}
          options={[{ value: "qr", label: "MostlyQR" }, { value: "mostly", label: "MostlyQR" }, { value: "ink", label: "Solid" }]}
          onChange={(v) => setTweak("wordmark", v)} />
        <TweakColor label="Accent" value={accentHex}
          options={[ACCENTS.indigo, ACCENTS.blue, ACCENTS.green, ACCENTS.pink, ACCENTS.amber]}
          onChange={(v) => {
            const key = Object.keys(ACCENTS).find((k) => ACCENTS[k] === v) || "indigo";
            setTweak("accent", key);
          }} />
        <TweakSection label="Hero" />
        <TweakRadio label="Headline" value={t.headline}
          options={[{ value: "print", label: "Print once" }, { value: "expire", label: "Never expire" }]}
          onChange={(v) => setTweak("headline", v)} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("mqr-app")).render(<App />);