/* global React, ReactDOM */
// Tabkey hero animation — light Minovaweb look.
// Scene flow:
//   1) Empty form, pill chip visible bottom-right ("32 fields ready")
//   2) Cursor moves to pill → click → menu opens
//   3) Cursor moves to "Fill fields" row → click → menu closes
//   4) Fields fill in rapid sequence with brief highlight
//   5) Cursor moves to Submit → button activates
//   6) Cursor clicks Submit → success toast, hold, loop

const { useState, useEffect, useRef } = React;

// ─── The job application fields ───────────────────────────────────
const FIELDS = [
  { id: "first",    label: "First name",       value: "Alex",                       row: 0, col: 0 },
  { id: "last",     label: "Last name",        value: "Rivera",                     row: 0, col: 1 },
  { id: "email",    label: "Email",            value: "alex.rivera@example.com",    row: 1, col: 0 },
  { id: "phone",    label: "Phone",            value: "555-555-5555",               row: 1, col: 1 },
  { id: "linkedin", label: "LinkedIn URL",     value: "linkedin.com/in/alexrivera", row: 2, col: 0, full: true },
  { id: "location", label: "Current location", value: "Austin, TX",                 row: 3, col: 0 },
  { id: "auth",     label: "Authorized to work in the US?", value: "Yes",           row: 3, col: 1, kind: "select" },
];

const FREE_LIMIT = 3;

