// Caliber marketing — composite-page sections.
// New building blocks that exist only on the "best-of" VariantJ:
//   - CancelLinkedInMini   small SaaS toy (replaces the theatrical receipt one)
//   - SavingsCalculator    three-input ROI calculator with live result card
//   - IntegrationsGrid     "works with your stack" tile grid
//   - SecurityStrip        trust badges row
//   - CustomerQuotes       3-up logo + metric + quote cards
//   - SameBriefSplit       side-by-side "same brief, two tools" pane
//   - TickerLive           tiny "placement just happened" marquee

/* ============================================================
   Small helpers
   ============================================================ */
function useCountTo(target, { duration = 700, deps = [target] } = {}) {
  const [v, setV] = React.useState(target);
  const fromRef = React.useRef(target);
  React.useEffect(() => {
    const from = fromRef.current;
    const start = performance.now();
    let raf;
    const step = (now) => {
      const t = Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - t, 3);
      setV(Math.round(from + (target - from) * eased));
      if (t < 1) raf = requestAnimationFrame(step);
      else fromRef.current = target;
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
    // eslint-disable-next-line
  }, deps);
  return v;
}

const fmtNZ = (n) => 'NZ$' + Math.round(n).toLocaleString('en-NZ');

/* ============================================================
   CancelLinkedInMini — minimal SaaS toy
   ============================================================ */
function CancelLinkedInMini({ defaultSeats = 5 }) {
  const [seats, setSeats] = React.useState(defaultSeats);
  const [state, setState] = React.useState('idle'); // idle | working | done
  const [progress, setProgress] = React.useState(0);
  const hostRef = React.useRef(null);

  const perSeat = 12000;
  const fullTotal = seats * perSeat;
  const displayTotal = useCountTo(
    state === 'done' ? 0 : state === 'working' ? Math.max(0, fullTotal - progress * perSeat) : fullTotal,
    { duration: 500, deps: [state, progress, fullTotal] }
  );

  const cancel = () => {
    if (state !== 'idle') return;
    setState('working');
    setProgress(0);
    let i = 0;
    const tick = setInterval(() => {
      i++;
      setProgress(i);
      if (i >= seats) {
        clearInterval(tick);
        setTimeout(() => {
          setState('done');
          if (hostRef.current && typeof fireConfetti === 'function') {
            const r = hostRef.current.getBoundingClientRect();
            fireConfetti(r.left + r.width / 2, r.top + r.height * 0.35, {
              count: 90,
              colors: ['#FF6A3D', '#0009B6', '#22C55E', '#FFFFFF'],
            });
          }
        }, 180);
      }
    }, 140);
  };

  const reset = () => { setState('idle'); setProgress(0); };

  const savedTotal = seats * perSeat;

  return (
    <div ref={hostRef} style={{
      background: '#fff',
      border: '1px solid var(--cal-line)',
      borderRadius: 18,
      padding: 24,
      maxWidth: 440,
      margin: '0 auto',
      boxShadow: '0 20px 48px -28px rgba(0,20,80,0.18)',
      position: 'relative',
    }}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
        <div style={{
          width: 28, height: 28, borderRadius: 6, background: '#0A66C2', color: '#fff',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontWeight: 700, fontSize: 14, fontFamily: 'Arial, sans-serif',
        }}>in</div>
        <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--cal-ink)' }}>
          LinkedIn Recruiter
        </div>
        <div style={{
          marginLeft: 'auto', fontSize: 11, color: 'var(--cal-muted)',
        }}>
          NZ$12k / seat / yr
        </div>
      </div>

      {/* Seat stepper + total */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 18,
        alignItems: 'center', marginBottom: 18,
      }}>
        <div>
          <div style={{
            fontSize: 10, letterSpacing: '0.1em', color: 'var(--cal-muted)',
            textTransform: 'uppercase', marginBottom: 6, fontWeight: 600,
          }}>Seats</div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
            <button
              aria-label="Decrease seats"
              disabled={state !== 'idle' || seats <= 1}
              onClick={() => setSeats(s => Math.max(1, s - 1))}
              style={stepperBtn(state !== 'idle' || seats <= 1)}
            >−</button>
            <div style={{
              minWidth: 36, textAlign: 'center', fontSize: 17, fontWeight: 600,
              fontFeatureSettings: '"tnum"',
              color: 'var(--cal-ink)',
            }}>{seats}</div>
            <button
              aria-label="Increase seats"
              disabled={state !== 'idle' || seats >= 20}
              onClick={() => setSeats(s => Math.min(20, s + 1))}
              style={stepperBtn(state !== 'idle' || seats >= 20)}
            >+</button>
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{
            fontSize: 10, letterSpacing: '0.1em', color: 'var(--cal-muted)',
            textTransform: 'uppercase', marginBottom: 4, fontWeight: 600,
          }}>
            {state === 'done' ? 'You saved' : 'Annual total'}
          </div>
          <div style={{
            fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1,
            color: state === 'done' ? 'var(--cal-accent)' : 'var(--cal-ink)',
            fontFeatureSettings: '"tnum"',
            transition: 'color .3s',
          }}>
            {state === 'done' ? fmtNZ(savedTotal) : fmtNZ(displayTotal)}
          </div>
        </div>
      </div>

      {/* Seat pills — animate to ✓ on cancel */}
      <div style={{
        display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 20,
      }}>
        {Array.from({ length: seats }).map((_, i) => {
          const done = state === 'done' || i < progress;
          return (
            <div key={i} style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '6px 12px', borderRadius: 999,
              fontSize: 11.5, fontWeight: 500,
              border: `1px solid ${done ? 'rgba(22,163,74,0.25)' : 'var(--cal-line)'}`,
              background: done ? '#ECFDF5' : 'var(--cal-bg-soft)',
              color: done ? '#15803D' : 'var(--cal-body)',
              fontFeatureSettings: '"tnum"',
              transition: 'all .25s',
            }}>
              <span style={{
                width: 14, height: 14, borderRadius: 999,
                background: done ? '#22C55E' : '#E5E7EB',
                color: '#fff',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 9, fontWeight: 700,
                transition: 'background .2s',
              }}>{done ? '✓' : i + 1}</span>
              seat {i + 1}
            </div>
          );
        })}
      </div>

      {/* Action */}
      {state !== 'done' ? (
        <button
          onClick={cancel}
          disabled={state === 'working'}
          style={{
            width: '100%', padding: '12px 16px', borderRadius: 12,
            border: 'none', cursor: state === 'working' ? 'wait' : 'pointer',
            background: state === 'working' ? '#9CA3AF' : '#DC2626',
            color: '#fff', fontSize: 14, fontWeight: 600, fontFamily: 'inherit',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            transition: 'background .15s, transform .1s',
            boxShadow: state === 'idle' ? '0 8px 20px -8px rgba(220,38,38,0.45)' : 'none',
          }}
          onMouseDown={e => state === 'idle' && (e.currentTarget.style.transform = 'scale(0.985)')}
          onMouseUp={e => (e.currentTarget.style.transform = 'scale(1)')}
          onMouseLeave={e => (e.currentTarget.style.transform = 'scale(1)')}
        >
          {state === 'working' ? (
            <>
              <span style={{
                display: 'inline-block', width: 12, height: 12, borderRadius: 999,
                border: '2px solid rgba(255,255,255,0.4)', borderTopColor: '#fff',
                animation: 'cal-star-spin .7s linear infinite',
              }} />
              Cancelling {progress}/{seats}…
            </>
          ) : (
            <>Cancel all seats</>
          )}
        </button>
      ) : (
        <div style={{
          display: 'flex', gap: 10, alignItems: 'stretch',
        }}>
          <div style={{
            flex: 1, padding: '12px 14px', borderRadius: 12,
            background: '#ECFDF5', border: '1px solid rgba(22,163,74,0.25)',
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <span style={{
              width: 22, height: 22, borderRadius: 999, background: '#22C55E',
              color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 12, fontWeight: 700, flexShrink: 0,
            }}>✓</span>
            <div style={{ fontSize: 12.5, lineHeight: 1.35, color: '#065F46' }}>
              <div style={{ fontWeight: 600 }}>Every year. Forever.</div>
              <div style={{ opacity: 0.8 }}>Scout does the job, included.</div>
            </div>
          </div>
          <button onClick={reset} style={{
            padding: '0 14px', borderRadius: 12,
            background: '#fff', color: 'var(--cal-body)', border: '1px solid var(--cal-line)',
            fontSize: 12.5, fontWeight: 500, fontFamily: 'inherit', cursor: 'pointer',
          }}>↺</button>
        </div>
      )}
    </div>
  );
}

