// WMS Software — marketing page for the Shipping Clarity operations platform.
//
// Sales-led founding-customer pitch. NO live demo (deliberate: don't give
// competitors a roadmap, don't let prospects self-serve past a real
// conversation). One executive screenshot, deep on the AI wizard, full
// feature list, single CTA → lead form → /api/wms-interest.

const { useState: useStateWMS, useRef: useRefWMS } = React;

function WmsSoftwarePage({ onNav }) {
  const [busy, setBusy] = useStateWMS(false);
  const [thanks, setThanks] = useStateWMS(false);
  const [error, setError] = useStateWMS(null);
  const formRef = useRefWMS(null);

  // (Standalone-tease form moved to its own dedicated /#/wizard page.)

  function scrollToForm() {
    formRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
  }

  async function handleSubmit(e) {
    e.preventDefault();
    setBusy(true);
    setError(null);
    try {
      const fd = new FormData(e.currentTarget);
      const payload = Object.fromEntries(fd.entries());
      const r = await fetch("/api/wms-interest", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      const data = await r.json().catch(() => ({}));
      if (!r.ok || data.ok === false) {
        throw new Error(data.error || "Something went wrong. Email hello@shippingclarity.com directly.");
      }
      setThanks(true);
    } catch (err) {
      setError(String(err.message || err));
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="page-wms">
      <style>{`
        .page-wms { background: var(--paper); padding-bottom: 96px; }
        .wms-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

        /* HERO */
        .wms-hero { padding: 64px 24px 40px; max-width: 1100px; margin: 0 auto; text-align: center; }
        .wms-eyebrow {
          display: inline-flex; align-items: center; gap: 8px;
          font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
          text-transform: uppercase; color: var(--ink-soft);
          background: var(--paper-2); padding: 6px 14px; border-radius: 999px;
          border: 1px solid var(--ink-faint); margin-bottom: 22px;
        }
        .wms-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #c84a17; }
        .wms-h1 {
          font-family: var(--font-headline);
          font-size: clamp(40px, 6vw, 72px); line-height: 1.05; letter-spacing: -0.02em;
          color: var(--ink); margin: 0 0 22px; font-weight: 700;
        }
        .wms-sub {
          font-size: 19px; line-height: 1.55; color: var(--ink-soft);
          max-width: 720px; margin: 0 auto 30px;
        }
        .wms-ctas { display: inline-flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
        .wms-cta-primary {
          background: var(--ink); color: var(--paper); padding: 14px 26px;
          border-radius: 10px; font-weight: 600; text-decoration: none;
          font-size: 15px; transition: transform 0.1s; cursor: pointer; border: none;
        }
        .wms-cta-primary:hover { transform: translateY(-1px); opacity: 0.9; }
        .wms-cta-ghost {
          background: var(--paper); color: var(--ink); padding: 14px 26px;
          border: 1px solid var(--ink-faint); border-radius: 10px;
          font-weight: 600; text-decoration: none; font-size: 15px; cursor: pointer;
        }
        .wms-cta-ghost:hover { background: var(--paper-2); }
        .wms-mini { font-size: 13px; color: var(--ink-soft); margin-top: 16px; }

        /* SCE ACRONYM brand mark in hero */
        .wms-acronym {
          display: block; text-align: center;
          margin: 0 auto 22px; max-width: 480px;
        }
        .wms-acronym-letters {
          font-family: var(--font-headline); font-weight: 700;
          font-size: clamp(64px, 11vw, 104px); line-height: 1;
          letter-spacing: -0.04em; color: var(--ink);
        }
        .wms-acronym-rule {
          height: 2px; background: var(--ink); margin: 12px auto;
          width: 70%; min-width: 120px; opacity: 0.8;
        }
        .wms-acronym-words {
          font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.18em;
          text-transform: uppercase; color: var(--ink-soft);
        }

        /* SCREENSHOT */
        .wms-shot-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px 40px; }
        .wms-shot {
          display: block; width: 100%; height: auto;
          border-radius: 14px; border: 1px solid var(--ink-faint);
          box-shadow: 0 12px 40px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.04);
        }
        .wms-shot-cap {
          font-size: 13px; color: var(--ink-soft); text-align: center;
          margin-top: 12px; font-style: italic;
        }

        /* SECTION SHELL */
        .wms-section { padding: 64px 24px; }
        .wms-section.alt { background: var(--paper-2); border-top: 1px solid var(--ink-faint); border-bottom: 1px solid var(--ink-faint); }
        .wms-section.dark { background: var(--ink); color: var(--paper); border: none; }
        .wms-section.dark .wms-section-h, .wms-section.dark h3 { color: var(--paper); }
        .wms-section.dark .wms-section-sub, .wms-section.dark p { color: rgba(255,255,255,0.78); }
        .wms-section-h {
          font-family: var(--font-headline); font-size: clamp(28px, 4vw, 42px);
          line-height: 1.1; color: var(--ink); margin: 0 0 12px; text-align: center;
          font-weight: 700; letter-spacing: -0.01em;
        }
        .wms-section-sub {
          color: var(--ink-soft); text-align: center; max-width: 680px;
          margin: 0 auto 40px; font-size: 16px; line-height: 1.5;
        }

        /* WIZARD section */
        .wms-wizard {
          max-width: 980px; margin: 0 auto;
          display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
        }
        @media (max-width: 760px) { .wms-wizard { grid-template-columns: 1fr; } }
        .wms-wizard-copy h3 {
          font-family: var(--font-headline); font-size: 28px; line-height: 1.15;
          margin: 0 0 16px; font-weight: 700;
        }
        .wms-wizard-copy p { font-size: 15px; line-height: 1.6; margin: 0 0 14px; }
        .wms-wizard-steps {
          background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
          border-radius: 14px; padding: 24px;
        }
        .wms-step { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
        .wms-step:last-child { border-bottom: none; }
        .wms-step-n {
          flex: 0 0 28px; height: 28px; border-radius: 50%;
          background: rgba(255,255,255,0.14); color: var(--paper);
          display: flex; align-items: center; justify-content: center;
          font-family: var(--font-mono); font-size: 13px; font-weight: 600;
        }
        .wms-step-t { font-size: 14px; line-height: 1.45; color: rgba(255,255,255,0.92); }
        .wms-step-t b { color: var(--paper); }

        /* WIZARD HEADLINE METRIC pill */
        .wms-wizard-metric {
          display: inline-flex; align-items: baseline; gap: 10px;
          padding: 8px 16px; border-radius: 999px;
          background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18);
          margin-bottom: 14px;
        }
        .wms-wizard-metric .num { font-family: var(--font-headline); font-size: 22px; font-weight: 700; color: var(--paper); }
        .wms-wizard-metric .lbl { font-size: 13px; color: rgba(255,255,255,0.78); }

        /* WIZARD STEP example sublines */
        .wms-step-ex {
          font-size: 12px; color: rgba(255,255,255,0.62); margin-top: 4px;
          font-family: var(--font-mono);
        }
        .wms-step-ex b { color: rgba(255,255,255,0.85); font-weight: 500; }

        /* WHY DIFFERENT — comparison tiles */
        .wms-compare-row {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
          max-width: 980px; margin: 32px auto 0;
        }
        @media (max-width: 760px) { .wms-compare-row { grid-template-columns: 1fr; } }
        .wms-compare-tile {
          background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
          border-radius: 14px; padding: 22px; text-align: left;
        }
        .wms-compare-tile.ours {
          background: rgba(255,255,255,0.96); color: var(--ink);
          border-color: rgba(255,255,255,0.96);
          box-shadow: 0 8px 28px rgba(0,0,0,0.18);
        }
        .wms-compare-h {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
          text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 8px;
        }
        .wms-compare-tile.ours .wms-compare-h { color: var(--ink-soft); }
        .wms-compare-t { font-family: var(--font-headline); font-size: 17px; line-height: 1.25;
          margin: 0 0 8px; font-weight: 700; color: var(--paper); }
        .wms-compare-tile.ours .wms-compare-t { color: var(--ink); }
        .wms-compare-b { font-size: 13px; line-height: 1.55; margin: 0; color: rgba(255,255,255,0.75); }
        .wms-compare-tile.ours .wms-compare-b { color: var(--ink-soft); }
        .wms-compare-pill {
          display: inline-block; margin-top: 10px;
          padding: 3px 10px; border-radius: 999px;
          background: oklch(0.62 0.16 145); color: var(--paper);
          font-family: var(--font-mono); font-size: 10px;
          letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
        }

        /* WIZARD ANYWHERE — standalone product tease */
        .wms-anywhere {
          max-width: 760px; margin: 32px auto 0;
          background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.22);
          border-radius: 14px; padding: 22px;
        }
        .wms-anywhere-eyebrow {
          font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
          text-transform: uppercase; color: rgba(255,255,255,0.62); margin-bottom: 6px;
        }
        .wms-anywhere h3 {
          font-family: var(--font-headline); font-size: 20px; line-height: 1.2;
          margin: 0 0 8px; font-weight: 700;
        }
        .wms-anywhere p { font-size: 14px; line-height: 1.55; margin: 0 0 14px; color: rgba(255,255,255,0.78); }
        .wms-anywhere-form { display: flex; gap: 8px; flex-wrap: wrap; }
        .wms-anywhere-form input[type="email"] {
          flex: 1 1 240px; padding: 10px 14px;
          border: 1px solid rgba(255,255,255,0.22); border-radius: 8px;
          background: rgba(255,255,255,0.06); color: var(--paper);
          font-family: inherit; font-size: 14px;
        }
        .wms-anywhere-form input[type="email"]::placeholder { color: rgba(255,255,255,0.45); }
        .wms-anywhere-form input[type="email"]:focus {
          outline: 2px solid var(--paper); outline-offset: 1px;
        }
        .wms-anywhere-form button {
          padding: 10px 18px; background: var(--paper); color: var(--ink);
          border: none; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer;
        }
        .wms-anywhere-form button[disabled] { opacity: 0.6; cursor: not-allowed; }
        .wms-anywhere-link {
          display: inline-block; margin-top: 4px;
          padding: 10px 18px; background: var(--paper); color: var(--ink);
          text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 14px;
        }
        .wms-anywhere-link:hover { opacity: 0.9; }

        /* SHORTCUTS callout */
        .wms-shortcuts {
          max-width: 760px; margin: 24px auto 0; text-align: center;
          background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
          border-radius: 14px; padding: 24px;
        }
        .wms-shortcuts kbd {
          display: inline-block; padding: 3px 9px; background: rgba(255,255,255,0.14);
          border: 1px solid rgba(255,255,255,0.22); border-radius: 5px;
          font-family: var(--font-mono); font-size: 13px; color: var(--paper);
        }

        /* FEATURE GRID */
        .wms-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1100px; margin: 0 auto; }
        @media (max-width: 880px) { .wms-features { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 560px) { .wms-features { grid-template-columns: 1fr; } }
        .wms-tile {
          background: var(--paper); border: 1px solid var(--ink-faint);
          border-radius: 12px; padding: 18px;
        }
        .wms-tile-icon { font-size: 22px; margin-bottom: 6px; }
        .wms-tile-h { font-weight: 700; color: var(--ink); font-size: 15px; margin: 0 0 4px; }
        .wms-tile-b { color: var(--ink-soft); font-size: 13px; line-height: 1.5; margin: 0; }

        /* COMPARE */
        .wms-compare {
          max-width: 760px; margin: 0 auto;
          background: var(--paper); border: 1px solid var(--ink-faint);
          border-radius: 14px; padding: 28px; text-align: center;
        }
        .wms-compare-h { font-family: var(--font-headline); font-size: 22px; line-height: 1.2; margin: 0 0 16px; }
        .wms-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 16px; border-top: 1px solid var(--ink-faint); }
        .wms-compare-cell { padding: 16px 8px; border-bottom: 1px solid var(--ink-faint); font-size: 14px; }
        .wms-compare-cell:nth-child(odd) { border-right: 1px solid var(--ink-faint); color: var(--ink-soft); }
        .wms-compare-cell:nth-child(even) { font-weight: 600; }

        /* LEAD FORM */
        .wms-form-wrap { max-width: 600px; margin: 0 auto; }
        .wms-form {
          background: var(--paper); border: 1px solid var(--ink-faint);
          border-radius: 14px; padding: 28px;
          display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
        }
        @media (max-width: 560px) { .wms-form { grid-template-columns: 1fr; } }
        .wms-form-field { display: flex; flex-direction: column; gap: 5px; }
        .wms-form-field.full { grid-column: 1 / -1; }
        .wms-form-field label {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
          text-transform: uppercase; color: var(--ink-soft);
        }
        .wms-form-field input, .wms-form-field select, .wms-form-field textarea {
          padding: 10px 12px; border: 1px solid var(--ink-faint);
          border-radius: 8px; background: var(--paper); color: var(--ink);
          font-family: inherit; font-size: 14px;
        }
        .wms-form-field input:focus, .wms-form-field select:focus, .wms-form-field textarea:focus {
          outline: 2px solid var(--ink); outline-offset: 1px;
        }
        .wms-form-submit {
          grid-column: 1 / -1; padding: 14px;
          background: var(--ink); color: var(--paper); border: none; border-radius: 10px;
          font-weight: 600; font-size: 15px; cursor: pointer;
        }
        .wms-form-submit[disabled] { opacity: 0.6; cursor: not-allowed; }
        .wms-form-note { grid-column: 1 / -1; font-size: 12px; color: var(--ink-soft); text-align: center; margin: 0; }
        .wms-form-error { grid-column: 1 / -1; padding: 10px 14px; background: #fdecea; border: 1px solid #f5c2c0; border-radius: 8px; color: #8a1c0e; font-size: 13px; }
        .wms-form-thanks {
          background: var(--paper); border: 1px solid var(--ink-faint);
          border-radius: 14px; padding: 36px 28px; text-align: center;
        }
        .wms-form-thanks h3 { font-family: var(--font-headline); font-size: 24px; margin: 0 0 12px; }
        .wms-form-thanks p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; margin: 0; }

        /* ─── DARK THEME OVERRIDES — matches home-page navy-blue palette ──
           Uses the bluer slate-900 family the home page leans on:
             background       #0f172a   (slate-900, freight-radar map base)
             section alt      #0a1224   (deeper navy, used in home gradients)
             section dark     #060e1e   (deepest, for the in-page hero band)
             border           #1f2937   (slate-800)
             accent           var(--red) → oklch(0.52 0.16 250) "Shipping Clarity blue"
           Roll back by deleting just this block.
        */
        .page-wms { background: #0f172a; color: #e8edf5; }

        /* Hero + acronym */
        .wms-eyebrow {
          background: rgba(255,255,255,0.04);
          border-color: #1f2937;
          color: rgba(255,255,255,0.78);
        }
        .wms-eyebrow .dot { background: var(--red); box-shadow: 0 0 12px var(--red); }
        .wms-acronym-letters { color: #ffffff; }
        .wms-acronym-rule { background: var(--red); opacity: 1; height: 2px; }
        .wms-acronym-words { color: rgba(255,255,255,0.62); }
        .wms-h1 { color: #ffffff; }
        .wms-sub { color: rgba(255,255,255,0.75); }
        .wms-mini { color: rgba(255,255,255,0.50); }

        /* CTAs — primary uses brand blue, matching .si-btn-primary on home */
        .wms-cta-primary {
          background: var(--red); color: #ffffff;
          box-shadow: 0 4px 14px color-mix(in srgb, var(--red) 35%, transparent);
        }
        .wms-cta-primary:hover { background: oklch(0.45 0.20 250); transform: translateY(-1px); }
        .wms-cta-ghost {
          background: transparent; color: #ffffff;
          border-color: #1f2937;
        }
        .wms-cta-ghost:hover { background: rgba(255,255,255,0.04); border-color: #2a3344; }

        /* Dashboard screenshot — slate-bordered frame, deep shadow */
        .wms-shot {
          border-color: #1f2937;
          box-shadow: 0 18px 48px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
        }
        .wms-shot-cap { color: rgba(255,255,255,0.55); }

        /* Sections */
        .wms-section { background: #0f172a; }
        .wms-section.alt {
          background: #0a1224;
          border-top-color: #1f2937; border-bottom-color: #1f2937;
        }
        .wms-section-h { color: #ffffff; }
        .wms-section-sub { color: rgba(255,255,255,0.70); }

        /* Compare table (the "trenches / vendor pricing" block) */
        .wms-compare {
          background: rgba(255,255,255,0.025); border-color: #1f2937;
        }
        .wms-compare-h { color: rgba(255,255,255,0.55); }
        .wms-compare-grid { border-top-color: #1f2937; }
        .wms-compare-cell { border-bottom-color: #1f2937; color: rgba(255,255,255,0.78); }
        .wms-compare-cell:nth-child(odd) { border-right-color: #1f2937; color: rgba(255,255,255,0.55); }
        .wms-compare-cell:nth-child(even) { color: #ffffff; }

        /* Feature tiles ("Everything in one platform") */
        .wms-tile {
          background: rgba(255,255,255,0.025); border-color: #1f2937;
        }
        .wms-tile:hover {
          border-color: color-mix(in srgb, var(--red) 40%, #1f2937);
          background: rgba(255,255,255,0.04);
        }
        .wms-tile-h { color: #ffffff; }
        .wms-tile-b { color: rgba(255,255,255,0.70); }

        /* Founding-customer form */
        .wms-form {
          background: rgba(255,255,255,0.025); border-color: #1f2937;
        }
        .wms-form-field label { color: rgba(255,255,255,0.55); }
        .wms-form-field input, .wms-form-field select, .wms-form-field textarea {
          background: rgba(0,0,0,0.35); border-color: #1f2937; color: #ffffff;
        }
        .wms-form-field input::placeholder, .wms-form-field textarea::placeholder {
          color: rgba(255,255,255,0.35);
        }
        .wms-form-field input:focus, .wms-form-field select:focus, .wms-form-field textarea:focus {
          outline-color: var(--red); border-color: var(--red);
        }
        .wms-form-submit {
          background: var(--red); color: #ffffff;
          box-shadow: 0 4px 14px color-mix(in srgb, var(--red) 35%, transparent);
        }
        .wms-form-submit:hover { background: oklch(0.45 0.20 250); }
        .wms-form-note { color: rgba(255,255,255,0.55); }
        .wms-form-thanks {
          background: rgba(255,255,255,0.025); border-color: #1f2937;
        }
        .wms-form-thanks p { color: rgba(255,255,255,0.75); }

        /* The two .wms-section.dark blocks (wizard section + cross-link)
           get a deeper navy so they form a visual "hero band" inside the
           page rather than blending in. */
        .wms-section.dark { background: #060e1e; }
        .wms-section.dark .wms-anywhere {
          background: rgba(255,255,255,0.04); border-color: #1f2937; border-style: solid;
        }
        .wms-section.dark .wms-anywhere-link {
          background: var(--red); color: #ffffff;
        }
        .wms-section.dark .wms-anywhere-link:hover { background: oklch(0.45 0.20 250); }
      `}</style>

      {/* ─── Hero ─────────────────────────────────────────────────── */}
      <section className="wms-hero">
        <div className="wms-eyebrow"><span className="dot" /> Founding-customer program · now open</div>
        <div className="wms-acronym">
          <div className="wms-acronym-letters">SCE</div>
          <div className="wms-acronym-rule" />
          <div className="wms-acronym-words">Supply Chain Execution Platform</div>
        </div>
        <h1 className="wms-h1">A unified operations platform, built by a 30-year supply chain veteran.</h1>
        <p className="wms-sub">
          WMS, TMS, inventory, purchasing, orders, pick tickets, carriers, returns, quality, labor management, reports &mdash;
          one system that configures itself around how your operation actually works. Not seven best-of-breed tools stitched together.
        </p>
        <div className="wms-ctas">
          <button type="button" className="wms-cta-primary" onClick={scrollToForm}>
            Apply for founding-customer access →
          </button>
        </div>
        <div className="wms-mini">No live demo on this page &mdash; let's talk first and walk you through it together.</div>
      </section>

      {/* ─── Hero screenshot ──────────────────────────────────────── */}
      <div className="wms-shot-wrap">
        <img
          className="wms-shot"
          src="/branding/wms-dashboard.png"
          alt="Shipping Clarity Operations Dashboard — KPIs, sparklines, and pipeline health in one view"
        />
        <div className="wms-shot-cap">Operations Dashboard &mdash; what your team sees the moment they sign in.</div>
      </div>

      {/* ─── The "why I built this" pitch ─────────────────────────── */}
      <section className="wms-section">
        <div className="wms-wrap">
          <h2 className="wms-section-h">From the trenches, not the vendor showroom.</h2>
          <p className="wms-section-sub">
            Thirty years in supply chain &mdash; large operations and small, every flavor of software you can imagine.
            At IBP I had to beg for software. No more. I built the platform I always wanted, and now I'm putting it in real warehouses.
          </p>
          <div className="wms-compare">
            <div className="wms-compare-h">A comparable platform from the major vendors</div>
            <div className="wms-compare-grid">
              <div className="wms-compare-cell">Small-to-mid operation</div>
              <div className="wms-compare-cell">$50K – $150K / yr</div>
              <div className="wms-compare-cell">Mid-market</div>
              <div className="wms-compare-cell">Hundreds of thousands</div>
              <div className="wms-compare-cell">Enterprise</div>
              <div className="wms-compare-cell">Millions</div>
            </div>
          </div>
        </div>
      </section>

      {/* ─── AI Wizard (the headline differentiator) ──────────────── */}
      <section className="wms-section dark">
        <div className="wms-wrap" style={{ textAlign: "center" }}>
          <div className="wms-wizard-metric">
            <span className="num">5 minutes</span>
            <span className="lbl">from sign-in to first answer</span>
          </div>
          <h2 className="wms-section-h">The AI Onboarding Wizard</h2>
          <p className="wms-section-sub">
            Top-quartile SaaS hits first value in <a href="https://www.crescendo.ai/blog/saas-onboarding-software" target="_blank" rel="noopener" style={{ color: "rgba(255,255,255,0.95)", textDecoration: "underline" }}>5&ndash;9 days</a>.
            We hit it in five minutes. Not a 200-page manual &mdash; a short conversational interview, then the platform configures itself around the person using it.
          </p>
        </div>

        {/* ─── Part 1: How it works (4-step interview, with examples) ── */}
        <div className="wms-wrap" style={{ marginTop: 24 }}>
          <div className="wms-wizard">
            <div className="wms-wizard-copy">
              <h3>How it works.</h3>
              <p>
                Every new user &mdash; warehouse supervisor, dock manager, picker, controller &mdash; sits through a short AI interview.
                The wizard reads their answers, picks <b>shortcuts in their own words</b>, and maps each one to a real query against real data.
              </p>
              <p>
                No admin pre-builds tours. No consultant. No 200-page binder. The user walks away with 5&ndash;8 personalized
                <kbd style={{ display: "inline-block", padding: "2px 7px", margin: "0 4px", background: "rgba(255,255,255,0.14)", border: "1px solid rgba(255,255,255,0.22)", borderRadius: 5, fontFamily: "var(--font-mono)", fontSize: 12 }}>⌘K</kbd>
                triggers that work from anywhere in the system.
              </p>
            </div>
            <div className="wms-wizard-steps">
              <div className="wms-step">
                <div className="wms-step-n">1</div>
                <div className="wms-step-t">
                  <b>Role.</b> One line.
                  <div className="wms-step-ex">they type: <b>"Warehouse supervisor at MAIN DC"</b></div>
                </div>
              </div>
              <div className="wms-step">
                <div className="wms-step-n">2</div>
                <div className="wms-step-t">
                  <b>Daily checks.</b> What they look at every day, in their own words.
                  <div className="wms-step-ex">they type: <b>"Late orders, low stock by bin, who's loading at the dock right now"</b></div>
                </div>
              </div>
              <div className="wms-step">
                <div className="wms-step-n">3</div>
                <div className="wms-step-t">
                  <b>Triggers.</b> Wizard proposes trigger words pulled from their language.
                  <div className="wms-step-ex">wizard hears: <b>late · low · flags · mine</b></div>
                </div>
              </div>
              <div className="wms-step">
                <div className="wms-step-n">4</div>
                <div className="wms-step-t">
                  <b>Review &amp; save.</b> Each shortcut comes with a one-line "why we suggested this." Keep the fits.
                  <div className="wms-step-ex">5&ndash;8 shortcuts proposed &middot; user keeps 4 &middot; done</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* ─── Part 2: Why this is different (3-tile comparison) ─────── */}
        <div className="wms-wrap" style={{ marginTop: 56, textAlign: "center" }}>
          <h3 style={{ fontFamily: "var(--font-headline)", fontSize: 28, margin: "0 0 6px", fontWeight: 700, color: "var(--paper)" }}>
            Why this is different.
          </h3>
          <p style={{ fontSize: 15, color: "rgba(255,255,255,0.72)", margin: "0 auto", maxWidth: 620 }}>
            Every "AI onboarding" tool on the market is a tour engine. The Wizard is something else.
          </p>
          <div className="wms-compare-row">
            <div className="wms-compare-tile">
              <div className="wms-compare-h">Generic onboarding tools</div>
              <div className="wms-compare-t">Tour-and-checklist engines.</div>
              <p className="wms-compare-b">Bolted on top of any app. The "AI" generates the tour copy for the admin. New users still get the same tour as everyone else.</p>
            </div>
            <div className="wms-compare-tile">
              <div className="wms-compare-h">Old-school enterprise onboarding</div>
              <div className="wms-compare-t">200-page binders + a 2-week consultant.</div>
              <p className="wms-compare-b">Every new hire costs weeks of senior team time. By month three, half the binder is wrong because the system changed.</p>
            </div>
            <div className="wms-compare-tile ours">
              <div className="wms-compare-h">The Shipping Clarity Wizard</div>
              <div className="wms-compare-t">Reads how YOU work, configures itself around it.</div>
              <p className="wms-compare-b">Free text in &rarr; structured shortcuts out, in the user's own language. Five minutes from sign-in to running real queries against real data.</p>
              <span className="wms-compare-pill">our approach</span>
            </div>
          </div>
        </div>

        {/* ─── Part 3: Cross-link to standalone Wizard page ─────────── */}
        <div className="wms-wrap">
          <div className="wms-anywhere">
            <div className="wms-anywhere-eyebrow">Looking for just the Wizard?</div>
            <h3>The Wizard works on any SaaS platform — not just Shipping Clarity SCE.</h3>
            <p>
              We're bringing the same role-aware, free-text-in-config-out flow to Salesforce, NetSuite, and other platforms with an open API.
              Separate program, separate early-access list.
            </p>
            <a
              href="#/wizard"
              onClick={(e) => { e.preventDefault(); onNav && onNav("wizard"); }}
              className="wms-anywhere-link"
            >
              See the Wizard, standalone &rarr;
            </a>
          </div>
        </div>
      </section>

      {/* ─── Full feature list ────────────────────────────────────── */}
      <section className="wms-section alt">
        <div className="wms-wrap">
          <h2 className="wms-section-h">Everything in one platform.</h2>
          <p className="wms-section-sub">
            No bolt-ons. No "we integrate with that." Built as one system from the ground up.
          </p>
          <div className="wms-features">
            <div className="wms-tile"><div className="wms-tile-icon">📦</div><h3 className="wms-tile-h">Inventory + WMS</h3><p className="wms-tile-b">Multi-warehouse on-hand, bin management, cycle counts, pallet LPNs. Real audit trail on every movement.</p></div>
            <div className="wms-tile"><div className="wms-tile-icon">📥</div><h3 className="wms-tile-h">Inbound + Receiving</h3><p className="wms-tile-b">Receiving dock view, PO tracking, line-by-line receipts, vendor on-time scoring.</p></div>
            <div className="wms-tile"><div className="wms-tile-icon">🛒</div><h3 className="wms-tile-h">Orders</h3><p className="wms-tile-b">Order intake from any channel. Status, fill rate, exceptions &mdash; all visible without a report request.</p></div>
            <div className="wms-tile"><div className="wms-tile-icon">📋</div><h3 className="wms-tile-h">Assisted Picking</h3><p className="wms-tile-b">Smart pick-ticket waves, walk paths, mobile-ready pick screens, short-pick handling.</p></div>
            <div className="wms-tile"><div className="wms-tile-icon">🚚</div><h3 className="wms-tile-h">Outbound + Loading</h3><p className="wms-tile-b">Dock-door grid, loader scan screens, pallet LPN scanning, count-discrepancy flag flow.</p></div>
            <div className="wms-tile"><div className="wms-tile-icon">🛣️</div><h3 className="wms-tile-h">TMS</h3><p className="wms-tile-b">Build loads, tender to carriers, milestone tracking, live operations map.</p></div>
            <div className="wms-tile"><div className="wms-tile-icon">🤝</div><h3 className="wms-tile-h">Carrier Network + Portal</h3><p className="wms-tile-b">Carrier scorecards, asset/broker classification, white-label carrier portal for tender accept/decline.</p></div>
            <div className="wms-tile"><div className="wms-tile-icon">🔁</div><h3 className="wms-tile-h">Returns (RMA)</h3><p className="wms-tile-b">Reverse-logistics workflow, condition grading, restock or scrap decisions linked back to inventory.</p></div>
            <div className="wms-tile"><div className="wms-tile-icon">🛡️</div><h3 className="wms-tile-h">Quality Management</h3><p className="wms-tile-b">Inspection workflows, hold &amp; release, NCR tracking, root-cause notes attached to inventory movements.</p></div>
            <div className="wms-tile"><div className="wms-tile-icon">👷</div><h3 className="wms-tile-h">Labor Management (LMS)</h3><p className="wms-tile-b">Picker / loader productivity, lines-per-hour, shift planning, pickers-in-motion live view.</p></div>
            <div className="wms-tile"><div className="wms-tile-icon">📊</div><h3 className="wms-tile-h">Reports &amp; BI</h3><p className="wms-tile-b">Self-service reporting studio. Save views, share dashboards, drill into any KPI.</p></div>
            <div className="wms-tile"><div className="wms-tile-icon">🗺️</div><h3 className="wms-tile-h">Real-time Operations Map</h3><p className="wms-tile-b">Warehouse network and trucks in motion in one view. Click a marker, drill into the load.</p></div>
            <div className="wms-tile"><div className="wms-tile-icon">🌐</div><h3 className="wms-tile-h">White-label Portals</h3><p className="wms-tile-b">Customer and carrier portals on your domain, with your colors. Multi-tenant from line one.</p></div>
            <div className="wms-tile"><div className="wms-tile-icon">🔌</div><h3 className="wms-tile-h">Public API + Webhooks</h3><p className="wms-tile-b">Bearer-token API with scoped keys for orders, inventory, shipments. Webhook subscriptions for outbound events.</p></div>
            <div className="wms-tile"><div className="wms-tile-icon">⚙️</div><h3 className="wms-tile-h">Configuration, not customization</h3><p className="wms-tile-b">Rules engine for allocation, billing, alerts. Stand up a new tenant in an afternoon, not a quarter.</p></div>
          </div>
        </div>
      </section>

      {/* ─── Founding-customer offer + Lead form ──────────────────── */}
      <section className="wms-section" ref={formRef}>
        <div className="wms-wrap">
          <h2 className="wms-section-h">Founding-customer program</h2>
          <p className="wms-section-sub">
            I'm looking for a small number of founding customers to help tune this in the wild.
            Reduced rate locked in for the next few years. Direct input on how it evolves. A system configured around how your operation actually works.
            In exchange: you commit to a real implementation and honest feedback.
          </p>

          <div className="wms-form-wrap">
            {thanks ? (
              <div className="wms-form-thanks">
                <h3>Got it &mdash; thank you.</h3>
                <p>I'll review your note and reach out personally within 1&ndash;2 business days.<br/>If you need me sooner, email <a href="mailto:hello@shippingclarity.com">hello@shippingclarity.com</a>.</p>
              </div>
            ) : (
              <form className="wms-form" onSubmit={handleSubmit}>
                <div className="wms-form-field">
                  <label htmlFor="wms-name">Your name</label>
                  <input id="wms-name" name="name" type="text" required autoComplete="name" />
                </div>
                <div className="wms-form-field">
                  <label htmlFor="wms-email">Work email</label>
                  <input id="wms-email" name="email" type="email" required autoComplete="email" />
                </div>
                <div className="wms-form-field">
                  <label htmlFor="wms-company">Company</label>
                  <input id="wms-company" name="company" type="text" required autoComplete="organization" />
                </div>
                <div className="wms-form-field">
                  <label htmlFor="wms-role">Your role</label>
                  <select id="wms-role" name="role" defaultValue="">
                    <option value="" disabled>Choose one&hellip;</option>
                    <option value="Owner / Founder">Owner / Founder</option>
                    <option value="Operations / Warehouse leader">Operations / Warehouse leader</option>
                    <option value="Supply chain / Logistics">Supply chain / Logistics</option>
                    <option value="IT / Engineering">IT / Engineering</option>
                    <option value="Other">Other</option>
                  </select>
                </div>
                <div className="wms-form-field">
                  <label htmlFor="wms-warehouses">Warehouses</label>
                  <select id="wms-warehouses" name="warehouses" defaultValue="">
                    <option value="" disabled>Choose one&hellip;</option>
                    <option value="1">1</option>
                    <option value="2-5">2 – 5</option>
                    <option value="6-20">6 – 20</option>
                    <option value="20+">20+</option>
                  </select>
                </div>
                <div className="wms-form-field">
                  <label htmlFor="wms-orders">Orders / month</label>
                  <select id="wms-orders" name="orders_per_month" defaultValue="">
                    <option value="" disabled>Choose one&hellip;</option>
                    <option value="<1k">&lt; 1,000</option>
                    <option value="1k-10k">1,000 – 10,000</option>
                    <option value="10k-50k">10,000 – 50,000</option>
                    <option value="50k+">50,000+</option>
                  </select>
                </div>
                <div className="wms-form-field full">
                  <label htmlFor="wms-current">Current system (optional)</label>
                  <input id="wms-current" name="current_system" type="text" placeholder="e.g. NetSuite, Cin7, Manhattan, spreadsheets&hellip;" />
                </div>
                <div className="wms-form-field full">
                  <label htmlFor="wms-message">What's broken right now? (optional)</label>
                  <textarea id="wms-message" name="message" rows="4" placeholder="A sentence or two — what made you click this page." />
                </div>
                {error && <div className="wms-form-error">{error}</div>}
                <button type="submit" className="wms-form-submit" disabled={busy}>
                  {busy ? "Sending&hellip;" : "Apply for founding-customer access →"}
                </button>
                <p className="wms-form-note">
                  I read every one personally. Reply within 1&ndash;2 business days.
                </p>
              </form>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}

window.WmsSoftwarePage = WmsSoftwarePage;
