// ─────────────────────────────────────────────────────────────────────────
// Apply Forms — three conversational, one-question-at-a-time treatments
// shown as full-screen takeovers triggered by the homepage's "Apply" CTA.
//
// Shared:
//   • 9 questions (name, email, phone, IG, revenue, bottleneck, goal, source)
//   • Strict revenue gate — "Under $25k/mo" routes to a Not-A-Fit screen
//   • Thank-you screen with 24–48h reply timeline
//   • Bold + exclusive tone ("3 slots open · prove you're ready")
//
// Variants:
//   1. Terminal     — full-bleed mono command-line, scope/grid motifs
//   2. Dossier      — split-screen case file with editorial serif headings
//   3. Gatekeeper   — centered cinematic ritual with Roman-numeral counter
// ─────────────────────────────────────────────────────────────────────────

// ─── Calendly ──────────────────────────────────────────────────────────
// Swap this URL for your real Calendly event link. Example:
//   https://calendly.com/your-handle/30min
// The form auto-prefills name + email + phone from the applicant's answers,
// so they land on the calendar with their info already filled in.
const CALENDLY_URL = 'https://calendly.com/abdullahbahey/work-with-us';

// Load the Calendly widget script once on demand.
function useCalendlyScript() {
  React.useEffect(() => {
    if (document.getElementById('__calendly-script')) return;
    const s = document.createElement('script');
    s.id = '__calendly-script';
    s.src = 'https://assets.calendly.com/assets/external/widget.js';
    s.async = true;
    document.body.appendChild(s);
  }, []);
}

function buildCalendlyUrl(answers) {
  const u = new URL(CALENDLY_URL);
  if (answers.name)  u.searchParams.set('name',  answers.name);
  if (answers.email) u.searchParams.set('email', answers.email);
  // Calendly supports up to 10 custom answers via a1…a10 (in question order).
  // a1 is the standard "Please share anything that will help prepare" slot, but
  // most accounts use it for phone. Adjust the mapping below to match your event.
  if (answers.phone)      u.searchParams.set('a1', answers.phone);
  if (answers.instagram)  u.searchParams.set('a2', answers.instagram);
  if (answers.website)    u.searchParams.set('a3', answers.website);
  if (answers.revenue)    u.searchParams.set('a4', answers.revenue);
  if (answers.bottleneck) u.searchParams.set('a5', answers.bottleneck);
  if (answers.goal)       u.searchParams.set('a6', answers.goal);
  if (answers.source)     u.searchParams.set('a7', answers.source);
  // Match the page palette (navy + gold)
  u.searchParams.set('background_color', '0a1428');
  u.searchParams.set('text_color',       'f0e9d6');
  u.searchParams.set('primary_color',    'c9a558');
  u.searchParams.set('hide_gdpr_banner', '1');
  return u.toString();
}

const APPLY_Q = [
  { key: 'name',       type: 'text',     placeholder: '' },
  { key: 'email',      type: 'email',    placeholder: '' },
  { key: 'phone',      type: 'tel',      placeholder: '+1 / +20 / +966 / +971 / etc.' },
  { key: 'instagram',  type: 'text',     placeholder: '@yourbrand' },
  { key: 'website',    type: 'text',     placeholder: 'https://' },
  { key: 'revenue',    type: 'text',     placeholder: 'EGP / USD / SAR / AED / etc.' },
  { key: 'bottleneck', type: 'textarea', placeholder: '' },
  { key: 'goal',       type: 'textarea', placeholder: '' },
  { key: 'source',     type: 'text',     placeholder: '' },
];

function useApplyState() {
  const [step, setStep] = React.useState(-1);
  const [answers, setAnswers] = React.useState({});
  const totalQ = APPLY_Q.length;

  const next = (val) => {
    if (step === -1) { setStep(0); return; }
    if (step === 'disq' || step === 'done') return;
    const q = APPLY_Q[step];
    const newAnswers = { ...answers, [q.key]: val };
    setAnswers(newAnswers);
    if (q.type === 'choice') {
      const opt = q.options.find(o => o.v === val);
      if (opt && opt.disq) { setStep('disq'); return; }
    }
    if (step + 1 >= totalQ) setStep('done');
    else setStep(step + 1);
  };

  const back = () => {
    if (step === 'done' || step === 'disq') { setStep(totalQ - 1); return; }
    if (typeof step !== 'number') return;
    if (step <= 0) { setStep(-1); return; }
    setStep(step - 1);
  };

  const reset = () => { setStep(-1); setAnswers({}); };

  return { step, answers, totalQ, next, back, reset };
}

// Hook: when the active step changes, focus the input (if any).
function useFocusOnStep(ref, step) {
  React.useEffect(() => {
    if (ref.current && typeof ref.current.focus === 'function') {
      try { ref.current.focus(); } catch {}
    }
  }, [step]);
}

// ═════════════════════════════════════════════════════════════════════════
// VARIANT 1 — TERMINAL
// ═════════════════════════════════════════════════════════════════════════

const T_LABEL = [
  'STATE YOUR NAME',
  'PRIMARY EMAIL',
  'WHATSAPP NUMBER',
  'YOUR BRAND\'S INSTAGRAM',
  'YOUR WEBSITE',
  'CURRENT MONTHLY REVENUE',
  'BIGGEST GROWTH BOTTLENECK',
  '90-DAY GOAL',
  'HOW DID YOU FIND US',
];
const T_HINT = [
  'Real name. We verify.',
  'Where should the audit land?',
  'Important: double-check this.',
  '@handle is fine.',
  'Type "none" if you don\'t have one yet.',
  'Real number from the last 90 days. Not a year ago.',
  'In one or two sentences — what\'s actually stuck?',
  '90 days from now — what does winning look like?',
  'One sentence is enough.',
];