const stepperBtn = (disabled) => ({
  width: 30, height: 30, borderRadius: 8,
  border: '1px solid var(--cal-line)',
  background: disabled ? 'var(--cal-bg-soft)' : '#fff',
  color: 'var(--cal-ink)', cursor: disabled ? 'not-allowed' : 'pointer',
  fontSize: 16, fontFamily: 'inherit',
  opacity: disabled ? 0.5 : 1,
  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
  transition: 'background .15s',
});

/* ============================================================
   SavingsCalculator — cost-only savings (PR 6.5).
   Inputs: recruiter seats (1–50, escape to typed input), LinkedIn toggle
   with tier selector (Lite/RPS/Corporate) + seat slider, grouped tool chips.
   Output: NET annual savings (LinkedIn + stack consolidation − Caliber Pro cost).
   Primary CTA: "Cancel my seats" fires confetti + catharsis state.
   ============================================================ */
const LINKEDIN_TIERS = [
  { id: 'lite', label: 'Lite',      price: 4700 },
  { id: 'rps',  label: 'RPS',       price: 13000 },
  { id: 'corp', label: 'Corporate', price: 18000 },
];
const CALIBER_PRO_YEARLY = 3588; // NZ$299/seat/mo annual billing × 12

const ATS_TOOLS = [
  { id: 'bullhorn',    name: 'Bullhorn',      cost: 4800 },
  { id: 'jobadder',    name: 'JobAdder',      cost: 3600 },
  { id: 'vincere',     name: 'Vincere',       cost: 4200 },
  { id: 'recruitcrm',  name: 'Recruit CRM',   cost: 3000 },
  { id: 'crelate',     name: 'Crelate',       cost: 3000 },
  { id: 'teamtailor',  name: 'TeamTailor',    cost: 3600 },
  { id: 'workable',    name: 'Workable',      cost: 3000 },
  { id: 'loxo',        name: 'Loxo',          cost: 4200 },
];
const SOURCING_TOOLS = [
  { id: 'gem',         name: 'Gem',           cost: 6000 },
  { id: 'sourcewhale', name: 'SourceWhale',   cost: 3600 },
  { id: 'interseller', name: 'Interseller',   cost: 3600 },
];
const EXTRA_TOOLS = [...ATS_TOOLS, ...SOURCING_TOOLS];

/* Confetti — inline, no deps. Fires from a given (x,y) with brand colors. */
function fireCaliberConfetti(x, y, opts = {}) {
  const count = opts.count || 80;
  const colors = opts.colors || ['#FF6A3D', '#0009B6', '#22C55E', '#FFFFFF', '#FFCD00'];
  for (let i = 0; i < count; i++) {
    const piece = document.createElement('div');
    const color = colors[Math.floor(Math.random() * colors.length)];
    const size = 6 + Math.random() * 6;
    const angle = (Math.random() - 0.5) * Math.PI * 1.2 - Math.PI / 2; // mostly upward
    const velocity = 300 + Math.random() * 350;
    const vx = Math.cos(angle) * velocity;
    const vy = Math.sin(angle) * velocity;
    const rotSpeed = (Math.random() - 0.5) * 900;
    piece.style.cssText = `position:fixed;left:${x}px;top:${y}px;width:${size}px;height:${size * 1.4}px;background:${color};pointer-events:none;z-index:9999;will-change:transform,opacity;border-radius:1px;`;
    document.body.appendChild(piece);
    const start = performance.now();
    const duration = 1400 + Math.random() * 900;
    const gravity = 900;
    const step = (now) => {
      const t = (now - start) / 1000;
      if (t > duration / 1000) { piece.remove(); return; }
      const dx = vx * t;
      const dy = vy * t + 0.5 * gravity * t * t;
      const rot = rotSpeed * t;
      piece.style.transform = `translate(${dx}px, ${dy}px) rotate(${rot}deg)`;
      piece.style.opacity = String(Math.max(0, 1 - (t / (duration / 1000)) * 1.1));
      requestAnimationFrame(step);
    };
    requestAnimationFrame(step);
  }
}
window.fireCaliberConfetti = fireCaliberConfetti;

