/* Page sections */
const { NodeWeb, IllusWindows, IllusFragments, IllusMagnify, ArchDiagram, PortraitGeo, CtaPattern, BrandMark } = window.Illus;
const { HeroChat, BriefMock, QAMock, CitationMock, AlertsMock, CitationChip } = window.Mocks;

function Wordmark() {
  return (
    <a href="#" className="wordmark" aria-label="Mise home">
      <svg width="22" height="22" viewBox="0 0 22 22" aria-hidden="true">
        <rect width="22" height="22" rx="6" fill="var(--primary)"/>
        <path d="M5 16 V7 L8.5 12 L11 7 V16" fill="none" stroke="var(--bg)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
        <circle cx="15" cy="14" r="1.6" fill="var(--accent)"/>
      </svg>
      Mise
    </a>
  );
}

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className={`nav-wrap ${scrolled ? 'scrolled' : ''}`} data-screen-label="Nav">
      <div className="container nav">
        <Wordmark/>
        <nav className="nav-mid">
          <a href="/how-it-works">How It Works</a>
          <a href="/cross-stack-reasoning">Cross-Stack Reasoning</a>
          <a href="/technical-brief">Technical Brief</a>
          <a href="#pricing">Pricing</a>
        </nav>
        <div className="nav-right">
          <a href="/dashboard" className="signin">Sign In</a>
          <a href="https://calendly.com/max-mise/intro-call-for-mise" target="_blank" rel="noopener noreferrer" className="btn btn-primary">Request a Demo</a>
        </div>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-bg-illus" aria-hidden="true"><NodeWeb/></div>
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>● Operations copilot · for multi-unit franchisees</div>
            <h1 className="h-display">
              Run your restaurants <em>by exception</em>, not by dashboard.
            </h1>
            <p className="body-lg hero-sub">
              Mise pulls together POS, labor, food safety, and your brand playbook across every store — and tells your above-store leaders what needs attention before they have to ask.
            </p>
            <div className="hero-cta">
              <a href="https://calendly.com/max-mise/intro-call-for-mise" target="_blank" rel="noopener noreferrer" className="btn btn-primary">Request a Demo <span className="arrow">→</span></a>
              <a href="/how-it-works" className="btn btn-secondary">See How It Works</a>
            </div>
            <div className="hero-meta">
              <span>Read-only by default</span>
              <span className="dotsep"/>
              <span>Deploys in 14 days</span>
              <span className="dotsep"/>
              <span>Built for 15–60 stores</span>
            </div>
          </div>
          <div className="hero-right-stack">
            <HeroChat/>
          </div>
        </div>
      </div>
    </section>
  );
}