function TerminalForm() {
  const { step, answers, totalQ, next, back, reset } = useApplyState();
  const [val, setVal] = React.useState('');
  const inputRef = React.useRef(null);
  React.useEffect(() => { setVal(''); }, [step]);
  useFocusOnStep(inputRef, step);

  const handleSubmit = (e) => {
    e && e.preventDefault();
    if (typeof step !== 'number') return;
    const q = APPLY_Q[step];
    if (q.type === 'choice') return;
    if (!val.trim()) return;
    next(val.trim());
  };

  return (
    <div style={tf.root}>
      <div style={tf.grid} />
      <div style={tf.scanlines} />
      <div style={tf.crosshairTL} />
      <div style={tf.crosshairBR} />

      {/* Top bar */}
      <header style={tf.topbar}>
        <div style={tf.topbarLeft}>
          <span style={tf.topbarDot} />
          <span>APPLY.SYS · ACQUISITION DESK</span>
          <span style={tf.topbarSep}>//</span>
          <span style={{color: '#c8ff2e'}}>03 SLOTS REMAINING · Q3</span>
        </div>
        <div style={tf.topbarRight}>
          {typeof step === 'number' && step >= 0
            ? <>
                <span>{String(step + 1).padStart(2, '0')} / {String(totalQ).padStart(2, '0')}</span>
                <ProgressBar value={(step + 1) / totalQ} color="#c8ff2e" />
              </>
            : <span>{step === 'done' ? 'STATUS · TRANSMITTED' : step === 'disq' ? 'STATUS · BELOW THRESHOLD' : 'STATUS · STANDBY'}</span>}
        </div>
      </header>

      {/* Body */}
      <main style={tf.main}>
        {step === -1 && (
          <div style={tf.intro}>
            <div style={tf.introBadge}>
              <span style={tf.introBadgeDot} />
              APPLY · NOT EVERYONE WILL CLEAR
            </div>
            <h1 style={tf.introTitle}>
              Three brands.<br/>
              <span style={tf.introAccent}>Eight questions.</span><br/>
              No retries.
            </h1>
            <p style={tf.introSub}>
              We close to new accounts after Q3. Below $25k/mo revenue stops here.
              If you're ready, this is where it starts.
            </p>
            <button style={tf.introBtn} onClick={() => next(null)}>
              <span>BEGIN APPLICATION</span>
              <span style={tf.introBtnArrow}>↵</span>
            </button>
            <div style={tf.introFootnote}>
              EST. 4 MIN · ESC TO ABORT
            </div>
          </div>
        )}

        {typeof step === 'number' && step >= 0 && (() => {
          const q = APPLY_Q[step];
          return (
            <form style={tf.qWrap} onSubmit={handleSubmit}>
              <div style={tf.qIndex}>QUESTION {String(step + 1).padStart(2, '0')} / {String(totalQ).padStart(2, '0')} //</div>
              <h2 style={tf.qLabel}>{T_LABEL[step]}.</h2>
              <p style={tf.qHint}>{T_HINT[step]}</p>

              {q.type === 'choice' ? (
                <div style={tf.choiceGrid}>
                  {q.options.map((o, i) => (
                    <button
                      key={o.v}
                      type="button"
                      style={tf.choiceBtn}
                      onClick={() => next(o.v)}
                    >
                      <span style={tf.choiceKey}>[{String.fromCharCode(65 + i)}]</span>
                      <span>{o.label}</span>
                      {o.disq && <span style={tf.choiceWarn}>BELOW THRESHOLD</span>}
                    </button>
                  ))}
                </div>
              ) : (
                <>
                  <div style={tf.inputRow}>
                    <span style={tf.inputCaret}>&gt;</span>
                    {q.type === 'textarea'
                      ? <textarea
                          ref={inputRef}
                          rows={2}
                          value={val}
                          onChange={(e) => setVal(e.target.value)}
                          placeholder={q.placeholder}
                          style={tf.inputArea}
                        />
                      : <input
                          ref={inputRef}
                          type={q.type}
                          value={val}
                          onChange={(e) => setVal(e.target.value)}
                          placeholder={q.placeholder}
                          style={tf.input}
                        />}
                    <span style={tf.inputCursor}>▮</span>
                  </div>
                  <div style={tf.actionRow}>
                    <button type="submit" style={tf.primaryBtn} disabled={!val.trim()}>
                      <span>{step + 1 === totalQ ? 'SUBMIT' : 'CONFIRM'}</span>
                      <span style={tf.primaryBtnArrow}>↵</span>
                    </button>
                    {step > 0 && (
                      <button type="button" style={tf.ghostBtn} onClick={back}>
                        <span style={tf.ghostBtnArrow}>←</span> BACK
                      </button>
                    )}
                  </div>
                </>
              )}
            </form>
          );
        })()}

        {step === 'done' && (
          <div style={tf.endWrap}>
            <div style={{...tf.endBadge, color: '#c8ff2e', borderColor: 'rgba(200,255,46,.4)'}}>
              <span style={tf.introBadgeDot} />
              TRANSMISSION RECEIVED
            </div>
            <h1 style={tf.endTitle}>
              Application <span style={tf.introAccent}>logged.</span>
            </h1>
            <p style={tf.endSub}>
              We review every submission personally. If you're a fit, expect an email
              within 24–48 hours with a link to book the audit call.
            </p>
            <ul style={tf.endList}>
              <li style={tf.endListItem}><span style={tf.endListMark}>01</span> Acquisition desk reviews your numbers + goal</li>
              <li style={tf.endListItem}><span style={tf.endListMark}>02</span> If we can move the needle, you get a calendar link</li>
              <li style={tf.endListItem}><span style={tf.endListMark}>03</span> 30-min audit call — we name the leaks, you decide</li>
            </ul>
            <button style={tf.ghostBtn} onClick={reset}>← BACK TO HOME</button>
          </div>
        )}

        {step === 'disq' && (
          <div style={tf.endWrap}>
            <div style={{...tf.endBadge, color: '#c9a558', borderColor: 'rgba(201,165,88,.4)'}}>
              <span style={{...tf.introBadgeDot, background: '#c9a558', boxShadow: '0 0 8px #c9a558'}} />
              STATUS · NOT A FIT — YET
            </div>
            <h1 style={tf.endTitle}>
              We work with brands<br/>
              doing <span style={tf.introAccent}>$25k+ / month.</span>
            </h1>
            <p style={tf.endSub}>
              You're not there yet — that's fine. Most of our clients weren't either, once.
              Cross the line and come back. We'll be here.
            </p>
            <button style={tf.ghostBtn} onClick={reset}>← BACK TO HOME</button>
          </div>
        )}
      </main>

      <footer style={tf.footer}>
        <span>RETURN to confirm · ESC to abort · 3 slots remain</span>
        <span style={{color: 'rgba(232,232,232,.35)'}}>© 2026 · ACQUISITION DESK</span>
      </footer>
    </div>
  );
}

function ProgressBar({ value, color = '#c8ff2e' }) {
  return (
    <div style={{width: 140, height: 4, background: 'rgba(232,232,232,.1)', position: 'relative'}}>
      <div style={{position: 'absolute', inset: 0, width: `${Math.max(0, Math.min(1, value)) * 100}%`, background: color}} />
    </div>
  );
}

