/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakColor */
const { useState, useEffect, useRef, useMemo } = React;

// ---------- TWEAK DEFAULTS ----------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2A3FA0",
  "hero": "editorial",
  "dark": false,
  "showKeenDigital": true
}/*EDITMODE-END*/;

// ---------- THEME APPLICATION ----------
function useTheme(tweaks) {
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--brand', tweaks.accent);
    root.style.setProperty('--brand-soft', tweaks.accent + '22');
    root.style.setProperty('--brand-line', tweaks.accent + '55');
    root.dataset.theme = tweaks.dark ? 'dark' : 'light';
  }, [tweaks.accent, tweaks.dark]);
}

// ---------- IN-VIEW HOOK ----------
function useInView(threshold = 0.15) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setInView(true); obs.disconnect(); }
    }, { threshold });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, inView];
}

// ---------- SUB-COMPONENTS ----------
function TopBar({ tweaks }) {
  return (
    <header className="topbar">
      <div className="topbar__inner">
        <a className="brand" href="index.html">
          <span className="brand__mark" aria-hidden>
            <img src="favicon-source.png" alt="" />
          </span>
          <span className="brand__name">keen<span className="brand__name-accent">FRANCHISE</span></span>
        </a>
        <nav className="topnav">
          <a href="Platform.html">Platform</a>
          <a href="Ordering.html">Ordering</a>
          <a href="Intelligence.html">Intelligence</a>
          <a href="Operations.html">Operations</a>
          <a href="Launcher.html">Launcher</a>
          <a href="WhiteLabel.html">White-label</a>
          <a href="WhyUs.html">Why us</a>
        </nav>
        <div className="topbar__cta">
          <a className="btn btn--ghost" href="Contact.html">Sign in</a>
          <a className="btn btn--primary" href="Contact.html">Book a demo <span aria-hidden>→</span></a>
        </div>
      </div>
    </header>
  );
}

function Hero({ tweaks }) {
  if (tweaks.hero === 'split') return <HeroSplit />;
  return <HeroEditorial />;
}

function HeroEditorial() {
  return (
    <section className="hero hero--editorial" id="top">
      <div className="hero__meta">
        <span className="eyebrow">
          <span className="eyebrow__dot" />
          <span>The franchise operations platform</span>
        </span>
        <span className="dateline">Vol. 01 · Edition 2026 · Multi-tenant SaaS</span>
      </div>
      <h1 className="hero__title">
        Run the entire <em>franchise relationship</em> on one platform — from a franchisee's first order to corporate's
        <span className="hero__accent"> network-wide compliance</span>.
      </h1>
      <p className="hero__lede">
        KeenFranchise unifies ordering, supply, training, audits, analytics, and the new-location launch — under your
        brand, behind your subdomain, in one operating system for the back of house.
      </p>
      <div className="hero__actions">
        <a className="btn btn--primary btn--lg" href="#tour">See platform tour <span aria-hidden>→</span></a>
        <a className="btn btn--ghost btn--lg" href="#platform">Tour the platform</a>
      </div>
      <HeroDiagram />
      <div className="hero__trust">
        <span className="trust__label">BUILT FOR</span>
        <ul className="trust__list">
          <li>Multi-unit franchisors</li>
          <li>Emerging brands (5–50 units)</li>
          <li>Enterprise networks (50+)</li>
          <li>Multi-brand operators</li>
        </ul>
      </div>
    </section>
  );
}

function HeroSplit() {
  return (
    <section className="hero hero--split" id="top">
      <div className="hero__col hero__col--text">
        <span className="eyebrow"><span className="eyebrow__dot" /><span>The franchise operations platform</span></span>
        <h1 className="hero__title">
          One platform.<br />Every location.<br /><em>Your brand on top.</em>
        </h1>
        <p className="hero__lede">
          KeenFranchise unifies ordering, supply, training, audits, and analytics under your tenant-branded portal —
          replacing the patchwork of tools your franchisees juggle today.
        </p>
        <div className="hero__actions">
          <a className="btn btn--primary btn--lg" href="#tour">See platform tour <span aria-hidden>→</span></a>
          <a className="btn btn--ghost btn--lg" href="#platform">Tour the platform</a>
        </div>
      </div>
      <div className="hero__col hero__col--art">
        <HeroDiagram />
      </div>
    </section>
  );
}