function SavingsCalculator() {
  const [recruiterSeats, setRecruiterSeats] = React.useState(5);
  const [linkedinEnabled, setLinkedinEnabled] = React.useState(true);
  const [linkedinTier, setLinkedinTier] = React.useState('corp');
  const [linkedinSeats, setLinkedinSeats] = React.useState(3);
  const [selected, setSelected] = React.useState(['bullhorn', 'gem', 'sourcewhale']);
  // Per-tool price overrides — { toolId: number } — resets on deselect (see toggleTool)
  const [priceOverrides, setPriceOverrides] = React.useState({});
  const [cancelled, setCancelled] = React.useState(false);
  const cancelBtnRef = React.useRef(null);

  const getToolPrice = (toolId) => {
    if (priceOverrides[toolId] != null) return priceOverrides[toolId];
    return EXTRA_TOOLS.find(t => t.id === toolId)?.cost ?? 0;
  };

  const toggleTool = (id) => {
    setSelected(s => {
      if (s.includes(id)) {
        // On deselect, clear any override for this tool
        setPriceOverrides(o => {
          if (!(id in o)) return o;
          const next = { ...o };
          delete next[id];
          return next;
        });
        return s.filter(x => x !== id);
      }
      return [...s, id];
    });
    setCancelled(false);
  };

  const setToolPrice = (id, price) => {
    setPriceOverrides(o => ({ ...o, [id]: Math.max(0, Number(price) || 0) }));
    setCancelled(false);
  };

  const tierPrice = (LINKEDIN_TIERS.find(t => t.id === linkedinTier) || LINKEDIN_TIERS[2]).price;
  const tierLabel = (LINKEDIN_TIERS.find(t => t.id === linkedinTier) || LINKEDIN_TIERS[2]).label;

  // Calculations — cost savings minus what you'll actually pay Caliber
  const linkedinSaving = linkedinEnabled ? linkedinSeats * tierPrice : 0;
  const toolSaving = selected.reduce((sum, id) => sum + getToolPrice(id) * recruiterSeats, 0);
  const caliberCost = recruiterSeats * CALIBER_PRO_YEARLY;

  const grossSavings = linkedinSaving + toolSaving;
  const netSavings = Math.max(0, grossSavings - caliberCost);
  const displayTotal = useCountTo(netSavings, { duration: 500, deps: [netSavings] });

  const handleCancel = () => {
    if (cancelled) {
      // After cancel, the button transforms into "Book a demo" — take user there.
      // For now, scroll to the page's CTA Band at the bottom.
      window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });
      return;
    }
    const btn = cancelBtnRef.current;
    if (btn) {
      const r = btn.getBoundingClientRect();
      fireCaliberConfetti(r.left + r.width / 2, r.top + r.height / 2, { count: 120 });
    }
    setCancelled(true);
  };

  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr 1fr',
      border: '1px solid var(--cal-line)', borderRadius: 22,
      background: '#fff', overflow: 'hidden',
      boxShadow: '0 30px 60px -30px rgba(0,20,80,0.15)',
    }}>
      {/* LEFT — inputs (compact) */}
      <div style={{ padding: '28px 28px' }}>

        {/* Recruiter seats slider */}
        <SliderInput
          label="Recruiter seats"
          value={recruiterSeats}
          onChange={setRecruiterSeats}
          min={1} max={50}
          allowOverflow
        />

        {/* LinkedIn row — inline, no sub-card */}
        <div style={{ marginTop: 22 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
            <button
              type="button"
              onClick={() => { setLinkedinEnabled(!linkedinEnabled); setCancelled(false); }}
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: 0, border: 'none', background: 'transparent', cursor: 'pointer',
                fontFamily: 'inherit',
              }}
              aria-pressed={linkedinEnabled}
            >
              <span style={{
                width: 18, height: 18, borderRadius: 999,
                border: `1.5px solid ${linkedinEnabled ? 'var(--cal-blue-ink)' : 'var(--cal-line)'}`,
                background: linkedinEnabled ? 'var(--cal-blue-ink)' : '#fff',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0, transition: 'all .15s',
              }}>
                {linkedinEnabled && (
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
                    <path d="m4 12 5 5L20 6"/>
                  </svg>
                )}
              </span>
              <span style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--cal-body)' }}>
                Cancel LinkedIn Recruiter
              </span>
            </button>
            {linkedinEnabled && (
              <div style={{
                display: 'inline-flex', padding: 2, borderRadius: 999,
                background: 'var(--cal-bg-soft)', border: '1px solid var(--cal-line-2)',
                marginLeft: 'auto',
              }}>
                {LINKEDIN_TIERS.map(tier => {
                  const on = linkedinTier === tier.id;
                  return (
                    <button
                      key={tier.id}
                      onClick={() => { setLinkedinTier(tier.id); setCancelled(false); }}
                      style={{
                        padding: '4px 10px', borderRadius: 999, border: 'none', cursor: 'pointer',
                        background: on ? 'var(--cal-blue-ink)' : 'transparent',
                        color: on ? '#fff' : 'var(--cal-muted)',
                        fontSize: 11, fontWeight: on ? 600 : 500, fontFamily: 'inherit',
                        transition: 'all .15s',
                      }}
                    >
                      {tier.label}
                    </button>
                  );
                })}
              </div>
            )}
          </div>
          {linkedinEnabled && (
            <div style={{ marginTop: 10 }}>
              <SliderInput
                label={<>LinkedIn seats · <span style={{ color: 'var(--cal-muted)', fontWeight: 500 }}>NZ${(tierPrice / 1000).toFixed(tierPrice % 1000 ? 1 : 0)}k each ({tierLabel})</span></>}
                value={linkedinSeats}
                onChange={(v) => { setLinkedinSeats(v); setCancelled(false); }}
                min={1} max={50}
                allowOverflow
              />
            </div>
          )}
        </div>

        {/* Extra tools — flat chip row, per-chip price editing (PR 6.7) */}
        <div style={{ marginTop: 22 }}>
          <div style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--cal-body)', marginBottom: 10 }}>
            Extra tools in your stack
            <span style={{ fontSize: 11, color: 'var(--cal-muted)', fontWeight: 400, marginLeft: 8 }}>
              Tap a price to edit.
            </span>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {EXTRA_TOOLS.map(t => (
              <ToolChip
                key={t.id}
                tool={t}
                on={selected.includes(t.id)}
                price={getToolPrice(t.id)}
                onToggle={toggleTool}
                onPriceChange={setToolPrice}
              />
            ))}
          </div>
        </div>
      </div>

      {/* RIGHT — live result */}
      <div style={{
        background: 'var(--cal-blue-ink)', color: '#fff',
        padding: '28px 28px', position: 'relative', overflow: 'hidden',
      }}>
        {/* Subtle glow */}
        <div aria-hidden style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: 'radial-gradient(400px 300px at 80% -10%, rgba(255,106,61,0.18), transparent 70%)',
        }} />
        <div style={{ position: 'relative' }}>
          <div style={{
            fontSize: 11, letterSpacing: '0.12em', color: 'rgba(255,255,255,0.7)',
            textTransform: 'uppercase', marginBottom: 6, fontWeight: 600,
          }}>Net annual savings with Caliber</div>

          <div style={{
            fontSize: 'clamp(40px, 4.5vw, 58px)', fontWeight: 500,
            letterSpacing: '-0.035em', lineHeight: 1,
            color: cancelled ? 'var(--cal-accent)' : '#fff',
            fontFeatureSettings: '"tnum"', marginBottom: 20,
            transition: 'color .4s',
            textShadow: cancelled ? '0 0 24px rgba(255,106,61,0.5)' : 'none',
          }}>
            {fmtNZ(displayTotal)}
          </div>

          {/* Breakdown */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2, marginBottom: 20 }}>
            {linkedinEnabled && (
              <BreakdownRow
                label="Cancel LinkedIn Recruiter"
                sub={`${linkedinSeats} seat${linkedinSeats === 1 ? '' : 's'} × NZ$${(tierPrice / 1000).toFixed(tierPrice % 1000 ? 1 : 0)}k (${tierLabel})`}
                amount={linkedinSaving}
                sign="+"
              />
            )}
            <BreakdownRow
              label="Stack consolidation"
              sub={selected.length === 0 ? 'No extra tools selected' : `${selected.length} tool${selected.length === 1 ? '' : 's'} × ${recruiterSeats} seat${recruiterSeats === 1 ? '' : 's'}`}
              amount={toolSaving}
              sign="+"
            />
            <BreakdownRow
              label="Caliber Pro"
              sub={`${recruiterSeats} seat${recruiterSeats === 1 ? '' : 's'} × NZ$299/mo`}
              amount={caliberCost}
              sign="-"
            />
          </div>

          <button
            ref={cancelBtnRef}
            onClick={handleCancel}
            className="cal-btn"
            style={{
              width: '100%',
              padding: '16px 24px', fontSize: 16, fontWeight: 600,
              background: 'var(--cal-accent)',
              color: '#fff',
              border: 'none',
              cursor: !linkedinEnabled ? 'default' : 'pointer',
              opacity: !linkedinEnabled ? 0.5 : 1,
              boxShadow: '0 16px 32px -10px rgba(255,106,61,0.55)',
              transition: 'background .25s, box-shadow .25s, transform .15s',
              letterSpacing: '-0.01em',
            }}
          >
            {cancelled
              ? <>✓ Saved {fmtNZ(netSavings)} · Book a demo →</>
              : <>Cancel my seats →</>
            }
          </button>
          <div style={{
            marginTop: 14,
            fontSize: 11,
            color: 'rgba(255,255,255,0.4)',
            fontFamily: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
            letterSpacing: '0.03em',
            lineHeight: 1.55,
            borderTop: '1px solid rgba(255,255,255,0.08)',
            paddingTop: 10,
          }}>
            Net of Caliber Pro cost (NZ$299/seat/mo). LinkedIn tier prices: Lite NZ$4.7k, RPS NZ$13k, Corporate NZ$18k per Vendr + Pin.com 2026. We'll model your exact numbers in 30 min.
          </div>
        </div>
      </div>
    </div>
  );
}