const tf = {
  root: {
    position: 'relative', width: '100%', height: '100%',
    background: '#0a0b0c',
    color: '#e8e8e8',
    fontFamily: '"Geist", -apple-system, sans-serif',
    overflow: 'hidden',
    display: 'flex', flexDirection: 'column',
  },
  grid: {
    position: 'absolute', inset: 0, pointerEvents: 'none',
    backgroundImage: 'linear-gradient(rgba(232,232,232,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(232,232,232,.04) 1px, transparent 1px)',
    backgroundSize: '64px 64px',
    maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 80%)',
  },
  scanlines: {
    position: 'absolute', inset: 0, pointerEvents: 'none',
    backgroundImage: 'repeating-linear-gradient(0deg, rgba(255,255,255,0) 0px, rgba(255,255,255,0) 2px, rgba(255,255,255,.012) 3px)',
  },
  crosshairTL: {position: 'absolute', top: 80, left: 48, width: 18, height: 18, borderTop: '1px solid #c8ff2e', borderLeft: '1px solid #c8ff2e'},
  crosshairBR: {position: 'absolute', bottom: 80, right: 48, width: 18, height: 18, borderBottom: '1px solid #c8ff2e', borderRight: '1px solid #c8ff2e'},

  topbar: {
    position: 'relative', zIndex: 2,
    padding: '20px 48px',
    borderBottom: '1px solid rgba(232,232,232,.08)',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    fontFamily: '"Geist Mono", monospace', fontSize: 11,
    letterSpacing: '0.12em', color: 'rgba(232,232,232,.7)',
  },
  topbarLeft: {display: 'flex', alignItems: 'center', gap: 10},
  topbarRight: {display: 'flex', alignItems: 'center', gap: 14},
  topbarDot: {width: 7, height: 7, borderRadius: '50%', background: '#c8ff2e', boxShadow: '0 0 8px rgba(200,255,46,.7)'},
  topbarSep: {color: 'rgba(232,232,232,.3)'},

  main: {
    position: 'relative', zIndex: 2,
    flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
    padding: '40px 48px',
  },

  intro: {maxWidth: 760, textAlign: 'left'},
  introBadge: {
    display: 'inline-flex', alignItems: 'center', gap: 10,
    padding: '7px 14px', border: '1px solid rgba(232,232,232,.18)',
    fontFamily: '"Geist Mono", monospace', fontSize: 10,
    letterSpacing: '0.16em', color: 'rgba(232,232,232,.75)',
    marginBottom: 32,
  },
  introBadgeDot: {width: 6, height: 6, background: '#c8ff2e', boxShadow: '0 0 8px #c8ff2e'},
  introTitle: {fontSize: 96, lineHeight: 0.97, letterSpacing: '-0.035em', margin: '0 0 32px', fontWeight: 600},
  introAccent: {color: '#c8ff2e', fontStyle: 'italic', fontWeight: 400, fontFamily: '"Newsreader", serif'},
  introSub: {fontSize: 19, lineHeight: 1.55, color: 'rgba(232,232,232,.7)', maxWidth: 560, margin: '0 0 40px'},
  introBtn: {
    background: '#c8ff2e', color: '#0a0b0c',
    padding: '18px 28px', border: 'none', cursor: 'pointer',
    fontFamily: '"Geist Mono", monospace', fontSize: 13, fontWeight: 600,
    letterSpacing: '0.1em',
    display: 'inline-flex', alignItems: 'center', gap: 14,
    transition: 'filter .2s',
  },
  introBtnArrow: {fontSize: 16},
  introFootnote: {
    marginTop: 24,
    fontFamily: '"Geist Mono", monospace', fontSize: 10,
    letterSpacing: '0.16em', color: 'rgba(232,232,232,.4)',
  },

  qWrap: {width: '100%', maxWidth: 880},
  qIndex: {
    fontFamily: '"Geist Mono", monospace', fontSize: 11,
    letterSpacing: '0.18em', color: '#c8ff2e', marginBottom: 18,
  },
  qLabel: {fontSize: 80, lineHeight: 1, letterSpacing: '-0.03em', margin: '0 0 18px', fontWeight: 600},
  qHint: {fontFamily: '"Geist Mono", monospace', fontSize: 12, letterSpacing: '0.05em', color: 'rgba(232,232,232,.5)', margin: '0 0 40px'},

  inputRow: {
    display: 'flex', alignItems: 'flex-start', gap: 14,
    padding: '16px 0',
    borderTop: '1px solid rgba(232,232,232,.12)',
    borderBottom: '1px solid rgba(232,232,232,.12)',
  },
  inputCaret: {color: '#c8ff2e', fontFamily: '"Geist Mono", monospace', fontSize: 32, fontWeight: 600, lineHeight: 1, paddingTop: 4},
  input: {
    flex: 1, background: 'transparent', border: 'none', outline: 'none',
    fontFamily: '"Geist", sans-serif', fontSize: 32, color: '#e8e8e8',
    letterSpacing: '-0.01em', padding: 0,
  },
  inputArea: {
    flex: 1, background: 'transparent', border: 'none', outline: 'none',
    fontFamily: '"Geist", sans-serif', fontSize: 28, color: '#e8e8e8',
    letterSpacing: '-0.005em', padding: 0, resize: 'none', lineHeight: 1.3,
  },
  inputCursor: {color: '#c8ff2e', fontSize: 32, lineHeight: 1, animation: 'blink 1s steps(2) infinite'},

  choiceGrid: {
    display: 'flex', flexDirection: 'column', gap: 10,
    marginTop: 8,
  },
  choiceBtn: {
    background: 'rgba(232,232,232,.02)', border: '1px solid rgba(232,232,232,.12)',
    color: '#e8e8e8', padding: '18px 22px', cursor: 'pointer', textAlign: 'left',
    fontFamily: '"Geist", sans-serif', fontSize: 20, fontWeight: 500,
    display: 'flex', alignItems: 'center', gap: 18,
    transition: 'all .15s',
  },
  choiceKey: {fontFamily: '"Geist Mono", monospace', fontSize: 13, color: '#c8ff2e', minWidth: 32},
  choiceWarn: {
    marginLeft: 'auto',
    fontFamily: '"Geist Mono", monospace', fontSize: 10,
    letterSpacing: '0.14em', color: '#c9a558',
    padding: '4px 10px', border: '1px solid rgba(201,165,88,.35)',
  },

  actionRow: {marginTop: 32, display: 'flex', gap: 14, alignItems: 'center'},
  primaryBtn: {
    background: '#c8ff2e', color: '#0a0b0c',
    padding: '16px 24px', border: 'none', cursor: 'pointer',
    fontFamily: '"Geist Mono", monospace', fontSize: 12, fontWeight: 600,
    letterSpacing: '0.1em',
    display: 'inline-flex', alignItems: 'center', gap: 12,
  },
  primaryBtnArrow: {fontSize: 14},
  ghostBtn: {
    background: 'transparent', color: 'rgba(232,232,232,.65)',
    padding: '16px 18px', border: '1px solid rgba(232,232,232,.18)',
    cursor: 'pointer',
    fontFamily: '"Geist Mono", monospace', fontSize: 11,
    letterSpacing: '0.1em',
    display: 'inline-flex', alignItems: 'center', gap: 10,
  },
  ghostBtnArrow: {fontSize: 12},

  endWrap: {maxWidth: 760},
  endBadge: {
    display: 'inline-flex', alignItems: 'center', gap: 10,
    padding: '7px 14px', border: '1px solid rgba(232,232,232,.18)',
    fontFamily: '"Geist Mono", monospace', fontSize: 10,
    letterSpacing: '0.16em', marginBottom: 32,
  },
  endTitle: {fontSize: 84, lineHeight: 0.97, letterSpacing: '-0.035em', margin: '0 0 24px', fontWeight: 600},
  endSub: {fontSize: 18, lineHeight: 1.55, color: 'rgba(232,232,232,.7)', maxWidth: 560, margin: '0 0 36px'},
  endList: {listStyle: 'none', padding: 0, margin: '0 0 40px', display: 'flex', flexDirection: 'column', gap: 14},
  endListItem: {display: 'flex', alignItems: 'flex-start', gap: 16, fontSize: 16, color: 'rgba(232,232,232,.75)'},
  endListMark: {
    fontFamily: '"Geist Mono", monospace', fontSize: 11,
    color: '#c8ff2e', letterSpacing: '0.1em', paddingTop: 3,
  },

  footer: {
    position: 'relative', zIndex: 2,
    padding: '18px 48px',
    borderTop: '1px solid rgba(232,232,232,.08)',
    display: 'flex', justifyContent: 'space-between',
    fontFamily: '"Geist Mono", monospace', fontSize: 10,
    letterSpacing: '0.14em', color: 'rgba(232,232,232,.55)',
  },
};

// ═════════════════════════════════════════════════════════════════════════
// VARIANT 2 — DOSSIER
// ═════════════════════════════════════════════════════════════════════════

const D_LABEL = [
  'Subject — full name',
  'Primary contact',
  'WhatsApp line',
  'Brand\'s Instagram',
  'Website',
  'Monthly GMV',
  'Identified obstacle',
  '90-day objective',
  'Point of referral',
];
const D_SECTION = [
  'I. Identity',
  'I. Identity',
  'II. Contact',
  'II. Contact',
  'II. Contact',
  'III. Operation',
  'IV. Diagnostic',
  'IV. Diagnostic',
  'V. Source',
];
const D_PROMPT = [
  'On the record. The name your bank account is under works.',
  'Where reports and audits will be sent.',
  'Important: double-check the number is correct.',
  'Instagram is fine — we look at the work first.',
  'Storefront, portfolio, or landing page. Type "none" if there isn\'t one.',
  'The actual number from the last 90 days. Not a year ago.',
  'In plain words — where the operation is bleeding.',
  'The number you want on the board ninety days out.',
  'How this brief landed in your hands.',
];