// ─── Inline styles (Minovaweb light) ──────────────────────────────
const css = `
  .tk-demo {
    position: relative;
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--mw-border, #E5E7EB);
    box-shadow:
      0 1px 2px rgba(11, 28, 48, 0.04),
      0 18px 48px rgba(11, 28, 48, 0.14);
    overflow: hidden;
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    color: #0B1C30;
  }
  .tk-demo *, .tk-demo *::before, .tk-demo *::after { box-sizing: border-box; }

  /* Browser chrome */
  .tk-chrome {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 14px;
    background: #F5F7FA;
    border-bottom: 1px solid #E5E7EB;
    font-size: 12px; color: #6B7280; font-weight: 500;
  }
  .tk-chrome .lights { display: flex; gap: 6px; }
  .tk-chrome .lights span { width: 11px; height: 11px; border-radius: 50%; background: #D1D5DB; }
  .tk-chrome .url {
    flex: 1; text-align: center; padding: 4px 12px;
    background: #fff; border: 1px solid #E5E7EB; border-radius: 999px;
    color: #0B1C30; font-weight: 500;
  }
  .tk-chrome .url .lock { color: #9CA3AF; margin-right: 6px; }

  /* Form area */
  .tk-form {
    padding: 28px 32px 32px;
    min-height: 480px;
    position: relative;
  }
  .tk-form .eyebrow {
    font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: #0035C5;
  }
  .tk-form h3 {
    font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
    color: #0B1C30; margin: 6px 0 4px;
  }
  .tk-form .sub {
    font-size: 13px; color: #6B7280; margin: 0 0 24px; font-weight: 500;
  }

  /* Fields */
  .tk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
  .tk-row.full { grid-template-columns: 1fr; }

  .tk-field { display: flex; flex-direction: column; gap: 6px; }
  .tk-field label {
    font-size: 12px; font-weight: 500; color: #6B7280;
  }
  .tk-field label .req { color: #C2362B; margin-left: 2px; }
  .tk-ctl {
    position: relative;
    padding: 10px 14px; min-height: 42px;
    background: #fff;
    border: 1px solid #D1D5DB; border-radius: 8px;
    font-size: 14px; color: #0B1C30; font-weight: 500;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    display: flex; align-items: center;
    transition: border-color 240ms cubic-bezier(.2,.8,.2,1),
                background 240ms cubic-bezier(.2,.8,.2,1);
  }
  .tk-ctl.filling {
    border-color: #0035C5;
    background: rgba(0, 53, 197, 0.04);
  }
  .tk-ctl.filled {
    border-color: rgba(0, 53, 197, 0.32);
    background: rgba(0, 53, 197, 0.025);
  }
  .tk-ctl .ph { color: #9CA3AF; font-weight: 400; }
  .tk-ctl .caret {
    display: inline-block; width: 1.5px; height: 14px;
    background: #0035C5; margin-left: 2px; vertical-align: middle;
    animation: caret 700ms steps(1) infinite;
  }
  @keyframes caret { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
  .tk-ctl .chev {
    margin-left: auto; color: #9CA3AF;
  }

  /* Submit */
  .tk-submit-row { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
  .tk-submit {
    padding: 12px 22px; border-radius: 999px; border: 0;
    font: 600 14px/1 "Poppins", sans-serif;
    background: #D1D5DB; color: #fff; cursor: pointer;
    transition: background 240ms cubic-bezier(.2,.8,.2,1),
                box-shadow 240ms cubic-bezier(.2,.8,.2,1),
                transform 120ms;
  }
  .tk-submit.ready {
    background: #0035C5;
    box-shadow: 0 8px 20px rgba(0, 53, 197, 0.28);
  }
  .tk-submit.pressing { transform: translateY(1px); }
  .tk-submit-meta { font-size: 12px; color: #9CA3AF; font-weight: 500; }
  .tk-submit-meta.ok { color: #1F8A5B; }

  /* Pill anchor */
  .tk-pill {
    position: absolute; right: 24px; bottom: 24px;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 14px 8px 8px;
    background: #fff;
    border: 1px solid #E5E7EB; border-radius: 999px;
    box-shadow: 0 12px 28px rgba(11, 28, 48, 0.16);
    font-size: 13.5px; font-weight: 600; color: #0B1C30;
    cursor: pointer; z-index: 6;
    transition: box-shadow 180ms, transform 120ms;
  }
  .tk-pill .mark {
    width: 26px; height: 26px; border-radius: 999px;
    background: #0035C5; color: #fff;
    display: grid; place-items: center;
  }
  .tk-pill .chev2 {
    width: 16px; height: 16px; border-radius: 50%;
    background: #F5F7FA; color: #6B7280;
    display: grid; place-items: center;
    transition: transform 200ms;
  }
  .tk-pill.open .chev2 { transform: rotate(180deg); }

  /* Pill menu (popover above pill) */
  .tk-menu {
    position: absolute; right: 24px; bottom: 76px;
    width: 260px;
    background: #fff;
    border: 1px solid #E5E7EB; border-radius: 14px;
    box-shadow: 0 18px 40px rgba(11, 28, 48, 0.18);
    padding: 6px;
    z-index: 7;
    opacity: 0; transform: translateY(8px) scale(0.98);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity 180ms cubic-bezier(.2,.8,.2,1),
                transform 180ms cubic-bezier(.2,.8,.2,1);
  }
  .tk-menu.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
  .tk-menu .ctx {
    margin: 2px 2px 6px; padding: 10px 12px;
    background: #F5F7FA; border-radius: 10px;
    display: flex; align-items: center; gap: 10px;
  }
  .tk-menu .ctx .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #1F8A5B; box-shadow: 0 0 0 3px rgba(31, 138, 91, 0.18);
    flex-shrink: 0;
  }
  .tk-menu .ctx .ctx-title { font-size: 12.5px; font-weight: 600; color: #0B1C30; }
  .tk-menu .ctx .ctx-sub { font-size: 11px; color: #6B7280; margin-top: 1px; }

  .tk-mrow {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 10px 12px; border: 0;
    background: transparent; color: #0B1C30;
    font: 500 13.5px/1.2 "Poppins", sans-serif;
    text-align: left; border-radius: 8px; cursor: pointer;
    transition: background 120ms;
  }
  .tk-mrow.primary {
    background: #0035C5; color: #fff; font-weight: 600;
  }
  .tk-mrow.primary .icon { color: #fff; }
  .tk-mrow.primary.hover { background: #002BA0; }
  .tk-mrow .icon { color: #6B7280; width: 16px; height: 16px;
                   display: grid; place-items: center; flex-shrink: 0; }
  .tk-mrow .hint { font-size: 12px; color: #9CA3AF; font-weight: 500; }
  .tk-mrow.primary .hint { color: rgba(255,255,255,0.78); }
  .tk-mrow.hover { background: #F5F7FA; }

  .tk-divider { height: 1px; background: #E5E7EB; margin: 6px 8px; }
  .tk-section {
    padding: 10px 12px 4px;
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #9CA3AF;
  }

  /* Cursor */
  .tk-cursor {
    position: absolute; top: 0; left: 0;
    width: 22px; height: 22px;
    pointer-events: none;
    z-index: 10;
    transition: transform 540ms cubic-bezier(.2,.8,.2,1),
                opacity 240ms ease;
    filter: drop-shadow(0 2px 4px rgba(11,28,48,0.25));
  }
  .tk-cursor.ripple::after {
    content: "";
    position: absolute; left: 2px; top: 4px;
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid #0035C5;
    animation: ripple 480ms ease-out forwards;
  }
  @keyframes ripple {
    0% { transform: scale(0.3); opacity: 0.9; }
    100% { transform: scale(1.8); opacity: 0; }
  }

  /* Success toast */
  .tk-toast {
    position: absolute; left: 50%; bottom: 24px;
    transform: translate(-50%, 12px);
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 18px 12px 14px;
    background: #fff;
    border: 1px solid #E5E7EB; border-radius: 999px;
    box-shadow: 0 18px 40px rgba(11, 28, 48, 0.18);
    font-size: 13.5px; font-weight: 600; color: #0B1C30;
    opacity: 0; transition: opacity 240ms, transform 240ms;
    z-index: 8; pointer-events: none;
  }
  .tk-toast.show { opacity: 1; transform: translate(-50%, 0); }
  .tk-toast .check {
    width: 22px; height: 22px; border-radius: 999px;
    background: #1F8A5B; color: #fff;
    display: grid; place-items: center; flex-shrink: 0;
  }
  .tk-toast .meta { font-size: 11.5px; color: #9CA3AF; font-weight: 500; font-family: "Geist Mono", ui-monospace, monospace; }

  /* Free-tier counter chip in the upper right of the form */
  .tk-usage {
    position: absolute; top: 24px; right: 28px; z-index: 4;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 8px;
    background: #F5F7FA;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11px;
    color: #6B7280;
    font-weight: 500;
    letter-spacing: 0;
    transition: background 200ms cubic-bezier(.2,.8,.2,1), color 200ms cubic-bezier(.2,.8,.2,1);
  }
  .tk-usage-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #1F8A5B;
    box-shadow: 0 0 0 3px rgba(31, 138, 91, 0.16);
  }
  .tk-usage-dot.over {
    background: #C2362B;
    box-shadow: 0 0 0 3px rgba(194, 54, 43, 0.16);
  }

  /* Paywall overlay */
  .tk-paywall {
    position: absolute; inset: 0; z-index: 20;
    background: rgba(11, 28, 48, 0.42);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    display: grid; place-items: center;
    animation: tkFadeIn 220ms cubic-bezier(.2,.8,.2,1);
  }
  @keyframes tkFadeIn { from { opacity: 0; } to { opacity: 1; } }
  .tk-paywall-card {
    width: 88%; max-width: 320px;
    background: #fff;
    border-radius: 16px;
    padding: 26px 26px 22px;
    text-align: center;
    box-shadow:
      0 1px 2px rgba(11, 28, 48, 0.06),
      0 28px 60px rgba(11, 28, 48, 0.28);
    animation: tkPop 280ms cubic-bezier(.2,.8,.2,1);
  }
  @keyframes tkPop {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .tk-paywall-card .paywall-lock {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(0, 53, 197, 0.10);
    color: #0035C5;
    display: grid; place-items: center;
    margin: 0 auto 14px;
  }
  .tk-paywall-card .paywall-eyebrow {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10.5px; letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0035C5;
    margin-bottom: 6px;
  }
  .tk-paywall-card h4 {
    font-size: 17px; font-weight: 600; letter-spacing: -0.015em;
    color: #0B1C30; margin: 0 0 8px; line-height: 1.25;
  }
  .tk-paywall-card p {
    font-size: 13px; color: #6B7280; margin: 0 0 14px; line-height: 1.5;
  }
  .tk-paywall-card .paywall-price {
    display: inline-flex; align-items: baseline; gap: 4px;
    margin-bottom: 18px;
  }
  .tk-paywall-card .paywall-price .amount {
    font-size: 28px; font-weight: 600; letter-spacing: -0.03em;
    color: #0B1C30; line-height: 1;
  }
  .tk-paywall-card .paywall-price .per {
    font-size: 12.5px; color: #6B7280; font-family: "Geist Mono", ui-monospace, monospace;
  }
  .paywall-actions {
    display: flex; flex-direction: column; gap: 6px;
  }
  .paywall-cta {
    padding: 11px 18px; border: 0; border-radius: 10px;
    background: #0035C5; color: #fff;
    font: 600 13.5px/1 "Poppins", sans-serif;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 53, 197, 0.24);
    transition: background 180ms cubic-bezier(.2,.8,.2,1);
  }
  .paywall-cta:hover { background: #002BA0; }
  .paywall-ghost {
    padding: 8px 14px; background: transparent;
    color: #6B7280; border: 0;
    font: 500 12.5px/1 "Poppins", sans-serif;
    cursor: pointer;
  }
  .paywall-ghost:hover { color: #0B1C30; }

  @media (max-width: 720px) {
    .tk-form { padding: 22px 18px 26px; }
    .tk-row { grid-template-columns: 1fr; }
    .tk-pill { right: 14px; bottom: 14px; padding: 6px 10px 6px 6px; font-size: 12.5px; }
    .tk-pill .mark { width: 22px; height: 22px; }
    .tk-menu { right: 14px; bottom: 60px; width: 240px; }
  }
`;