/* Format a NZD price as $X.Xk or $Xk (compact chip display) */
function fmtCompact(n) {
  if (n >= 1000) {
    const k = n / 1000;
    return `$${k % 1 === 0 ? k.toFixed(0) : k.toFixed(1)}k`;
  }
  return `$${n}`;
}

function ToolChip({ tool, on, price, onToggle, onPriceChange }) {
  const [editing, setEditing] = React.useState(false);
  const [draft, setDraft] = React.useState('');
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    if (editing && inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select();
    }
  }, [editing]);

  const commit = () => {
    const n = Number(draft);
    if (!isNaN(n) && n >= 0) onPriceChange(tool.id, n);
    setEditing(false);
  };

  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: on ? '4px 6px 4px 12px' : '7px 14px',
      borderRadius: 999,
      border: `1px solid ${on ? 'var(--cal-blue-ink)' : 'var(--cal-line)'}`,
      background: on ? 'var(--cal-blue-50)' : '#fff',
      transition: 'all .15s',
    }}>
      <button
        onClick={() => { if (!editing) onToggle(tool.id); }}
        style={{
          padding: 0,
          background: 'transparent', border: 'none', cursor: 'pointer',
          color: on ? 'var(--cal-blue-ink)' : 'var(--cal-body)',
          fontSize: 12, fontWeight: on ? 600 : 500, fontFamily: 'inherit',
        }}
      >
        {tool.name}
      </button>
      {on && !editing && (
        <button
          onClick={(e) => { e.stopPropagation(); setDraft(String(price)); setEditing(true); }}
          style={{
            padding: '3px 8px',
            border: '1px solid rgba(0,9,182,0.22)',
            borderRadius: 6,
            background: '#fff',
            color: 'var(--cal-blue-ink)',
            fontSize: 11, fontWeight: 600, fontFamily: 'inherit',
            fontFeatureSettings: '"tnum"',
            cursor: 'text',
            transition: 'border-color .15s, background .15s',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--cal-blue-ink)'; e.currentTarget.style.background = 'var(--cal-blue-50)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(0,9,182,0.22)'; e.currentTarget.style.background = '#fff'; }}
          title="Click to edit"
        >
          {fmtCompact(price)}/seat
        </button>
      )}
      {on && editing && (
        <span style={{
          display: 'inline-flex', alignItems: 'center',
          padding: '3px 8px',
          border: '1px solid var(--cal-blue-ink)',
          borderRadius: 6,
          background: '#fff',
          color: 'var(--cal-blue-ink)',
          boxShadow: '0 0 0 3px rgba(0,9,182,0.12)',
        }}>
          <span style={{ fontSize: 11, opacity: 0.65 }}>$</span>
          <input
            ref={inputRef}
            type="text"
            inputMode="decimal"
            value={draft}
            onChange={(e) => setDraft(e.target.value.replace(/[^\d.]/g, ''))}
            onBlur={commit}
            onKeyDown={(e) => {
              if (e.key === 'Enter') { e.preventDefault(); commit(); }
              if (e.key === 'Escape') { setEditing(false); }
            }}
            style={{
              width: 56,
              padding: '0 4px',
              border: 'none', outline: 'none',
              background: 'transparent',
              color: 'var(--cal-blue-ink)',
              fontSize: 11, fontWeight: 600, fontFamily: 'inherit',
              fontFeatureSettings: '"tnum"',
            }}
          />
          <span style={{ fontSize: 11, opacity: 0.65 }}>/seat</span>
        </span>
      )}
    </span>
  );
}