function DossierForm() {
  const { step, answers, totalQ, next, back, reset } = useApplyState();
  const [val, setVal] = React.useState('');
  const inputRef = React.useRef(null);
  React.useEffect(() => { setVal(''); }, [step]);
  useFocusOnStep(inputRef, step);

  const handleSubmit = (e) => {
    e && e.preventDefault();
    if (typeof step !== 'number') return;
    const q = APPLY_Q[step];
    if (q.type === 'choice') return;
    if (!val.trim()) return;
    next(val.trim());
  };

  // Build a list of completed answers for the left panel
  const filled = Object.entries(answers);

  return (
    <div style={df.root}>
      {/* Left — case file panel */}
      <aside style={df.left}>
        <div style={df.leftHead}>
          <div style={df.leftKicker}>
            <span style={df.leftDot} />
            CASE FILE
          </div>
          <div style={df.leftId}>0247-A</div>
          <div style={df.leftSub}>ACQUISITION DESK · Q3 INTAKE</div>
        </div>

        <div style={df.leftDivider} />

        <div style={df.leftBody}>
          <div style={df.leftLabel}>SECTIONS</div>
          <ol style={df.sectionList}>
            {['I. Identity', 'II. Contact', 'III. Operation', 'IV. Diagnostic', 'V. Source'].map((s) => {
              const idxs = D_SECTION.map((x, i) => x === s ? i : -1).filter(i => i >= 0);
              const done = idxs.every(i => answers[APPLY_Q[i].key] != null);
              const active = typeof step === 'number' && step >= 0 && idxs.includes(step);
              return (
                <li key={s} style={{...df.sectionItem, color: active ? '#c9a558' : done ? '#e8e8e8' : 'rgba(232,232,232,.4)'}}>
                  <span style={{...df.sectionMark,
                    background: done ? '#c9a558' : 'transparent',
                    borderColor: done ? '#c9a558' : active ? '#c9a558' : 'rgba(232,232,232,.3)',
                  }} />
                  {s}
                </li>
              );
            })}
          </ol>

          {filled.length > 0 && (
            <>
              <div style={{...df.leftLabel, marginTop: 36}}>NOTES SO FAR</div>
              <div style={df.notes}>
                {filled.map(([k, v]) => {
                  const i = APPLY_Q.findIndex(q => q.key === k);
                  let display = v;
                  if (APPLY_Q[i].type === 'choice') {
                    display = APPLY_Q[i].options.find(o => o.v === v)?.label || v;
                  }
                  if (typeof display === 'string' && display.length > 48) display = display.slice(0, 48) + '…';
                  return (
                    <div key={k} style={df.note}>
                      <div style={df.noteLbl}>{D_LABEL[i]}</div>
                      <div style={df.noteVal}>{display || '—'}</div>
                    </div>
                  );
                })}
              </div>
            </>
          )}
        </div>

        <div style={df.leftFoot}>
          <div style={df.leftFootLine}>
            <span>3 SLOTS OPEN</span>
            <span style={{color: '#c9a558'}}>● LIVE</span>
          </div>
          <div style={df.leftFootCopy}>
            Acquisition Desk reviews each file by hand. Most files do not move forward.
          </div>
        </div>
      </aside>

      {/* Right — active question */}
      <main style={df.right}>
        {step === -1 && (
          <div style={df.intro}>
            <div style={df.eyebrow}>FOR REVIEW · ACQUISITION DESK</div>
            <h1 style={df.introH}>
              Open a <span style={df.italic}>case file.</span>
            </h1>
            <p style={df.introP}>
              Only 9 questions that will take you less than 120 seconds.
              Three brands make it in. The rest wait until next quarter.
              We keep the roster small on purpose — every brand we take on
              gets the full weight of our team, our systems, and our AI behind it.
            </p>
            <button style={df.primary} onClick={() => next(null)}>
              <span>Open file 0247-A</span>
              <span style={df.primaryArrow}>→</span>
            </button>
          </div>
        )}

        {typeof step === 'number' && step >= 0 && (() => {
          const q = APPLY_Q[step];
          return (
            <form style={df.qWrap} onSubmit={handleSubmit}>
              <div style={df.qSection}>{D_SECTION[step]}</div>
              <div style={df.qIndex}>FIELD {String(step + 1).padStart(2, '0')} / {String(totalQ).padStart(2, '0')}</div>
              <h2 style={df.qLabel}>{D_LABEL[step]}</h2>
              <p style={df.qPrompt}>{D_PROMPT[step]}</p>

              {q.type === 'choice' ? (
                <div style={df.choiceList}>
                  {q.options.map((o) => (
                    <button
                      key={o.v}
                      type="button"
                      style={df.choiceBtn}
                      onClick={() => next(o.v)}
                    >
                      <span>{o.label}</span>
                      <span style={df.choiceArrow}>→</span>
                    </button>
                  ))}
                </div>
              ) : (
                <>
                  <div style={df.inputBox}>
                    {q.type === 'textarea'
                      ? <textarea
                          ref={inputRef}
                          rows={2}
                          value={val}
                          onChange={(e) => setVal(e.target.value)}
                          placeholder={q.placeholder}
                          style={df.inputArea}
                        />
                      : <input
                          ref={inputRef}
                          type={q.type}
                          value={val}
                          onChange={(e) => setVal(e.target.value)}
                          placeholder={q.placeholder}
                          style={df.input}
                        />}
                  </div>
                  <div style={df.actionRow}>
                    {step > 0 && (
                      <button type="button" style={df.ghost} onClick={back}>← Previous field</button>
                    )}
                    <button type="submit" style={df.primary} disabled={!val.trim()}>
                      <span>{step + 1 === totalQ ? 'Submit file' : 'Confirm & continue'}</span>
                      <span style={df.primaryArrow}>→</span>
                    </button>
                  </div>
                </>
              )}
            </form>
          );
        })()}

        {step === 'done' && (
          <div style={df.intro}>
            <div style={{...df.eyebrow, color: '#c9a558'}}>● FILE SUBMITTED</div>
            <h1 style={df.introH}>
              Case <span style={df.italic}>filed.</span>
            </h1>
            <p style={df.introP}>
              Your file is in the review queue. Every application is read by a partner —
              not a form-handler. If we see a fit, we'll be in touch within 24–48 hours.
            </p>
            <div style={df.steps}>
              {[
                ['I',   'Acquisition Desk reads your file in full'],
                ['II',  'If we match, a calendar link arrives by email'],
                ['III', '30-minute audit call — we name three leaks live'],
              ].map(([n, t]) => (
                <div key={n} style={df.stepRow}>
                  <span style={df.stepNum}>{n}</span>
                  <span>{t}</span>
                </div>
              ))}
            </div>
            <button style={df.ghost} onClick={reset}>← Back to homepage</button>
          </div>
        )}

        {step === 'disq' && (
          <div style={df.intro}>
            <div style={{...df.eyebrow, color: '#c9a558'}}>● FILE CLOSED — BELOW INTAKE THRESHOLD</div>
            <h1 style={df.introH}>
              Not a fit — <span style={df.italic}>not yet.</span>
            </h1>
            <p style={df.introP}>
              We take on brands doing $25k/mo or more in revenue. Below that, the math
              doesn't work for either side. Most of our clients started below the line —
              they got there first, then came back. Do the same.
            </p>
            <button style={df.ghost} onClick={reset}>← Back to homepage</button>
          </div>
        )}
      </main>
    </div>
  );
}