// ─── Icons ────────────────────────────────────────────────────────
const I = {
  tabKey: (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor"
         strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 9h14M19 9v6M9 15l-4-3 4-3"/>
    </svg>
  ),
  zap: (
    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor"
         strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
    </svg>
  ),
  scan: (
    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor"
         strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/>
      <path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/>
      <line x1="7" y1="12" x2="17" y2="12"/>
    </svg>
  ),
  eye: (
    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor"
         strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/>
    </svg>
  ),
  pencil: (
    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor"
         strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4z"/>
    </svg>
  ),
  check: (
    <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor"
         strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="20 6 9 17 4 12"/>
    </svg>
  ),
  chevDown: (
    <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor"
         strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="6 9 12 15 18 9"/>
    </svg>
  ),
  lock: (
    <svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor"
         strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>
    </svg>
  ),
  lockLg: (
    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor"
         strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>
    </svg>
  ),
};

// Cursor SVG
const CursorIcon = () => (
  <svg viewBox="0 0 24 24" width="22" height="22" xmlns="http://www.w3.org/2000/svg">
    <path d="M5.5 3.2L19 12l-7.3 1.5L8.7 20 5.5 3.2z"
          fill="#0B1C30" stroke="#fff" strokeWidth="1.2" strokeLinejoin="round"/>
  </svg>
);