function SliderInput({ label, value, onChange, min, max, suffix = '', prefix = '', step = 1, allowOverflow = false, helper }) {
  const [overflow, setOverflow] = React.useState(false);
  const pct = ((Math.min(value, max) - min) / (max - min)) * 100;
  const display = prefix ? `${prefix}${value.toLocaleString()}` : `${value}${suffix}`;
  return (
    <div style={{ marginTop: 20 }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        marginBottom: 10,
      }}>
        <div style={{ fontSize: 12.5, color: 'var(--cal-body)', fontWeight: 500 }}>
          {label}
        </div>
        <div style={{
          fontSize: 16, fontWeight: 600, color: 'var(--cal-ink)',
          fontFeatureSettings: '"tnum"',
        }}>
          {display}
        </div>
      </div>
      {!overflow ? (
        <input
          type="range"
          value={Math.min(value, max)}
          min={min} max={max} step={step}
          onChange={e => onChange(Number(e.target.value))}
          style={{
            width: '100%',
            WebkitAppearance: 'none', appearance: 'none',
            height: 4, borderRadius: 999,
            background: `linear-gradient(to right, var(--cal-blue-ink) 0%, var(--cal-blue-ink) ${pct}%, var(--cal-line) ${pct}%, var(--cal-line) 100%)`,
            outline: 'none', cursor: 'pointer',
          }}
          className="cal-range"
        />
      ) : (
        <input
          type="number"
          value={value}
          min={min} step={step}
          onChange={e => onChange(Math.max(min, Number(e.target.value) || min))}
          style={{
            width: '100%',
            padding: '8px 12px', borderRadius: 8,
            border: '1px solid var(--cal-line)',
            fontSize: 14, fontFamily: 'inherit',
            outline: 'none',
          }}
        />
      )}
      {allowOverflow && (
        <div style={{ marginTop: 6, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ fontSize: 11, color: 'var(--cal-muted)' }}>{helper || ''}</span>
          <button
            type="button"
            onClick={() => setOverflow(o => !o)}
            style={{
              background: 'transparent', border: 'none', padding: 0, cursor: 'pointer',
              fontSize: 11, color: 'var(--cal-blue-ink)', fontWeight: 500, fontFamily: 'inherit',
            }}
          >
            {overflow ? `← Back to slider (max ${max})` : `More than ${max}? →`}
          </button>
        </div>
      )}
    </div>
  );
}

function BreakdownRow({ label, sub, amount, sign = '+' }) {
  const display = useCountTo(amount, { duration: 400, deps: [amount] });
  const isCost = sign === '-';
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr auto',
      gap: 12, alignItems: 'baseline',
      padding: '8px 0',
      borderBottom: '1px solid rgba(255,255,255,0.08)',
    }}>
      <div>
        <div style={{ fontSize: 13, fontWeight: 500, color: '#fff' }}>{label}</div>
        <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.55)', marginTop: 2 }}>{sub}</div>
      </div>
      <div style={{
        fontSize: 15, fontWeight: 500,
        color: isCost ? 'rgba(255,255,255,0.55)' : (amount > 0 ? 'var(--cal-accent)' : 'rgba(255,255,255,0.4)'),
        fontFeatureSettings: '"tnum"',
      }}>
        {sign} {fmtNZ(display)}
      </div>
    </div>
  );
}

/* Inject range thumb styles once */
(() => {
  if (document.getElementById('cal-range-style')) return;
  const s = document.createElement('style');
  s.id = 'cal-range-style';
  s.textContent = `
    input[type=range].cal-range::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none;
      width: 18px; height: 18px; border-radius: 999px;
      background: #fff; border: 2px solid var(--cal-blue-ink);
      cursor: pointer; box-shadow: 0 2px 6px rgba(0,9,182,0.25);
      transition: transform .12s;
    }
    input[type=range].cal-range::-webkit-slider-thumb:hover { transform: scale(1.1); }
    input[type=range].cal-range::-moz-range-thumb {
      width: 18px; height: 18px; border-radius: 999px;
      background: #fff; border: 2px solid var(--cal-blue-ink);
      cursor: pointer; box-shadow: 0 2px 6px rgba(0,9,182,0.25);
    }
  `;
  document.head.appendChild(s);
})();

/* ============================================================
   IntegrationsGrid — works-with-your-stack tile grid
   ============================================================ */
const INTEGRATIONS = [
  { name: 'Bullhorn',     cat: 'ATS',      mark: 'BH', color: '#FF6A00' },
  { name: 'Greenhouse',   cat: 'ATS',      mark: 'GH', color: '#23A566' },
  { name: 'JobAdder',     cat: 'ATS',      mark: 'JA', color: '#2C2F99' },
  { name: 'Gmail',        cat: 'Email',    mark: 'Gm', color: '#EA4335' },
  { name: 'Outlook',      cat: 'Email',    mark: 'Ou', color: '#0078D4' },
  { name: 'Google Cal',   cat: 'Calendar', mark: 'GC', color: '#1A73E8' },
  { name: 'Slack',        cat: 'Chat',     mark: 'Sl', color: '#611F69' },
  { name: 'MS Teams',     cat: 'Chat',     mark: 'MT', color: '#4B53BC' },
  { name: 'Zoom',         cat: 'Video',    mark: 'Zm', color: '#2D8CFF' },
  { name: 'Okta',         cat: 'SSO',      mark: 'Ok', color: '#007DC1' },
  { name: 'HubSpot',      cat: 'CRM',      mark: 'Hs', color: '#FF7A59' },
  { name: 'Zapier',       cat: 'Automate', mark: 'Zp', color: '#FF4A00' },
];

function IntegrationsGrid() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
      {INTEGRATIONS.map(t => (
        <div key={t.name} style={{
          background: '#fff', border: '1px solid var(--cal-line)', borderRadius: 14,
          padding: '16px 18px', display: 'flex', alignItems: 'center', gap: 12,
          transition: 'border-color .15s, transform .15s',
        }}
          onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--cal-blue-ink)'; }}
          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--cal-line)'; }}
        >
          <div style={{
            width: 36, height: 36, borderRadius: 8, background: t.color,
            color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 12, fontWeight: 700, letterSpacing: '-0.02em', flexShrink: 0,
          }}>{t.mark}</div>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--cal-ink)' }}>{t.name}</div>
            <div style={{
              fontSize: 10.5, letterSpacing: '0.08em', textTransform: 'uppercase',
              color: 'var(--cal-muted)', marginTop: 2, fontWeight: 600,
            }}>{t.cat}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

/* ============================================================
   SecurityStrip — thin row of trust badges
   ============================================================ */
const SECURITY_BADGES = [
  { t: 'SOC 2 Type II',   d: 'Audited annually' },
  { t: 'GDPR',            d: 'EU data residency' },
  { t: 'ISO 27001',       d: 'In progress · Q3' },
  { t: 'SSO / SAML 2.0',  d: 'Okta, Azure AD, Google' },
  { t: 'AES-256',         d: 'Encryption at rest' },
  { t: 'Audit logs',      d: 'Exportable SIEM feed' },
];

function SecurityStrip() {
  return (
    <div style={{
      background: 'var(--cal-bg-soft)', border: '1px solid var(--cal-line)',
      borderRadius: 16, padding: '20px 24px',
      display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12,
      alignItems: 'start',
    }}>
      {SECURITY_BADGES.map(b => (
        <div key={b.t} style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12.5, fontWeight: 600, color: 'var(--cal-ink)' }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0 }}>
              <path d="M12 2 L20 6 V12 Q20 18 12 22 Q4 18 4 12 V6 Z" stroke="var(--cal-blue-ink)" strokeWidth="1.8" fill="rgba(0,9,182,0.06)"/>
              <path d="M8.5 12 L11 14.5 L15.5 10" stroke="var(--cal-blue-ink)" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            {b.t}
          </div>
          <div style={{ fontSize: 11, color: 'var(--cal-muted)', paddingLeft: 18 }}>{b.d}</div>
        </div>
      ))}
    </div>
  );
}