const df = {
  root: {
    width: '100%', height: '100%',
    display: 'grid', gridTemplateColumns: '380px 1fr',
    background: '#0d111c',
    color: '#f0e9d6',
    fontFamily: '"Geist", -apple-system, sans-serif',
    overflow: 'hidden',
  },
  left: {
    background: '#0a0e18',
    borderRight: '1px solid rgba(240,233,214,.08)',
    padding: '32px 28px',
    display: 'flex', flexDirection: 'column',
    position: 'relative',
  },
  leftHead: {paddingBottom: 20},
  leftKicker: {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    fontFamily: '"Geist Mono", monospace', fontSize: 10,
    letterSpacing: '0.18em', color: 'rgba(240,233,214,.6)',
    marginBottom: 12,
  },
  leftDot: {width: 6, height: 6, borderRadius: '50%', background: '#c9a558', boxShadow: '0 0 6px #c9a558'},
  leftId: {
    fontFamily: '"Newsreader", serif', fontSize: 44, fontWeight: 500,
    letterSpacing: '-0.02em', lineHeight: 1, color: '#f0e9d6', marginBottom: 8,
  },
  leftSub: {
    fontFamily: '"Geist Mono", monospace', fontSize: 10,
    letterSpacing: '0.14em', color: 'rgba(240,233,214,.4)',
  },
  leftDivider: {height: 1, background: 'rgba(240,233,214,.1)', margin: '8px 0 24px'},
  leftBody: {flex: 1, overflow: 'auto'},
  leftLabel: {
    fontFamily: '"Geist Mono", monospace', fontSize: 10,
    letterSpacing: '0.16em', color: 'rgba(240,233,214,.4)',
    marginBottom: 14,
  },
  sectionList: {listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12},
  sectionItem: {
    display: 'flex', alignItems: 'center', gap: 12,
    fontFamily: '"Newsreader", serif', fontSize: 16, fontStyle: 'italic',
    transition: 'color .2s',
  },
  sectionMark: {
    width: 9, height: 9, border: '1px solid', boxSizing: 'border-box',
  },
  notes: {display: 'flex', flexDirection: 'column', gap: 14},
  note: {
    paddingBottom: 12,
    borderBottom: '1px dashed rgba(240,233,214,.1)',
  },
  noteLbl: {
    fontFamily: '"Geist Mono", monospace', fontSize: 9,
    letterSpacing: '0.14em', color: 'rgba(240,233,214,.45)', marginBottom: 4,
    textTransform: 'uppercase',
  },
  noteVal: {fontSize: 14, color: '#f0e9d6', lineHeight: 1.35},

  leftFoot: {paddingTop: 20, borderTop: '1px solid rgba(240,233,214,.08)'},
  leftFootLine: {
    display: 'flex', justifyContent: 'space-between',
    fontFamily: '"Geist Mono", monospace', fontSize: 10,
    letterSpacing: '0.14em', color: 'rgba(240,233,214,.6)', marginBottom: 10,
  },
  leftFootCopy: {
    fontSize: 11, lineHeight: 1.5, color: 'rgba(240,233,214,.4)', fontStyle: 'italic',
    fontFamily: '"Newsreader", serif',
  },

  right: {
    padding: '64px 80px',
    display: 'flex', alignItems: 'center', justifyContent: 'flex-start',
    position: 'relative',
  },
  intro: {maxWidth: 680},
  eyebrow: {
    fontFamily: '"Geist Mono", monospace', fontSize: 11,
    letterSpacing: '0.18em', color: 'rgba(240,233,214,.55)',
    marginBottom: 32,
  },
  introH: {
    fontSize: 100, lineHeight: 0.95, letterSpacing: '-0.03em',
    margin: '0 0 28px', fontWeight: 500,
    fontFamily: '"Newsreader", serif',
  },
  italic: {fontStyle: 'italic', color: '#c9a558'},
  introP: {fontSize: 19, lineHeight: 1.55, color: 'rgba(240,233,214,.7)', maxWidth: 560, margin: '0 0 18px'},
  steps: {display: 'flex', flexDirection: 'column', gap: 14, margin: '36px 0 40px'},
  stepRow: {display: 'flex', alignItems: 'flex-start', gap: 18, fontSize: 16, color: 'rgba(240,233,214,.75)'},
  stepNum: {
    fontFamily: '"Newsreader", serif', fontSize: 18,
    fontStyle: 'italic', color: '#c9a558', minWidth: 32,
  },

  qWrap: {width: '100%', maxWidth: 820},
  qSection: {
    fontFamily: '"Newsreader", serif', fontSize: 14, fontStyle: 'italic',
    color: '#c9a558', marginBottom: 12, letterSpacing: '-0.005em',
  },
  qIndex: {
    fontFamily: '"Geist Mono", monospace', fontSize: 10,
    letterSpacing: '0.18em', color: 'rgba(240,233,214,.5)',
    marginBottom: 24,
  },
  qLabel: {
    fontSize: 64, lineHeight: 1, letterSpacing: '-0.025em',
    margin: '0 0 16px', fontWeight: 500,
    fontFamily: '"Newsreader", serif',
  },
  qPrompt: {fontSize: 17, lineHeight: 1.55, color: 'rgba(240,233,214,.6)', margin: '0 0 40px', maxWidth: 540, fontStyle: 'italic', fontFamily: '"Newsreader", serif'},

  inputBox: {
    borderBottom: '2px solid rgba(240,233,214,.2)',
    padding: '8px 0',
    transition: 'border-color .2s',
  },
  input: {
    width: '100%', background: 'transparent', border: 'none', outline: 'none',
    fontFamily: '"Newsreader", serif', fontSize: 36, color: '#f0e9d6',
    letterSpacing: '-0.01em', padding: '12px 0',
  },
  inputArea: {
    width: '100%', background: 'transparent', border: 'none', outline: 'none',
    fontFamily: '"Newsreader", serif', fontSize: 28, color: '#f0e9d6',
    letterSpacing: '-0.005em', padding: '12px 0', resize: 'none', lineHeight: 1.35,
  },

  choiceList: {display: 'flex', flexDirection: 'column', gap: 0, borderTop: '1px solid rgba(240,233,214,.1)'},
  choiceBtn: {
    background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left',
    color: '#f0e9d6', padding: '20px 0',
    borderBottom: '1px solid rgba(240,233,214,.1)',
    fontFamily: '"Newsreader", serif', fontSize: 22, fontWeight: 400,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    transition: 'color .15s',
  },
  choiceArrow: {color: '#c9a558', fontFamily: '"Geist Mono", monospace', fontSize: 16},

  actionRow: {marginTop: 36, display: 'flex', gap: 12, alignItems: 'center'},
  primary: {
    background: '#c9a558', color: '#0d111c',
    padding: '16px 26px', border: 'none', cursor: 'pointer',
    fontFamily: '"Geist", sans-serif', fontSize: 15, fontWeight: 600,
    letterSpacing: '-0.005em',
    display: 'inline-flex', alignItems: 'center', gap: 12,
  },
  primaryArrow: {fontSize: 16},
  ghost: {
    background: 'transparent', color: 'rgba(240,233,214,.6)',
    padding: '14px 18px', border: '1px solid rgba(240,233,214,.18)',
    cursor: 'pointer',
    fontFamily: '"Geist", sans-serif', fontSize: 13,
    display: 'inline-flex', alignItems: 'center', gap: 8,
  },
};

// ═════════════════════════════════════════════════════════════════════════
// VARIANT 3 — GATEKEEPER
// ═════════════════════════════════════════════════════════════════════════

const ROMAN = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII'];
const G_LABEL = [
  'First and last name',
  'Your email',
  'WhatsApp number',
  'Your Brand\'s Instagram',
  'Your website',
  'Current monthly revenue',
  'Biggest growth bottleneck',
  'Goal for the next 90 days',
  'Where did you hear about us?',
];
const G_HELP = [
  '',
  '',
  'Important: double-check the number is correct.',
  '',
  '',
  'Important: your real revenue from the last 90 days, not a year ago.',
  '',
  '',
  '',
];