function HeroDiagram() {
  const [ref, inView] = useInView();
  return (
    <div ref={ref} className={"diagram " + (inView ? "diagram--in" : "")} aria-hidden>
      <div className="diagram__frame">
        {/* Top: brand ring */}
        <div className="diagram__brand">
          <div className="diagram__chip">
            <span className="chip__bullet" /> portal.your-brand.com
            <span className="chip__pill">tenant-branded</span>
          </div>
        </div>

        {/* Center: orchestration core */}
        <div className="diagram__core">
          <div className="core__label">Orchestration</div>
          <div className="core__ring">
            <div className="core__inner">
              <div className="core__title">KeenFranchise</div>
              <div className="core__sub">multi-tenant · RLS-isolated</div>
            </div>
          </div>
        </div>

        {/* Surrounding capability nodes */}
        {[
          { label: 'Ordering', sub: 'Sysco · EDI · sauce', cls: 'n1' },
          { label: 'Inventory', sub: 'per-location counts', cls: 'n2' },
          { label: 'Audits', sub: 'scoring · CAs', cls: 'n3' },
          { label: 'Training', sub: '5 quiz formats', cls: 'n4' },
          { label: 'AI Search', sub: 'pgvector · cited', cls: 'n5' },
          { label: 'Launcher', sub: 'dependency engine', cls: 'n6' },
          { label: 'Analytics', sub: 'NPS · food cost', cls: 'n7' },
          { label: 'Comms', sub: 'docs · tickets', cls: 'n8' },
        ].map(n => (
          <div key={n.label} className={`node ${n.cls}`}>
            <div className="node__label">{n.label}</div>
            <div className="node__sub">{n.sub}</div>
          </div>
        ))}

        {/* Connector lines (svg) */}
        <svg className="diagram__lines" viewBox="0 0 800 480" preserveAspectRatio="none" aria-hidden>
          {[
            'M400,240 L120,80', 'M400,240 L400,80', 'M400,240 L680,80',
            'M400,240 L60,240', 'M400,240 L740,240',
            'M400,240 L120,400', 'M400,240 L400,400', 'M400,240 L680,400',
          ].map((d, i) => (
            <path key={i} d={d} className="diagram__line" style={{ animationDelay: (0.05 * i + 0.4) + 's' }} />
          ))}
        </svg>

        {/* Floating ticker */}
        <div className="diagram__ticker">
          <span className="tick"><b>+82</b> orders today</span>
          <span className="tick"><b>14</b> launches in flight</span>
          <span className="tick"><b>96.4%</b> audit pass</span>
          <span className="tick"><b>NPS 71</b> rolling 30d</span>
        </div>
      </div>
    </div>
  );
}

