// Wizard — standalone product page.
//
// Pitches the AI Onboarding Wizard as its own product, separate from
// Shipping Clarity SCE. Targets ops/admin buyers at companies that
// already have a CRM/ERP/WMS and want personalized in-app shortcuts
// for their team — without ripping out their stack.
//
// Lead form posts to the existing /api/wms-interest endpoint with
// source=wizard-standalone so leads are tagged separately from SCE
// founding-customer leads.

const { useState: useStateWiz, useRef: useRefWiz } = React;

function WizardPage({ onNav }) {
  const [busy, setBusy] = useStateWiz(false);
  const [thanks, setThanks] = useStateWiz(false);
  const [error, setError] = useStateWiz(null);
  const formRef = useRefWiz(null);

  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 platforms = fd.getAll("platforms").join(", ");
      const payload = {
        name: String(fd.get("name") || "").trim(),
        email: String(fd.get("email") || "").trim(),
        company: String(fd.get("company") || "").trim(),
        role: String(fd.get("role") || "").trim(),
        current_system: platforms,
        message: String(fd.get("message") || "").trim(),
        source: "wizard-standalone",
      };
      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 || "Couldn't sign you up. Email hello@shippingclarity.com directly.");
      }
      setThanks(true);
    } catch (err) {
      setError(String(err.message || err));
    } finally {
      setBusy(false);
    }
  }

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

        /* HERO */
        .wiz-hero { padding: 64px 24px 40px; max-width: 1100px; margin: 0 auto; text-align: center; }
        .wiz-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;
        }
        .wiz-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.62 0.16 145); }
        .wiz-h1 {
          font-family: var(--font-headline);
          font-size: clamp(40px, 6vw, 76px); line-height: 1.04; letter-spacing: -0.02em;
          color: var(--ink); margin: 0 0 22px; font-weight: 700;
        }
        .wiz-h1 .accent { color: oklch(0.50 0.18 25); }
        .wiz-sub {
          font-size: 19px; line-height: 1.55; color: var(--ink-soft);
          max-width: 720px; margin: 0 auto 30px;
        }
        .wiz-cta-primary {
          background: var(--ink); color: var(--paper); padding: 14px 26px;
          border-radius: 10px; font-weight: 600; text-decoration: none;
          font-size: 15px; cursor: pointer; border: none; display: inline-block;
        }
        .wiz-cta-primary:hover { transform: translateY(-1px); opacity: 0.9; }
        .wiz-mini { font-size: 13px; color: var(--ink-soft); margin-top: 16px; }

        /* HEADLINE METRIC */
        .wiz-metric {
          display: inline-flex; align-items: baseline; gap: 10px;
          padding: 8px 16px; border-radius: 999px;
          background: var(--ink); color: var(--paper);
          margin-bottom: 14px;
        }
        .wiz-metric .num { font-family: var(--font-headline); font-size: 22px; font-weight: 700; }
        .wiz-metric .lbl { font-size: 13px; opacity: 0.78; }

        /* SECTION SHELL */
        .wiz-section { padding: 56px 24px; }
        .wiz-section.alt { background: var(--paper-2); border-top: 1px solid var(--ink-faint); border-bottom: 1px solid var(--ink-faint); }
        .wiz-section.dark { background: var(--ink); color: var(--paper); border: none; }
        .wiz-section.dark h2, .wiz-section.dark h3 { color: var(--paper); }
        .wiz-section.dark p { color: rgba(255,255,255,0.78); }
        .wiz-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;
        }
        .wiz-section-sub {
          color: var(--ink-soft); text-align: center; max-width: 680px;
          margin: 0 auto 40px; font-size: 16px; line-height: 1.5;
        }

        /* PLATFORMS strip */
        .wiz-platforms {
          display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
          margin-top: 24px;
        }
        .wiz-platform {
          padding: 8px 18px; background: var(--paper); border: 1px solid var(--ink-faint);
          border-radius: 999px; font-family: var(--font-mono); font-size: 13px; color: var(--ink);
        }
        .wiz-platform.coming { color: var(--ink-soft); border-style: dashed; }

        /* HOW IT WORKS — 4-step */
        .wiz-steps {
          display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
          max-width: 880px; margin: 0 auto;
        }
        @media (max-width: 700px) { .wiz-steps { grid-template-columns: 1fr; } }
        .wiz-step {
          background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
          border-radius: 12px; padding: 18px;
        }
        .wiz-step-n {
          display: inline-flex; width: 26px; height: 26px; border-radius: 50%;
          background: rgba(255,255,255,0.14); color: var(--paper);
          align-items: center; justify-content: center;
          font-family: var(--font-mono); font-size: 12px; font-weight: 600;
          margin-bottom: 8px;
        }
        .wiz-step-h { font-weight: 700; color: var(--paper); margin: 0 0 4px; font-size: 15px; }
        .wiz-step-b { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.78); margin: 0; }
        .wiz-step-ex {
          font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.55);
          margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,0.12);
        }
        .wiz-step-ex b { color: rgba(255,255,255,0.85); font-weight: 500; }

        /* WHY DIFFERENT — comparison row */
        .wiz-compare {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
          max-width: 980px; margin: 32px auto 0;
        }
        @media (max-width: 760px) { .wiz-compare { grid-template-columns: 1fr; } }
        .wiz-compare-tile {
          background: var(--paper); border: 1px solid var(--ink-faint);
          border-radius: 14px; padding: 22px; text-align: left;
        }
        .wiz-compare-tile.ours {
          background: var(--ink); color: var(--paper); border-color: var(--ink);
          box-shadow: 0 8px 28px rgba(0,0,0,0.18);
        }
        .wiz-compare-h {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
          text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px;
        }
        .wiz-compare-tile.ours .wiz-compare-h { color: rgba(255,255,255,0.55); }
        .wiz-compare-t { font-family: var(--font-headline); font-size: 17px; line-height: 1.25;
          margin: 0 0 8px; font-weight: 700; color: var(--ink); }
        .wiz-compare-tile.ours .wiz-compare-t { color: var(--paper); }
        .wiz-compare-b { font-size: 13px; line-height: 1.55; margin: 0; color: var(--ink-soft); }
        .wiz-compare-tile.ours .wiz-compare-b { color: rgba(255,255,255,0.75); }
        .wiz-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;
        }

        /* ROADMAP */
        .wiz-roadmap {
          max-width: 820px; margin: 0 auto;
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
        }
        @media (max-width: 760px) { .wiz-roadmap { grid-template-columns: 1fr; } }
        .wiz-rd-tile {
          padding: 20px; background: var(--paper); border: 1px solid var(--ink-faint);
          border-radius: 12px;
        }
        .wiz-rd-when {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
          text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px;
        }
        .wiz-rd-what { font-weight: 700; color: var(--ink); font-size: 16px; margin: 0 0 4px; }
        .wiz-rd-note { font-size: 13px; line-height: 1.45; color: var(--ink-soft); margin: 0; }

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

        /* CROSS-LINK back to SCE */
        .wiz-crosslink {
          max-width: 760px; margin: 36px auto 0; padding: 18px 22px;
          background: var(--paper-2); border: 1px solid var(--ink-faint); border-radius: 12px;
          display: flex; align-items: center; justify-content: space-between; gap: 16px;
          flex-wrap: wrap;
        }
        .wiz-crosslink-text {
          font-size: 14px; color: var(--ink-soft);
        }
        .wiz-crosslink-text b { color: var(--ink); }
        .wiz-crosslink a {
          color: var(--ink); font-weight: 600; text-decoration: underline;
          text-underline-offset: 3px; font-size: 14px;
        }

        /* ─── DARK THEME OVERRIDES — same navy palette as the SCE page ──
             background       #0f172a   (slate-900, freight-radar map base)
             section alt      #0a1224   (deeper navy)
             section dark     #060e1e   (deepest hero band)
             border           #1f2937   (slate-800)
             accent           var(--red) → "Shipping Clarity blue"
        */
        .page-wiz { background: #0f172a; color: #e8edf5; }

        /* Hero */
        .wiz-eyebrow {
          background: rgba(255,255,255,0.04); border-color: #1f2937;
          color: rgba(255,255,255,0.78);
        }
        .wiz-eyebrow .dot { background: var(--red); box-shadow: 0 0 12px var(--red); }
        .wiz-metric { background: rgba(255,255,255,0.06); color: #ffffff; }
        .wiz-metric .num { color: #ffffff; }
        .wiz-metric .lbl { color: rgba(255,255,255,0.78); }
        .wiz-h1 { color: #ffffff; }
        .wiz-h1 .accent { color: var(--red); }
        .wiz-sub { color: rgba(255,255,255,0.75); }
        .wiz-mini { color: rgba(255,255,255,0.50); }
        .wiz-cta-primary {
          background: var(--red); color: #ffffff;
          box-shadow: 0 4px 14px color-mix(in srgb, var(--red) 35%, transparent);
        }
        .wiz-cta-primary:hover { background: oklch(0.45 0.20 250); }

        /* Platforms strip pills */
        .wiz-platform {
          background: rgba(255,255,255,0.04); border-color: #1f2937; color: #ffffff;
        }
        .wiz-platform.coming { color: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.18); }

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

        /* Comparison row — flip "ours" tile to brand-blue background */
        .wiz-compare-tile {
          background: rgba(255,255,255,0.04); border-color: #1f2937;
        }
        .wiz-compare-h { color: rgba(255,255,255,0.55); }
        .wiz-compare-t { color: #ffffff; }
        .wiz-compare-b { color: rgba(255,255,255,0.72); }
        .wiz-compare-tile.ours {
          background: var(--red); border-color: var(--red); color: #ffffff;
          box-shadow: 0 8px 28px color-mix(in srgb, var(--red) 30%, transparent);
        }
        .wiz-compare-tile.ours .wiz-compare-h { color: rgba(255,255,255,0.78); }
        .wiz-compare-tile.ours .wiz-compare-t { color: #ffffff; }
        .wiz-compare-tile.ours .wiz-compare-b { color: rgba(255,255,255,0.92); }

        /* Roadmap tiles */
        .wiz-rd-tile { background: rgba(255,255,255,0.04); border-color: #1f2937; }
        .wiz-rd-when { color: rgba(255,255,255,0.55); }
        .wiz-rd-what { color: #ffffff; }
        .wiz-rd-note { color: rgba(255,255,255,0.72); }

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

        /* Cross-link back to SCE */
        .wiz-crosslink { background: rgba(255,255,255,0.04); border-color: #1f2937; }
        .wiz-crosslink-text { color: rgba(255,255,255,0.78); }
        .wiz-crosslink-text b { color: #ffffff; }
        .wiz-crosslink a { color: var(--red); }
      `}</style>

      {/* ─── Hero ─────────────────────────────────────────────────── */}
      <section className="wiz-hero">
        <div className="wiz-eyebrow"><span className="dot" /> Early-access list · open</div>
        <div className="wiz-metric">
          <span className="num">5 minutes</span>
          <span className="lbl">from sign-in to first answer · for any platform</span>
        </div>
        <h1 className="wiz-h1">
          Your team has the tools.<br/>
          <span className="accent">The Wizard makes them usable.</span>
        </h1>
        <p className="wiz-sub">
          A short AI interview with each user &mdash; role, daily checks, the words they actually use &mdash;
          then it builds 5&ndash;8 personalized shortcuts they can trigger from anywhere with <kbd style={{ padding: "2px 7px", background: "var(--paper-2)", border: "1px solid var(--ink-faint)", borderRadius: 5, fontFamily: "var(--font-mono)", fontSize: 13 }}>⌘K</kbd>.
          The Wizard ends, the value persists.
        </p>
        <button type="button" className="wiz-cta-primary" onClick={scrollToForm}>
          Get early access &rarr;
        </button>
        <div className="wiz-mini">No credit card. We'll reach out when it's ready for your stack.</div>

        <div className="wiz-platforms">
          <span className="wiz-platform">Shipping Clarity SCE · live</span>
          <span className="wiz-platform coming">Salesforce · Q4 2026</span>
          <span className="wiz-platform coming">NetSuite · 2027</span>
          <span className="wiz-platform coming">HubSpot · 2027</span>
          <span className="wiz-platform coming">Your platform? Tell us</span>
        </div>
      </section>

      {/* ─── Why this exists ───────────────────────────────────────── */}
      <section className="wiz-section alt">
        <div className="wiz-wrap">
          <h2 className="wiz-section-h">Most software is wasted because nobody uses it right.</h2>
          <p className="wiz-section-sub">
            Salesforce, NetSuite, your WMS &mdash; rich tools, generic dashboards.
            New hires get a 2-hour walkthrough then drown for a month. Old hires built workarounds in spreadsheets.
            The Wizard fixes the missing layer: <b>personal configuration</b> in five minutes, in their own language.
          </p>
        </div>
      </section>

      {/* ─── How it works (dark) ──────────────────────────────────── */}
      <section className="wiz-section dark">
        <div className="wiz-wrap" style={{ textAlign: "center" }}>
          <h2 className="wiz-section-h">How it works.</h2>
          <p className="wiz-section-sub">
            Four questions. No admin in the loop. Each shortcut runs a real query against the underlying platform's API.
          </p>
        </div>
        <div className="wiz-steps">
          <div className="wiz-step">
            <div className="wiz-step-n">1</div>
            <h3 className="wiz-step-h">Role</h3>
            <p className="wiz-step-b">One line in their own words.</p>
            <div className="wiz-step-ex">they type: <b>"AE managing 80 mid-market accounts"</b></div>
          </div>
          <div className="wiz-step">
            <div className="wiz-step-n">2</div>
            <h3 className="wiz-step-h">Daily checks</h3>
            <p className="wiz-step-b">What they look at every day.</p>
            <div className="wiz-step-ex">they type: <b>"Late renewals, accounts at risk, who's silent for 30 days"</b></div>
          </div>
          <div className="wiz-step">
            <div className="wiz-step-n">3</div>
            <h3 className="wiz-step-h">Triggers</h3>
            <p className="wiz-step-b">Wizard pulls trigger words from the user's own language.</p>
            <div className="wiz-step-ex">wizard hears: <b>renewals · risk · silent · pipeline</b></div>
          </div>
          <div className="wiz-step">
            <div className="wiz-step-n">4</div>
            <h3 className="wiz-step-h">Review &amp; save</h3>
            <p className="wiz-step-b">Each proposal includes "why we suggested this." Keep what fits.</p>
            <div className="wiz-step-ex"><b>5&ndash;8 shortcuts</b> &middot; user keeps the right 4 &middot; <kbd style={{ padding: "1px 5px", background: "rgba(255,255,255,0.14)", border: "1px solid rgba(255,255,255,0.22)", borderRadius: 4, fontFamily: "var(--font-mono)", fontSize: 11 }}>⌘K</kbd> live</div>
          </div>
        </div>
      </section>

      {/* ─── Why this is different ─────────────────────────────────── */}
      <section className="wiz-section">
        <div className="wiz-wrap" style={{ textAlign: "center" }}>
          <h2 className="wiz-section-h">Why this is different.</h2>
          <p className="wiz-section-sub">
            Every "AI onboarding" tool on the market is a tour engine. The Wizard is something else.
          </p>
          <div className="wiz-compare">
            <div className="wiz-compare-tile">
              <div className="wiz-compare-h">Generic onboarding tools</div>
              <div className="wiz-compare-t">Tour-and-checklist engines.</div>
              <p className="wiz-compare-b">Bolted on top. The "AI" generates tour copy for the admin. New users get the same tour as everyone else.</p>
            </div>
            <div className="wiz-compare-tile">
              <div className="wiz-compare-h">In-app help / chatbots</div>
              <div className="wiz-compare-t">Answer questions when asked.</div>
              <p className="wiz-compare-b">Reactive. Helpful in the moment, but the user still has to know what to ask. No persistent value after the chat closes.</p>
            </div>
            <div className="wiz-compare-tile ours">
              <div className="wiz-compare-h">The Wizard</div>
              <div className="wiz-compare-t">Reads how YOU work, configures itself around it.</div>
              <p className="wiz-compare-b">Free text in &rarr; structured shortcuts out. The wizard ends, the muscle memory persists.</p>
              <span className="wiz-compare-pill">our approach</span>
            </div>
          </div>
        </div>
      </section>

      {/* ─── Roadmap ─────────────────────────────────────────────── */}
      <section className="wiz-section alt">
        <div className="wiz-wrap" style={{ textAlign: "center" }}>
          <h2 className="wiz-section-h">Where it's available.</h2>
          <p className="wiz-section-sub">
            We're rolling the Wizard onto one platform at a time, starting with the platforms our early-access list votes for most.
          </p>
          <div className="wiz-roadmap">
            <div className="wiz-rd-tile">
              <div className="wiz-rd-when">Today</div>
              <div className="wiz-rd-what">Shipping Clarity SCE</div>
              <p className="wiz-rd-note">Bundled with our Supply Chain Execution Platform. Live, in production, configuring real warehouses.</p>
            </div>
            <div className="wiz-rd-tile">
              <div className="wiz-rd-when">Q4 2026</div>
              <div className="wiz-rd-what">Salesforce add-on</div>
              <p className="wiz-rd-note">External Client App + OAuth. Personalizes Salesforce for sales, ops, and CS roles. Founding-customer pricing on the early-access list.</p>
            </div>
            <div className="wiz-rd-tile">
              <div className="wiz-rd-when">2027</div>
              <div className="wiz-rd-what">NetSuite, HubSpot, more</div>
              <p className="wiz-rd-note">Voted by the early-access list. Tell us what stack you're on; we'll prioritize the platforms with the most demand.</p>
            </div>
          </div>
        </div>
      </section>

      {/* ─── Lead form ──────────────────────────────────────────── */}
      <section className="wiz-section" ref={formRef}>
        <div className="wiz-wrap">
          <h2 className="wiz-section-h">Get on the early-access list.</h2>
          <p className="wiz-section-sub">
            Tell us what platforms your team uses. We'll reach out as soon as the Wizard is ready for your stack &mdash; and you'll get founding-customer pricing locked in.
          </p>
          <div className="wiz-form-wrap">
            {thanks ? (
              <div className="wiz-form-thanks">
                <h3>You're on the list.</h3>
                <p>I'll reach out personally as soon as the Wizard is ready for your stack.<br/>If you need me sooner, email <a href="mailto:hello@shippingclarity.com">hello@shippingclarity.com</a>.</p>
              </div>
            ) : (
              <form className="wiz-form" onSubmit={handleSubmit}>
                <div className="wiz-field">
                  <label htmlFor="wiz-name">Your name</label>
                  <input id="wiz-name" name="name" type="text" required autoComplete="name" />
                </div>
                <div className="wiz-field">
                  <label htmlFor="wiz-email">Work email</label>
                  <input id="wiz-email" name="email" type="email" required autoComplete="email" />
                </div>
                <div className="wiz-field">
                  <label htmlFor="wiz-company">Company</label>
                  <input id="wiz-company" name="company" type="text" required autoComplete="organization" />
                </div>
                <div className="wiz-field">
                  <label htmlFor="wiz-role">Your role</label>
                  <input id="wiz-role" name="role" type="text" placeholder="e.g. Salesforce admin, Director of Ops" />
                </div>
                <div className="wiz-field full">
                  <label>Which platforms does your team use? (check all)</label>
                  <div className="wiz-platforms-grid">
                    {["Salesforce", "NetSuite", "HubSpot", "SAP", "Manhattan / Blue Yonder", "Other"].map((p) => (
                      <label key={p} className="wiz-checkbox">
                        <input type="checkbox" name="platforms" value={p} />
                        {p}
                      </label>
                    ))}
                  </div>
                </div>
                <div className="wiz-field full">
                  <label htmlFor="wiz-message">What would the Wizard solve for you? (optional)</label>
                  <textarea id="wiz-message" name="message" rows="3" placeholder="A sentence or two — what's broken with how your team uses these tools today." />
                </div>
                {error && <div className="wiz-form-error">{error}</div>}
                <button type="submit" className="wiz-form-submit" disabled={busy}>
                  {busy ? "Sending…" : "Get early access →"}
                </button>
                <p className="wiz-form-note">
                  Separate from the Shipping Clarity SCE founding-customer list. We read every one personally.
                </p>
              </form>
            )}
          </div>
          <div className="wiz-crosslink">
            <div className="wiz-crosslink-text">
              <b>Looking for the full operations platform?</b> Shipping Clarity SCE includes the Wizard plus WMS, TMS, LMS, and the rest of the supply chain stack.
            </div>
            <a
              href="#/wms-software"
              onClick={(e) => { e.preventDefault(); onNav && onNav("wms-software"); }}
            >
              See SCE &rarr;
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

window.WizardPage = WizardPage;