function GatekeeperForm() {
  const { step, answers, totalQ, next, back, reset } = useApplyState();
  const [val, setVal] = React.useState('');
  const inputRef = React.useRef(null);
  React.useEffect(() => { setVal(''); }, [step]);
  useFocusOnStep(inputRef, step);

  // Booking state — set when Calendly fires its `event_scheduled` postMessage.
  const [confirmed, setConfirmed] = React.useState(false);
  React.useEffect(() => {
    if (step === -1) setConfirmed(false);
  }, [step]);

  useCalendlyScript();

  // Listen for Calendly's event_scheduled message to swap to the confirmation card.
  React.useEffect(() => {
    const onMsg = (e) => {
      if (typeof e.data === 'object' && e.data && typeof e.data.event === 'string'
          && e.data.event.indexOf('calendly') === 0
          && e.data.event === 'calendly.event_scheduled') {
        setConfirmed(true);
      }
    };
    window.addEventListener('message', onMsg);
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const handleSubmit = (e) => {
    e && e.preventDefault();
    if (typeof step !== 'number') return;
    const q = APPLY_Q[step];
    if (q.type === 'choice') return;
    if (!val.trim()) return;
    next(val.trim());
  };

  const isQuestion = typeof step === 'number' && step >= 0;
  const q = isQuestion ? APPLY_Q[step] : null;

  return (
    <div style={gf.root}>
      <div style={gf.scope} />
      <div style={gf.scopeH} />

      {/* Edge arrow nav — only during questions */}
      {isQuestion && step > 0 && (
        <button
          type="button"
          aria-label="Previous question"
          style={gf.edgeBtn}
          onClick={back}
        >
          <span style={gf.edgeArrow}>←</span>
        </button>
      )}
      {isQuestion && q.type !== 'choice' && (
        <button
          type="button"
          aria-label="Next question"
          style={{...gf.edgeBtn, ...gf.edgeBtnRight, opacity: val.trim() ? 1 : 0.35}}
          disabled={!val.trim()}
          onClick={() => { if (val.trim()) next(val.trim()); }}
        >
          <span style={gf.edgeArrow}>→</span>
        </button>
      )}

      {/* Top headline — hidden on intro since the title says it */}
      {step !== -1 && (
        <header style={gf.bar}>
          <button style={gf.homeBtn} onClick={reset} type="button">
            <span style={gf.homeBtnArrow}>←</span>
            <span>Homepage</span>
          </button>
          <div style={gf.headlineBadge}>
            <span style={gf.brandMark} />
            ONLY 3 SLOTS LEFT THIS MONTH
          </div>
          <div style={gf.barSpacer} aria-hidden />
        </header>
      )}

      {/* Centered content */}
      <main style={gf.main}>
        {/* Roman numeral marker */}
        {isQuestion && (
          <div style={gf.numeral} aria-hidden>
            <div style={gf.numeralRoman}>{ROMAN[step]}</div>
            <div style={gf.numeralOf}>OF {ROMAN[totalQ - 1]}</div>
          </div>
        )}

        {step === -1 && (
          <div style={gf.center}>
            <h1 style={gf.title}>
              We're picking <span style={gf.titleItal}>three</span><br/>
              brands this month.
            </h1>
            <div style={gf.pillars}>
              <div style={gf.pillar}>
                <div style={gf.pillarIcon} aria-hidden>
                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#c9a558" strokeWidth="1.6">
                    <path d="M5 4h10l4 4v12H5z" strokeLinejoin="round"/>
                    <path d="M15 4v4h4M8 13h8M8 17h5" strokeLinecap="round"/>
                  </svg>
                </div>
                <div style={gf.pillarStat}>9 questions</div>
                <div style={gf.pillarLbl}>That's all we need to know.</div>
              </div>
              <div style={gf.pillarDivider} />
              <div style={gf.pillar}>
                <div style={gf.pillarIcon} aria-hidden>
                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#c9a558" strokeWidth="1.6">
                    <circle cx="12" cy="12" r="9"/>
                    <path d="M12 7v5l3.5 2" strokeLinecap="round"/>
                  </svg>
                </div>
                <div style={gf.pillarStat}>&lt; 120s</div>
                <div style={gf.pillarLbl}>Less than two minutes of your time.</div>
              </div>
              <div style={gf.pillarDivider} />
              <div style={gf.pillar}>
                <div style={gf.pillarIcon} aria-hidden>
                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#c9a558" strokeWidth="1.6">
                    <path d="M12 3l9 5-9 5-9-5 9-5z" strokeLinejoin="round"/>
                    <path d="M3 13l9 5 9-5M3 17l9 5 9-5" strokeLinejoin="round" opacity="0.55"/>
                  </svg>
                </div>
                <div style={gf.pillarStat}>3 spots</div>
                <div style={gf.pillarLbl}>The rest wait until next quarter.</div>
              </div>
            </div>
            <button style={gf.cta} onClick={() => next(null)}>
              <span>Begin application</span>
              <span style={gf.ctaArrow}>→</span>
            </button>

            <div style={gf.process}>
              <div style={gf.processLbl}>WHAT HAPPENS NEXT</div>
              <div style={gf.processRow}>
                <div style={gf.processStep}>
                  <span style={gf.processNum}>01</span>
                  <div>
                    <div style={gf.processTitle}>Submit your application</div>
                    <div style={gf.processCopy}>120 seconds, eight questions.</div>
                  </div>
                </div>
                <div style={gf.processStep}>
                  <span style={gf.processNum}>02</span>
                  <div>
                    <div style={gf.processTitle}>Pick your slot</div>
                    <div style={gf.processCopy}>Qualify and a live calendar opens — choose a 30-min audit call.</div>
                  </div>
                </div>
                <div style={gf.processStep}>
                  <span style={gf.processNum}>03</span>
                  <div>
                    <div style={gf.processTitle}>Show up ready</div>
                    <div style={gf.processCopy}>We've read your file. The call is for naming leaks and next moves.</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {isQuestion && (
          <form style={gf.center} onSubmit={handleSubmit}>
            <h2 style={gf.questionTitle}>{G_LABEL[step]}</h2>
            {G_HELP[step] && <p style={gf.questionHelp}>{G_HELP[step]}</p>}

            {q.type === 'choice' ? (
              <div style={gf.choices}>
                {q.options.map((o) => (
                  <button
                    key={o.v}
                    type="button"
                    style={{...gf.choice, ...(o.disq ? gf.choiceWarn : null)}}
                    onClick={() => next(o.v)}
                  >
                    {o.label}
                  </button>
                ))}
              </div>
            ) : (
              <>
                <div style={gf.inputWrap}>
                  <div style={gf.inputInner}>
                    {q.type === 'textarea'
                      ? <textarea
                          ref={inputRef}
                          rows={2}
                          value={val}
                          onChange={(e) => setVal(e.target.value)}
                          placeholder={q.placeholder}
                          style={gf.inputArea}
                        />
                      : <input
                          ref={inputRef}
                          type={q.type}
                          value={val}
                          onChange={(e) => setVal(e.target.value)}
                          placeholder={q.placeholder}
                          style={gf.input}
                        />}
                  </div>
                </div>
                <div style={gf.actions}>
                  {step > 0 && (
                    <button type="button" style={gf.back} onClick={back}>← Back</button>
                  )}
                  <button type="submit" style={gf.cta} disabled={!val.trim()}>
                    <span>{step + 1 === totalQ ? 'Submit application' : 'Continue'}</span>
                    <span style={gf.ctaArrow}>→</span>
                  </button>
                </div>
              </>
            )}
          </form>
        )}

        {step === 'done' && !confirmed && (
          <div style={gf.center}>
            <div style={{...gf.eyebrow, color: '#c9a558'}}>● APPLICATION ACCEPTED · PICK YOUR SLOT</div>
            <h1 style={gf.title}>
              Lock in <span style={gf.titleItal}>your call.</span>
            </h1>
            <p style={gf.sub}>
              You qualify. Pick a 30-minute audit slot below — we'll have your numbers
              open and three leaks named before you log on.
            </p>

            <div
              className="calendly-inline-widget"
              data-url={buildCalendlyUrl(answers)}
              style={{
                minWidth: 320,
                width: '100%',
                maxWidth: 900,
                height: 720,
                margin: '32px auto 0',
                border: '1px solid rgba(201,165,88,.2)',
                borderRadius: 12,
                overflow: 'hidden',
                background: '#0a1428',
              }}
            />
            <p style={{...gf.sub, fontSize: 13, opacity: 0.55, marginTop: 24}}>
              Trouble loading the calendar? <a href={buildCalendlyUrl(answers)} target="_blank" rel="noopener" style={{color: '#c9a558', textDecoration: 'underline'}}>Open it in a new tab →</a>
            </p>
          </div>
        )}

        {step === 'done' && confirmed && (
          <div style={gf.center}>
            <div style={{...gf.eyebrow, color: '#c9a558'}}>● CALL CONFIRMED</div>
            <h1 style={gf.title}>
              See you <span style={gf.titleItal}>then.</span>
            </h1>
            <div style={gf.confirmCard}>
              <div style={gf.confirmCardLbl}>YOUR AUDIT CALL IS LOCKED IN</div>
              <div style={gf.confirmCardSub}>
                30 minutes · Calendar invite + Google Meet link are in your inbox. Check
                spam if you don't see it within a minute.
              </div>
            </div>
            <p style={gf.sub}>
              Bring last month's ad-account screenshot if you have one — it lets us
              name leaks in the first ten minutes instead of the last ten.
            </p>
            <button style={gf.back} onClick={reset}>← Back to homepage</button>
          </div>
        )}

        {step === 'disq' && (
          <div style={gf.center}>
            <div style={{...gf.eyebrow, color: '#c9a558'}}>● THE GATE IS HONEST</div>
            <h1 style={gf.title}>
              Not the <span style={gf.titleItal}>fit</span> — yet.
            </h1>
            <p style={gf.sub}>
              We work with brands doing $25k/month or more. Below the line, the partnership
              math doesn't pay for either side. Get there — and the gate opens.
            </p>
            <button style={gf.back} onClick={reset}>← Back to homepage</button>
          </div>
        )}
      </main>

      {/* Bottom progress — hidden on intro */}
      {step !== -1 && (
        <footer style={gf.foot}>
          <div style={gf.footProg}>
            {APPLY_Q.map((_, i) => (
              <span
                key={i}
                style={{
                  ...gf.footTick,
                  background: typeof step === 'number' && step >= 0 && i <= step ? '#c9a558' :
                              step === 'done' ? '#c9a558' :
                              'rgba(240,233,214,.15)',
                }}
              />
            ))}
          </div>
          <div style={gf.footCopy}>
            {typeof step === 'number' && step >= 0
              ? `Question ${step + 1} of ${totalQ}`
              : step === 'done' ? 'Application complete'
              : step === 'disq' ? 'Gate held'
              : ''}
          </div>
        </footer>
      )}
    </div>
  );
}

const gf = {
  root: {
    position: 'relative', width: '100%', height: '100%',
    background: 'transparent',
    color: '#f0e9d6',
    fontFamily: '"Geist", -apple-system, sans-serif',
    overflow: 'hidden',
    display: 'flex', flexDirection: 'column',
  },
  scope: {
    position: 'absolute', top: 0, bottom: 0,
    left: '50%', width: 1, background: 'linear-gradient(180deg, transparent, rgba(201,165,88,.18) 30%, rgba(201,165,88,.18) 70%, transparent)',
    pointerEvents: 'none',
  },
  scopeH: {
    position: 'absolute', left: 0, right: 0,
    top: '50%', height: 1, background: 'linear-gradient(90deg, transparent, rgba(201,165,88,.1) 30%, rgba(201,165,88,.1) 70%, transparent)',
    pointerEvents: 'none',
  },

  edgeBtn: {
    position: 'absolute', left: 32, top: '50%', transform: 'translateY(-50%)',
    zIndex: 5,
    width: 56, height: 56, borderRadius: '50%',
    background: 'rgba(201,165,88,.08)', border: '1px solid rgba(201,165,88,.3)',
    color: '#c9a558', cursor: 'pointer',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    transition: 'all .2s',
  },
  edgeBtnRight: {left: 'auto', right: 32},
  edgeArrow: {fontSize: 22, lineHeight: 1, fontFamily: '"Geist", sans-serif'},

  bar: {
    position: 'relative', zIndex: 2,
    padding: '24px 48px',
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    gap: 24,
    fontFamily: '"Geist Mono", monospace', fontSize: 11,
    letterSpacing: '0.16em', color: 'rgba(240,233,214,.7)',
  },
  homeBtn: {
    flex: '0 0 auto',
    background: 'transparent', border: 'none', cursor: 'pointer',
    padding: '8px 4px',
    display: 'inline-flex', alignItems: 'center', gap: 10,
    fontFamily: '"Geist Mono", monospace', fontSize: 11,
    letterSpacing: '0.18em', textTransform: 'uppercase',
    color: 'rgba(240,233,214,.55)',
    transition: 'color .2s',
  },
  homeBtnArrow: {fontSize: 13, lineHeight: 1, color: '#c9a558'},
  barSpacer: {flex: '0 0 auto', width: 110},
  headlineBadge: {
    display: 'inline-flex', alignItems: 'center', gap: 10,
    padding: '8px 16px', border: '1px solid rgba(201,165,88,.35)',
    fontFamily: '"Geist Mono", monospace', fontSize: 11,
    letterSpacing: '0.18em', color: '#c9a558',
  },
  brand: {display: 'flex', alignItems: 'center', gap: 10},
  brandMark: {width: 10, height: 10, background: '#c9a558', boxShadow: '0 0 10px rgba(201,165,88,.6)'},
  barRight: {display: 'flex', alignItems: 'center', gap: 16},

  main: {
    position: 'relative', zIndex: 2,
    flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
    padding: '0 48px',
  },

  numeral: {
    position: 'absolute', left: 80, top: '50%', transform: 'translateY(-50%)',
    pointerEvents: 'none',
    textAlign: 'right',
  },
  numeralRoman: {
    fontFamily: '"Newsreader", serif', fontStyle: 'italic',
    fontSize: 200, lineHeight: 0.9, color: 'rgba(201,165,88,.16)',
    letterSpacing: '-0.04em',
  },
  numeralOf: {
    fontFamily: '"Geist Mono", monospace', fontSize: 11,
    letterSpacing: '0.18em', color: 'rgba(240,233,214,.35)',
    marginTop: 8,
  },

  center: {maxWidth: 720, textAlign: 'center', margin: '0 auto'},

  title: {
    fontSize: 88, lineHeight: 0.97, letterSpacing: '-0.03em',
    margin: '0 0 24px', fontWeight: 500,
    fontFamily: '"Newsreader", serif',
  },
  titleItal: {fontStyle: 'italic', color: '#c9a558'},
  sub: {
    fontSize: 18, lineHeight: 1.6, color: 'rgba(240,233,214,.7)',
    maxWidth: 560, margin: '0 auto 40px',
  },
  cta: {
    background: '#c9a558', color: '#0d111c',
    padding: '18px 30px', border: 'none', cursor: 'pointer',
    fontFamily: '"Geist", sans-serif', fontSize: 16, fontWeight: 600,
    letterSpacing: '-0.005em',
    display: 'inline-flex', alignItems: 'center', gap: 12,
  },
  ctaArrow: {fontSize: 18},
  pillars: {
    display: 'grid', gridTemplateColumns: '1fr 1px 1fr 1px 1fr',
    gap: 24, alignItems: 'center',
    margin: '8px auto 44px', maxWidth: 760,
    padding: '24px 0',
  },
  pillar: {display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 8},
  pillarIcon: {height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 4},
  pillarStat: {
    fontFamily: '"Newsreader", serif', fontStyle: 'italic',
    fontSize: 30, color: '#f0e9d6', letterSpacing: '-0.02em', lineHeight: 1,
  },
  pillarLbl: {
    fontSize: 13, color: 'rgba(240,233,214,.55)', lineHeight: 1.45, maxWidth: 200,
  },
  pillarDivider: {width: 1, height: 56, background: 'rgba(201,165,88,.15)'},

  process: {
    marginTop: 48, paddingTop: 28,
    borderTop: '1px solid rgba(201,165,88,.15)',
    maxWidth: 880,
  },
  processLbl: {
    fontFamily: '"Geist Mono", monospace', fontSize: 10,
    letterSpacing: '0.2em', color: 'rgba(240,233,214,.5)',
    marginBottom: 22,
  },
  processRow: {
    display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32,
    textAlign: 'left',
  },
  processStep: {display: 'flex', gap: 14, alignItems: 'flex-start'},
  processNum: {
    fontFamily: '"Geist Mono", monospace', fontSize: 11,
    letterSpacing: '0.12em', color: '#c9a558',
    paddingTop: 4, minWidth: 22,
  },
  processTitle: {
    fontFamily: '"Newsreader", serif', fontSize: 18, color: '#f0e9d6',
    marginBottom: 4, letterSpacing: '-0.01em',
  },
  processCopy: {fontSize: 13, color: 'rgba(240,233,214,.55)', lineHeight: 1.5},
  eyebrow: {
    fontFamily: '"Geist Mono", monospace', fontSize: 11,
    letterSpacing: '0.2em', color: 'rgba(240,233,214,.55)',
    marginBottom: 28,
  },
  sub: {
    fontSize: 18, lineHeight: 1.6, color: 'rgba(240,233,214,.7)',
    maxWidth: 560, margin: '0 auto 40px',
  },

  questionTitle: {
    fontSize: 64, lineHeight: 1.02, letterSpacing: '-0.025em',
    margin: '0 0 16px', fontWeight: 500,
    fontFamily: '"Newsreader", serif',
  },
  questionHelp: {
    fontSize: 14, lineHeight: 1.5, color: 'rgba(240,233,214,.5)',
    margin: '0 0 44px',
    fontFamily: '"Geist", sans-serif',
  },

  inputWrap: {
    paddingBottom: 14, borderBottom: '2px solid #c9a558',
    margin: '0 auto', maxWidth: 580,
  },
  inputInner: {position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center'},
  fauxCaret: {
    position: 'absolute', left: '50%', transform: 'translateX(-50%)',
    color: '#c9a558', fontSize: 30, lineHeight: 1,
    pointerEvents: 'none',
    animation: 'blink 1s steps(2) infinite',
  },
  input: {
    width: '100%', background: 'transparent', border: 'none', outline: 'none',
    fontFamily: '"Newsreader", serif', fontSize: 28, color: '#f0e9d6',
    textAlign: 'left', padding: 0,
    caretColor: '#c9a558',
  },
  inputArea: {
    width: '100%', background: 'transparent', border: 'none', outline: 'none',
    fontFamily: '"Newsreader", serif', fontSize: 24, color: '#f0e9d6',
    textAlign: 'left', padding: 0, resize: 'none', lineHeight: 1.4,
    caretColor: '#c9a558',
  },

  choices: {
    display: 'flex', flexDirection: 'column', gap: 10,
    maxWidth: 480, margin: '0 auto',
  },
  choice: {
    background: 'transparent', border: '1px solid rgba(240,233,214,.18)',
    color: '#f0e9d6', padding: '16px 22px', cursor: 'pointer',
    fontFamily: '"Newsreader", serif', fontSize: 19,
    transition: 'all .15s',
  },
  choiceWarn: {
    borderColor: 'rgba(201,165,88,.4)',
    color: 'rgba(240,233,214,.55)',
    fontStyle: 'italic',
  },

  actions: {marginTop: 36, display: 'flex', gap: 12, justifyContent: 'center', alignItems: 'center'},
  back: {
    background: 'transparent', color: 'rgba(240,233,214,.55)',
    padding: '14px 18px', border: 'none', cursor: 'pointer',
    fontFamily: '"Geist", sans-serif', fontSize: 13,
  },

  // ─── Booking calendar (post-qualification) ────────────────────────
  bookWrap: {
    maxWidth: 640, margin: '8px auto 0',
    padding: '32px 36px 28px',
    border: '1px solid rgba(201,165,88,.22)',
    background: 'linear-gradient(180deg, rgba(201,165,88,.04) 0%, rgba(201,165,88,.01) 100%)',
    textAlign: 'left',
  },
  bookLabel: {
    fontFamily: '"Geist Mono", monospace', fontSize: 10,
    letterSpacing: '0.22em', color: 'rgba(240,233,214,.5)',
    marginBottom: 14,
  },
  dateRow: {
    display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 6,
  },
  datePill: {
    background: 'transparent',
    border: '1px solid rgba(240,233,214,.14)',
    color: '#f0e9d6', cursor: 'pointer',
    padding: '12px 0 10px',
    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
    transition: 'all .15s', fontFamily: '"Geist", sans-serif',
  },
  datePillActive: {
    background: 'rgba(201,165,88,.12)',
    borderColor: '#c9a558',
    color: '#c9a558',
  },
  dateDow: {fontFamily: '"Geist Mono", monospace', fontSize: 9, letterSpacing: '0.16em', opacity: 0.7},
  dateNum: {fontSize: 22, fontWeight: 500, lineHeight: 1.05, letterSpacing: '-0.01em'},
  dateMon: {fontFamily: '"Geist Mono", monospace', fontSize: 9, letterSpacing: '0.16em', opacity: 0.7},
  timeGrid: {
    display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8,
  },
  timeSlot: {
    background: 'transparent',
    border: '1px solid rgba(240,233,214,.14)',
    color: '#f0e9d6', cursor: 'pointer',
    padding: '14px 0',
    fontFamily: '"Geist Mono", monospace', fontSize: 14, letterSpacing: '0.04em',
    transition: 'all .15s',
  },
  timeSlotActive: {
    background: '#c9a558', borderColor: '#c9a558', color: '#0d111c',
  },
  timeSlotDisabled: {opacity: 0.35, cursor: 'not-allowed'},
  confirmRow: {
    marginTop: 28, display: 'flex', justifyContent: 'center',
  },
  confirmCard: {
    maxWidth: 520, margin: '8px auto 28px',
    padding: '24px 28px',
    border: '1px solid rgba(201,165,88,.4)',
    background: 'rgba(201,165,88,.06)',
    textAlign: 'left',
  },
  confirmCardLbl: {
    fontFamily: '"Geist Mono", monospace', fontSize: 10,
    letterSpacing: '0.22em', color: '#c9a558', marginBottom: 10,
  },
  confirmCardWhen: {
    fontFamily: '"Newsreader", serif', fontSize: 26, color: '#f0e9d6',
    letterSpacing: '-0.01em', marginBottom: 8,
  },
  confirmCardSub: {
    fontFamily: '"Geist", sans-serif', fontSize: 13, color: 'rgba(240,233,214,.6)', lineHeight: 1.5,
  },

  foot: {
    position: 'relative', zIndex: 2,
    padding: '20px 48px',
    display: 'flex', alignItems: 'center', gap: 24,
  },
  footProg: {display: 'flex', gap: 4, flex: 1},
  footTick: {flex: 1, height: 2, transition: 'background .2s'},
  footCopy: {
    fontFamily: '"Geist Mono", monospace', fontSize: 10,
    letterSpacing: '0.18em', color: 'rgba(240,233,214,.4)',
    minWidth: 160, textAlign: 'right',
  },
};

// ─────────────────────────────────────────────────────────────────────────
// Expose to window so the host file can mount them as artboards
// ─────────────────────────────────────────────────────────────────────────
Object.assign(window, { TerminalForm, DossierForm, GatekeeperForm });