function PillarsBand() {
  const pillars = [
    { kw: 'One platform', body: 'Ordering, ops, training, comms, and analytics in one — not four vendors stitched together.' },
    { kw: 'Tenant-branded', body: 'Your logo, your colors, your subdomain. Franchisees never see KeenFranchise.' },
    { kw: 'AI-native', body: 'Natural-language answers from your SOPs and training, with citations and role-aware retrieval.' },
    { kw: 'Mobile-first', body: 'The back-of-house lives on a phone. Every workflow is built tablet- and phone-ready.' },
  ];
  return (
    <section className="pillars" id="platform">
      <div className="section__head">
        <span className="eyebrow"><span className="eyebrow__dot" />The thesis</span>
        <h2 className="section__title">Built for how franchises <em>actually</em> run.</h2>
        <p className="section__lede">
          Most franchise platforms pick a lane — ordering, or ops, or training. KeenFranchise does all of it,
          because the work doesn't separate cleanly. An audit creates a corrective action. A failed quiz blocks
          a promotion. A low-stock alert triggers an order. We model the whole loop.
        </p>
      </div>
      <div className="pillars__grid">
        {pillars.map((p, i) => (
          <article key={p.kw} className="pillar" style={{ '--i': i }}>
            <div className="pillar__num"><span>0{i + 1}</span></div>
            <h3 className="pillar__kw">{p.kw}</h3>
            <p className="pillar__body">{p.body}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

// ---------- THEATER: ORDERING ----------
function OrderingTheater() {
  const [ref, inView] = useInView(0.2);
  return (
    <section className="theater" id="ordering">
      <div className="theater__head">
        <span className="eyebrow"><span className="eyebrow__dot" />Ordering & Supply</span>
        <h2 className="section__title">One cart. <em>Every vendor.</em> Including yours.</h2>
        <p className="section__lede">
          Sysco, EDI distributors, and your own proprietary fulfillment behave like a single supplier to the franchisee.
          Behind the scenes, a connector layer routes each line to the right system — API, EDI 850/855/856/810, or
          your corporate production queue.
        </p>
      </div>

      <div ref={ref} className={"theater__art ordering__art " + (inView ? 'in' : '')}>
        {/* Left: franchisee cart card */}
        <div className="oa__card oa__cart">
          <div className="oa__card-head">
            <span className="oa__title">Cart · Store #214 Westgate</span>
            <span className="oa__badge oa__badge--brand">3 vendors</span>
          </div>
          <ul className="oa__lines">
            <li>
              <span className="oa__sku">SY-104822</span>
              <span className="oa__name">Buffalo wings, IQF, 40 lb</span>
              <span className="oa__qty">2</span>
              <span className="oa__price">$ 198.40</span>
            </li>
            <li>
              <span className="oa__sku">EDI-PFG-7711</span>
              <span className="oa__name">Fryer oil, 35 lb jug</span>
              <span className="oa__qty">4</span>
              <span className="oa__price">$ 128.60</span>
            </li>
            <li className="oa__lines--proprietary">
              <span className="oa__sku">SAUCE-ORG-12</span>
              <span className="oa__name">Original wing sauce, 12-pack</span>
              <span className="oa__qty">3</span>
              <span className="oa__price">$ 144.00</span>
            </li>
          </ul>
          <div className="oa__total"><span>One checkout</span><b>$ 471.00</b></div>
        </div>

        {/* Center: connector layer */}
        <div className="oa__bus" aria-hidden>
          <div className="bus__rail" />
          <div className="bus__label">Vendor connector layer</div>
          <div className="bus__chip bus__chip--api">API</div>
          <div className="bus__chip bus__chip--edi">EDI</div>
          <div className="bus__chip bus__chip--internal">Internal</div>
        </div>

        {/* Right: three connector cards */}
        <div className="oa__connectors">
          <div className="conn conn--api">
            <div className="conn__type">API</div>
            <div className="conn__name">Sysco GraphQL</div>
            <div className="conn__meta">apic-devportal · Apollo Federation · 8 subgraphs</div>
          </div>
          <div className="conn conn--edi">
            <div className="conn__type">EDI</div>
            <div className="conn__name">Orderful gateway</div>
            <div className="conn__meta">850 · 855 · 856 · 810 · 997</div>
          </div>
          <div className="conn conn--internal">
            <div className="conn__type">Internal</div>
            <div className="conn__name">Sauce production</div>
            <div className="conn__meta">batch planner · lot tracking · ShipStation</div>
          </div>
        </div>
      </div>

      <div className="theater__benefits">
        <Benefit kw="Same UX">Franchisees don't learn three ordering systems. One catalog, one cart, one tracking page across all vendors.</Benefit>
        <Benefit kw="No rip-and-replace">Add a new distributor in a config row, not a release. Manual, EDI, and API vendors look identical to the app.</Benefit>
        <Benefit kw="Your supply, your margin">Sell proprietary product (sauces, packaging, retail goods) with the same cart — auto-invoice via Stripe.</Benefit>
        <Benefit kw="Tracking that doesn't lie">Unified delivery events from Sysco's API, EDI 856 ASNs, and AfterShip — one timeline per order.</Benefit>
      </div>
    </section>
  );
}

function Benefit({ kw, children }) {
  return (
    <div className="benefit">
      <div className="benefit__kw">{kw}</div>
      <p>{children}</p>
    </div>
  );
}

// ---------- THEATER: AI SEARCH ----------
function AITheater() {
  const messages = [
    { role: 'user', text: 'How do I handle a customer with a cold-order complaint at the counter?' },
    { role: 'ai', text: 'Apologize, remake the order at no charge, and log the incident. The Customer Recovery SOP (rev. 4, signed Mar 2026) requires a manager to verify the remake and the POS comp code GR-04.', citations: [
      { doc: 'Customer Recovery SOP', page: 'p.3' },
      { doc: 'POS Comp Codes', page: '§2.1' },
    ]},
  ];
  const [shown, setShown] = useState(0);
  const [ref, inView] = useInView(0.3);
  useEffect(() => {
    if (!inView) return;
    let i = 0;
    const t = setInterval(() => { i++; setShown(i); if (i >= messages.length) clearInterval(t); }, 900);
    return () => clearInterval(t);
  }, [inView]);

  return (
    <section className="theater theater--alt" id="intelligence">
      <div className="theater__head">
        <span className="eyebrow"><span className="eyebrow__dot" />Intelligence Layer</span>
        <h2 className="section__title">Your SOPs, answered <em>like a colleague</em>.</h2>
        <p className="section__lede">
          KeenFranchise embeds every document, training transcript, and recipe into a per-tenant vector index.
          Staff ask in plain language; answers come back with citations, scoped to what their role is allowed
          to see. No more "go find the manual."
        </p>
      </div>

      <div ref={ref} className={"theater__art ai__art " + (inView ? 'in' : '')}>
        <div className="ai__chat">
          <div className="ai__chat-head">
            <span className="ai__dot" /><span className="ai__dot" /><span className="ai__dot" />
            <span className="ai__cmd">⌘K · Ask KeenFranchise</span>
          </div>
          <div className="ai__messages">
            {messages.slice(0, shown + 1).map((m, i) => (
              <div key={i} className={"ai__msg ai__msg--" + m.role}>
                <div className="ai__msg-body">{m.text}</div>
                {m.citations && (
                  <div className="ai__cites">
                    {m.citations.map(c => (
                      <span key={c.doc} className="ai__cite">
                        <span className="ai__cite-doc">{c.doc}</span>
                        <span className="ai__cite-page">{c.page}</span>
                      </span>
                    ))}
                  </div>
                )}
              </div>
            ))}
            {shown < messages.length && <div className="ai__typing"><span /><span /><span /></div>}
          </div>
        </div>

        <div className="ai__pipeline">
          <div className="pipe__step"><b>1.</b> Ingest <span>SOPs · video transcripts · recipes</span></div>
          <div className="pipe__arrow" />
          <div className="pipe__step"><b>2.</b> Embed <span>per-tenant pgvector index</span></div>
          <div className="pipe__arrow" />
          <div className="pipe__step"><b>3.</b> Filter <span>role-scoped retrieval</span></div>
          <div className="pipe__arrow" />
          <div className="pipe__step"><b>4.</b> Cite <span>answer + linked sources</span></div>
        </div>
      </div>

      <div className="theater__benefits">
        <Benefit kw="Cross-format">PDFs, text docs, and Whisper-transcribed video — searched in one index.</Benefit>
        <Benefit kw="RBAC at retrieval">Staff never receive an answer sourced from a doc they're not authorized to read.</Benefit>
        <Benefit kw="Always cited">Every answer points to the exact doc and section. Trust, not hallucination.</Benefit>
        <Benefit kw="Content-gap signal">Questions with no good answer surface as a content backlog for franchisor ops.</Benefit>
      </div>
    </section>
  );
}

// ---------- THEATER: LAUNCHER ----------
function LauncherTheater() {
  const phases = [
    { name: 'Site Prep', status: 'done', tasks: 8, doneTasks: 8 },
    { name: 'Permitting', status: 'done', tasks: 6, doneTasks: 6 },
    { name: 'Construction', status: 'active', tasks: 12, doneTasks: 9 },
    { name: 'Training', status: 'pending', tasks: 9, doneTasks: 0 },
    { name: 'Pre-Opening', status: 'pending', tasks: 7, doneTasks: 0 },
    { name: 'Grand Opening', status: 'pending', tasks: 4, doneTasks: 0 },
  ];

  return (
    <section className="theater" id="launcher">
      <div className="theater__head">
        <span className="eyebrow"><span className="eyebrow__dot" />Location Launcher</span>
        <h2 className="section__title">From signed FDD to <em>grand opening</em>, in one shared board.</h2>
        <p className="section__lede">
          Templated launch playbooks with a real dependency engine: complete a permit task, and the construction
          tasks downstream automatically unlock with their due-date offsets applied. Corporate sees every active
          launch on one portfolio dashboard, color-coded on-track / at-risk / behind.
        </p>
      </div>

      <div className="launcher__art">
        <div className="launcher__row">
          {phases.map((p, i) => (
            <div key={p.name} className={"phase phase--" + p.status} style={{ '--i': i }}>
              <div className="phase__name">{p.name}</div>
              <div className="phase__bar">
                <div className="phase__fill" style={{ width: (p.doneTasks / p.tasks * 100) + '%' }} />
              </div>
              <div className="phase__meta"><span>{p.doneTasks}/{p.tasks}</span><span className="phase__dot" /></div>
            </div>
          ))}
        </div>

        <div className="launcher__portfolio">
          <div className="portfolio__head">
            <span>Portfolio · 14 launches in flight</span>
            <span className="portfolio__legend">
              <i className="lg lg--ok" /> on-track
              <i className="lg lg--risk" /> at-risk
              <i className="lg lg--late" /> behind
            </span>
          </div>
          <div className="portfolio__grid">
            {[
              ['Westgate Plaza', 'ok', 62],
              ['Riverbend Mall', 'ok', 88],
              ['Pine & 6th', 'risk', 34],
              ['Northpark', 'ok', 71],
              ['Harbor District', 'late', 18],
              ['Crossroads', 'ok', 54],
              ['Lakeshore', 'risk', 41],
              ['Old Mill', 'ok', 79],
            ].map(([name, st, pct]) => (
              <div key={name} className={"pcell pcell--" + st}>
                <div className="pcell__name">{name}</div>
                <div className="pcell__bar"><i style={{ width: pct + '%' }} /></div>
                <div className="pcell__pct">{pct}%</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="theater__benefits">
        <Benefit kw="Dependency engine">Mark a task complete; downstream tasks unlock with offset due-dates and the right owner notified.</Benefit>
        <Benefit kw="Shared with franchisees">Corporate and franchisee see the same board, with role-relevant tasks highlighted.</Benefit>
        <Benefit kw="Ad-hoc tasks">Add a market-specific permit or weather contingency without modifying the master template.</Benefit>
        <Benefit kw="Portfolio rollup">A single dashboard answers: <em>which of our 14 launches needs attention this week?</em></Benefit>
      </div>
    </section>
  );
}

// ---------- OPERATIONS GRID ----------
function OperationsGrid() {
  const groups = [
    {
      eyebrow: 'Compliance',
      title: 'Audits, CAs, and certifications, joined up.',
      points: [
        ['Audit templates & scoring', 'Schedule, score, and trend pass-rates network-wide.'],
        ['Corrective actions', 'Auto-spawned from failed audits or low NPS — assigned, tracked, closed.'],
        ['Staff certifications', 'Expiry tracking with nightly sweeps and re-cert nudges.'],
        ['Equipment & maintenance', 'Register, log, and schedule preventive maintenance per location.'],
      ],
    },
    {
      eyebrow: 'Training',
      title: 'Microlearning your team finishes.',
      points: [
        ['5 quiz formats', 'MCQ, true/false, reorder, fill-in-blank, matching — built in.'],
        ['Manager sign-off', 'Hands-on portions verified by a real manager before completion.'],
        ['Compliance auto-repeat', 'Food-safety re-cert every N days, automatic re-enrollment.'],
        ['Mobile-first player', 'Swipe-to-advance, auto-save per lesson, video resume.'],
      ],
    },
    {
      eyebrow: 'Analytics',
      title: 'Numbers your operators actually use.',
      points: [
        ['Location scorecard', 'Composite health score combining sales, audits, NPS, and waste.'],
        ['Menu costing', 'Theoretical food cost % per item, plus margin pressure alerts.'],
        ['NPS & feedback', 'Public submission form, trend charts, auto-CA on low ratings.'],
        ['Excel/CSV export', 'Every analytics surface exports — no "API only" lock-in.'],
      ],
    },
    {
      eyebrow: 'Comms',
      title: 'One channel, properly logged.',
      points: [
        ['Announcements', 'Email broadcast with read/unread per franchisee.'],
        ['Document library', 'SOPs and HR docs with acknowledgement tracking.'],
        ['Support tickets', 'Franchisee↔corporate, threaded, email-notified.'],
        ['Recipe versioning', 'Versioned recipes with required acknowledgement on changes.'],
      ],
    },
  ];

  return (
    <section className="ops" id="operations">
      <div className="section__head">
        <span className="eyebrow"><span className="eyebrow__dot" />The rest of the platform</span>
        <h2 className="section__title">A real operating system, not a CMS with a logo.</h2>
        <p className="section__lede">
          Every loop you run today — audits, training, communications, performance — is a first-class module
          with its own data model, its own UI, and analytics built in. Not an integration. Not an afterthought.
        </p>
      </div>

      <div className="ops__grid">
        {groups.map(g => (
          <article key={g.eyebrow} className="opsgroup">
            <div className="opsgroup__head">
              <span className="opsgroup__eyebrow">{g.eyebrow}</span>
              <h3 className="opsgroup__title">{g.title}</h3>
            </div>
            <ul className="opsgroup__list">
              {g.points.map(([k, v]) => (
                <li key={k}>
                  <span className="opsgroup__k">{k}</span>
                  <span className="opsgroup__v">{v}</span>
                </li>
              ))}
            </ul>
          </article>
        ))}
      </div>
    </section>
  );
}

// ---------- WHITELABEL & SECURITY ----------
function WhyBand() {
  return (
    <section className="why" id="why">
      <div className="why__col why__col--left">
        <span className="eyebrow"><span className="eyebrow__dot" />White-label by design</span>
        <h2 className="section__title">Your brand is the front door.<br /><em>KeenFranchise is invisible.</em></h2>
        <p className="section__lede">
          Tenants get their own subdomain (<code>portal.your-brand.com</code>), their own logo and color tokens,
          email notifications sent as them, and franchisee-facing UI that never mentions us. We're plumbing.
          You're the brand.
        </p>
        <ul className="why__list">
          <li><b>Per-tenant branding</b> — logo, colors, and accent applied to every surface.</li>
          <li><b>Custom subdomain</b> — wildcard TLS via Caddy, provisioned in onboarding.</li>
          <li><b>Branded email</b> — DKIM-signed transactional mail from your domain.</li>
          <li><b>Role-aware portals</b> — corporate and franchisee see different navigation, same data spine.</li>
        </ul>
      </div>

      <div className="why__col why__col--right">
        <div className="brandcards">
          {[
            { name: 'Wing Republic', sub: 'portal.wingrepublic.com', accent: '#E8763A' },
            { name: 'Saltline Co.', sub: 'app.saltline.co', accent: '#1F6F4A' },
            { name: 'Brickyard Pizza', sub: 'ops.brickyardpizza.com', accent: '#B23A3A' },
          ].map((b, i) => (
            <div key={b.name} className="bcard" style={{ '--bc': b.accent, '--i': i }}>
              <div className="bcard__bar" />
              <div className="bcard__brand"><span className="bcard__dot" /><span>{b.name}</span></div>
              <div className="bcard__url">{b.sub}</div>
              <div className="bcard__nav">
                <span>Operations</span><span>Catalog</span><span>Supply</span><span>Compliance</span>
              </div>
              <div className="bcard__panel">
                <div className="bcard__row"><span>Active orders</span><b>14</b></div>
                <div className="bcard__row"><span>Open CAs</span><b>3</b></div>
                <div className="bcard__row"><span>Audit pass</span><b>96%</b></div>
              </div>
            </div>
          ))}
        </div>

        <div className="security">
          <div className="security__title">Multi-tenant, isolated by Postgres RLS</div>
          <p>
            Every table carries a <code>tenantId</code>. Row-level security policies enforce isolation in the database,
            not the app — so a misplaced query can't leak across tenants. Closed-by-default; integration-tested with
            real Postgres in CI.
          </p>
          <div className="security__row">
            <code>SELECT … FROM orders WHERE tenant_id = current_tenant()</code>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- MOBILE STRIP ----------
function MobileStrip() {
  return (
    <section className="mobile">
      <div className="mobile__head">
        <span className="eyebrow"><span className="eyebrow__dot" />Mobile-first</span>
        <h2 className="section__title">Designed for the back-of-house, where nobody has a laptop.</h2>
      </div>
      <div className="mobile__art">
        <div className="phone">
          <div className="phone__notch" />
          <div className="phone__screen">
            <div className="ps__head">My tasks · 4 due today</div>
            <ul className="ps__list">
              <li><span className="ps__chk" /> Temp log — walk-in cooler</li>
              <li className="ps__done"><span className="ps__chk ps__chk--done" /> Sanitizer concentration</li>
              <li><span className="ps__chk" /> Receive PFG delivery</li>
              <li><span className="ps__chk" /> Retrain Maria on new sauce</li>
            </ul>
            <div className="ps__cta">⌘K Ask KeenFranchise</div>
          </div>
        </div>
        <div className="phone phone--2">
          <div className="phone__notch" />
          <div className="phone__screen">
            <div className="ps__head">Lesson 3/8 · Wing-coat technique</div>
            <div className="ps__video"><span className="ps__play">▶</span></div>
            <div className="ps__quiz">
              <div className="ps__q">Order the steps for sauce coating:</div>
              <ol className="ps__steps">
                <li>Drain fryer basket</li>
                <li>Add sauce to bowl</li>
                <li>Toss 8–10 times</li>
                <li>Plate immediately</li>
              </ol>
            </div>
          </div>
        </div>
        <div className="phone phone--3">
          <div className="phone__notch" />
          <div className="phone__screen">
            <div className="ps__head">Order #4421 · Sauces</div>
            <div className="ps__steps-vert">
              <div className="ps__step ps__step--done">Submitted</div>
              <div className="ps__step ps__step--done">Confirmed · ETA Apr 30</div>
              <div className="ps__step ps__step--active">In production · Batch L-2026-08</div>
              <div className="ps__step">Shipped</div>
              <div className="ps__step">Delivered</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- COMPARISON ----------
function Comparison() {
  const rows = [
    ['Unified ordering (API + EDI + internal)', 'yes', 'partial', 'no'],
    ['Tenant-branded white-label portal', 'yes', 'no', 'partial'],
    ['AI search with RBAC-at-retrieval', 'yes', 'partial', 'no'],
    ['Dependency-aware Location Launcher', 'yes', 'yes', 'partial'],
    ['Microlearning + 5 quiz formats', 'yes', 'yes', 'no'],
    ['NPS, scorecard, food-cost analytics', 'yes', 'partial', 'partial'],
    ['Database-level tenant isolation', 'yes', 'unknown', 'unknown'],
    ['Resellable as your own platform', 'yes', 'no', 'no'],
  ];
  const Cell = ({ v }) => {
    if (v === 'yes') return <span className="cell cell--yes">●</span>;
    if (v === 'partial') return <span className="cell cell--part">◐</span>;
    if (v === 'no') return <span className="cell cell--no">○</span>;
    return <span className="cell cell--unk">?</span>;
  };
  return (
    <section className="compare">
      <div className="section__head section__head--center">
        <span className="eyebrow"><span className="eyebrow__dot" />Where we land</span>
        <h2 className="section__title">Honest head-to-head.</h2>
      </div>
      <div className="compare__table">
        <div className="compare__row compare__row--head">
          <div></div>
          <div className="compare__col compare__col--us">KeenFranchise</div>
          <div className="compare__col">Delightree</div>
          <div className="compare__col">FranConnect</div>
        </div>
        {rows.map(r => (
          <div key={r[0]} className="compare__row">
            <div className="compare__feat">{r[0]}</div>
            <div className="compare__col compare__col--us"><Cell v={r[1]} /></div>
            <div className="compare__col"><Cell v={r[2]} /></div>
            <div className="compare__col"><Cell v={r[3]} /></div>
          </div>
        ))}
      </div>
      <p className="compare__note">Comparison reflects publicly available product information as of Apr 2026 and our own evaluation. We'll show you the live demo.</p>
    </section>
  );
}

// ---------- CTA + FOOTER ----------
function FinalCTA() {
  return (
    <section className="cta" id="tour">
      <div className="cta__inner">
        <h2 className="cta__title">See the platform tour.</h2>
        <p className="cta__lede">
          A 25-minute walk-through with a KeenFranchise architect — your brand, your data shape, your real workflows.
          No SDR script.
        </p>
        <form className="cta__form" onSubmit={e => e.preventDefault()}>
          <input className="cta__input" placeholder="Work email" type="email" />
          <input className="cta__input" placeholder="Brand / company" />
          <button className="btn btn--primary btn--lg" type="submit">Book the tour <span aria-hidden>→</span></button>
        </form>
        <div className="cta__meta">
          <span>· No card required</span>
          <span>· White-glove onboarding</span>
          <span>· Live data within 14 days</span>
        </div>
      </div>
    </section>
  );
}

function Footer({ tweaks }) {
  return (
    <footer className="footer">
      <div className="footer__inner">
        <div className="footer__brand">
          <span className="brand">
            <span className="brand__mark"><img src="favicon-source.png" alt="" /></span>
            <span className="brand__name">keen<span className="brand__name-accent">FRANCHISE</span></span>
          </span>
          <p className="footer__tag">The franchise operations platform.</p>
        </div>
        <div className="footer__cols">
          <div><h5>Platform</h5>
            <a href="Platform.html">Overview</a>
            <a href="Ordering.html">Ordering</a>
            <a href="Operations.html">Operations</a>
            <a href="Intelligence.html">Intelligence</a>
            <a href="Launcher.html">Launcher</a>
          </div>
          <div><h5>Company</h5>
            <a href="WhyUs.html">Why us</a>
            <a href="WhiteLabel.html">White-label</a>
            <a href="Contact.html">Contact</a>
          </div>
          <div><h5>Resources</h5>
            <a href="#">Docs</a>
            <a href="#">Security</a>
            <a href="#">Status</a>
            <a href="#">Changelog</a>
          </div>
          <div><h5>Contact</h5>
            <a href="Contact.html">Sales</a>
            <a href="Contact.html">Support</a>
            <a href="Contact.html">Partnerships</a>
          </div>
        </div>
      </div>
      <div className="footer__bar">
        <span className="footer__legal">© 2026 KeenFranchise · All rights reserved</span>
        {tweaks.showKeenDigital && (
          <span className="footer__keen">
            <span className="footer__keen-dot" />
            A <a href="#">KeenDigital</a> service
          </span>
        )}
      </div>
    </footer>
  );
}

// ---------- TWEAKS ----------
function SiteTweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero variant">
        <TweakRadio label="Layout" value={tweaks.hero} onChange={v => setTweak('hero', v)} options={[
          { value: 'editorial', label: 'Editorial' },
          { value: 'split', label: 'Split' },
        ]} />
      </TweakSection>
      <TweakSection label="Theme">
        <TweakToggle label="Dark mode" value={tweaks.dark} onChange={v => setTweak('dark', v)} />
        <TweakColor label="Accent color" value={tweaks.accent} onChange={v => setTweak('accent', v)} />
        <div className="tw-swatches">
          {[
            ['#1F4D3A', 'Deep forest'],
            ['#0F3D6E', 'Deep ocean'],
            ['#2A3FA0', 'Indigo ink'],
            ['#6E2E3E', 'Bordeaux'],
            ['#7A5A2E', 'Bronze'],
            ['#1A1A1A', 'Charcoal'],
          ].map(([c, name]) => (
            <button
              key={c}
              type="button"
              className="tw-swatch"
              style={{ background: c, outline: tweaks.accent.toLowerCase() === c.toLowerCase() ? '2px solid var(--text)' : 'none', outlineOffset: '2px' }}
              onClick={() => setTweak('accent', c)}
              aria-label={`Use ${name}`}
              title={name}
            />
          ))}
        </div>
      </TweakSection>
      <TweakSection label="KeenDigital lockup">
        <TweakToggle label="Show in footer" value={tweaks.showKeenDigital} onChange={v => setTweak('showKeenDigital', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

// ---------- APP ----------
function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useTheme(tweaks);

  return (
    <>
      <TopBar tweaks={tweaks} />
      <main>
        <Hero tweaks={tweaks} />
        <PillarsBand />
        <OrderingTheater />
        <AITheater />
        <LauncherTheater />
        <OperationsGrid />
        <WhyBand />
        <MobileStrip />
        <Comparison />
        <FinalCTA />
      </main>
      <Footer tweaks={tweaks} />
      <SiteTweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);