/* ============================================================
   CustomerQuotes — 3-up (logo + metric + quote)
   ============================================================ */
const QUOTES = [
  {
    logo: 'Kārearea Talent', logoColor: '#0009B6',
    metricLabel: 'Tooling bill',
    metric: '−58%',
    metricColor: '#16A34A',
    quote: 'Cancelled Bullhorn, LinkedIn Recruiter and Gem in the same week. Consultants actually prefer the new tool.',
    name: 'Hana Wetere', role: 'Managing Director',
  },
  {
    logo: 'Summit Search', logoColor: '#FF6A3D',
    metricLabel: 'Placements / quarter',
    metric: '+34%',
    metricColor: 'var(--cal-accent)',
    quote: 'Scout drafts outreach while my team is asleep. Monday mornings are meeting replies, not building searches.',
    name: 'Marcus Lim', role: 'Head of Delivery',
  },
  {
    logo: 'Waharoa Tech', logoColor: '#111827',
    metricLabel: 'Time to first submission',
    metric: '3.2× faster',
    metricColor: 'var(--cal-blue-ink)',
    quote: 'We shortlist in two days instead of ten. Clients think we\'ve hired more recruiters. We haven\'t.',
    name: 'Priya Nair', role: 'Founder',
  },
];

function CustomerQuotes() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
      {QUOTES.map(q => (
        <div key={q.name} style={{
          background: '#fff', border: '1px solid var(--cal-line)', borderRadius: 18,
          padding: 24, display: 'flex', flexDirection: 'column', gap: 20,
          boxShadow: '0 20px 40px -30px rgba(0,20,80,0.15)',
        }}>
          {/* Logo wordmark + metric */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
            <div style={{
              fontSize: 14, fontWeight: 600, color: q.logoColor,
              letterSpacing: '-0.01em',
            }}>{q.logo}</div>
            <div style={{
              fontSize: 11, color: 'var(--cal-muted)', letterSpacing: '0.06em',
              textTransform: 'uppercase', fontWeight: 600,
            }}>{q.metricLabel}</div>
          </div>
          <div style={{
            fontSize: 44, fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1,
            color: q.metricColor, fontFeatureSettings: '"tnum"',
          }}>
            {q.metric}
          </div>

          {/* Quote */}
          <div style={{
            fontSize: 15, lineHeight: 1.55, color: 'var(--cal-body)',
            borderLeft: '2px solid var(--cal-line)', paddingLeft: 14,
          }}>
            "{q.quote}"
          </div>

          {/* Byline */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 'auto' }}>
            <Avatar name={q.name} size={32} />
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--cal-ink)' }}>{q.name}</div>
              <div style={{ fontSize: 11.5, color: 'var(--cal-muted)' }}>{q.role}</div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

/* ============================================================
   SameBriefSplit — side-by-side "same brief, two tools"
   ============================================================ */
function SameBriefSplit() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
      {/* LinkedIn side */}
      <div style={{
        background: '#F3F6F9', borderRadius: 18, padding: 24,
        border: '1px solid #E5E7EB', position: 'relative',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
          <div style={{
            width: 28, height: 28, borderRadius: 6, background: '#0A66C2',
            color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 700, fontSize: 14, fontFamily: 'Arial, sans-serif',
          }}>in</div>
          <div style={{ fontSize: 13, fontWeight: 600 }}>LinkedIn Recruiter · Boolean</div>
        </div>
        <div style={{
          background: '#fff', border: '1px solid #D0D7DE', borderRadius: 8, padding: 14,
          fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace', fontSize: 12.5, lineHeight: 1.55,
          color: '#24292F', minHeight: 150,
        }}>
          <div style={{ color: '#6E7781', fontSize: 10.5, marginBottom: 8, fontFamily: 'var(--cal-font)' }}>
            Keywords (Boolean)
          </div>
          <div>
            <span style={{ color: '#CF222E' }}>(</span>"React" <span style={{ color: '#CF222E' }}>OR</span> "ReactJS"<span style={{ color: '#CF222E' }}>)</span> <span style={{ color: '#CF222E' }}>AND</span> <span style={{ color: '#CF222E' }}>(</span>"Senior" <span style={{ color: '#CF222E' }}>OR</span> "Lead"<span style={{ color: '#CF222E' }}>)</span> <span style={{ color: '#CF222E' }}>AND</span> "Auckland" <span style={{ color: '#CF222E' }}>NOT</span> <span style={{ color: '#CF222E' }}>(</span>"junior" <span style={{ color: '#CF222E' }}>OR</span> "graduate"<span style={{ color: '#CF222E' }}>)</span>
          </div>
        </div>
        <div style={{
          marginTop: 14, display: 'inline-flex', alignItems: 'center', gap: 8,
          fontSize: 11.5, color: '#6F4E00', padding: '6px 10px', borderRadius: 999,
          background: '#FFF3D9', border: '1px solid #F2CC6B',
        }}>
          847 of 1,000 monthly searches used
        </div>
      </div>

      {/* Scout side */}
      <div style={{
        background: 'var(--cal-blue-ink)', borderRadius: 18, padding: 24,
        color: '#fff', position: 'relative',
        boxShadow: '0 30px 60px -30px rgba(0,9,182,0.45)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
          <div style={{
            width: 28, height: 28, borderRadius: 6, background: 'rgba(255,255,255,0.15)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <CalStar size={16} grad={false} style={{ color: '#fff' }} />
          </div>
          <div style={{ fontSize: 13, fontWeight: 600 }}>Scout · plain English</div>
          <span style={{
            fontSize: 10, fontWeight: 600, letterSpacing: '0.06em',
            padding: '3px 8px', borderRadius: 999,
            background: 'var(--cal-accent)', color: '#fff',
            marginLeft: 'auto', textTransform: 'uppercase',
          }}>Included</span>
        </div>
        <div style={{
          background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.12)',
          borderRadius: 8, padding: 14, fontSize: 15.5, lineHeight: 1.5,
          minHeight: 150, display: 'flex', alignItems: 'center',
        }}>
          "Senior accountant in Auckland with Xero experience."<span className="cal-blink" style={{ color: 'var(--cal-accent)', marginLeft: 4 }}>|</span>
        </div>
        <div style={{
          marginTop: 14, display: 'inline-flex', alignItems: 'center', gap: 8,
          fontSize: 11.5, padding: '6px 10px', borderRadius: 999,
          background: 'rgba(34,197,94,0.18)', border: '1px solid rgba(34,197,94,0.35)',
          color: '#86EFAC',
        }}>
          Unlimited searches · 2.4B+ profiles scanned
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   TickerLive — tiny ticker: recent placements scroll
   ============================================================ */
const TICKER_ITEMS = [
  'Senior React engineer placed in Auckland · 14 min ago',
  'Staff Data Scientist submitted to Xero · 23 min ago',
  '3 candidates shortlisted for Product Lead role · 38 min ago',
  'First reply from outreach to Anika R. · 51 min ago',
  'Contract signed by Kārearea Talent · 1 hr ago',
  'Scout drafted 27 outreach messages overnight · 4 hrs ago',
];

function TickerLive() {
  return (
    <div style={{
      background: 'var(--cal-bg-soft)',
      borderTop: '1px solid var(--cal-line)',
      borderBottom: '1px solid var(--cal-line)',
      overflow: 'hidden', position: 'relative',
    }}>
      <div style={{
        display: 'inline-flex', gap: 40, padding: '14px 0',
        whiteSpace: 'nowrap',
        animation: 'cal-ticker-scroll 60s linear infinite',
      }}>
        {[...TICKER_ITEMS, ...TICKER_ITEMS, ...TICKER_ITEMS].map((t, i) => (
          <div key={i} style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            fontSize: 12.5, color: 'var(--cal-body)',
          }}>
            <span style={{
              width: 7, height: 7, borderRadius: 999, background: '#22C55E',
              boxShadow: '0 0 0 3px rgba(34,197,94,0.2)',
              flexShrink: 0,
            }} />
            {t}
          </div>
        ))}
      </div>
    </div>
  );
}

/* Ticker keyframes */
(() => {
  if (document.getElementById('cal-ticker-style')) return;
  const s = document.createElement('style');
  s.id = 'cal-ticker-style';
  s.textContent = `
    @keyframes cal-ticker-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-33.333%); }
    }
  `;
  document.head.appendChild(s);
})();

/* ============================================================
   JobMarketplace — "Post once. Reach thousands."
   Per audit v7 §S12: 39-board wordmark marquee, authored per-brand
   styling (Appendix E). Stack Overflow CUT (shut down March 2022).
   Direct Apply claim narrowed to SEEK only per dev verification.
   ============================================================ */
const JOB_BOARD_WORDMARKS = [
  { name: 'LinkedIn',              color: '#0A66C2', font: 'Source Sans 3',    weight: 700, italic: false, uppercase: false, tracking: '-0.01em' },
  { name: 'Indeed',                color: '#003A9B', font: 'Work Sans',        weight: 700, italic: false, uppercase: false, tracking: '-0.02em' },
  { name: 'Google for Jobs',       color: '#4285F4', font: 'DM Sans',          weight: 500, italic: false, uppercase: false, tracking: '-0.015em' },
  { name: 'Monster',               color: '#6E46AE', font: 'Archivo Black',    weight: 900, italic: false, uppercase: false, tracking: '-0.02em' },
  { name: 'ZipRecruiter',          color: '#5A9E3E', font: 'Nunito Sans',      weight: 800, italic: false, uppercase: false, tracking: '-0.02em' },
  { name: 'Glassdoor',             color: '#0CAA41', font: 'Nunito',           weight: 700, italic: false, uppercase: false, tracking: '-0.01em' },
  { name: 'Talent.com',            color: '#1D9BFF', font: 'DM Sans',          weight: 600, italic: false, uppercase: false, tracking: '-0.02em' },
  { name: 'Adzuna',                color: '#F42957', font: 'Rubik',            weight: 700, italic: false, uppercase: false, tracking: '-0.01em' },
  { name: 'SEEK',                  color: '#E60278', font: 'Jost',             weight: 800, italic: false, uppercase: false, tracking: '-0.02em' },
  { name: 'Trade Me Jobs',         color: '#DC0A1E', font: 'Barlow',           weight: 800, italic: false, uppercase: false, tracking: '-0.01em' },
  { name: 'Jora',                  color: '#5842D6', font: 'Quicksand',        weight: 700, italic: false, uppercase: false, tracking: '-0.02em' },
  { name: 'CareerOne',             color: '#ED1C24', font: 'Barlow',           weight: 700, italic: false, uppercase: false, tracking: '-0.01em' },
  { name: 'Reed',                  color: '#E4003A', font: 'Playfair Display', weight: 900, italic: false, uppercase: false, tracking: '-0.02em' },
  { name: 'Totaljobs',             color: '#FF6600', font: 'Nunito',           weight: 800, italic: false, uppercase: false, tracking: '-0.02em' },
  { name: 'CV-Library',            color: '#0F2E5F', font: 'Inter',            weight: 700, italic: false, uppercase: false, tracking: '0'       },
  { name: 'Jobsite',               color: '#00A7E1', font: 'Work Sans',        weight: 700, italic: false, uppercase: false, tracking: '-0.01em' },
  { name: 'InfoJobs',              color: '#0065FF', font: 'Source Sans 3',    weight: 800, italic: false, uppercase: false, tracking: '-0.02em' },
  { name: 'StepStone',             color: '#154BAF', font: 'DM Sans',          weight: 700, italic: false, uppercase: false, tracking: '-0.02em' },
  { name: 'Dice',                  color: '#D61F22', font: 'Barlow Condensed', weight: 700, italic: false, uppercase: true,  tracking: '0.02em'  },
  { name: 'Wellfound',             color: '#000000', font: 'Space Grotesk',    weight: 600, italic: false, uppercase: false, tracking: '-0.03em' },
  { name: 'XING',                  color: '#026466', font: 'Work Sans',        weight: 700, italic: false, uppercase: true,  tracking: '0.02em'  },
  { name: 'Welcome to the Jungle', color: '#E6B800', font: 'Fraunces',         weight: 600, italic: true,  uppercase: false, tracking: '-0.02em' },
  { name: 'Naukri',                color: '#304878', font: 'Work Sans',        weight: 700, italic: false, uppercase: false, tracking: '-0.02em' },
  { name: 'JobsDB',                color: '#ED5F00', font: 'Work Sans',        weight: 700, italic: false, uppercase: false, tracking: '-0.01em' },
  { name: 'Jobstreet',             color: '#0047BD', font: 'DM Sans',          weight: 700, italic: false, uppercase: false, tracking: '-0.02em' },
  { name: 'Jobserve',              color: '#FF6600', font: 'Barlow Condensed', weight: 700, italic: false, uppercase: false, tracking: '-0.01em' },
  { name: 'CareerBuilder',         color: '#F58220', font: 'Ubuntu',           weight: 700, italic: false, uppercase: false, tracking: '-0.02em' },
  { name: 'Snagajob',              color: '#F7941E', font: 'Fredoka',          weight: 600, italic: false, uppercase: false, tracking: '-0.01em' },
  { name: 'Jooble',                color: '#EF4B24', font: 'DM Sans',          weight: 700, italic: false, uppercase: false, tracking: '-0.01em' },
  { name: 'Careerjet',             color: '#005AA7', font: 'Work Sans',        weight: 700, italic: false, uppercase: false, tracking: '0'       },
  { name: 'SimplyHired',           color: '#6DBE45', font: 'Nunito',           weight: 600, italic: false, uppercase: false, tracking: '-0.01em' },
  { name: 'Hired',                 color: '#1E2026', font: 'Space Grotesk',    weight: 600, italic: false, uppercase: false, tracking: '-0.03em' },
  { name: 'Built In',              color: '#F85E2A', font: 'Space Grotesk',    weight: 700, italic: false, uppercase: false, tracking: '-0.02em' },
  { name: 'We Work Remotely',      color: '#FF761C', font: 'Bitter',           weight: 700, italic: false, uppercase: false, tracking: '-0.01em' },
  { name: 'FlexJobs',              color: '#1A3664', font: 'Work Sans',        weight: 700, italic: false, uppercase: false, tracking: '-0.01em' },
  { name: 'Dribbble',              color: '#EA4C89', font: 'Quicksand',        weight: 800, italic: false, uppercase: false, tracking: '-0.02em' },
  { name: 'eFinancialCareers',     color: '#002342', font: 'Source Sans 3',    weight: 700, italic: false, uppercase: false, tracking: '-0.01em' },
  { name: 'Bayt',                  color: '#3BB54A', font: 'Work Sans',        weight: 700, italic: false, uppercase: false, tracking: '0'       },
  { name: 'Gumtree',               color: '#6BBF59', font: 'Nunito',           weight: 700, italic: false, uppercase: false, tracking: '-0.01em' },
];

const JOB_FEATURES = [
  {
    title: 'Post once. Reach thousands.',
    body: 'Write the role in Caliber. We push it to thousands of boards, aggregators and niche sites — including a free organic network of 50+ boards. Connect once. Post forever.',
    tag: 'Free organic: 50+ boards',
  },
  {
    title: 'Direct Apply with SEEK.',
    body: 'Candidates apply directly through SEEK. Applications land straight in your Caliber pipeline with source attribution. (More direct-apply boards coming.)',
    tag: 'SEEK · direct to pipeline',
  },
  {
    title: 'Source-tracked from day one.',
    body: 'Every application is tagged with the board it came from. Ready to compare conversion per channel as your data grows.',
    tag: 'Board attribution built in',
  },
];

function JobMarketplace() {
  return (
    <section
      className="cal-section"
      data-screen-label="Job Marketplace"
      style={{ padding: '120px 72px 100px', background: '#fff' }}
    >
      <div className="cal-container">
        {/* Header */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48,
          alignItems: 'end', marginBottom: 48,
        }}>
          <div>
            <div className="cal-eyebrow" style={{ marginBottom: 16 }}>
              <CalStar size={11} grad={false} style={{ color: 'var(--cal-blue-ink)' }} /> Job distribution
            </div>
            <h2 style={{ margin: 0, textWrap: 'balance' }}>
              Post once.{' '}
              <span style={{ color: 'var(--cal-blue-ink)' }}>Reach thousands.</span>
            </h2>
          </div>
          <p className="lede" style={{ margin: 0 }}>
            Write the role once inside Caliber. We push it to every board,
            aggregator and niche site that matters — and candidates apply directly
            back into your pipeline.
          </p>
        </div>

        {/* NZ honesty subhead */}
        <div style={{
          marginBottom: 32, fontSize: 13, color: 'var(--cal-muted)',
          fontFamily: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
          letterSpacing: '0.02em', lineHeight: 1.55,
        }}>
          ANZ reach via SEEK, Trade Me Jobs, LinkedIn and Google for Jobs.
          Direct Apply with SEEK.
        </div>

        {/* Board marquee — 39 authored wordmarks, single direction */}
        <div style={{
          background: 'var(--cal-bg-soft)',
          border: '1px solid var(--cal-line)',
          borderRadius: 16,
          overflow: 'hidden',
          marginBottom: 40,
          position: 'relative',
        }}>
          <div style={{ padding: '28px 0', overflow: 'hidden', position: 'relative' }}>
            <div style={{
              display: 'inline-flex', gap: 0, whiteSpace: 'nowrap',
              animation: 'cal-ticker-scroll 80s linear infinite',
            }}>
              {[...JOB_BOARD_WORDMARKS, ...JOB_BOARD_WORDMARKS].map((b, i) => (
                <span key={i} style={{
                  display: 'inline-flex', alignItems: 'center',
                  padding: '8px 28px',
                  fontFamily: `"${b.font}", sans-serif`,
                  fontWeight: b.weight,
                  fontStyle: b.italic ? 'italic' : 'normal',
                  fontSize: 'clamp(22px, 2.2vw, 30px)',
                  letterSpacing: b.tracking,
                  textTransform: b.uppercase ? 'uppercase' : 'none',
                  color: b.color,
                  lineHeight: 1,
                }}>
                  {b.name}
                </span>
              ))}
            </div>
          </div>
          {/* Edge fades */}
          <div style={{
            position: 'absolute', inset: 0, pointerEvents: 'none',
            background: 'linear-gradient(90deg, var(--cal-bg-soft) 0%, transparent 6%, transparent 94%, var(--cal-bg-soft) 100%)',
          }} />
          <div style={{
            position: 'absolute', bottom: 8, right: 16,
            fontSize: 11, color: 'var(--cal-muted)', letterSpacing: '0.06em',
            textTransform: 'uppercase', fontWeight: 600,
          }}>
            Thousands of boards, aggregators and niche sites
          </div>
        </div>

        {/* 3 feature cards */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {JOB_FEATURES.map((f, i) => (
            <div key={f.title} style={{
              background: i === 0 ? 'var(--cal-blue-ink)' : '#fff',
              color: i === 0 ? '#fff' : 'var(--cal-ink)',
              border: i === 0 ? 'none' : '1px solid var(--cal-line)',
              borderRadius: 18,
              padding: '26px 24px',
              display: 'flex',
              flexDirection: 'column',
              gap: 12,
              position: 'relative',
              overflow: 'hidden',
            }}>
              {i === 0 && <div className="cal-noise" />}
              <div style={{ position: 'relative' }}>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  padding: '4px 10px', borderRadius: 999,
                  background: i === 0 ? 'rgba(255,255,255,0.1)' : 'var(--cal-blue-50)',
                  color: i === 0 ? 'rgba(255,255,255,0.8)' : 'var(--cal-blue-ink)',
                  fontSize: 10.5, fontWeight: 600, letterSpacing: '0.04em',
                  marginBottom: 6,
                }}>
                  {f.tag}
                </div>
                <div style={{
                  fontSize: 20, fontWeight: 500, letterSpacing: '-0.015em',
                  color: i === 0 ? '#fff' : 'var(--cal-ink)', marginBottom: 8,
                }}>
                  {f.title}
                </div>
                <div style={{
                  fontSize: 14, lineHeight: 1.55,
                  color: i === 0 ? 'rgba(255,255,255,0.78)' : 'var(--cal-body)',
                }}>
                  {f.body}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  CancelLinkedInMini,
  SavingsCalculator,
  IntegrationsGrid,
  SecurityStrip,
  CustomerQuotes,
  SameBriefSplit,
  TickerLive,
  JobMarketplace,
});