// ─── The main component ──────────────────────────────────────────
function FormDemo({ speed = 1 }) {
  const stageRef = useRef(null);
  const pillRef = useRef(null);
  const fillRowRef = useRef(null);
  const submitRef = useRef(null);
  const fieldRefs = useRef({});

  const [cursor, setCursor] = useState({ x: 60, y: 80, visible: false, ripple: false });
  const [menuOpen, setMenuOpen] = useState(false);
  const [hoverItem, setHoverItem] = useState(null);     // which menu row is hovered
  const [filled, setFilled] = useState({});             // id -> typed text
  const [filling, setFilling] = useState(null);         // id currently filling
  const [submitPressing, setSubmitPressing] = useState(false);
  const [done, setDone] = useState(false);
  const [tick, setTick] = useState(0);
  // Freemium counter — how many of the 3 free fills have been used in this demo session.
  const [usedCount, setUsedCount] = useState(0);
  const [paywall, setPaywall] = useState(false);

  const allFilled = FIELDS.every((f) => filled[f.id]);

  useEffect(() => {
    let canceled = false;
    const wait = (ms) => new Promise((r) => setTimeout(r, ms / speed));

    const moveTo = async (el, dx = 14, dy = 14, opts = {}) => {
      if (!el || !stageRef.current) return;
      const stage = stageRef.current.getBoundingClientRect();
      const target = el.getBoundingClientRect();
      setCursor({
        x: target.left - stage.left + dx,
        y: target.top - stage.top + dy,
        visible: true,
        ripple: false,
      });
      await wait(opts.dur || 580);
    };

    const click = async () => {
      setCursor((c) => ({ ...c, ripple: true }));
      await wait(280);
      setCursor((c) => ({ ...c, ripple: false }));
    };

    const typeOut = async (id, text) => {
      const per = Math.max(14, 26 - text.length * 0.3);
      for (let i = 1; i <= text.length; i++) {
        if (canceled) return;
        setFilled((p) => ({ ...p, [id]: text.slice(0, i) }));
        await wait(per);
      }
    };

    const run = async () => {
      // ── Reset ──
      setMenuOpen(false);
      setHoverItem(null);
      setFilled({});
      setFilling(null);
      setSubmitPressing(false);
      setDone(false);
      setPaywall(false);
      setCursor({ x: 60, y: 100, visible: false, ripple: false });

      // Beat 0 — settle
      await wait(700);

      // Beat 1 — cursor enters from upper-left, drifts toward the pill
      setCursor({ x: 120, y: 120, visible: true, ripple: false });
      await wait(500);
      await moveTo(pillRef.current, 18, 18, { dur: 700 });

      // Beat 2 — click pill → menu opens
      await click();
      setMenuOpen(true);
      await wait(380);

      // Beat 3 — cursor moves to "Fill fields" row
      await moveTo(fillRowRef.current, 18, 16);
      setHoverItem("fill");
      await wait(140);
      await click();
      setHoverItem(null);

      // Beat 4 — menu closes, fields begin filling (cursor stays out of the way)
      setMenuOpen(false);
      setCursor((c) => ({ ...c, visible: false }));
      await wait(280);

      for (const f of FIELDS) {
        if (canceled) return;
        setFilling(f.id);
        await wait(120);
        if (f.kind === "select") {
          await wait(140);
          setFilled((p) => ({ ...p, [f.id]: f.value }));
          await wait(140);
        } else {
          await typeOut(f.id, f.value);
        }
        setFilling(null);
        await wait(70);
      }

      // Beat 5 — cursor returns and heads to submit
      await wait(360);
      await moveTo(submitRef.current, 60, 22, { dur: 720 });

      // Beat 6 — click submit
      setSubmitPressing(true);
      await click();
      setSubmitPressing(false);
      setDone(true);

      // Advance the freemium counter. After the 3rd fill, the next loop
      // shows the paywall instead of resetting cleanly.
      const next = usedCount + 1;
      setUsedCount(next);

      // Beat 7 — hold success, then either show paywall or loop
      await wait(2400);
      if (canceled) return;
      if (next >= FREE_LIMIT) {
        // Show the upgrade modal for a beat, then reset the counter and loop.
        setPaywall(true);
        await wait(3400);
        if (canceled) return;
        setPaywall(false);
        setUsedCount(0);
      }
      setTick((t) => t + 1);
    };

    run();
    return () => { canceled = true; };
  }, [tick, speed]);

  // ─── Render helpers ─────────────────────────────────────────────
  const renderField = (f) => {
    const text = filled[f.id] || "";
    const isFilling = filling === f.id;
    const isFilled = !isFilling && !!text;
    return (
      <div className="tk-field" key={f.id}
           ref={(el) => { fieldRefs.current[f.id] = el; }}>
        <label>
          {f.label}<span className="req">*</span>
        </label>
        <div className={"tk-ctl" + (isFilling ? " filling" : isFilled ? " filled" : "")}>
          {text ? (
            <span>
              {text}
              {isFilling && <span className="caret" />}
            </span>
          ) : (
            <span className="ph">
              {f.kind === "select" ? "Select…" : f.label}
            </span>
          )}
          {f.kind === "select" && <span className="chev">{I.chevDown}</span>}
        </div>
      </div>
    );
  };

  const rows = [0, 1, 2, 3];

  return (
    <div className="tk-demo" ref={stageRef}>
      <style>{css}</style>

      {/* Browser chrome */}
      <div className="tk-chrome">
        <div className="lights">
          <span style={{ background: "#FF6058" }} />
          <span style={{ background: "#FFC130" }} />
          <span style={{ background: "#27CA3E" }} />
        </div>
        <div className="url">
          <span className="lock">{I.lock}</span>
          boards.acme.co / careers / senior-product-designer / apply
        </div>
        <div style={{ width: 60 }} />
      </div>

      {/* Form */}
      <div className="tk-form">
        <div className="tk-usage" aria-label="Free applications used">
          <span className={"tk-usage-dot" + (usedCount >= FREE_LIMIT ? " over" : "")} />
          <span>Free · {Math.min(usedCount, FREE_LIMIT)} / {FREE_LIMIT}</span>
        </div>
        <span className="eyebrow">Application</span>
        <h3>Senior Product Designer</h3>
        <p className="sub">Acme Inc · Remote (US) · Full-time</p>

        {rows.map((r) => {
          const inRow = FIELDS.filter((f) => f.row === r);
          const isFull = inRow.length === 1 && inRow[0].full;
          return (
            <div key={r} className={"tk-row" + (isFull ? " full" : "")}
                 style={{ gridTemplateColumns: inRow.length === 1 && !isFull ? "1fr 1fr" : undefined }}>
              {inRow.map(renderField)}
              {inRow.length === 1 && !isFull && <div />}
            </div>
          );
        })}

        <div className="tk-submit-row">
          <button
            ref={submitRef}
            className={"tk-submit" + (allFilled ? " ready" : "") + (submitPressing ? " pressing" : "")}
          >
            Submit application
          </button>
          <span className={"tk-submit-meta" + (done ? " ok" : "")}>
            {done ? "Submitted" : allFilled ? "Ready" : "7 fields"}
          </span>
        </div>
      </div>

      {/* Pill menu (above pill) */}
      <div className={"tk-menu" + (menuOpen ? " show" : "")}>
        <div className="ctx">
          <span className="dot" />
          <div style={{ minWidth: 0, flex: 1 }}>
            <div className="ctx-title">Acme careers · 32 fields ready</div>
            <div className="ctx-sub">boards.acme.co / careers</div>
          </div>
        </div>

        <button
          ref={fillRowRef}
          className={"tk-mrow primary" + (hoverItem === "fill" ? " hover" : "")}
        >
          <span className="icon">{I.zap}</span>
          <span style={{ flex: 1 }}>Fill fields</span>
          <span className="hint">32</span>
        </button>

        <div className="tk-divider" />
        <div className="tk-section">This page</div>
        <button className="tk-mrow">
          <span className="icon">{I.scan}</span>
          <span style={{ flex: 1 }}>Scan page again</span>
        </button>
        <button className="tk-mrow">
          <span className="icon">{I.eye}</span>
          <span style={{ flex: 1 }}>View my profile</span>
        </button>

        <div className="tk-divider" />
        <div className="tk-section">Profile</div>
        <button className="tk-mrow">
          <span className="icon">{I.pencil}</span>
          <span style={{ flex: 1 }}>Edit profile</span>
        </button>
      </div>

      {/* The floating pill */}
      <button
        ref={pillRef}
        className={"tk-pill" + (menuOpen ? " open" : "")}
      >
        <span className="mark">{I.tabKey}</span>
        <span>{done ? "Submitted" : allFilled ? "Ready to submit" : "32 fields ready"}</span>
        <span className="chev2">{I.chevDown}</span>
      </button>

      {/* Cursor overlay */}
      <div
        className={"tk-cursor" + (cursor.ripple ? " ripple" : "")}
        style={{
          transform: `translate(${cursor.x}px, ${cursor.y}px)`,
          opacity: cursor.visible ? 1 : 0,
        }}
      >
        <CursorIcon />
      </div>

      {/* Success toast */}
      <div className={"tk-toast" + (done && !paywall ? " show" : "")}>
        <span className="check">{I.check}</span>
        <span>Filled &amp; submitted in 4.2s</span>
        <span className="meta">
          · {Math.min(usedCount, FREE_LIMIT)} of {FREE_LIMIT} free this month
        </span>
      </div>

      {/* Freemium paywall */}
      {paywall && (
        <div className="tk-paywall">
          <div className="tk-paywall-card">
            <div className="paywall-lock">{I.lockLg}</div>
            <div className="paywall-eyebrow">Free limit reached</div>
            <h4>You’ve filled 3 of 3 free<br/>applications this month.</h4>
            <p>Upgrade to Pro for unlimited fills. Cancel any time.</p>
            <div className="paywall-price">
              <span className="amount">$5</span><span className="per">/ month</span>
            </div>
            <div className="paywall-actions">
              <button className="paywall-cta">Upgrade to Pro</button>
              <button className="paywall-ghost">Wait until next month</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { FormDemo });