function LogoBar() {
  const brands = [
    { kind: 'flame', label: 'Cinder & Co.' },
    { kind: 'circle', label: 'Northshore' },
    { kind: 'split', label: 'Halfpipe Burger' },
    { kind: 'leaf', label: 'Greenrow' },
    { kind: 'hex', label: 'Hex Tavern' },
    { kind: 'rings', label: 'Twin Wheel' },
  ];
  return (
    <div className="logos" data-screen-label="02 Logo bar">
      <div className="container">
        <div className="logos-label eyebrow">Built for franchisees of brands like</div>
        <div className="logos-row">
          {brands.map(b => (
            <div key={b.label} className="logo-mark"><BrandMark kind={b.kind} label={b.label}/></div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ProblemSection() {
  const items = [
    { illus: <IllusWindows/>, h: 'Five dashboards before 7am', b: 'Toast, 7shifts, Jolt, Restaurant365, the brand portal — your regional managers stitch them together by hand every morning.' },
    { illus: <IllusFragments/>, h: 'No single source of truth across stores', b: 'Each system answers a slice. None of them know what the others know, and none of them know your brand playbook.' },
    { illus: <IllusMagnify/>, h: 'Compliance risks hiding in plain sight', b: 'A missed temp check or skipped close-down only surfaces when a health inspector or an angry customer finds it for you.' },
  ];
  return (
    <section data-screen-label="03 Problem">
      <div className="container">
        <div className="sec-head">
          <span className="eyebrow">The problem</span>
          <h2 className="h-section">Above-store leaders are drowning in dashboards.</h2>
          <p className="body-lg" style={{ color: 'var(--muted)', maxWidth: 620, margin: '0 auto' }}>
            Multi-unit operators don't lack data. They lack a single layer that reasons across it — and knows their brand standards by heart.
          </p>
        </div>
        <div className="three-col">
          {items.map(it => (
            <div key={it.h} className="card pcard">
              <div className="illus">{it.illus}</div>
              <h3>{it.h}</h3>
              <p className="body" style={{ marginTop: 8 }}>{it.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Feature({ flip, eyebrow, title, body, bullets, mock }) {
  return (
    <div className={`feature ${flip ? 'flip' : ''}`}>
      <div className="feat-text">
        <div className="feat-eyebrow">{eyebrow}</div>
        <h3>{title}</h3>
        <p>{body}</p>
        {bullets && (
          <ul>
            {bullets.map(b => <li key={b}>{b}</li>)}
          </ul>
        )}
      </div>
      <div>{mock}</div>
    </div>
  );
}

function ProductSection() {
  return (
    <section id="product" data-screen-label="04 Product features" style={{ background: 'linear-gradient(180deg, var(--bg) 0%, var(--bg) 60%, #F6F2E8 100%)' }}>
      <div className="container">
        <div className="sec-head left">
          <span className="eyebrow">Product</span>
          <h2 className="h-section">One layer above your stack — reasoning, not dashboards.</h2>
        </div>
        <Feature
          eyebrow="01 · Daily Brief"
          title="Every morning, the four things that matter."
          body="Mise reads every system overnight, ranks what changed, and posts a four-line brief to email or your chat tool. No more chasing reports across five tools before standup."
          bullets={['Cross-system ranking, not per-tool digests', 'Citations on every line — click to source', 'Severity tags train your team to triage']}
          mock={<BriefMock/>}
        />
        <Feature
          flip
          eyebrow="02 · Cross-Stack Reasoning"
          title="Ask it anything. It already has the data."
          body="Ask in plain language and Mise pulls from POS, scheduling, food safety, and your playbook in one answer — with the receipts attached."
          bullets={['Joins POS sales with labor and checklists', 'Quotes the brand manual when relevant', 'Saved questions become recurring briefs']}
          mock={<QAMock/>}
        />
        <Feature
          eyebrow="03 · Brand Playbook Citations"
          title="Your standards, enforced by reference."
          body="Every alert ties back to a specific section of your operating manual — so GMs and franchisees see why it matters and what they're expected to do."
          bullets={['Searchable, versioned playbook ingestion', 'Inline manual previews on every alert', 'Audit-ready trail of who saw what, when']}
          mock={<CitationMock/>}
        />
        <Feature
          flip
          eyebrow="04 · Proactive Slack Alerts"
          title="The signal finds your manager. Not the other way around."
          body="Severity-coded alerts route to the right channel and person — and auto-escalate to the regional if no one acknowledges. Quiet during quiet hours; loud when it matters."
          bullets={['Per-store, per-role routing rules', 'Auto-escalation paths you control', 'Quiet by default — only fires on exceptions']}
          mock={<AlertsMock/>}
        />
      </div>
    </section>
  );
}

function DiffSection() {
  return (
    <section id="how" data-screen-label="05 Differentiation">
      <div className="container">
        <div className="arch">
          <div>
            <span className="eyebrow">How it fits</span>
            <h2 className="h-section" style={{ marginTop: 18, marginBottom: 22 }}>Toast is your POS. Mise is your operations layer.</h2>
            <p className="body-lg" style={{ marginTop: 0 }}>
              We don't replace what's working. Mise sits above your existing stack, ingests it nightly, and turns four feeds — plus your brand playbook — into one decision surface.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '32px 0 0', display: 'grid', gap: 12 }}>
              {['Read-only by default — no rip-and-replace', 'Your playbook is yours; never trains shared models', 'Connects in days, not quarters'].map(t => (
                <li key={t} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 15 }}>
                  <svg width="18" height="18" viewBox="0 0 18 18" style={{ marginTop: 3, flex: 'none' }} aria-hidden="true">
                    <circle cx="9" cy="9" r="8.5" fill="none" stroke="var(--accent)" strokeWidth="1"/>
                    <path d="M5 9.2 L8 12 L13 6.5" fill="none" stroke="var(--accent)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="arch-diagram"><ArchDiagram/></div>
        </div>
      </div>
    </section>
  );
}

function IntegSection() {
  // Each entry mirrors a real provider wired into Settings →
  // Integrations. As a new integration ships, add a row here.
  // Status: 'live' = OAuth + sync working today; 'soon' = scaffolded
  // or in flight; 'planned' = on the roadmap (greyed out).
  const tools = [
    { kind: 'square',     name: 'Square',           sub: 'POS · LABOR',    status: 'live' },
    { kind: 'clover',     name: 'Clover',           sub: 'POS · LABOR',    status: 'live' },
    { kind: 'shopify',    name: 'Shopify',          sub: 'POS · INVENTORY', status: 'live' },
    { kind: 'lightspeed', name: 'Lightspeed Retail', sub: 'POS',           status: 'live' },
    { kind: 'quickbooks', name: 'QuickBooks Online', sub: 'ACCOUNTING',    status: 'live' },
    { kind: 'deputy',     name: 'Deputy',           sub: 'SCHEDULING',     status: 'live' },
    { kind: 'slack',      name: 'Slack',            sub: 'ALERTS',         status: 'live' },
    { kind: 'toast',      name: 'Toast',            sub: 'POS',            status: 'soon' },
    { kind: 'sevenshifts', name: '7shifts',         sub: 'SCHEDULING',     status: 'soon' },
    { kind: 'jolt',       name: 'Jolt',             sub: 'FOOD SAFETY',    status: 'planned' },
  ];
  return (
    <section id="integrations" className="tight" data-screen-label="06 Integrations" style={{ paddingTop: 24, paddingBottom: 96 }}>
      <div className="container">
        <div style={{ textAlign: 'center' }}>
          <span className="eyebrow">Connects to the tools you already use.</span>
        </div>
        <div className="integ">
          {tools.map(t => (
            <div key={t.name} className="integ-cell" style={{ opacity: t.status === 'planned' ? 0.45 : 1 }}>
              <IntegBrandMark kind={t.kind}/>
              <div className="iname">
                {t.name}
                {t.status === 'soon' && (
                  <span style={{
                    marginLeft: 6, fontSize: 9, fontWeight: 500, padding: '1px 6px',
                    borderRadius: 999, color: 'var(--accent)',
                    background: 'rgba(200,85,61,.10)',
                    border: '1px solid rgba(200,85,61,.25)',
                    fontFamily: "'JetBrains Mono', monospace", letterSpacing: '.04em',
                    textTransform: 'uppercase', verticalAlign: 'middle',
                  }}>Soon</span>
                )}
                {t.status === 'planned' && (
                  <span style={{
                    marginLeft: 6, fontSize: 9, fontWeight: 500, padding: '1px 6px',
                    borderRadius: 999, color: 'var(--muted)',
                    background: 'var(--bg-2)', border: '1px solid var(--hair)',
                    fontFamily: "'JetBrains Mono', monospace", letterSpacing: '.04em',
                    textTransform: 'uppercase', verticalAlign: 'middle',
                  }}>Planned</span>
                )}
              </div>
              <div className="ikind">{t.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/** Brand marks for the integrations grid. Recognizable enough at
 *  36px without depending on outside SVG assets. */
function IntegBrandMark({ kind }) {
  const size = 36;
  switch (kind) {
    case 'square':
      return <svg width={size} height={size} viewBox="0 0 28 28" aria-hidden="true">
        <rect x="3" y="3" width="22" height="22" rx="3" fill="#000"/>
        <rect x="8" y="8" width="12" height="12" rx="2" fill="none" stroke="#fff" strokeWidth="2"/>
      </svg>;
    case 'clover':
      return <svg width={size} height={size} viewBox="0 0 28 28" aria-hidden="true">
        <rect x="3" y="3" width="22" height="22" rx="5" fill="#00B259"/>
        <g fill="#fff">
          <circle cx="14" cy="10" r="2.6"/>
          <circle cx="18" cy="14" r="2.6"/>
          <circle cx="14" cy="18" r="2.6"/>
          <circle cx="10" cy="14" r="2.6"/>
          <rect x="11.4" y="11.4" width="5.2" height="5.2"/>
        </g>
      </svg>;
    case 'shopify':
      // Stylized shopping bag — wider trapezoidal body so the
      // proportion reads as a bag (not a padlock).
      return <svg width={size} height={size} viewBox="0 0 28 28" aria-hidden="true">
        <rect x="3" y="3" width="22" height="22" rx="5" fill="#95BF47"/>
        <path d="M11 12 V10 c0-1.7 1.3-2.8 3-2.8 s3 1.1 3 2.8 V12"
          fill="none" stroke="#fff" strokeWidth="1.6" strokeLinecap="round"/>
        <path d="M7.5 12 L20.5 12 L19.3 21.8 a.8 .8 0 0 1 -.8 .7 H9.5 a.8 .8 0 0 1 -.8 -.7 Z"
          fill="#fff"/>
      </svg>;
    case 'quickbooks':
      return <svg width={size} height={size} viewBox="0 0 28 28" aria-hidden="true">
        <circle cx="14" cy="14" r="11" fill="#2CA01C"/>
        <text x="14" y="14" fontFamily="Inter,sans-serif" fontSize="11" fontWeight="800"
          fill="#fff" textAnchor="middle" dominantBaseline="central">qb</text>
      </svg>;
    case 'deputy':
      return <svg width={size} height={size} viewBox="0 0 28 28" aria-hidden="true">
        <rect x="3" y="3" width="22" height="22" rx="5" fill="#FF5447"/>
        <text x="14" y="19" fontFamily="Inter,sans-serif" fontSize="14" fontWeight="800" fill="#fff" textAnchor="middle">D</text>
      </svg>;
    case 'slack':
      return <svg width={size} height={size} viewBox="0 0 28 28" aria-hidden="true">
        <rect x="3" y="3" width="11" height="11" rx="2" fill="#36C5F0"/>
        <rect x="14" y="3" width="11" height="11" rx="2" fill="#2EB67D"/>
        <rect x="3" y="14" width="11" height="11" rx="2" fill="#ECB22E"/>
        <rect x="14" y="14" width="11" height="11" rx="2" fill="#E01E5A"/>
      </svg>;
    case 'toast':
      return <svg width={size} height={size} viewBox="0 0 28 28" aria-hidden="true">
        <circle cx="14" cy="14" r="11" fill="#FF4C00"/>
        <text x="14" y="18" fontFamily="Inter,sans-serif" fontSize="11" fontWeight="800" fill="#fff" textAnchor="middle">T</text>
      </svg>;
    case 'sevenshifts':
      return <svg width={size} height={size} viewBox="0 0 28 28" aria-hidden="true">
        <rect x="3" y="3" width="22" height="22" rx="5" fill="#1E2944"/>
        <text x="14" y="18" fontFamily="Inter,sans-serif" fontSize="10" fontWeight="800" fill="#fff" textAnchor="middle">7s</text>
      </svg>;
    case 'jolt':
      return <svg width={size} height={size} viewBox="0 0 28 28" aria-hidden="true">
        <rect x="3" y="3" width="22" height="22" rx="5" fill="#00B4A0"/>
        <path d="M14 5 L9 16 H14 L11 23 L19 12 H14 L17 5 Z" fill="#fff"/>
      </svg>;
    case 'lightspeed': {
      // The SVG tiles have ~3 units of padding inside their 28-unit
      // viewBox, so the visible art is roughly 22/28 ≈ 79% of the
      // requested size. The PNG is full-bleed, so render it at the
      // same proportional inner size and center it in a transparent
      // box that matches the others' footprint.
      const inner = Math.round(size * 0.78);
      return <span style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: size, height: size,
      }}>
        <img
          src="/design/logos/lightspeed.png"
          width={inner} height={inner}
          alt="Lightspeed"
          style={{ display: 'block', borderRadius: 4 }}
        />
      </span>;
    }
    default:
      return <svg width={size} height={size} viewBox="0 0 28 28" aria-hidden="true">
        <rect x="3" y="3" width="22" height="22" rx="5" fill="var(--primary)"/>
      </svg>;
  }
}

function Testimonial() {
  return (
    <section data-screen-label="07 Testimonial" style={{ background: 'var(--bg-2)', borderTop: '1px solid var(--hair)', borderBottom: '1px solid var(--hair)' }}>
      <div className="container">
        <div className="quote-block">
          <div style={{ width: 200, height: 200 }}><PortraitGeo/></div>
          <div>
            <div className="quote-text">
              We went from chasing twelve reports a week to acting on four lines a morning. Mise is the only tool my regionals open before coffee.
            </div>
            <div className="quote-attrib">
              <strong>M. Reyes</strong> — Director of Operations, Halfpipe Burger Group <span style={{ opacity: .5, margin: '0 6px' }}>·</span> 38 locations across CA &amp; NV
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function StatsSection() {
  const stats = [
    { num: '0.2–0.5', unit: 'pts', label: 'Labor variance recovered against forecast across deployed stores.', meta: 'AVG. ACROSS 12 OPERATORS' },
    { num: '8', unit: 'hrs/wk', label: 'Reclaimed per regional manager — time previously spent stitching dashboards.', meta: 'SELF-REPORTED · 90-DAY WINDOW' },
    { num: '100', unit: '%', label: 'Compliance issues caught before health-department inspection in pilot stores.', meta: 'PILOT COHORT · Q1 2026' },
  ];
  return (
    <section data-screen-label="08 ROI">
      <div className="container">
        <div className="sec-head left" style={{ marginBottom: 56 }}>
          <span className="eyebrow">Outcomes</span>
          <h2 className="h-section">Numbers operators care about.</h2>
        </div>
        <div className="stats">
          {stats.map((s, i) => (
            <div key={i} className="stat">
              <div className="stat-num">{s.num}<span className="unit">{s.unit}</span></div>
              <div className="stat-label">{s.label}</div>
              <div className="stat-meta"><span>{s.meta}</span></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: 'How is this different from POS-native analytics like Toast IQ or Square Dashboard?',
      a: 'POS-native dashboards tell you about the data inside that one POS. Mise reasons across your POS, your scheduling system, your accounting system, and your brand playbook in a single answer — and cites the source for every claim. POS analytics are one input Mise reads, not the surface your team lives in.' },
    { q: "Is my brand's confidential playbook secure?",
      a: 'Your manuals are ingested into a tenant-isolated index. They are never used to train shared models, never accessible to other customers, and are fully purged on contract end. Mise signs a mutual NDA before any document is uploaded and a DPA before production access.' },
    { q: 'How long does setup take?',
      a: 'Most franchisees are live in 10–14 days: read-only OAuth into your existing systems, a one-day playbook ingestion review, then a one-week tuning window where alerts are quiet by default and your regional team approves what fires.' },
    { q: 'What systems does Mise integrate with today?',
      a: "Live integrations: Square, Clover, Shopify, and Lightspeed Retail (POS); Deputy (scheduling); QuickBooks Online (accounting); Slack (alerts). In flight: Toast and 7shifts. On the roadmap: Jolt for food safety. Anything else, Mise will add by request — most net-new connectors ship in 2–4 weeks." },
    { q: 'Do you replace my existing tools?',
      a: "No. Mise is read-only by default and sits above your stack. Your GMs keep working in the systems they know; your above-store leaders stop having to log into all of them." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section data-screen-label="09 FAQ">
      <div className="container">
        <div className="sec-head" style={{ marginBottom: 48 }}>
          <span className="eyebrow">Frequently asked</span>
          <h2 className="h-section">Questions operators ask us first.</h2>
        </div>
        <div className="faq">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span>{it.q}</span>
                <span className="ic">+</span>
              </button>
              <div className="faq-a"><div className="inner">{it.a}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  return (
    <section id="pricing" className="pricing" data-screen-label="10 Pricing">
      <div className="container">
        <span className="eyebrow" style={{ display: 'inline-block', marginBottom: 24 }}>Pricing</span>
        <div className="line">Per-store, per-month, billed annually. Unlimited seats.</div>
        <div className="sub"><a href="https://calendly.com/max-mise/intro-call-for-mise" target="_blank" rel="noopener noreferrer">Talk to Sales →</a></div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section style={{ padding: 0 }} id="demo" data-screen-label="11 Final CTA">
      <div className="final">
        <div className="pattern"><CtaPattern/></div>
        <h2>Stop chasing reports. Start running your restaurants.</h2>
        <p>30-minute demo with an operator on our team — not a pitch deck.</p>
        <div className="cta-row">
          <a href="https://calendly.com/max-mise/intro-call-for-mise" target="_blank" rel="noopener noreferrer" className="btn btn-primary">Request a Demo →</a>
          <a href="/technical-brief" className="btn btn-secondary">Read the technical brief</a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer data-screen-label="12 Footer">
      <div className="container">
        <div className="foot-grid">
          <div className="foot-col">
            <Wordmark/>
            <p className="small" style={{ marginTop: 16, maxWidth: 280 }}>The operations layer for multi-unit restaurant franchisees.</p>
            <div className="foot-status" style={{ marginTop: 18 }}>
              <span className="dot"/>
              <span>All systems normal · status.mise.to</span>
            </div>
          </div>
          <div className="foot-col">
            <h5>Product</h5>
            <ul>
              <li><a href="/how-it-works">How It Works</a></li>
              <li><a href="/cross-stack-reasoning">Cross-Stack Reasoning</a></li>
              <li><a href="/technical-brief">Technical Brief</a></li>
              <li><a href="#integrations">Integrations</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Company</h5>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Customers</a></li>
              <li><a href="#">Careers</a></li>
              <li><a href="#">Press</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Legal</h5>
            <ul>
              <li><a href="#">Privacy</a></li>
              <li><a href="#">Terms</a></li>
              <li><a href="#">Security</a></li>
              <li><a href="#">DPA</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Mise Operations, Inc.</span>
          <span>Made for operators, in Brooklyn &amp; Austin.</span>
        </div>
      </div>
    </footer>
  );
}

window.Sections = { Nav, Hero, LogoBar, ProblemSection, ProductSection, DiffSection, IntegSection, Testimonial, StatsSection, FAQ, Pricing, FinalCTA, Footer };