// Caliber marketing sections — reusable building blocks used by variants.

/* =========================================================
   ONBOARDING HELPERS — reads window.ONBOARDING_CONFIG (set by
   onboarding-config.js, loaded before this file). Defaults to
   a safe no-URL config so Nav + Pricing CTAs still work (they
   fall through to Contact.html) on pages that don't load the
   config file.
   ========================================================= */
if (!window.ONBOARDING_CONFIG) {
  window.ONBOARDING_CONFIG = {
    paymentLinks: {},
    calcom: { demoUrl: null, enabled: false },
    signInUrl: 'https://app.caliberjobs.com/signin',
  };
}

window.CaliberOnboarding = {
  startTrial(tierKey, currency, term) {
    const cfg = window.ONBOARDING_CONFIG || {};
    const url = cfg.paymentLinks && cfg.paymentLinks[tierKey]
      && cfg.paymentLinks[tierKey][currency]
      && cfg.paymentLinks[tierKey][currency][term];
    if (url) { window.location.href = url; return; }
    this.bookDemo('trial:' + tierKey + ':' + currency + ':' + term);
  },
  bookDemo(source) {
    const cfg = window.ONBOARDING_CONFIG || {};
    if (cfg.calcom && cfg.calcom.enabled && cfg.calcom.demoUrl) {
      window.location.href = cfg.calcom.demoUrl;
      return;
    }
    window.location.href = 'Contact.html';
  },
  startBuyout(ats, seats, months) {
    this.bookDemo('buyout:' + ats + ':' + seats + 'seats:' + months + 'mo');
  },
};

/* Scroll progress bar (top of page) */
function ScrollProgress({ color }) {
  const [p, setP] = React.useState(0);
  React.useEffect(() => {
    const on = () => {
      const el = document.scrollingElement || document.documentElement;
      const max = el.scrollHeight - el.clientHeight;
      setP(max > 0 ? el.scrollTop / max : 0);
    };
    on(); window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <div style={{
      position: 'sticky', top: 0, left: 0, height: 3, zIndex: 60,
      background: 'transparent', pointerEvents: 'none',
    }}>
      <div style={{
        height: '100%', width: `${p * 100}%`,
        background: color || 'var(--cal-blue-ink)',
        transition: 'width 0.1s linear',
      }} />
    </div>
  );
}

/* =========================================================
   LAUNCH BANNER — temporary notice while we overhaul the site.
   Dismissible per visitor via localStorage. Remove once all
   marketing pages are live.
   ========================================================= */
function LaunchBanner() {
  const [dismissed, setDismissed] = React.useState(() => {
    try { return localStorage.getItem('cal-banner-dismissed') === '1'; } catch { return false; }
  });
  if (dismissed) return null;
  const dismiss = () => {
    try { localStorage.setItem('cal-banner-dismissed', '1'); } catch {}
    setDismissed(true);
  };
  return (
    <div style={{
      background: 'var(--cal-blue-ink)', color: '#fff',
      padding: '10px 48px', position: 'relative',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: 13, fontWeight: 500, letterSpacing: '-0.005em',
    }}>
      <span style={{ textAlign: 'center' }}>
        <strong style={{ fontWeight: 600 }}>You caught us mid-launch.</strong>
        <span style={{ opacity: 0.85, marginLeft: 8 }}>The rest of the site ships next week.</span>
      </span>
      <button
        onClick={dismiss}
        aria-label="Dismiss banner"
        style={{
          position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)',
          background: 'transparent', border: 'none', color: 'rgba(255,255,255,0.7)',
          cursor: 'pointer', fontSize: 20, lineHeight: 1, padding: 4,
        }}
        onMouseEnter={(e) => { e.currentTarget.style.color = '#fff'; }}
        onMouseLeave={(e) => { e.currentTarget.style.color = 'rgba(255,255,255,0.7)'; }}
      >×</button>
    </div>
  );
}

/* =========================================================
   NAV BAR — floating editorial capsule.

   Composition (L→R):
     star · nav links · ⌘K trigger · Auckland heartbeat · sign in · CTA

   Behaviours
   - sticky top, rounded 999 pill, 20ish px from viewport top
   - scroll-morph: maxWidth + shadow tighten past 24px scroll
   - ⌘K / Ctrl-K opens CommandPalette anywhere on page
   - adaptive theme: capsule cross-fades to dark mode while a
     `data-nav-theme="dark"` section is behind it. Falls back to
     `theme` prop on pages with no tagged sections.
   ========================================================= */

const NAV_TRANSITION_EASE = 'cubic-bezier(0.4,0,0.2,1)';
const NAV_TRANSITION_MS = 500;
const NAV_COLOR_TRANSITION = `background-color ${NAV_TRANSITION_MS}ms ${NAV_TRANSITION_EASE}, border-color ${NAV_TRANSITION_MS}ms ${NAV_TRANSITION_EASE}, color ${NAV_TRANSITION_MS}ms ${NAV_TRANSITION_EASE}, box-shadow ${NAV_TRANSITION_MS}ms ${NAV_TRANSITION_EASE}`;

// Keyboard shortcut + clickable trigger for the CommandPalette.
function CmdKTrigger({ dark, onClick }) {
  const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/i.test(navigator.platform);
  return (
    <button
      onClick={onClick}
      aria-label="Open command menu"
      title={`Search · ${isMac ? '⌘K' : 'Ctrl K'}`}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '5px 9px', borderRadius: 999,
        background: dark ? 'rgba(255,255,255,0.08)' : 'rgba(10,20,60,0.05)',
        border: dark ? '1px solid rgba(255,255,255,0.18)' : '1px solid rgba(10,20,60,0.1)',
        color: dark ? 'rgba(255,255,255,0.85)' : 'var(--cal-muted)',
        fontSize: 11, fontWeight: 500, fontFamily: 'var(--cal-font)',
        cursor: 'pointer', lineHeight: 1, letterSpacing: '0.02em',
        transition: NAV_COLOR_TRANSITION,
      }}
      onMouseEnter={(ev) => { ev.currentTarget.style.background = dark ? 'rgba(255,255,255,0.14)' : 'rgba(10,20,60,0.08)'; }}
      onMouseLeave={(ev) => { ev.currentTarget.style.background = dark ? 'rgba(255,255,255,0.08)' : 'rgba(10,20,60,0.05)'; }}
    >
      <svg width="11" height="11" viewBox="0 0 16 16" fill="none" aria-hidden>
        <circle cx="7" cy="7" r="5" stroke="currentColor" strokeWidth="1.8" />
        <path d="M11 11 L14 14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
      </svg>
      <span style={{ fontSize: 11, letterSpacing: '0.03em' }}>{isMac ? '⌘K' : 'Ctrl K'}</span>
    </button>
  );
}

// Live Auckland clock (HH:MM, 24h) + pulsing green dot.
// Decays to just the dot below ~960px so it stays in the capsule.
function AucklandHeartbeat({ dark }) {
  const fmt = () => new Intl.DateTimeFormat('en-NZ', {
    hour: '2-digit', minute: '2-digit', hour12: false,
    timeZone: 'Pacific/Auckland',
  }).format(new Date());
  const [time, setTime] = React.useState(fmt);
  React.useEffect(() => {
    const t = setInterval(() => setTime(fmt()), 30000);
    return () => clearInterval(t);
  }, []);
  return (
    <span
      aria-label={`Caliber is online · Auckland ${time}`}
      title={`Built in Auckland · ${time} local`}
      className="cal-nav-collapse"
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 7,
        padding: '0 8px',
        fontSize: 12, fontVariantNumeric: 'tabular-nums',
        color: dark ? 'rgba(255,255,255,0.7)' : 'var(--cal-muted)',
        fontWeight: 500, letterSpacing: '0.01em',
        whiteSpace: 'nowrap',
        transition: NAV_COLOR_TRANSITION,
      }}
    >
      <span className="cal-live-dot" aria-hidden />
      <span>{time} <span style={{ opacity: 0.55 }}>AKL</span></span>
    </span>
  );
}

// Home-link star with gradient fill (brand), orange crossfade on hover,
// and a springy scale-bounce on click. Uses two stacked CalStars so the
// gradient→orange transition is a pure opacity crossfade (can't CSS
// transition between a gradient and a solid fill). Bounce class is
// toggled via ref so re-clicks reliably retrigger the animation.
function NavLogo({ dark }) {
  const rootRef = React.useRef(null);
  const onClick = (e) => {
    const el = rootRef.current;
    if (el) {
      el.classList.remove('cal-nav-logo--bounce');
      // Force reflow so re-adding the class restarts the animation.
      void el.offsetWidth;
      el.classList.add('cal-nav-logo--bounce');
    }
    // If we're already on the homepage, prevent navigation so the
    // animation can play in full.
    const p = window.location.pathname;
    if (p === '/' || p === '/index.html' || p.endsWith('Caliber Homepage.html')) {
      e.preventDefault();
    }
  };
  const onAnimEnd = () => {
    rootRef.current?.classList.remove('cal-nav-logo--bounce');
  };
  return (
    <a
      ref={rootRef}
      href="/"
      aria-label="Caliber — home"
      className="cal-nav-logo"
      onClick={onClick}
      onAnimationEnd={onAnimEnd}
      style={{
        display: 'inline-flex', alignItems: 'center',
        padding: '4px 10px 4px 4px', textDecoration: 'none',
        color: dark ? '#fff' : 'var(--cal-blue-ink)',
        transition: NAV_COLOR_TRANSITION,
      }}
    >
      <span className="cal-nav-logo-inner">
        {/* Base: gradient blue star in light mode, solid white in dark.
            Fades out on hover so the orange overlay shows cleanly. */}
        <span className="cal-nav-logo-base">
          {dark
            ? <CalStar size={24} grad={false} />
            : <CalStar size={24} grad={true} />
          }
        </span>
        {/* Overlay: solid orange star, fades in on hover */}
        <span className="cal-nav-logo-overlay">
          <CalStar size={24} grad={false} style={{ color: 'var(--cal-accent)' }} />
        </span>
      </span>
    </a>
  );
}

function Nav({ ctaLabel = 'Book a demo', theme = 'light', scrollContainer }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [paletteOpen, setPaletteOpen] = React.useState(false);
  const [productMenuOpen, setProductMenuOpen] = React.useState(false);
  const productTimerRef = React.useRef(null);
  // Adaptive theme: dark = any `data-nav-theme="dark"` section is currently
  // behind the capsule (top ~12% of viewport). Falls back to `theme` prop
  // when no such sections exist on the page.
  const [adaptiveDark, setAdaptiveDark] = React.useState(false);
  const [hasAdaptive, setHasAdaptive] = React.useState(false);
  const baseDark = theme === 'dark';
  const dark = hasAdaptive ? adaptiveDark : baseDark;

  // Mega menu hover handlers — shared clear+re-schedule timer pattern so
  // moving between the Product link and the menu body keeps it open.
  const openProductMenu = () => {
    if (productTimerRef.current) clearTimeout(productTimerRef.current);
    productTimerRef.current = setTimeout(() => setProductMenuOpen(true), 100);
  };
  const closeProductMenu = () => {
    if (productTimerRef.current) clearTimeout(productTimerRef.current);
    productTimerRef.current = setTimeout(() => setProductMenuOpen(false), 180);
  };

  // Scroll-driven: morph state + adaptive dark detection. Cheap enough
  // for 2–3 tagged sections and works reliably in every browser.
  React.useEffect(() => {
    const el = scrollContainer?.current || window;
    const darkEls = () => Array.from(document.querySelectorAll('[data-nav-theme="dark"]'));
    setHasAdaptive(darkEls().length > 0);
    const on = () => {
      const t = scrollContainer?.current ? scrollContainer.current.scrollTop : window.scrollY;
      setScrolled(t > 24);
      // Trigger point = just below the capsule's bottom edge (~70px from
      // viewport top). Flip exactly when a dark section goes behind the
      // pill, not earlier.
      const topStrip = 68;
      const inDark = darkEls().some(s => {
        const r = s.getBoundingClientRect();
        return r.top <= topStrip && r.bottom >= 0;
      });
      setAdaptiveDark(inDark);
    };
    on();
    el.addEventListener('scroll', on, { passive: true });
    window.addEventListener('resize', on, { passive: true });
    return () => {
      el.removeEventListener('scroll', on);
      window.removeEventListener('resize', on);
    };
  }, [scrollContainer]);

  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        setPaletteOpen(v => !v);
      }
      if (e.key === 'Escape' && productMenuOpen) {
        setProductMenuOpen(false);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [productMenuOpen]);

  React.useEffect(() => {
    if (!productMenuOpen) return;
    const onDocClick = (e) => {
      const menu = document.querySelector('[data-mega="product"]');
      const trigger = document.querySelector('[data-mega-trigger="product"]');
      if (menu && menu.contains(e.target)) return;
      if (trigger && trigger.contains(e.target)) return;
      setProductMenuOpen(false);
    };
    document.addEventListener('mousedown', onDocClick);
    return () => document.removeEventListener('mousedown', onDocClick);
  }, [productMenuOpen]);

  const linkStyle = {
    padding: '8px 12px', borderRadius: 999, fontSize: 14,
    color: dark ? 'rgba(255,255,255,0.82)' : 'var(--cal-body)',
    textDecoration: 'none', fontWeight: 500, whiteSpace: 'nowrap',
    transition: `background 0.2s, ${NAV_COLOR_TRANSITION}`,
  };
  const linkHoverIn  = (e) => { e.currentTarget.style.background = dark ? 'rgba(255,255,255,0.08)' : 'rgba(10,20,60,0.04)'; };
  const linkHoverOut = (e) => { e.currentTarget.style.background = 'transparent'; };

  return (
    <>
      <LaunchBanner />
      <header style={{
        position: 'sticky', top: 0, zIndex: 50,
        padding: scrolled ? '12px 20px' : '18px 24px',
        transition: 'padding 0.3s cubic-bezier(0.4,0,0.2,1)',
        pointerEvents: 'none',
      }}>
        <div className="cal-nav-pill" style={{
          pointerEvents: 'auto', position: 'relative',
          display: 'flex', alignItems: 'center', gap: 4,
          // Top of page: match .cal-container width (1280px) so the capsule
          // aligns with the hero content below it. On scroll: morph down
          // to a compact 960px pill.
          maxWidth: scrolled ? 960 : 1280,
          margin: '0 auto',
          padding: '7px 7px 7px 14px',
          background: dark ? 'rgba(18,22,58,0.94)' : 'rgba(255,255,255,0.92)',
          backdropFilter: 'saturate(180%) blur(22px)',
          WebkitBackdropFilter: 'saturate(180%) blur(22px)',
          border: dark ? '1px solid rgba(255,255,255,0.16)' : '1px solid rgba(10,20,60,0.08)',
          borderRadius: 999,
          // Both modes carry 3 shadow parts (inset + 2 drops) so the browser
          // can interpolate alpha instead of snapping layer counts.
          boxShadow: dark
            ? (scrolled
                ? 'inset 0 1px 0 rgba(255,255,255,0.07), 0 18px 44px -12px rgba(6,8,44,0.55), 0 2px 6px rgba(6,8,44,0.22)'
                : 'inset 0 1px 0 rgba(255,255,255,0.07), 0 12px 34px -10px rgba(6,8,44,0.42), 0 1px 2px rgba(6,8,44,0.16)')
            : (scrolled
                ? 'inset 0 1px 0 rgba(255,255,255,0), 0 14px 44px -12px rgba(6,8,44,0.22), 0 2px 6px rgba(6,8,44,0.05)'
                : 'inset 0 1px 0 rgba(255,255,255,0), 0 8px 30px -10px rgba(6,8,44,0.12), 0 1px 2px rgba(6,8,44,0.03)'),
          transition: `max-width 0.35s ${NAV_TRANSITION_EASE}, ${NAV_COLOR_TRANSITION}`,
        }}>
          <NavLogo dark={dark} />

          <nav className="cal-nav-collapse" style={{
            display: 'flex', gap: 2, flex: 1, justifyContent: 'center',
          }}>
            <a
              href="Product.html"
              data-mega-trigger="product"
              aria-haspopup="true"
              aria-expanded={productMenuOpen}
              style={{
                ...linkStyle,
                display: 'inline-flex', alignItems: 'center', gap: 5,
                background: productMenuOpen ? (dark ? 'rgba(255,255,255,0.08)' : 'rgba(10,20,60,0.04)') : 'transparent',
              }}
              onMouseEnter={(e) => { linkHoverIn(e); openProductMenu(); }}
              onMouseLeave={(e) => { linkHoverOut(e); closeProductMenu(); }}
            >
              Product
              <svg width="10" height="10" viewBox="0 0 12 12" fill="none" aria-hidden style={{
                transform: productMenuOpen ? 'rotate(180deg)' : 'rotate(0deg)',
                transition: 'transform 0.2s',
                opacity: 0.6,
              }}>
                <path d="m3 5 3 3 3-3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </a>
            {[
              { label: 'Pricing', href: 'Pricing.html' },
              { label: 'Compare', href: 'Compare.html' },
              { label: 'Company', href: 'About.html' },
            ].map(l => (
              <a key={l.label} href={l.href} style={linkStyle}
                onMouseEnter={linkHoverIn} onMouseLeave={linkHoverOut}
              >{l.label}</a>
            ))}
          </nav>

          <CmdKTrigger dark={dark} onClick={() => setPaletteOpen(true)} />
          <AucklandHeartbeat dark={dark} />

          <div className="cal-nav-collapse" aria-hidden style={{
            width: 1, height: 22, alignSelf: 'center',
            background: dark ? 'rgba(255,255,255,0.12)' : 'rgba(10,20,60,0.1)',
            margin: '0 4px',
            transition: NAV_COLOR_TRANSITION,
          }} />

          <a href="https://app.caliberjobs.com/signin" className="cal-nav-collapse" style={{
            ...linkStyle, fontSize: 13,
          }} onMouseEnter={linkHoverIn} onMouseLeave={linkHoverOut}
          >Sign in</a>

          <button className={`cal-btn ${dark ? 'cal-btn--white' : 'cal-btn--primary'}`}
            style={{
              padding: '9px 16px', fontSize: 13, whiteSpace: 'nowrap', marginLeft: 2,
              transition: `transform 0.15s ease, box-shadow 0.2s ease, ${NAV_COLOR_TRANSITION}`,
            }}
            onClick={() => {
              const label = (ctaLabel || '').toLowerCase();
              if (label.indexOf('trial') !== -1) {
                window.CaliberOnboarding.startTrial('caliber_pro', 'NZD', 'annual');
              } else {
                window.CaliberOnboarding.bookDemo('nav:' + (ctaLabel || 'unknown'));
              }
            }}>
            {ctaLabel} {Icon.arrowR({ size: 13, color: 'currentColor' })}
          </button>

          {productMenuOpen && (
            <MegaMenuProduct
              onMouseEnter={openProductMenu}
              onMouseLeave={closeProductMenu}
            />
          )}
        </div>
      </header>
      <CommandPalette open={paletteOpen} onClose={() => setPaletteOpen(false)} />
    </>
  );
}

/* =========================================================
   MEGA MENU — Product. Three-column editorial panel with featured
   Buyout card. Always light-themed; floats below the nav capsule.
   ========================================================= */
const MEGA_CORE = [
  { icon: 'briefcase', title: 'ATS',   desc: 'Every candidate, remembered.',     href: 'Product.html' },
  { icon: 'globe',     title: 'Jobs',  desc: 'Post once, distribute everywhere.', href: 'Product.html' },
  { icon: 'users',     title: 'Pools', desc: 'Talent you already know.',          href: 'Product.html' },
];
const MEGA_AI = [
  { icon: 'sparkles', title: 'Scout',         desc: 'AI sourcing. 2.4B profiles.',   href: 'Scout.html', live: true },
  { icon: 'chat',     title: 'Chat',          desc: 'Live AI notes on every call.',  href: 'Product.html' },
  { icon: 'shield',   title: 'AI Principles', desc: 'Our honest stance on AI.',      href: 'AI Principles.html' },
];
const MEGA_MIGRATE = [
  { icon: 'arrowR', title: 'From Bullhorn', desc: 'The move is on us.', href: 'Compare-Bullhorn.html' },
  { icon: 'arrowR', title: 'From JobAdder', desc: 'The move is on us.', href: 'Compare-JobAdder.html' },
];

function MegaMenuProduct({ onMouseEnter, onMouseLeave }) {
  return (
    <div
      role="menu"
      data-mega="product"
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      style={{
        position: 'absolute',
        top: 'calc(100% + 10px)',
        left: '50%',
        transform: 'translateX(-50%)',
        width: 'min(1060px, calc(100vw - 48px))',
        background: '#fff',
        borderRadius: 20,
        border: '1px solid rgba(10,20,60,0.08)',
        boxShadow: '0 40px 80px -20px rgba(6,8,44,0.28), 0 12px 28px -10px rgba(6,8,44,0.14)',
        overflow: 'hidden',
        animation: 'cal-mega-in 0.22s cubic-bezier(0.4,0,0.2,1)',
        zIndex: 60,
        color: 'var(--cal-ink)',
      }}
    >
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr' }}>
        <MegaColumn label="Core"     items={MEGA_CORE} />
        <MegaColumn label="AI Layer" items={MEGA_AI}      divider />
        <MegaColumn label="Migrate"  items={MEGA_MIGRATE} divider trailing={<BuyoutCard />} />
      </div>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '14px 24px',
        borderTop: '1px solid var(--cal-line-2)',
        background: 'var(--cal-bg-soft)',
      }}>
        <a href="Product.html" style={{
          fontSize: 13, fontWeight: 500, color: 'var(--cal-ink)', textDecoration: 'none',
        }}>See all features <span aria-hidden>→</span></a>
        <a href="Demo.html" style={{
          fontSize: 13, fontWeight: 600, color: 'var(--cal-accent)', textDecoration: 'none',
          display: 'inline-flex', alignItems: 'center', gap: 4,
        }}>Book a demo <span aria-hidden>→</span></a>
      </div>
    </div>
  );
}

function MegaColumn({ label, items, divider, trailing }) {
  return (
    <div style={{
      padding: '22px 18px 20px',
      borderLeft: divider ? '1px solid var(--cal-line-2)' : 'none',
    }}>
      <div style={{
        fontSize: 11, fontWeight: 600, color: 'var(--cal-muted)',
        letterSpacing: '0.08em', textTransform: 'uppercase',
        marginBottom: 8, paddingLeft: 10,
      }}>{label}</div>
      {items.map(it => <MegaItem key={it.title} {...it} />)}
      {trailing}
    </div>
  );
}

function MegaItem({ icon, title, desc, href, live }) {
  const IconComp = typeof icon === 'string' ? Icon[icon] : null;
  return (
    <a href={href} style={{
      display: 'flex', alignItems: 'flex-start', gap: 12,
      padding: '10px 10px', borderRadius: 10,
      textDecoration: 'none', color: 'var(--cal-ink)',
      transition: 'background 0.15s',
    }}
    onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--cal-bg-soft)'; }}
    onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
    >
      <div style={{
        flexShrink: 0, width: 34, height: 34, borderRadius: 9,
        background: 'var(--cal-bg-cool)',
        color: 'var(--cal-blue-ink)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {IconComp && IconComp({ size: 17, stroke: 1.6 })}
      </div>
      <div style={{ minWidth: 0, flex: 1, paddingTop: 1 }}>
        <div style={{
          fontSize: 14, fontWeight: 500, lineHeight: 1.3,
          display: 'inline-flex', alignItems: 'center', gap: 7,
        }}>
          {title}
          {live && <span className="cal-live-dot" aria-hidden />}
        </div>
        <div style={{ fontSize: 12, color: 'var(--cal-muted)', lineHeight: 1.45, marginTop: 2 }}>{desc}</div>
      </div>
    </a>
  );
}

function BuyoutCard() {
  return (
    <a href="Migration.html" style={{
      display: 'block', marginTop: 12,
      padding: '14px 14px 12px',
      background: 'linear-gradient(135deg, #FFF3EC 0%, #FFE4D4 100%)',
      border: '1px solid rgba(255,106,61,0.28)',
      borderRadius: 12,
      textDecoration: 'none', color: 'var(--cal-ink)',
      transition: 'transform 0.2s, box-shadow 0.2s',
    }}
    onMouseEnter={(e) => {
      e.currentTarget.style.transform = 'translateY(-1px)';
      e.currentTarget.style.boxShadow = '0 10px 24px -6px rgba(255,106,61,0.35)';
    }}
    onMouseLeave={(e) => {
      e.currentTarget.style.transform = 'translateY(0)';
      e.currentTarget.style.boxShadow = 'none';
    }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
        <CalStar size={12} grad={false} style={{ color: 'var(--cal-accent)' }} />
        <span style={{
          fontSize: 10, fontWeight: 600,
          letterSpacing: '0.08em', textTransform: 'uppercase',
          color: 'var(--cal-accent-ink)',
        }}>24-Month Buyout</span>
      </div>
      <div style={{ fontSize: 13, fontWeight: 500, lineHeight: 1.35, marginBottom: 6 }}>
        We'll absorb the old contract.
      </div>
      <div style={{ fontSize: 11, color: 'var(--cal-muted)', lineHeight: 1.4 }}>
        Avg recouped: <strong style={{ color: 'var(--cal-ink)', fontWeight: 500 }}>NZ$18,000</strong>
      </div>
    </a>
  );
}

/* =========================================================
   COMMAND PALETTE — global ⌘K / Ctrl-K search for pages + actions.
   Keyboard: ↑↓ navigate, ↵ open, esc close. Hovering syncs cursor.
   ========================================================= */
const PALETTE_GROUPS = [
  {
    label: 'Pages',
    items: [
      { id: 'home',       label: 'Home',                 href: '/',                         hint: 'Start' },
      { id: 'product',    label: 'Product',              href: 'Product.html',              hint: 'ATS + CRM + Scout' },
      { id: 'scout',      label: 'Scout',                href: 'Scout.html',                hint: 'AI sourcing' },
      { id: 'pricing',    label: 'Pricing',              href: 'Pricing.html',              hint: 'Authored pricing' },
      { id: 'compare',    label: 'Compare · All tools',  href: 'Compare.html' },
      { id: 'comp-bh',    label: 'Compare · Bullhorn',   href: 'Compare-Bullhorn.html' },
      { id: 'comp-ja',    label: 'Compare · JobAdder',   href: 'Compare-JobAdder.html' },
      { id: 'about',      label: 'Company',              href: 'About.html' },
      { id: 'ai',         label: 'AI principles',        href: 'AI Principles.html' },
      { id: 'careers',    label: 'Careers',              href: 'Careers.html' },
      { id: 'contact',    label: 'Contact',              href: 'Contact.html' },
    ],
  },
  {
    label: 'Actions',
    items: [
      { id: 'ryan',   label: 'Book a demo with Ryan',  href: 'Demo.html',                            avatar: 'Ryan', hint: 'Sales' },
      { id: 'tour',   label: 'Take the 90-sec tour',   href: 'Demo.html' },
      { id: 'signin', label: 'Sign in to Caliber',     href: 'https://app.caliberjobs.com/signin' },
    ],
  },
];

function CommandPalette({ open, onClose }) {
  const [query, setQuery] = React.useState('');
  const [cursor, setCursor] = React.useState(0);
  const inputRef = React.useRef(null);

  const { entries, itemCount } = React.useMemo(() => {
    const q = query.trim().toLowerCase();
    const out = [];
    let n = 0;
    PALETTE_GROUPS.forEach(g => {
      const matches = g.items.filter(i =>
        !q || i.label.toLowerCase().includes(q) || (i.hint || '').toLowerCase().includes(q)
      );
      if (matches.length === 0) return;
      out.push({ kind: 'header', label: g.label });
      matches.forEach(i => { out.push({ kind: 'item', idx: n++, ...i }); });
    });
    return { entries: out, itemCount: n };
  }, [query]);

  React.useEffect(() => {
    if (!open) return;
    setQuery(''); setCursor(0);
    const id = requestAnimationFrame(() => inputRef.current?.focus());
    return () => cancelAnimationFrame(id);
  }, [open]);

  React.useEffect(() => { setCursor(0); }, [query]);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === 'Escape')    { e.preventDefault(); onClose(); return; }
      if (e.key === 'ArrowDown') { e.preventDefault(); setCursor(i => Math.min(itemCount - 1, i + 1)); return; }
      if (e.key === 'ArrowUp')   { e.preventDefault(); setCursor(i => Math.max(0, i - 1)); return; }
      if (e.key === 'Enter') {
        e.preventDefault();
        const item = entries.find(x => x.kind === 'item' && x.idx === cursor);
        if (item?.href) window.location.href = item.href;
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, entries, cursor, itemCount, onClose]);

  if (!open) return null;

  return (
    <div
      role="dialog" aria-label="Command menu" aria-modal="true"
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 100,
        background: 'rgba(6,8,44,0.34)',
        backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
        display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
        paddingTop: 'clamp(72px, 12vh, 148px)', paddingLeft: 16, paddingRight: 16,
        animation: 'cal-fade-up 0.2s ease',
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: 'min(640px, 100%)',
          background: '#fff', borderRadius: 18,
          boxShadow: '0 40px 80px -20px rgba(6,8,44,0.32), 0 10px 24px -8px rgba(6,8,44,0.18)',
          border: '1px solid rgba(10,20,60,0.08)',
          overflow: 'hidden',
        }}
      >
        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '16px 20px',
          borderBottom: '1px solid var(--cal-line)',
        }}>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden
            style={{ color: 'var(--cal-muted)', flexShrink: 0 }}>
            <circle cx="7" cy="7" r="5" stroke="currentColor" strokeWidth="1.6" />
            <path d="M11 11 L14 14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
          </svg>
          <input
            ref={inputRef}
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Search pages, actions…"
            style={{
              flex: 1, border: 'none', outline: 'none',
              fontFamily: 'var(--cal-font)', fontSize: 15,
              color: 'var(--cal-ink)', background: 'transparent',
            }}
          />
          <kbd style={{
            fontSize: 11, padding: '3px 8px',
            background: 'var(--cal-bg-soft)',
            borderRadius: 6, color: 'var(--cal-muted)',
            fontFamily: 'var(--cal-font)', fontWeight: 500,
          }}>esc</kbd>
        </div>
        <div style={{ maxHeight: 'min(420px, 58vh)', overflowY: 'auto', padding: 8 }}>
          {entries.length === 0 ? (
            <div style={{ padding: '28px 12px', textAlign: 'center', color: 'var(--cal-muted)', fontSize: 14 }}>
              No matches for “{query}”.
            </div>
          ) : entries.map((e, i) => {
            if (e.kind === 'header') {
              return (
                <div key={`h-${i}`} style={{
                  padding: '12px 12px 6px',
                  fontSize: 11, fontWeight: 600,
                  color: 'var(--cal-muted)',
                  letterSpacing: '0.08em', textTransform: 'uppercase',
                }}>{e.label}</div>
              );
            }
            const active = e.idx === cursor;
            return (
              <a
                key={e.id} href={e.href}
                onMouseEnter={() => setCursor(e.idx)}
                style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: '10px 12px', borderRadius: 10,
                  textDecoration: 'none', color: 'var(--cal-ink)',
                  background: active ? 'var(--cal-bg-soft)' : 'transparent',
                  fontSize: 14, fontWeight: 500,
                  transition: 'background 0.12s',
                }}
              >
                {e.avatar && <Avatar name={e.avatar} size={22} />}
                <span style={{ flex: 1 }}>{e.label}</span>
                {e.hint && (
                  <span style={{ fontSize: 12, color: 'var(--cal-muted)', fontWeight: 400 }}>{e.hint}</span>
                )}
                {active && (
                  <span aria-hidden style={{ fontSize: 12, color: 'var(--cal-muted)' }}>↵</span>
                )}
              </a>
            );
          })}
        </div>
      </div>
    </div>
  );
}

/* =========================================================
   ROTATING HERO HEADLINE — renders several candidate headlines,
   crossfades every ~5s. Hosts of this also pass hero body copy.
   ========================================================= */
// Shared display-serif treatment for the emphasised phrase.
// Fraunces italic @ 500 with opsz=144 → slightly fancy, still thick.
// Upright, heavy display serif. Fraunces @ 700 with opsz=144 and SOFT=100
// reads fancy-but-thick without the italic slant the user flagged as too thin.
const EMPH_ACCENT = {
  fontFamily: '"Fraunces", "Times New Roman", serif',
  fontStyle: 'normal',
  fontWeight: 700,
  fontVariationSettings: '"opsz" 14, "SOFT" 100, "WONK" 0, "wght" 700',
  color: 'var(--cal-accent)',
  letterSpacing: '-0.02em',
};
const EMPH_BLUE = { ...EMPH_ACCENT, color: 'var(--cal-blue-ink)' };

// Each headline is a tuple of exactly TWO lines — rendered as nowrap blocks
// so they always read as a clean 2-line hero regardless of column width.
const HERO_HEADLINES = [
  {
    id: 'money',
    eyebrow: 'New · Scout 1.2 is live',
    line1: <>Replace LinkedIn Recruiter.</>,
    line2: <span style={EMPH_ACCENT}>Keep the $15,000.</span>,
    sub: 'Caliber rolls ATS, CRM and AI sourcing into one subscription. Most agencies cut their tooling bill in half the month they switch.',
    primaryCta: 'See the math',
    secondaryCta: 'Watch 90-sec tour',
  },
  {
    id: 'people',
    eyebrow: 'Built in Auckland · for recruiters',
    line1: <span style={EMPH_BLUE}>It’s people,</span>,
    line2: <>not a pipeline.</>,
    sub: 'Legacy ATSes treat candidates like rows. We don’t. Every Caliber screen starts from a person — their history, last conversation, the role that fits.',
    primaryCta: 'See how it feels',
    secondaryCta: 'Our point of view',
  },
  {
    id: 'monday',
    eyebrow: 'A Monday, 9am, anywhere',
    line1: <>Monday, 9am —</>,
    line2: <span style={EMPH_BLUE}>already in motion.</span>,
    sub: 'Brief Scout on Sunday night. Walk in to ten advanced candidates and three booked screens. The first forty minutes of your week, done by 9:42.',
    primaryCta: 'Watch a Monday',
    secondaryCta: 'Meet Scout',
  },
  {
    id: 'migration',
    eyebrow: 'Leaving Bullhorn?',
    line1: <>Leave your old ATS.</>,
    line2: <span style={EMPH_ACCENT}>We’ll buy it out.</span>,
    sub: 'Bring candidates, jobs and pipelines across in under two weeks. White-glove migration, and we’ll cover what’s left on your current term.',
    primaryCta: 'Start the switch',
    secondaryCta: 'Migration guide',
  },
  {
    id: 'positioning',
    eyebrow: 'The honest math',
    line1: <>Everyone’s building AI recruiters.</>,
    line2: <span style={EMPH_BLUE}>We’re building AI for recruiters.</span>,
    sub: 'Candidates are done talking to bots. Scout points AI at the admin — not the candidate — so the humans on both sides stay in the room.',
    primaryCta: 'See the honest math',
    secondaryCta: 'Our point of view',
  },
];

function HeroRotator({ idx, setIdx, auto = true, interval = 5200 }) {
  React.useEffect(() => {
    if (!auto) return;
    const t = setInterval(() => setIdx((i) => (i + 1) % HERO_HEADLINES.length), interval);
    return () => clearInterval(t);
  }, [auto, interval, setIdx]);

  // Fixed height stabilises layout so line-count variations between
  // rotating headlines don't snap the page up/down on cross-fade.
  return (
    <div style={{ position: 'relative', minHeight: 380 }}>
      {HERO_HEADLINES.map((h, i) => (
        <div key={h.id} style={{
          position: i === idx ? 'relative' : 'absolute', inset: 0,
          opacity: i === idx ? 1 : 0,
          transform: i === idx ? 'translateY(0)' : 'translateY(8px)',
          transition: 'opacity .6s ease, transform .6s ease',
          pointerEvents: i === idx ? 'auto' : 'none',
        }}>
          <div className="cal-eyebrow" style={{ marginBottom: 20 }}>
            <CalStar size={11} grad={false} style={{ color: 'var(--cal-blue-ink)' }} /> {h.eyebrow}
          </div>
          <h1 style={{
            fontSize: 'clamp(36px, 4.6vw, 72px)', fontWeight: 500,
            letterSpacing: '-0.035em', lineHeight: 1.02,
            margin: '0 0 22px', color: 'var(--cal-ink)',
          }}>
            <span style={{ display: 'block' }}>{h.line1}</span>
            <span style={{ display: 'block' }}>{h.line2}</span>
          </h1>
          <p style={{
            fontSize: 'clamp(17px, 1.3vw, 21px)', lineHeight: 1.5,
            color: 'var(--cal-body)', maxWidth: 620, margin: '0 0 32px',
          }}>{h.sub}</p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
            <button className="cal-btn cal-btn--blue" style={{ padding: '14px 24px', fontSize: 15 }}>
              {h.primaryCta} {Icon.arrowR({ size: 14, color: '#fff' })}
            </button>
            <button className="cal-btn cal-btn--ghost" style={{ padding: '14px 22px', fontSize: 15 }}>
              {Icon.play({ size: 13 })} {h.secondaryCta}
            </button>
          </div>
        </div>
      ))}
      {/* rotator dots */}
      <div style={{ position: 'absolute', bottom: -40, left: 0, display: 'flex', gap: 6 }}>
        {HERO_HEADLINES.map((h, i) => (
          <button key={h.id} onClick={() => setIdx(i)} aria-label={`Show headline ${i+1}`} style={{
            width: i === idx ? 24 : 8, height: 8, borderRadius: 999,
            background: i === idx ? 'var(--cal-blue-ink)' : 'var(--cal-line)',
            border: 'none', cursor: 'pointer', padding: 0,
            transition: 'width .25s ease, background .25s',
          }} />
        ))}
      </div>
    </div>
  );
}

/* =========================================================
   LOGO TICKER
   ========================================================= */
function LogoTicker({ logos = PLACEHOLDER_AGENCIES, label = 'Trusted by recruitment agencies across Aotearoa & Australia' }) {
  const doubled = [...logos, ...logos];
  return (
    <div style={{
      borderTop: '1px solid var(--cal-line-2)',
      borderBottom: '1px solid var(--cal-line-2)',
      padding: '28px 0', background: 'var(--cal-bg-soft)',
      overflow: 'hidden', position: 'relative',
    }}>
      <div style={{
        textAlign: 'center', fontSize: 12.5, color: 'var(--cal-muted)',
        letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 18,
      }}>{label}</div>
      <div className="cal-ticker">
        {doubled.map((name, i) => (
          <span key={i} style={{
            fontFamily: i % 3 === 0 ? 'var(--cal-serif)' : 'var(--cal-font)',
            fontWeight: i % 2 === 0 ? 600 : 500,
            fontStyle: i % 3 === 1 ? 'italic' : 'normal',
            fontSize: 22, letterSpacing: i % 3 === 2 ? '0.3em' : '-0.01em',
            color: 'var(--cal-body)', opacity: 0.75,
            textTransform: i % 3 === 2 ? 'uppercase' : 'none',
            whiteSpace: 'nowrap',
          }}>{name}</span>
        ))}
      </div>
      {/* edge fades */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'linear-gradient(90deg, var(--cal-bg-soft), transparent 12%, transparent 88%, var(--cal-bg-soft))' }} />
    </div>
  );
}

/* =========================================================
   STAT BAND — 4 animated counters
   ========================================================= */
function StatBand({ dark = true }) {
  const stats = [
    { label: 'Profiles indexed by Scout',      value: 2.4, suffix: 'b+', decimals: 1 },
    { label: 'Hours saved per consultant / week', value: 11, suffix: 'hrs' },
    { label: 'Avg. bill cut vs. stacks',        value: 54, suffix: '%' },
    { label: 'Agencies on Caliber',             value: 420, suffix: '+' },
  ];
  return (
    <div style={{
      background: dark ? 'var(--cal-blue-ink)' : 'transparent',
      color: dark ? '#fff' : 'var(--cal-ink)',
      padding: '72px 48px', position: 'relative', overflow: 'hidden',
    }}>
      {dark && <div className="cal-noise" />}
      <div className="cal-container" style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 36, position: 'relative',
      }}>
        {stats.map(s => (
          <div key={s.label}>
            <div style={{ fontSize: 'clamp(44px, 5vw, 64px)', fontWeight: 300, letterSpacing: '-0.04em', lineHeight: 1 }}>
              <Counter to={s.value} suffix={s.suffix} decimals={s.decimals || 0} />
            </div>
            <div style={{ marginTop: 10, fontSize: 14, opacity: 0.85, maxWidth: 220 }}>{s.label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* =========================================================
   PRODUCT TABS — pick a tab, see the matching mock
   ========================================================= */
const PRODUCT_TABS = [
  { key: 'ats', label: 'ATS', tag: 'Track every candidate',
    title: 'A candidate database that feels like a great spreadsheet.',
    body: 'Ten thousand rows, saved filters for every niche, shortlists with one tap. Live-seeking status pulled automatically from LinkedIn and your outreach.',
    bullets: ['10k+ candidates per agency, filtered instantly', 'Saved filters for every niche you work', 'Shortlisting, tagging and pipelining built-in'],
    mock: 'candidates',
  },
  { key: 'scout', label: 'Scout', tag: 'AI sourcing',
    title: 'Brief Scout. Walk away. Come back to a pipeline.',
    body: 'Describe the role in plain English. Scout searches 2.4 billion public profiles, ranks by fit, and lines up the LinkedIn + email outreach for you.',
    bullets: ['Natural language briefs — no boolean', '2.4b+ indexed profiles, re-ranked daily', 'One click to advance, draft outreach, or pool'],
    mock: 'scout',
  },
  { key: 'chat', label: 'Chat', tag: 'Candidate comms',
    title: 'One inbox for every candidate conversation.',
    body: 'WhatsApp, email, SMS and internal team chats, side-by-side. Every message lands on the candidate’s record and stays there, searchable forever.',
    bullets: ['Unified candidate / contact / team chat', 'Attach CVs, NDAs, calendar invites inline', 'AI-drafted follow-ups, sent as you'],
    mock: 'chat',
  },
  { key: 'pools', label: 'Pools', tag: 'Talent communities',
    title: 'Warm talent, always a click away.',
    body: 'Group by skill, niche, seniority or client — and keep the pool warm with automated nurture. Every pool is shared with the team you pick.',
    bullets: ['Unlimited pools, shared or private', 'Triggers for re-engagement & check-ins', 'Ownership, handoff and audit built-in'],
    mock: 'pools',
  },
];

function ProductTabs() {
  const [k, setK] = React.useState('scout');
  const tab = PRODUCT_TABS.find(t => t.key === k);
  return (
    <div>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 36 }}>
        {PRODUCT_TABS.map(t => (
          <button key={t.key} onClick={() => setK(t.key)} style={{
            padding: '10px 18px', borderRadius: 999, cursor: 'pointer',
            fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
            border: '1px solid ' + (k === t.key ? 'var(--cal-ink)' : 'var(--cal-line)'),
            background: k === t.key ? 'var(--cal-ink)' : '#fff',
            color: k === t.key ? '#fff' : 'var(--cal-ink)',
            transition: 'background .2s, color .2s, border-color .2s',
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: 999,
              background: k === t.key ? 'var(--cal-accent)' : 'var(--cal-blue-ink)',
            }} />
            {t.label}
            <span style={{ fontSize: 11, opacity: 0.6, fontWeight: 400 }}>{t.tag}</span>
          </button>
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 64, alignItems: 'center' }}>
        <div>
          <FadeIn key={tab.key}>
            <h3 style={{ fontSize: 38, fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.1, margin: '0 0 16px' }}>{tab.title}</h3>
            <p style={{ fontSize: 17, color: 'var(--cal-body)', lineHeight: 1.55, margin: '0 0 24px' }}>{tab.body}</p>
            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {tab.bullets.map(b => (
                <li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 15, color: 'var(--cal-body)' }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: 999, background: 'var(--cal-blue-50)',
                    color: 'var(--cal-blue-ink)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                    marginTop: 1,
                  }}>{Icon.check({ size: 12 })}</span>
                  {b}
                </li>
              ))}
            </ul>
            <a href="#" style={{
              marginTop: 22, display: 'inline-flex', alignItems: 'center', gap: 6,
              fontSize: 15, fontWeight: 500, color: 'var(--cal-blue-ink)', textDecoration: 'none',
            }}>Explore {tab.label} {Icon.arrowR({ size: 14 })}</a>
          </FadeIn>
        </div>
        <FadeIn key={tab.key + '-mock'} delay={120}>
          <div style={{ transform: 'perspective(1600px) rotateY(-4deg) rotateX(2deg)', transformStyle: 'preserve-3d' }}>
            {tab.mock === 'scout'      && <ScoutDemo compact />}
            {tab.mock === 'candidates' && <CandidatesTable maxRows={6} />}
            {tab.mock === 'chat'       && <ChatMock />}
            {tab.mock === 'pools'      && <TalentPools />}
          </div>
        </FadeIn>
      </div>
    </div>
  );
}

/* =========================================================
   PILLARS — icon grid
   ========================================================= */
const PILLARS = [
  { i: 'users', title: 'Candidate database',  body: 'Ten thousand rows, saved filters, pipelines and live-seeking status — ready on day one.' },
  { i: 'sparkles', title: 'Scout AI sourcing', body: 'Brief in plain English. Scout returns a ranked pipeline from 2.4b+ profiles in under a minute.', star: true },
  { i: 'chat', title: 'Unified chat',           body: 'Candidates, clients and teammates in one inbox. Everything logs to the record automatically.' },
  { i: 'briefcase', title: 'Jobs & pipelines', body: 'Kanban stages, offer tracking, placements and invoicing handoffs in one flow.' },
  { i: 'calendar', title: 'Scheduling',        body: 'Google / Outlook integration, candidate-facing booking pages, and interview briefs.' },
  { i: 'shield', title: 'Privacy & audit',     body: 'GDPR and Privacy Act 2020 built-in. SOC 2 Type II. Full audit log on every record.' },
];
function Pillars({ dark = false }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2,
      background: dark ? 'rgba(255,255,255,0.08)' : 'var(--cal-line-2)',
      borderRadius: 20, overflow: 'hidden',
      border: dark ? '1px solid rgba(255,255,255,0.1)' : '1px solid var(--cal-line)',
    }}>
      {PILLARS.map(p => (
        <div key={p.title} style={{
          background: dark ? '#0A0E33' : '#fff',
          padding: 32, position: 'relative',
        }}>
          <div style={{
            width: 44, height: 44, borderRadius: 12,
            background: p.star ? 'var(--cal-blue-ink)' : (dark ? 'rgba(255,255,255,0.1)' : 'var(--cal-blue-50)'),
            color: p.star ? '#fff' : 'var(--cal-blue-ink)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            marginBottom: 18,
          }}>
            {p.star ? <CalStar size={22} grad={false} style={{ color: '#fff' }} /> : Icon[p.i]({ size: 22, color: dark ? '#fff' : 'var(--cal-blue-ink)' })}
          </div>
          <div style={{ fontSize: 19, fontWeight: 500, marginBottom: 8, color: dark ? '#fff' : 'var(--cal-ink)' }}>{p.title}</div>
          <div style={{ fontSize: 14, lineHeight: 1.55, color: dark ? 'rgba(255,255,255,0.7)' : 'var(--cal-body)' }}>{p.body}</div>
        </div>
      ))}
    </div>
  );
}

/* =========================================================
   BILL COMPARISON — side-by-side pricing against incumbents
   ========================================================= */
const BILL_LINES_LEGACY = [
  { name: 'Bullhorn / JobAdder seat', amt: 'NZ$245' },
  { name: 'LinkedIn Recruiter seat', amt: 'NZ$1,250' },
  { name: 'SourceWhale / Gem', amt: 'NZ$180' },
  { name: 'Calendly + Loom + Slack', amt: 'NZ$75' },
  { name: 'Dialpad / Aircall', amt: 'NZ$50' },
];
function BillCompare() {
  // Caliber's Pro tier in Pricing section is NZ$299/seat/month (annual billing).
  // Keep BillCompare's "After" number consistent with the tier card the user
  // scrolls down to see in the same page.
  const CALIBER_MONTHLY = 299;
  const LEGACY_TOTAL = 1800;
  const SAVINGS = LEGACY_TOTAL - CALIBER_MONTHLY; // 1,501 → round to a clean 1,500
  const SAVINGS_ROUND = 1500;
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
      <div style={{
        background: '#fff', border: '1px solid var(--cal-line)', borderRadius: 20,
        padding: 26,
      }}>
        <div style={{ fontSize: 12.5, color: 'var(--cal-muted)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 4 }}>Before · A typical stack</div>
        <div style={{ fontSize: 22, fontWeight: 500, marginBottom: 18 }}>Per consultant, per month</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {BILL_LINES_LEGACY.map(l => (
            <div key={l.name} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14, color: 'var(--cal-body)' }}>
              <span>{l.name}</span>
              <span style={{ fontVariantNumeric: 'tabular-nums' }}>{l.amt}</span>
            </div>
          ))}
        </div>
        <div style={{ borderTop: '1px solid var(--cal-line-2)', marginTop: 16, paddingTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <span style={{ fontSize: 14, color: 'var(--cal-muted)' }}>Monthly total</span>
          <span style={{ fontSize: 32, fontWeight: 500, letterSpacing: '-0.02em' }}>NZ$<Counter to={LEGACY_TOTAL} /></span>
        </div>
      </div>
      <div style={{
        background: 'var(--cal-blue-ink)', color: '#fff', borderRadius: 20,
        padding: 26, position: 'relative', overflow: 'hidden',
      }}>
        <div className="cal-noise" />
        <div style={{ position: 'relative' }}>
          <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.7)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 4 }}>After · Just Caliber Pro</div>
          <div style={{ fontSize: 22, fontWeight: 500, marginBottom: 18, display: 'flex', alignItems: 'center', gap: 10 }}>
            <CalStar size={20} grad={false} style={{ color: '#fff' }} /> Per consultant, per month
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {['ATS + CRM', 'Scout AI sourcing', 'Unified chat & scheduling', 'Talent pools & automations', 'SOC 2, GDPR, audit log'].map(l => (
              <div key={l} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14, opacity: 0.95 }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                  {Icon.check({ size: 14, color: 'var(--cal-accent)' })}
                  {l}
                </span>
                <span style={{ opacity: 0.6 }}>Included</span>
              </div>
            ))}
          </div>
          <div style={{ borderTop: '1px solid rgba(255,255,255,0.2)', marginTop: 16, paddingTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span style={{ fontSize: 14, opacity: 0.7 }}>Monthly total</span>
            <span style={{ fontSize: 32, fontWeight: 500, letterSpacing: '-0.02em' }}>
              NZ$<Counter to={CALIBER_MONTHLY} />
              <span style={{ fontSize: 14, opacity: 0.7, marginLeft: 8 }}>save <b style={{ color: 'var(--cal-accent)' }}>NZ${SAVINGS_ROUND.toLocaleString()} / seat</b></span>
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* =========================================================
   PRICING — Caliber / Caliber Pro / Enterprise
   Currency toggle (NZD default · AUD · USD) with shared state
   so any other price on the page can react to it.
   ========================================================= */

// Caliber's 4-currency pricing model (per audit S14.6).
//   - Prices are AUTHORED per tier per currency — no FX multiplier.
//   - NZD and AUD at parity (ANZ home market).
//   - GBP and USD authored separately for UK + international buyers.
// All prices end in 9, parallel shape across currencies for easy recall.
const CAL_CURRENCIES = [
  { code: 'NZD', symbol: 'NZ$', label: 'Aotearoa',    badge: 'home' },
  { code: 'AUD', symbol: 'A$',  label: 'Australia',   badge: 'cousins' },
  { code: 'GBP', symbol: '£',   label: 'UK',          badge: null },
  { code: 'USD', symbol: 'US$', label: 'Rest of world', badge: null },
];
const CAL_CUR_MAP = Object.fromEntries(CAL_CURRENCIES.map(c => [c.code, c]));

// Shared store — any component using useCaliberCurrency() re-renders on change.
function useCaliberCurrency() {
  const [cur, setCur] = React.useState(() => window.__CAL_CUR__ || 'NZD');
  React.useEffect(() => {
    const on = (e) => setCur(e.detail);
    window.addEventListener('cal:currency', on);
    return () => window.removeEventListener('cal:currency', on);
  }, []);
  const update = React.useCallback((next) => {
    window.__CAL_CUR__ = next;
    window.dispatchEvent(new CustomEvent('cal:currency', { detail: next }));
  }, []);
  return [cur, update];
}

// Exposed globally so other files (BillCompare, ScoutVsLinkedIn etc.) can
// read the current currency. Price formatting is now per-tier (see CALIBER_TIERS)
// so no generic formatCaliberPrice helper is needed.
window.useCaliberCurrency = useCaliberCurrency;
window.CAL_CURRENCIES = CAL_CURRENCIES;

/* ---------- Flag icons (per audit S14.7) ----------
   Proper user-provided SVGs served from /flags/. USD uses an
   international globe-with-pins icon (not a US flag) to reinforce
   that USD is the "rest of world" fallback, not US-specific pricing. */
const CAL_FLAG_SRC = {
  NZD: 'flags/nzd.svg',
  AUD: 'flags/aud.svg',
  GBP: 'flags/gbp.svg',
  USD: 'flags/international.svg',
};
const CAL_FLAG_ALT = {
  NZD: 'New Zealand',
  AUD: 'Australia',
  GBP: 'United Kingdom',
  USD: 'International',
};
function CalFlag({ code, size = 16 }) {
  const src = CAL_FLAG_SRC[code];
  if (!src) return null;
  return (
    <img
      src={src}
      alt={CAL_FLAG_ALT[code] || code}
      width={size}
      height={size}
      style={{
        display: 'inline-block',
        verticalAlign: 'middle',
        flexShrink: 0,
        // NZ/AU/GB flags are designed as rounded-rect icons; the international
        // globe is already circular. No extra clipping needed.
      }}
    />
  );
}

/* ---------- Currency toggle pill ---------- */
function CurrencyToggle({ dark = false, size = 'md' }) {
  const [cur, setCur] = useCaliberCurrency();
  const padY = size === 'sm' ? 5 : 7;
  const padX = size === 'sm' ? 10 : 14;
  const fs   = size === 'sm' ? 12 : 13;
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', justifyContent: 'center' }}>
      <div style={{
        display: 'inline-flex',
        padding: 4, borderRadius: 999,
        background: dark ? 'rgba(255,255,255,0.08)' : '#fff',
        border: `1px solid ${dark ? 'rgba(255,255,255,0.14)' : 'var(--cal-line)'}`,
        boxShadow: dark ? 'none' : 'var(--shadow-sm)',
      }}>
        {CAL_CURRENCIES.map(c => {
          const on = cur === c.code;
          return (
            <button
              key={c.code}
              onClick={() => setCur(c.code)}
              aria-pressed={on}
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: `${padY}px ${padX}px`,
                borderRadius: 999, border: 'none', cursor: 'pointer',
                background: on ? (dark ? '#fff' : 'var(--cal-ink)') : 'transparent',
                color: on ? (dark ? 'var(--cal-ink)' : '#fff') : (dark ? 'rgba(255,255,255,0.75)' : 'var(--cal-muted)'),
                fontSize: fs, fontWeight: on ? 600 : 500,
                fontFamily: 'inherit',
                transition: 'all .2s',
              }}
            >
              <CalFlag code={c.code} size={fs + 1} />
              {c.code}
              {on && c.badge && (
                <span style={{
                  fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase',
                  background: c.code === 'NZD' ? 'var(--cal-accent)' : 'var(--cal-blue-ink)',
                  color: '#fff',
                  padding: '2px 6px', borderRadius: 999, fontWeight: 600,
                }}>{c.badge}</span>
              )}
            </button>
          );
        })}
      </div>
    </div>
  );
}

/* ---------- Pricing tiers (per audit S14.6 — authored prices per currency) ---------- */
const CALIBER_TIERS = [
  {
    name: 'Caliber',
    key: 'caliber',
    sub: 'The modern ATS + CRM',
    prices: {
      NZD: { annual: 149, monthly: 179 },
      AUD: { annual: 149, monthly: 179 },
      GBP: { annual: 79,  monthly: 99  },
      USD: { annual: 99,  monthly: 119 },
    },
    blurb: 'Everything you need to replace your legacy system with something clean and fast.',
    features: [
      { t: 'Modern ATS — pipelines, kanban, saved filters' },
      { t: 'Contacts + Companies CRM' },
      { t: 'Caliber Chat — all conversations in one place' },
      { t: 'Job board distribution — post once, reach thousands of boards, Direct Apply with SEEK' },
      { t: 'Email integration — Outlook (Gmail coming soon)' },
      { t: 'AI candidate creation + CV parsing' },
      { t: 'Unlimited candidates, contacts & companies' },
      { t: 'Unlimited open jobs' },
    ],
    cta: 'Start 14-day trial',
    featured: false,
  },
  {
    name: 'Caliber Pro',
    key: 'caliber_pro',
    sub: 'Everything in Caliber + Scout',
    prices: {
      NZD: { annual: 299, monthly: 359 },
      AUD: { annual: 299, monthly: 359 },
      GBP: { annual: 159, monthly: 189 },
      USD: { annual: 199, monthly: 239 },
    },
    tag: 'Most popular',
    blurb: 'Everything in Caliber plus Caliber Scout — our AI-powered sourcing engine over 2.4B+ public profiles.',
    features: [
      { t: 'Everything in Caliber', muted: true },
      { t: 'Caliber Scout — proprietary AI sourcing engine, 2.4B+ public profiles' },
      { t: '$150/mo Scout unlock credits — yours free every month, top up anytime' },
      { t: 'Plain-English briefs — no boolean, no training' },
      { t: '7-dimension filters — job title, skills, location, industry, current and previous employers, LinkedIn toggle' },
      { t: 'Monthly profile refreshes' },
      { t: 'Early access to new Scout features' },
    ],
    cta: 'Start 14-day trial',
    featured: true,
  },
  {
    name: 'Caliber Enterprise',
    key: 'enterprise',
    sub: 'For scaling teams',
    prices: {
      NZD: { annual: 499, monthly: 599 },
      AUD: { annual: 499, monthly: 599 },
      GBP: { annual: 249, monthly: 299 },
      USD: { annual: 299, monthly: 359 },
    },
    priceSuffix: 'from',
    contactNote: 'Contact us for volume pricing',
    blurb: 'More control, richer reporting, custom options, and dedicated support for scaling teams.',
    features: [
      { t: 'Everything in Caliber Pro', muted: true },
      { t: 'Dedicated Success Manager' },
      { t: 'Custom dashboards & analytics' },
      { t: 'Custom workflows' },
      { t: 'Priority account support' },
      { t: 'Contract buy-out from your current ATS' },
    ],
    cta: 'Get in touch',
    featured: false,
  },
];

function Pricing({ accent, showHeader = true, dark = false, defaultTerm = 'annual' }) {
  const [term, setTerm] = React.useState(defaultTerm); // 'annual' | 'monthly'
  const [cur] = useCaliberCurrency();
  const curObj = CAL_CUR_MAP[cur];

  const panelBg = dark ? 'rgba(255,255,255,0.04)' : '#fff';
  const panelBorder = dark ? 'rgba(255,255,255,0.12)' : 'var(--cal-line)';
  const textBody = dark ? 'rgba(255,255,255,0.75)' : 'var(--cal-body)';

  return (
    <div>
      {showHeader && (
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <CurrencyToggle dark={dark} />
          <div style={{
            marginTop: 22, fontSize: 14, fontWeight: 500,
            color: dark ? 'rgba(255,255,255,0.7)' : 'var(--cal-muted)',
            letterSpacing: '-0.005em',
          }}>
            {cur === 'NZD' && <>Built in Kirikiriroa. <span style={{ color: dark ? '#fff' : 'var(--cal-ink)', fontWeight: 600 }}>Priced for Aotearoa.</span></>}
            {cur === 'AUD' && <>Same price across the ditch &mdash; <span style={{ color: dark ? '#fff' : 'var(--cal-ink)', fontWeight: 600 }}>cousins get cousins&rsquo; rates.</span></>}
            {cur === 'GBP' && <>Direct to pound &mdash; <span style={{ color: dark ? '#fff' : 'var(--cal-ink)', fontWeight: 600 }}>no FX swing, no surprise hike.</span></>}
            {cur === 'USD' && <>International rate &mdash; <span style={{ color: dark ? '#fff' : 'var(--cal-ink)', fontWeight: 600 }}>still cheaper than anything built in the Bay Area.</span></>}
          </div>
          {/* Term toggle */}
          <div style={{
            marginTop: 32, display: 'inline-flex', padding: 4, borderRadius: 999,
            background: dark ? 'rgba(255,255,255,0.06)' : 'var(--cal-bg-soft)',
            border: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'var(--cal-line-2)'}`,
          }}>
            {[
              { k: 'annual',  l: 'Annual', badge: 'save ~17%' },
              { k: 'monthly', l: 'Monthly' },
            ].map(t => {
              const on = term === t.k;
              return (
                <button key={t.k} onClick={() => setTerm(t.k)}
                  style={{
                    display: 'inline-flex', alignItems: 'center', gap: 8,
                    padding: '8px 16px', borderRadius: 999, border: 'none', cursor: 'pointer',
                    background: on ? (dark ? '#fff' : 'var(--cal-ink)') : 'transparent',
                    color: on ? (dark ? 'var(--cal-ink)' : '#fff') : (dark ? 'rgba(255,255,255,0.75)' : 'var(--cal-muted)'),
                    fontFamily: 'inherit', fontSize: 13, fontWeight: on ? 600 : 500, transition: 'all .2s',
                  }}>
                  {t.l}
                  {t.badge && on && (
                    <span style={{
                      fontSize: 10, letterSpacing: '0.05em', textTransform: 'uppercase',
                      background: 'var(--cal-accent)', color: '#fff',
                      padding: '2px 7px', borderRadius: 999, fontWeight: 600,
                    }}>{t.badge}</span>
                  )}
                </button>
              );
            })}
          </div>
        </div>
      )}

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, alignItems: 'stretch' }}>
        {CALIBER_TIERS.map(tier => {
          const price = tier.prices ? tier.prices[cur][term] : null;
          const hasFrom = tier.priceSuffix === 'from';
          // S14.1 — featured tier softened: white card, scale(1.04), brand-blue border, orange pill.
          const featuredBorder = '2px solid var(--cal-blue-ink)';
          return (
            <div key={tier.name} style={{
              background: panelBg,
              color: dark ? '#fff' : 'var(--cal-ink)',
              border: tier.featured ? featuredBorder : `1px solid ${panelBorder}`,
              borderRadius: 24, padding: 28, position: 'relative',
              transform: tier.featured ? 'scale(1.04)' : 'none',
              boxShadow: tier.featured
                ? '0 30px 60px -20px rgba(0,9,182,0.22), 0 12px 28px rgba(0,0,0,0.08)'
                : (dark ? 'none' : 'var(--shadow-sm)'),
              display: 'flex', flexDirection: 'column',
              zIndex: tier.featured ? 2 : 1,
            }}>
              {tier.tag && (
                <div style={{
                  position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)',
                  padding: '5px 12px', borderRadius: 999,
                  background: accent || 'var(--cal-accent)', color: '#fff',
                  fontSize: 11, fontWeight: 700, letterSpacing: '0.06em',
                  textTransform: 'uppercase',
                  boxShadow: '0 8px 18px -6px rgba(255,106,61,0.5)',
                  whiteSpace: 'nowrap',
                }}>{tier.tag}</div>
              )}

              <div style={{
                fontSize: 15, fontWeight: 600, marginBottom: 2,
                color: dark ? '#fff' : 'var(--cal-ink)',
              }}>{tier.name}</div>
              <div style={{
                fontSize: 13, marginBottom: 18,
                color: dark ? 'rgba(255,255,255,0.55)' : 'var(--cal-muted)',
              }}>{tier.sub}</div>

              {/* Price */}
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 10, minHeight: 58, flexWrap: 'wrap' }}>
                {hasFrom && (
                  <span style={{
                    fontSize: 13, fontWeight: 500, letterSpacing: '0.02em',
                    marginRight: 2,
                    color: dark ? 'rgba(255,255,255,0.55)' : 'var(--cal-muted)',
                  }}>from</span>
                )}
                <span style={{ fontSize: 14, opacity: 0.7, fontWeight: 500 }}>{curObj.symbol}</span>
                <span style={{ fontSize: 56, fontWeight: 400, letterSpacing: '-0.04em', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>
                  {price.toLocaleString()}
                </span>
                <span style={{
                  fontSize: 13,
                  color: dark ? 'rgba(255,255,255,0.55)' : 'var(--cal-muted)',
                }}>
                  / seat / mo
                </span>
              </div>
              <div style={{
                fontSize: 12, marginBottom: 18, lineHeight: 1.4,
                color: dark ? 'rgba(255,255,255,0.5)' : 'var(--cal-muted)',
              }}>
                {tier.contactNote ? (
                  <>{tier.contactNote} · billed in {cur}</>
                ) : (
                  <>Billed {term === 'annual' ? 'annually' : 'monthly'} in {cur}</>
                )}
              </div>

              <div style={{
                fontSize: 14, lineHeight: 1.5, marginBottom: 22, minHeight: 64,
                color: textBody,
              }}>{tier.blurb}</div>

              <button className={`cal-btn ${tier.featured ? 'cal-btn--blue' : 'cal-btn--primary'}`}
                style={{ width: '100%', padding: '12px 18px', fontSize: 14, fontWeight: 500 }}
                onClick={() => {
                  if (tier.key === 'enterprise') {
                    window.CaliberOnboarding.bookDemo('pricing:enterprise');
                  } else {
                    window.CaliberOnboarding.startTrial(tier.key, cur, term);
                  }
                }}>
                {tier.cta}
              </button>
              {tier.key !== 'enterprise' && (
                <button
                  onClick={() => window.CaliberOnboarding.bookDemo('pricing:' + tier.key + ':secondary')}
                  style={{
                    marginTop: 10, background: 'transparent', border: 'none',
                    padding: '4px 0', cursor: 'pointer',
                    fontFamily: 'inherit', fontSize: 12, fontWeight: 500,
                    color: dark ? 'rgba(255,255,255,0.55)' : 'var(--cal-muted)',
                    transition: 'color 0.15s',
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.color = dark ? '#fff' : 'var(--cal-ink)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.color = dark ? 'rgba(255,255,255,0.55)' : 'var(--cal-muted)'; }}
                >
                  or talk to us first →
                </button>
              )}

              <div style={{
                height: 1, margin: '22px 0',
                background: dark ? 'rgba(255,255,255,0.08)' : 'var(--cal-line-2)',
              }} />

              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {tier.features.map(f => (
                  <li key={f.t} style={{
                    display: 'flex', alignItems: 'flex-start', gap: 10,
                    fontSize: 13.5, lineHeight: 1.45,
                    color: f.muted
                      ? (dark ? 'rgba(255,255,255,0.5)' : 'var(--cal-muted)')
                      : textBody,
                  }}>
                    <span style={{
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      width: 14, height: 14, flexShrink: 0, marginTop: 3,
                    }}>
                      {Icon.check({
                        size: 14,
                        color: f.muted
                          ? (dark ? 'rgba(255,255,255,0.35)' : 'var(--cal-muted-2)')
                          : 'var(--cal-blue-ink)',
                      })}
                    </span>
                    <span>{f.t}</span>
                  </li>
                ))}
              </ul>
            </div>
          );
        })}
      </div>

      {/* Footnote — the real FX / pricing story */}
      <div style={{
        marginTop: 28, textAlign: 'center',
        fontSize: 12.5, lineHeight: 1.55,
        color: dark ? 'rgba(255,255,255,0.55)' : 'var(--cal-muted)',
        maxWidth: 720, marginLeft: 'auto', marginRight: 'auto',
      }}>
        NZD and AUD billed at parity — no catch, no renewal hike. Change currency anytime from your billing settings.<br/>
        Legacy ATSes bill you USD and charge FX on every invoice. Caliber doesn&rsquo;t.
      </div>
    </div>
  );
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
const TESTIMONIALS = [
  { quote: 'We cancelled Bullhorn, LinkedIn Recruiter and Gem in the same week. Our tooling bill dropped 58% and our consultants actually prefer the tool now.',
    name: 'Hana Wetere', title: 'Managing Director', org: 'Kārearea Talent', city: 'Auckland' },
  { quote: 'Scout is the only sourcing tool in our stack that keeps up with how we actually brief roles. It replaced three seats of Recruiter on the first day.',
    name: 'Sam Partridge', title: 'Head of Delivery', org: 'Harbour & Co.', city: 'Wellington' },
  { quote: 'Migration took nine days. The Caliber team moved 187,000 candidates, seventeen client portals and every open pipeline. Nothing broke.',
    name: 'Georgia Bermann', title: 'Ops Lead', org: 'Tuatara Search', city: 'Sydney' },
];
function Testimonials() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
      {TESTIMONIALS.map((t, i) => (
        <figure key={i} style={{
          margin: 0, background: i === 1 ? 'var(--cal-blue-ink)' : '#fff',
          color: i === 1 ? '#fff' : 'var(--cal-ink)',
          border: i === 1 ? 'none' : '1px solid var(--cal-line)',
          borderRadius: 20, padding: 24,
        }}>
          <div style={{ display: 'flex', gap: 6, marginBottom: 12 }}>
            {[0,1,2,3,4].map(k => (
              <CalStar key={k} size={14} grad={i !== 1} style={{ color: i === 1 ? 'var(--cal-accent)' : undefined }} />
            ))}
          </div>
          <blockquote style={{ margin: 0, fontSize: 17, lineHeight: 1.5, letterSpacing: '-0.01em', fontWeight: 500 }}>
            “{t.quote}”
          </blockquote>
          <figcaption style={{ marginTop: 20, display: 'flex', alignItems: 'center', gap: 10 }}>
            <Avatar name={t.name} size={36} />
            <div>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{t.name}</div>
              <div style={{ fontSize: 12, opacity: 0.7 }}>{t.title}, {t.org} · {t.city}</div>
            </div>
          </figcaption>
        </figure>
      ))}
    </div>
  );
}

/* =========================================================
   FAQ
   ========================================================= */
const FAQS = [
  { q: 'How do you replace LinkedIn Recruiter?', a: 'Scout indexes 2.4 billion public professional profiles and matches them against your brief — in plain English, no boolean strings, no search credits. Filter across 7 dimensions to refine.' },
  { q: 'Will you really buy out our Bullhorn / JobAdder contract?', a: 'Yes — we give you Caliber free for the remaining term of your current ATS. For a 10-seat agency halfway through a 24-month contract, that\'s up to NZ$36,000 of zero-invoice Caliber Pro while your old tool runs out the clock. No paperwork drama, no hard cap, no fine print. One conversation to scope it.' },
  { q: 'Where is my data stored?', a: 'Australia (Sydney) by default. Privacy Act 2020 (NZ) and GDPR-aware. Encryption at rest.' },
  { q: 'How is Scout priced?', a: 'Scout is included free with Caliber Pro. Pro comes with $150 of Scout unlock credits every month — yours to use, not sold to you. Credits unlock a candidate\'s full profile: verified contact details, work history, outreach-ready. Top up anytime, renews monthly.' },
  { q: 'How do I get my team onto Caliber?', a: "You're not doing this alone. A real person on our team runs your migration end-to-end — they'll call you to scope it, move your data, and walk you through cutover. Days if you're rushing; months over coffee if you'd rather plan it together. Your first Scout shortlist runs the day after cutover — whenever you pick that day. And yes, we'll put the kettle on." },
  { q: 'What happens if I switch back?', a: 'Request a full export anytime — CSV or JSON, delivered direct. No lock-in, no exit fees. We\'d rather earn your renewal than trap it.' },
  { q: 'Is Caliber overkill for agencies under 5 seats?', a: 'No — Caliber works for solo recruiters and up. If you\'re under 5 seats, email us and we\'ll skip the kickoff formalities and get you live in a day.' },
  { q: 'Will my recruiters actually use it?', a: 'We\'ve designed Caliber so daily workflows take fewer clicks than the tools they replace. Most recruiters are productive on day two without training. The opinionated default: every feature you reach for is on the screen you\'re already on.' },
];
function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 64 }}>
      <div>
        <h2 style={{ fontSize: 48, fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.05, margin: '0 0 16px' }}>
          Questions, <span style={{ color: 'var(--cal-blue-ink)' }}>answered.</span>
        </h2>
        <p style={{ fontSize: 17, color: 'var(--cal-body)', lineHeight: 1.55 }}>
          Can’t find what you’re looking for? <a href="#" style={{ color: 'var(--cal-blue-ink)' }}>Chat with us</a> — a real person replies in under four minutes during NZ business hours.
        </p>
      </div>
      <div style={{ borderTop: '1px solid var(--cal-line)' }}>
        {FAQS.map((f, i) => (
          <div key={i} style={{ borderBottom: '1px solid var(--cal-line)' }}>
            <button onClick={() => setOpen(open === i ? -1 : i)} style={{
              width: '100%', textAlign: 'left', padding: '22px 4px', cursor: 'pointer',
              background: 'transparent', border: 'none', fontFamily: 'inherit',
              display: 'flex', alignItems: 'center', gap: 16,
            }}>
              <span style={{ fontSize: 18, fontWeight: 500, color: 'var(--cal-ink)', flex: 1 }}>{f.q}</span>
              <span style={{
                width: 32, height: 32, borderRadius: 999, border: '1px solid var(--cal-line)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                transition: 'transform .2s',
              }}>{Icon.plus({ size: 14 })}</span>
            </button>
            <div style={{
              maxHeight: open === i ? 200 : 0, overflow: 'hidden',
              transition: 'max-height .3s ease',
            }}>
              <p style={{ margin: '0 4px 22px', fontSize: 15, color: 'var(--cal-body)', lineHeight: 1.55, maxWidth: 680 }}>{f.a}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* =========================================================
   FOOTER
   ========================================================= */
/* ---------- Social icon SVGs (inline, 16px default) ---------- */
const SOCIAL_ICONS = {
  LinkedIn: (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden style={{ width: '100%', height: '100%' }}>
      <path d="M20.5 2h-17A1.5 1.5 0 0 0 2 3.5v17A1.5 1.5 0 0 0 3.5 22h17a1.5 1.5 0 0 0 1.5-1.5v-17A1.5 1.5 0 0 0 20.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 1 1 8.25 6.5 1.76 1.76 0 0 1 6.5 8.25zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93a1.74 1.74 0 0 0-1.62 1.93V19h-3v-9h2.89v1.45a3 3 0 0 1 2.81-1.5c1.73 0 3.3 1 3.3 3.23z" />
    </svg>
  ),
  X: (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden style={{ width: '100%', height: '100%' }}>
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
    </svg>
  ),
  Instagram: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden style={{ width: '100%', height: '100%' }}>
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r="1" fill="currentColor" />
    </svg>
  ),
};

// Every footer link MUST resolve to a real page or anchor. Add new pages here
// before exposing the nav item.
const FOOTER_HREFS = {
  'Product':       'Product.html',
  'Scout':         'Scout.html',
  'Pricing':       'Pricing.html',
  'Migration':     'Migration.html',
  'Compare':       'Compare.html',
  'vs Bullhorn':   'Compare-Bullhorn.html',
  'vs JobAdder':   'Compare-JobAdder.html',
  'About':         'About.html',
  'Careers':       'Careers.html',
  'Contact':       'Contact.html',
  'Privacy':       'Privacy.html',
  'Terms':         'Terms.html',
};

function Footer() {
  return (
    <footer style={{
      background: 'var(--cal-ink)', color: 'rgba(255,255,255,0.7)',
      padding: '72px 72px 40px', position: 'relative', overflow: 'hidden',
    }}>
      {/* Giant wordmark watermark — anchored bottom, oversized so it bleeds
          past left/right edges and the bottom crops. Low opacity so it reads
          as decorative background. aria-hidden because the small wordmark in
          the left column + copyright line carry the real mark. */}
      <img
        src="assets/Wordmark 2.svg"
        alt=""
        aria-hidden
        style={{
          position: 'absolute',
          left: '50%',
          top: '50%',
          transform: 'translate(-50%, -50%)',
          height: '85%',
          width: 'auto',
          maxWidth: 'none',
          opacity: 0.04,
          pointerEvents: 'none',
          userSelect: 'none',
          zIndex: 0,
        }}
      />
      <div className="cal-container" style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 40 }}>
        <div>
          <CalLogo size={22} mono />
          {/* S17.5 — support copy replaces the prior product-tagline. */}
          <p style={{ marginTop: 16, fontSize: 14, maxWidth: 320, lineHeight: 1.55, color: 'rgba(255,255,255,0.75)' }}>
            Human replies, during NZ business hours. <span style={{ color: '#fff' }}>No tickets, no queues, no bots.</span> Maybe a coffee if you want to ask in person.
          </p>
          {/* S17.3 — real social SVG icons (LinkedIn, X, Instagram). */}
          <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
            {[
              { k: 'LinkedIn', href: 'https://www.linkedin.com/company/caliber' },
              { k: 'X',        href: 'https://x.com/calibernz' },
              { k: 'Instagram',href: 'https://instagram.com/caliber.nz' },
            ].map(s => (
              <a
                key={s.k}
                href={s.href}
                aria-label={s.k}
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  width: 34, height: 34, borderRadius: 999,
                  background: 'rgba(255,255,255,0.06)',
                  border: '1px solid rgba(255,255,255,0.08)',
                  color: 'rgba(255,255,255,0.72)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  padding: 8, boxSizing: 'border-box',
                  transition: 'color .15s, background .15s, border-color .15s',
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.color = '#fff';
                  e.currentTarget.style.background = 'rgba(255,255,255,0.12)';
                  e.currentTarget.style.borderColor = 'rgba(255,255,255,0.18)';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.color = 'rgba(255,255,255,0.72)';
                  e.currentTarget.style.background = 'rgba(255,255,255,0.06)';
                  e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)';
                }}
              >
                {SOCIAL_ICONS[s.k]}
              </a>
            ))}
          </div>
        </div>
        {[
          { h: 'Product', links: ['Product', 'Scout', 'Pricing', 'Migration'] },
          { h: 'Compare', links: ['vs Bullhorn', 'vs JobAdder', 'Compare'] },
          { h: 'Company', links: ['About', 'Careers', 'Contact'] },
          { h: 'Legal',   links: ['Terms', 'Privacy'] },
        ].map(col => (
          <div key={col.h}>
            <div style={{ color: '#fff', fontSize: 13, fontWeight: 500, marginBottom: 14 }}>{col.h}</div>
            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {col.links.map(l => (
                <li key={l}><a href={FOOTER_HREFS[l] || '#'} style={{ color: 'rgba(255,255,255,0.6)', textDecoration: 'none', fontSize: 14 }}>{l}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      {/* Centered CalLogo replaced by the giant watermark behind everything. */}

      <div style={{
        position: 'relative', zIndex: 1,
        borderTop: '1px solid rgba(255,255,255,0.1)',
        marginTop: 72, paddingTop: 24, display: 'flex', justifyContent: 'space-between', fontSize: 13,
      }}>
        <span>© 2026 Caliber Technologies Ltd. Auckland NZ</span>
        <span style={{ opacity: 0.7 }}>Built in Auckland, Hamilton and Christchurch.</span>
      </div>
    </footer>
  );
}

/* =========================================================
   CTA BLOCK — big blue block with Scout star + buttons
   ========================================================= */
function CTABand({ title = 'Ready when you are. We’ll handle the move.', sub = 'A personalised demo, a real migration lead, and we’ll buy out what’s left of your current contract. Fast as days if you’re rushing; months over coffee if you’d rather plan it.', primary = 'Book a demo', secondary = 'Email sales' }) {
  return (
    <div style={{
      position: 'relative', borderRadius: 32, overflow: 'hidden',
      background: 'linear-gradient(135deg, #0052FF 0%, #0009B6 60%, #060847 100%)',
      color: '#fff', padding: '80px 64px',
    }}>
      <div className="cal-noise" />
      {/* giant star */}
      <div style={{
        position: 'absolute', right: -60, top: -40, opacity: 0.25,
        transform: 'rotate(18deg)', animation: 'cal-bob 6s ease-in-out infinite',
      }}>
        <CalStar size={340} grad={false} style={{ color: '#fff' }} />
      </div>
      <div style={{ position: 'relative', maxWidth: 700 }}>
        <div className="cal-eyebrow" style={{ background: 'rgba(255,255,255,0.12)', color: '#fff', border: '1px solid rgba(255,255,255,0.2)', marginBottom: 18 }}>
          <CalStar size={11} grad={false} style={{ color: 'var(--cal-accent)' }} />
          New customers · we move you
        </div>
        <h2 style={{ fontSize: 'clamp(36px, 3.6vw, 52px)', fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.05, margin: '0 0 18px', textWrap: 'balance' }}>{title}</h2>
        <p style={{ fontSize: 19, lineHeight: 1.5, opacity: 0.9, margin: '0 0 32px', maxWidth: 560 }}>{sub}</p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <button className="cal-btn cal-btn--white" style={{ padding: '14px 24px', fontSize: 15 }}>
            {primary} {Icon.arrowR({ size: 14 })}
          </button>
          <button className="cal-btn" style={{
            padding: '14px 24px', fontSize: 15,
            background: 'rgba(255,255,255,0.12)', color: '#fff',
            border: '1px solid rgba(255,255,255,0.3)',
          }}>{secondary}</button>
        </div>
      </div>
    </div>
  );
}

/* =========================================================
   COMPARISON LEDGER — "What you get for less"
   Editorial row-grouped table, prose cells, no checkmarks.
   Columns: Caliber, Caliber Pro, JobAdder, Bullhorn, TeamTailor.
   Caliber's two columns flex with the global currency toggle
   (useCaliberCurrency); competitor figures stay in NZD on purpose —
   they don't offer your currency, that's half the point.
   LinkedIn Recruiter is folded into each competitor as a
   "+ if you also pay LI Recruiter" accent line.
   Cell content is aggregator-level research (Pin, Vendr, TrustRadius,
   HeroHunt). Caliber gaps flagged as "on roadmap" where JobAdder /
   Bullhorn ship today.
   ========================================================= */

// LinkedIn Recruiter add-on pricing per currency.
// NZ$18,000/yr is canonical (Corporate fully-loaded upper bound per homepage
// cancel-linkedin footnote: USD Corporate list + 15% renewal + InMail overage).
// Other currencies converted at real-world FX (not parity-authored like Caliber's).
// LinkedIn Recruiter tiers. Corporate NZ$18,000/yr is canonical
// (fully-loaded upper bound per homepage cancel-linkedin footnote).
// Other tiers derived from public research. Currencies approximated at FX.
const LI_TIERS = [
  { key: 'none',         label: 'None',         amountYr: { NZD: 0,     AUD: 0,     GBP: 0,    USD: 0 } },
  { key: 'lite',         label: 'Lite',         amountYr: { NZD: 2400,  AUD: 2240,  GBP: 1120, USD: 1440 } },
  { key: 'professional', label: 'Professional', amountYr: { NZD: 12000, AUD: 11200, GBP: 5640, USD: 7200 } },
  { key: 'corporate',    label: 'Corporate',    amountYr: { NZD: 18000, AUD: 16800, GBP: 8400, USD: 10800 } },
];
const LI_TIER_MAP = Object.fromEntries(LI_TIERS.map(t => [t.key, t]));

// Rows — cells array is [caliber-base, caliber-pro, jobadder, bullhorn, loxo, teamtailor].
const COMP_GROUPS = [
  {
    title: 'Built for agencies?',
    rows: [
      { label: 'Primary customer',
        cells: ['Recruitment agencies, any size.', 'Recruitment agencies, any size.', 'Recruitment agencies — ANZ-native.', 'Enterprise staffing.', 'Agencies + executive search.', 'In-house TA teams.'] },
      { label: 'Modern ATS — pipelines, kanban, saved filters',
        cells: ['Included.', 'Included.', 'Included. Dated UX per reviewers.', 'Included. Dated UX per reviewers.', 'Included. Modern UI.', 'Included. Modern UI.'] },
      { label: 'Contacts + Companies CRM',
        cells: ['Included.', 'Included.', 'Included.', 'Included.', 'Included.', 'Candidate CRM only.'] },
      { label: 'BD / deals pipeline',
        cells: ['On roadmap.', 'On roadmap.', 'Included. Placements + deals.', 'Full staffing CRM + deals.', 'Included. Forecasts.', 'Not offered.'] },
      { label: 'Caliber Chat (candidate · contact · team messaging)',
        cells: ['Included. Three-segment chat.', 'Included. Three-segment chat.', 'In-app messaging + SMS partner.', 'Messaging + Slack-style channels.', 'In-app messaging + outreach automation (higher tiers).', 'Native messaging + collaboration.'] },
    ],
  },
  {
    title: 'Sourcing',
    rows: [
      { label: 'AI sourcing — plain-English, open web',
        cells: ['Add Caliber Pro for Scout.', 'Caliber Scout. 2.4B+ open-web profiles. $150/mo credits.', 'Database only. No open web.', 'Amplify AI (2025). Job boards + your DB only.', 'Loxo Source tier only. Open-web sourcing.', 'Talent-pool suggestions only.'] },
      { label: 'SEEK Talent Search',
        cells: ['Add Pro for Scout (covers SEEK + the open web).', "Scout covers SEEK's pool + the rest of the open web.", 'SEEK TSC — ~12 M profiles (~4.5 M ANZ). Separate SEEK licence.', 'Via marketplace partners.', 'No native SEEK TSC.', 'SEEK posting only — no TSC.'] },
    ],
  },
  {
    title: 'Distribution + ops',
    rows: [
      { label: 'Job board distribution',
        cells: ['2,500+ boards. SEEK Direct Apply.', '2,500+ boards. SEEK Direct Apply.', '200+ boards. Broadbean connects 7,000+.', 'Via Marketplace (Broadbean, LogicMelon).', 'Via integrations — count not published.', 'Indeed / Glassdoor / SEEK + API.'] },
      { label: 'Timesheets + contractor management',
        cells: ['On roadmap.', 'On roadmap.', 'Native. Karmly + Invoxy integrations.', 'Deepest in category. Back office + VMS.', 'Not in scope.', 'Not in scope.'] },
      { label: 'Reporting + dashboards',
        cells: ['Core metrics today. Custom reports on roadmap.', 'Core metrics today. Custom reports on roadmap.', 'Pro dashboards included.', 'Canvas analytics — add-on, NZ$70–100/seat.', 'Included.', 'Included.'] },
      { label: 'Native iOS + Android apps',
        cells: ['Mobile web today. Native apps on roadmap.', 'Mobile web today. Native apps on roadmap.', 'iOS + Android.', 'iOS + Android.', 'iOS + Android.', 'iOS + Android.'] },
    ],
  },
  {
    title: 'Commercials',
    rows: [
      { label: 'Try before you pay',
        cells: ['14 days, no card, full product.', '14 days, no card, full product.', 'Demo request only — no public trial.', 'No trial — sales demo + annual contract.', '7 days Pro, then 1-seat free tier (no Source).', '14 days, no card — but 12-month contract to continue.'] },
      { label: 'Migration from your current ATS',
        cells: ['We do it. Your pace.', 'We do it. Your pace.', 'Available. Quote-based.', 'Paid implementation. NZ$1.7K–$85K+.', 'Paid migration service.', 'Managed migration. $0–$5K.'] },
      { label: 'Contract term',
        cells: ['Monthly or annual. Cancel anytime.', 'Monthly or annual. Cancel anytime.', '12-month typical.', '12-month minimum. Monthly +15–20%.', '12-month typical.', '12-month minimum.'] },
      { label: 'Billed in your currency',
        cells: ['NZD · AUD · GBP · USD, authored parity.', 'NZD · AUD · GBP · USD, authored parity.', 'AUD for ANZ.', 'USD (HQ Boston).', 'USD (HQ US).', 'EUR / USD (HQ Sweden).'] },
      { label: 'Renewal hikes',
        cells: ['None. Authored pricing holds.', 'None. Authored pricing holds.', 'Not publicly disclosed.', '~20% / yr reported.', 'Not publicly disclosed.', '3–8% / yr escalator.'] },
      { label: 'Data export',
        cells: ['Full export on request.', 'Full export on request.', 'CSV / API available.', 'Paid exit NZ$8.5K–$17K.', 'Available.', 'CSV / API standard.'] },
    ],
  },
];

// Competitor metadata. cellIdx is the position in each COMP_GROUPS row's
// cells array (0=caliberBase, 1=caliberPro, 2=jobadder, 3=bullhorn, 4=loxo, 5=teamtailor).
const COMP_VENDORS = [
  { key: 'jobadder',   name: 'JobAdder',   cellIdx: 2, price: 'Quote-based',     sub: 'NZ$170–353/seat/mo · 12-mo · AUD',     zinger: "Price depends on who's asking.", annualRange: [2040, 4235] },
  { key: 'bullhorn',   name: 'Bullhorn',   cellIdx: 3, price: 'Quote-based',     sub: 'NZ$170–535/seat/mo · 12-mo · USD',     zinger: "Price depends on who's asking.", annualRange: [2040, 6420] },
  { key: 'loxo',       name: 'Loxo',       cellIdx: 4, price: 'From NZ$200/mo',   sub: 'Source tier NZ$835/mo · 12-mo · USD',  annualRange: [2400, 10000], sourcingInBase: true },
  { key: 'teamtailor', name: 'TeamTailor', cellIdx: 5, price: 'From NZ$390/mo',   sub: 'Job-slot · unlimited seats · 12-mo · EUR', annualRange: [4680, 29000] },
];

function ComparisonTable() {
  const [cur] = useCaliberCurrency();
  const curObj = CAL_CUR_MAP[cur];
  const baseTier = CALIBER_TIERS.find(t => t.name === 'Caliber');
  const proTier  = CALIBER_TIERS.find(t => t.name === 'Caliber Pro');
  const basePrice = baseTier.prices[cur].annual;
  const proPrice  = proTier.prices[cur].annual;
  const baseAnnual = basePrice * 12;
  const proAnnual  = proPrice  * 12;
  const fmt = (n) => `${curObj.symbol}${n.toLocaleString()}`;

  const monoFX = { fontFamily: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace', fontVariantNumeric: 'tabular-nums' };

  // Single-select competitor. Default JobAdder (home market rival).
  const [selectedCompetitorKey, setSelectedCompetitorKey] = React.useState('jobadder');
  const selectedCompetitor = COMP_VENDORS.find(v => v.key === selectedCompetitorKey) || COMP_VENDORS[0];

  // LI Recruiter tier. Default Corporate (matches canonical NZ$18,000/yr fully-loaded upper bound).
  const [liTier, setLiTier] = React.useState('corporate');
  const liTierObj = LI_TIER_MAP[liTier];
  const liAmount = liTierObj.amountYr[cur];
  const liIsOn = liTier !== 'none';

  // Recommendation: pay LI → Pro (Scout replaces LI). No LI → base (no Scout needed).
  // Recommended tier always leftmost of the two Caliber columns.
  const recommended = liIsOn ? 'pro' : 'base';
  const caliberOrder = recommended === 'pro' ? ['pro', 'base'] : ['base', 'pro'];
  const isRecommended = (tierKey) => recommended === tierKey;

  // 4-col grid: Label | Caliber A | Caliber B | Competitor.
  const rowGrid = {
    display: 'grid',
    gridTemplateColumns: '1.3fr 1fr 1fr 1fr',
    alignItems: 'stretch',
  };
  const cellBase = {
    padding: '20px 18px', fontSize: 14.5, lineHeight: 1.5,
    color: 'var(--cal-body)', borderTop: '1px solid var(--cal-line-2)',
  };
  const labelCell = {
    ...cellBase, color: 'var(--cal-ink)', fontWeight: 500,
    background: 'var(--cal-bg-soft)', borderRight: '1px solid var(--cal-line-2)',
  };
  // Recommended Caliber tier = solid blue hero; secondary = pale blue family tint.
  const caliberRecommendedCell = {
    ...cellBase, color: '#fff', fontWeight: 500,
    background: 'var(--cal-blue-ink)',
  };
  const caliberSecondaryCell = {
    ...cellBase, color: 'var(--cal-blue-ink)', fontWeight: 500,
    background: 'rgba(0,9,182,0.04)',
    borderRight: '1px solid rgba(0,9,182,0.08)',
  };
  const competitorCellStyle = { ...cellBase };
  const caliberCellStyle = (tierKey) => isRecommended(tierKey) ? caliberRecommendedCell : caliberSecondaryCell;

  // Per-Caliber-tier header info. cellIdx maps to row.cells[i] in COMP_GROUPS.
  const caliberHeaders = {
    base: { name: 'Caliber',     price: fmt(basePrice), cellIdx: 0 },
    pro:  { name: 'Caliber Pro', price: fmt(proPrice),  cellIdx: 1 },
  };

  // --- Summary-row cell values (computed once per render) ---
  // Caliber Base: flat annual + LI if selected (user "pays LI regardless" scenario).
  const baseTotal = baseAnnual + liAmount;
  // Caliber Pro: flat annual, Scout included — no LI needed.
  const proTotal  = proAnnual;
  // Competitor: base range + LI (Loxo special-cased when LI is on → show Source tier).
  const v = selectedCompetitor;
  let compLo = v.annualRange[0];
  let compHi = v.annualRange[1];
  let compNote;
  if (v.sourcingInBase && liIsOn) {
    compLo = v.annualRange[1]; compHi = v.annualRange[1];
    compNote = 'Source tier · sourcing included.';
  } else if (liIsOn) {
    compLo += liAmount; compHi += liAmount;
    compNote = `Base + LinkedIn Recruiter ${liTierObj.label}.`;
  } else {
    compNote = v.key === 'jobadder' ? 'Core to Pro tier.'
      : v.key === 'bullhorn' ? 'Team to Enterprise tier.'
      : v.key === 'loxo' ? 'Pro to Source tier.'
      : 'Typical contract range.';
  }
  const fmtRange = (lo, hi) => {
    if (lo === hi) return `${curObj.symbol}${lo.toLocaleString()}`;
    return hi >= 10000
      ? `${curObj.symbol}${lo.toLocaleString()}–${Math.round(hi / 1000)}K`
      : `${curObj.symbol}${lo.toLocaleString()}–${hi.toLocaleString()}`;
  };
  const compTotalText = fmtRange(compLo, compHi);

  // Savings — how much Caliber Pro (the recommended tier when LI is on) beats
  // the competitor. When LI is off and Caliber base is the recommendation,
  // reframe the savings line around base vs competitor.
  const recTotal = recommended === 'pro' ? proTotal : baseTotal;
  const savingsLo = compLo - recTotal;
  const savingsHi = compHi - recTotal;
  const roundK = (n) => {
    const abs = Math.abs(n);
    if (abs >= 10000) return `${Math.round(abs / 1000)},000`;
    return abs.toLocaleString();
  };
  // Headline + hero-number + caption for the savings callout. Three regimes.
  let savingsLead, savingsAmount, savingsCaption;
  const recName = caliberHeaders[recommended].name;
  if (savingsLo >= 0 && savingsHi >= 0) {
    savingsLead = `Switching to ${recName} saves`;
    savingsAmount = savingsLo === savingsHi
      ? `${curObj.symbol}${roundK(savingsLo)}`
      : `${curObj.symbol}${roundK(savingsLo)}–${roundK(savingsHi)}`;
    savingsCaption = 'per recruiter per year.';
  } else if (savingsLo < 0 && savingsHi < 0) {
    savingsLead = `${recName} costs`;
    const loAbs = Math.min(Math.abs(savingsLo), Math.abs(savingsHi));
    const hiAbs = Math.max(Math.abs(savingsLo), Math.abs(savingsHi));
    savingsAmount = loAbs === hiAbs
      ? `${curObj.symbol}${roundK(loAbs)} more`
      : `${curObj.symbol}${roundK(loAbs)}–${roundK(hiAbs)} more`;
    savingsCaption = 'than a bare ATS — with Scout included.';
  } else {
    savingsLead = `${recName} sits between`;
    savingsAmount = `${curObj.symbol}${roundK(Math.abs(Math.min(savingsLo, savingsHi)))} more and ${curObj.symbol}${roundK(Math.abs(Math.max(savingsLo, savingsHi)))} less`;
    savingsCaption = 'depending on tier — with Scout included.';
  }

  // Recommendation message under the Recommended badge.
  const recommendedReason = liIsOn
    ? `Scout replaces LinkedIn Recruiter — saves ${curObj.symbol}${liAmount.toLocaleString()}/yr.`
    : 'No Scout needed — lowest price here.';

  return (
    <div>
      <div style={{ marginBottom: 36 }}>
        <div className="cal-eyebrow" style={{ marginBottom: 18 }}>
          <CalStar size={11} grad={false} style={{ color: 'var(--cal-blue-ink)' }} />
          What you get for less
        </div>
        <h2 style={{
          margin: '0 0 16px',
          fontSize: 'clamp(40px, 4.5vw, 64px)',
          fontWeight: 500,
          letterSpacing: '-0.03em',
          lineHeight: 1.04,
          textWrap: 'balance',
        }}>
          One subscription vs. <span style={{ color: 'var(--cal-blue-ink)' }}>the stack you already pay for.</span>
        </h2>
        <p style={{
          fontSize: 17, color: 'var(--cal-body)', lineHeight: 1.55,
          maxWidth: 680, margin: 0,
        }}>
          Tell us your setup — we'll flip the recommendation accordingly. Caliber rows marked <em style={{ fontStyle: 'italic', color: 'var(--cal-ink)' }}>on roadmap</em> are on the 2026 build plan.
        </p>
      </div>

      {/* Controls panel — grid-aligned labels + pills. No header; the field labels
          themselves carry the meaning. */}
      <div style={{
        background: '#fff',
        border: '1px solid var(--cal-line)',
        borderRadius: 20,
        padding: '22px 28px',
        marginBottom: 28,
        boxShadow: 'var(--shadow-sm)',
        display: 'grid',
        gridTemplateColumns: '180px 1fr',
        rowGap: 16,
        columnGap: 20,
        alignItems: 'center',
      }}>
        {/* Row 1 — Currency */}
        <div style={{
          fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase',
          color: 'var(--cal-muted)', fontWeight: 700,
        }}>Pricing currency</div>
        <div><CurrencyToggle size="sm" /></div>

        {/* Row 2 — Competitor */}
        <div style={{
          fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase',
          color: 'var(--cal-muted)', fontWeight: 700,
        }}>Compare against</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', paddingLeft: 5 }}>
          {COMP_VENDORS.map(ven => {
            const on = ven.key === selectedCompetitorKey;
            return (
              <button
                key={ven.key}
                onClick={() => setSelectedCompetitorKey(ven.key)}
                aria-pressed={on}
                style={{
                  padding: '7px 14px', borderRadius: 999,
                  background: on ? 'var(--cal-ink)' : '#fff',
                  color: on ? '#fff' : 'var(--cal-ink)',
                  border: `1px solid ${on ? 'var(--cal-ink)' : 'var(--cal-line)'}`,
                  fontFamily: 'inherit', fontSize: 13, fontWeight: on ? 600 : 500,
                  cursor: 'pointer', transition: 'all .15s',
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                }}>
                <span style={{
                  width: 7, height: 7, borderRadius: 999,
                  background: on ? 'var(--cal-accent)' : 'var(--cal-muted-2)',
                }} />
                {ven.name}
              </button>
            );
          })}
        </div>

        {/* Row 3 — LI Recruiter tier */}
        <div style={{
          fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase',
          color: 'var(--cal-muted)', fontWeight: 700,
        }}>LinkedIn Recruiter</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', paddingLeft: 5 }}>
          {LI_TIERS.map(t => {
            const on = t.key === liTier;
            const amount = t.amountYr[cur];
            const label = t.key === 'none'
              ? 'None'
              : `${t.label} · ${curObj.symbol}${(amount / 1000).toFixed(amount < 10000 ? 1 : 0).replace(/\.0$/, '')}K/yr`;
            return (
              <button
                key={t.key}
                onClick={() => setLiTier(t.key)}
                aria-pressed={on}
                style={{
                  padding: '7px 14px', borderRadius: 999,
                  background: on ? 'var(--cal-ink)' : '#fff',
                  color: on ? '#fff' : 'var(--cal-ink)',
                  border: `1px solid ${on ? 'var(--cal-ink)' : 'var(--cal-line)'}`,
                  fontFamily: 'inherit', fontSize: 13, fontWeight: on ? 600 : 500,
                  cursor: 'pointer', transition: 'all .15s',
                }}>
                {label}
              </button>
            );
          })}
        </div>
      </div>

      <div style={{
        border: '1px solid var(--cal-line)',
        borderRadius: 24, overflow: 'hidden',
        background: '#fff', boxShadow: 'var(--shadow-sm)',
      }}>
        {/* Header row — columns in caliberOrder: recommended first, then secondary, then competitor. */}
        <div style={rowGrid}>
          <div style={{
            padding: '22px 18px', background: 'var(--cal-bg-soft)',
            borderRight: '1px solid var(--cal-line-2)',
            fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase',
            color: 'var(--cal-muted)', fontWeight: 600,
            display: 'flex', alignItems: 'flex-end',
          }}>
            What you pay for
          </div>
          {caliberOrder.map((tierKey) => {
            const h = caliberHeaders[tierKey];
            const isRec = isRecommended(tierKey);
            const bg = isRec ? 'var(--cal-blue-ink)' : 'rgba(0,9,182,0.04)';
            const textColor = isRec ? '#fff' : 'var(--cal-blue-ink)';
            const borderR = isRec ? 'none' : '1px solid rgba(0,9,182,0.08)';
            return (
              <div key={tierKey} style={{
                padding: '28px 20px 22px', background: bg, color: textColor,
                borderRight: borderR, position: 'relative',
              }}>
                {isRec && (
                  <div style={{
                    position: 'absolute', top: 14, right: 14,
                    padding: '4px 10px', borderRadius: 999,
                    background: 'var(--cal-accent)', color: '#fff',
                    fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em',
                    textTransform: 'uppercase',
                  }}>Recommended</div>
                )}
                <div style={{
                  fontSize: 11, fontWeight: 700, letterSpacing: '0.12em',
                  textTransform: 'uppercase', marginBottom: 14,
                  color: isRec ? 'rgba(255,255,255,0.72)' : 'rgba(0,9,182,0.65)',
                }}>{h.name}</div>
                <div style={{ marginBottom: 4 }}>
                  <span style={{
                    ...monoFX, fontSize: 34, fontWeight: 500,
                    letterSpacing: '-0.03em', lineHeight: 1, color: textColor,
                  }}>{h.price}</span>
                </div>
                <div style={{
                  fontSize: 12, lineHeight: 1.45, marginTop: 6,
                  color: isRec ? 'rgba(255,255,255,0.65)' : 'rgba(0,9,182,0.6)',
                }}>per seat / mo · {cur}</div>
                {isRec && (
                  <div style={{
                    marginTop: 12, paddingTop: 10,
                    borderTop: '1px dashed rgba(255,255,255,0.28)',
                    fontSize: 11.5, fontWeight: 500, lineHeight: 1.4,
                    color: 'rgba(255,255,255,0.92)',
                  }}>{recommendedReason}</div>
                )}
              </div>
            );
          })}
          {/* Competitor header */}
          <div style={{ padding: '28px 20px 22px', background: '#fff', color: 'var(--cal-ink)', position: 'relative' }}>
            <div style={{
              fontSize: 11, fontWeight: 700, letterSpacing: '0.12em',
              textTransform: 'uppercase', marginBottom: 14,
              color: 'var(--cal-muted)',
            }}>{selectedCompetitor.name}</div>
            <div style={{ marginBottom: 4 }}>
              <span style={{
                ...monoFX,
                fontSize: /^(NZ\$|US\$|A\$|£|From|\$|€)/.test(selectedCompetitor.price) ? 34 : 24,
                fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1, color: 'var(--cal-ink)',
              }}>{selectedCompetitor.price}</span>
            </div>
            <div style={{ fontSize: 12, lineHeight: 1.45, marginTop: 6, color: 'var(--cal-muted)' }}>
              {selectedCompetitor.sub}
            </div>
            {selectedCompetitor.zinger && (
              <div style={{
                marginTop: 12, paddingTop: 10,
                borderTop: '1px dashed var(--cal-line-2)',
                fontSize: 11.5, fontWeight: 500, lineHeight: 1.4,
                color: 'var(--cal-body)',
              }}>{selectedCompetitor.zinger}</div>
            )}
          </div>
        </div>

        {/* Groups + rows */}
        {COMP_GROUPS.map(group => (
          <React.Fragment key={group.title}>
            <div style={{
              padding: '16px 18px',
              background: '#FAFAFB',
              borderTop: '1px solid var(--cal-line-2)',
              borderBottom: '1px solid var(--cal-line-2)',
              fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase',
              color: 'var(--cal-muted)', fontWeight: 700,
            }}>
              {group.title}
            </div>
            {group.rows.map(row => (
              <div key={row.label} style={rowGrid}>
                <div style={labelCell}>{row.label}</div>
                {caliberOrder.map((tierKey) => (
                  <div key={tierKey} style={caliberCellStyle(tierKey)}>
                    {row.cells[caliberHeaders[tierKey].cellIdx]}
                  </div>
                ))}
                <div style={competitorCellStyle}>
                  {row.cells[selectedCompetitor.cellIdx]}
                </div>
              </div>
            ))}
          </React.Fragment>
        ))}

        {/* Summary row — annual totals. Caliber base adds LI if selected;
            Caliber Pro stays flat (Scout replaces LI); competitor follows
            compTotal logic (Loxo special-cased for Source tier). */}
        <div style={{
          ...rowGrid,
          borderTop: '2px solid var(--cal-ink)',
          background: '#fff',
        }}>
          <div style={{ ...labelCell, background: '#fff' }}>
            <div style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--cal-muted)', fontWeight: 600, marginBottom: 6 }}>
              Annual per seat
            </div>
            <div style={{ fontSize: 13, color: 'var(--cal-body)', fontWeight: 400, lineHeight: 1.45 }}>
              {liIsOn
                ? `Includes LinkedIn Recruiter ${liTierObj.label} for tools without native sourcing.`
                : 'Base tool only. No open-web sourcing bundled.'}
            </div>
          </div>
          {caliberOrder.map((tierKey) => {
            const isRec = isRecommended(tierKey);
            const total = tierKey === 'pro' ? proTotal : baseTotal;
            const note = tierKey === 'pro'
              ? 'Flat. Scout included.'
              : liIsOn
                ? `Flat + LI ${liTierObj.label}.`
                : 'Flat. No Scout.';
            const txtColor = isRec ? '#fff' : 'var(--cal-blue-ink)';
            const subColor = isRec ? 'rgba(255,255,255,0.7)' : 'rgba(0,9,182,0.65)';
            return (
              <div key={tierKey} style={{ ...caliberCellStyle(tierKey), display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                <div style={{ ...monoFX, fontSize: isRec ? 24 : 22, fontWeight: 500, letterSpacing: '-0.02em', color: txtColor }}>{fmt(total)}</div>
                <div style={{ fontSize: 12, color: subColor, marginTop: 3 }}>{note}</div>
              </div>
            );
          })}
          <div style={{ ...competitorCellStyle, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div style={{ ...monoFX, fontSize: 20, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--cal-ink)' }}>{compTotalText}</div>
            <div style={{ fontSize: 12, color: 'var(--cal-muted)', marginTop: 3 }}>{compNote}</div>
          </div>
        </div>
      </div>

      {/* Hero savings callout — stacked layout with the dollar amount blasted up
          as the big moment. Lead line (small) → hero number (huge) → caption (medium)
          → fine-print context. */}
      <div style={{
        marginTop: 28, borderRadius: 24, overflow: 'hidden',
        background: 'linear-gradient(135deg, #0052FF 0%, #0009B6 55%, #060847 100%)',
        color: '#fff', padding: '48px 44px', position: 'relative',
      }}>
        <div className="cal-noise" />
        <div style={{ position: 'relative' }}>
          <div style={{
            fontSize: 18, fontWeight: 500, color: 'rgba(255,255,255,0.85)',
            letterSpacing: '-0.005em', marginBottom: 14,
          }}>
            {savingsLead}
          </div>
          <div style={{
            ...monoFX,
            fontSize: 'clamp(44px, 5.5vw, 76px)',
            fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1,
            color: 'var(--cal-accent)', marginBottom: 14,
          }}>
            {savingsAmount}
          </div>
          <div style={{
            fontSize: 17, color: 'rgba(255,255,255,0.8)',
            letterSpacing: '-0.005em', marginBottom: 22,
          }}>
            {savingsCaption}
          </div>
          <div style={{
            paddingTop: 18, borderTop: '1px solid rgba(255,255,255,0.12)',
            ...monoFX,
            fontSize: 12, color: 'rgba(255,255,255,0.55)',
            letterSpacing: '0.02em',
          }}>
            {liIsOn
              ? `LI ${liTierObj.label}: ${curObj.symbol}${liAmount.toLocaleString()}/yr · Scout: included in Caliber Pro`
              : `Scout available in Caliber Pro · LI Recruiter otherwise ${curObj.symbol}${LI_TIER_MAP.corporate.amountYr[cur].toLocaleString()}/yr`}
          </div>
        </div>
      </div>

      <div style={{
        marginTop: 18, fontSize: 12.5, color: 'var(--cal-muted)', lineHeight: 1.55,
        maxWidth: 940,
      }}>
        Caliber prices reflect the currency you selected — authored per tier, no FX markup, no renewal swing. Competitor figures are in NZD and aggregator-level (Pin, Vendr, TrustRadius, HeroHunt) — none publish per-seat pricing. Loxo Source includes open-web sourcing natively at the higher tier. Rows marked <em style={{ fontStyle: 'italic', color: 'var(--cal-ink)' }}>on roadmap</em> are shipping through 2026.
      </div>
    </div>
  );
}

/* =========================================================
   SCOUT HIGHLIGHT — Pricing-page dedicated panel for Scout,
   the axis where Caliber wins clean. Brand-blue gradient card
   sits inside a cool-blue section so it pops without breaking
   the "max 2 dark sections per page" rule (buyout + footer
   already hold those slots).
   ========================================================= */
const SCOUT_TILES = [
  { stat: '2.4B+',   label: 'Profiles indexed',     body: 'Intelligently gathered from across the open professional web. 3.7M Kiwis, 22M Aussies, 55M Brits, and 200+ more countries.' },
  { stat: '7',       label: 'Filter dimensions',    body: 'Brief in plain English. No boolean. Job title, skills, location, industry, employers, LinkedIn toggle.' },
  { stat: '$150/mo', label: 'Unlock credits, free', body: 'Refills every month with Caliber Pro. Spend on verified contact details for the candidates Scout surfaces. Top up anytime.' },
  { stat: 'Monthly', label: 'Profile refresh',      body: 'Re-indexed monthly \u2014 fresher titles and fewer dead emails than tools that snapshot once a year.' },
];

function ScoutHighlight() {
  return (
    <div style={{
      position: 'relative', borderRadius: 32, overflow: 'hidden',
      background: 'linear-gradient(135deg, #0052FF 0%, #0009B6 55%, #060847 100%)',
      color: '#fff', padding: '80px 64px',
    }}>
      <div className="cal-noise" />
      {/* Giant star watermark */}
      <div aria-hidden style={{
        position: 'absolute', right: -80, top: -60, opacity: 0.18,
        transform: 'rotate(22deg)', pointerEvents: 'none',
      }}>
        <CalStar size={380} grad={false} style={{ color: '#fff' }} />
      </div>

      <div style={{ position: 'relative' }}>
        {/* Headline row — left col gets more room so the orange "you're not seeing."
            stays unbroken on its own line. Right col still has plenty of room for the
            lede + CTA at smaller text. */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56, marginBottom: 56 }}>
          <div>
            <div className="cal-eyebrow" style={{
              background: 'rgba(255,255,255,0.08)', color: '#fff',
              border: '1px solid rgba(255,255,255,0.18)', marginBottom: 22,
            }}>
              <CalStar size={11} grad={false} style={{ color: 'var(--cal-accent)' }} />
              Caliber Scout · Included in Pro
            </div>
            <h2 style={{
              margin: 0,
              fontSize: 'clamp(38px, 4.2vw, 60px)',
              fontWeight: 500, letterSpacing: '-0.035em',
              lineHeight: 1.05, color: '#fff',
            }}>
              The candidates{' '}
              <span style={{
                fontFamily: '"Fraunces","Times New Roman",serif',
                fontStyle: 'normal', fontWeight: 700,
                fontVariationSettings: '"opsz" 14, "SOFT" 100, "WONK" 0, "wght" 700',
                color: 'var(--cal-accent)',
                letterSpacing: '-0.02em',
                whiteSpace: 'nowrap',
              }}>
                you're not seeing.
              </span>
            </h2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <p style={{
              margin: 0, fontSize: 'clamp(16px, 1.25vw, 19px)',
              lineHeight: 1.55, color: 'rgba(255,255,255,0.85)', maxWidth: 520,
            }}>
              Tap into billions of verified profiles with Caliber Scout's proprietary engine and uncover candidates your competitors will never see. It's the sourcing layer your ATS / CRM makes you pay LinkedIn Recruiter NZ$18,000 a year for. Included in Caliber Pro.
            </p>
            <a href="#live-demo" className="cal-btn cal-btn--white" style={{
              marginTop: 24, padding: '13px 22px', fontSize: 14,
              alignSelf: 'flex-start', textDecoration: 'none',
            }}>
              See how Scout runs {Icon.arrowR({ size: 13 })}
            </a>
          </div>
        </div>

        {/* Stat tiles */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {SCOUT_TILES.map(t => (
            <div key={t.label} style={{
              background: 'rgba(255,255,255,0.06)',
              border: '1px solid rgba(255,255,255,0.12)',
              borderRadius: 20, padding: 24,
            }}>
              <div style={{
                fontSize: 'clamp(26px, 2.4vw, 36px)', fontWeight: 500,
                letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 10,
                color: '#fff',
              }}>{t.stat}</div>
              <div style={{
                fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: 'var(--cal-accent)',
                marginBottom: 10,
              }}>{t.label}</div>
              <div style={{
                fontSize: 13, lineHeight: 1.55,
                color: 'rgba(255,255,255,0.75)',
              }}>{t.body}</div>
            </div>
          ))}
        </div>

        {/* What the others do — footnote strip */}
        <div style={{
          marginTop: 36, padding: '20px 24px', borderRadius: 14,
          background: 'rgba(0,0,0,0.22)', border: '1px solid rgba(255,255,255,0.08)',
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24,
          fontSize: 12.5, color: 'rgba(255,255,255,0.7)', lineHeight: 1.55,
        }}>
          <div><strong style={{ color: '#fff', fontWeight: 600 }}>JobAdder</strong> queries SEEK's 12M-profile pool via TSC — separate SEEK licence.</div>
          <div><strong style={{ color: '#fff', fontWeight: 600 }}>Bullhorn Amplify</strong> (2025) reads job boards + your DB. No open web.</div>
          <div><strong style={{ color: '#fff', fontWeight: 600 }}>Loxo Source</strong> has real open-web sourcing — at the higher tier, ~NZ$10,000/yr.</div>
          <div><strong style={{ color: '#fff', fontWeight: 600 }}>LinkedIn Recruiter</strong> is the ~NZ$18,000/yr alternative you're trying to cancel.</div>
        </div>
      </div>
    </div>
  );
}

/* =========================================================
   OBJECTION STRIP — three editorial columns answering the
   three loudest agency-owner fears before FAQ.
   Per research: data portability, seat flexibility, migration.
   ========================================================= */
const OBJECTIONS = [
  {
    eyebrow: 'Your database',
    title: 'You own it. Export it anytime.',
    body: "No lock-in, no exit fees. Request a full CSV or JSON dump whenever you like — delivered direct, not queued behind a data services ticket.",
    stat: 'csv · json · direct',
  },
  {
    eyebrow: 'Your team',
    title: 'Flex seats with your headcount.',
    body: "Add a contractor for three months, pay for three months. Drop them off the licence on month four. No annual true-ups, no seat minimums, no penalties for shrinking.",
    stat: '+ / – anytime',
  },
  {
    eyebrow: 'Your switch',
    title: "We do the move.",
    body: "Candidates, notes, pipelines, contracts — lifted out of Bullhorn, JobAdder, Vincere or Recruit CRM and landed clean in Caliber. Days if you're rushing; months over coffee if you'd rather plan it. We'll put the kettle on.",
    stat: 'Your pace · done for you',
  },
];

function ObjectionStrip() {
  return (
    <div>
      <div style={{ marginBottom: 48, maxWidth: 720 }}>
        <div className="cal-eyebrow" style={{ marginBottom: 18 }}>
          <CalStar size={11} grad={false} style={{ color: 'var(--cal-blue-ink)' }} />
          The three questions every agency asks
        </div>
        <h2 style={{
          margin: '0 0 16px',
          fontSize: 'clamp(36px, 3.8vw, 56px)',
          fontWeight: 500,
          letterSpacing: '-0.03em',
          lineHeight: 1.05,
          textWrap: 'balance',
        }}>
          No lock-in. No headcount tax. No migration bill.
        </h2>
        <p style={{
          fontSize: 17, color: 'var(--cal-body)', lineHeight: 1.55,
          maxWidth: 620, margin: 0,
        }}>
          The three moves legacy ATSes use to keep you stuck — we don't.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
        {OBJECTIONS.map(o => (
          <div key={o.eyebrow} className="cal-card" style={{
            padding: 28, display: 'flex', flexDirection: 'column',
            background: '#fff',
          }}>
            <div style={{
              fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'var(--cal-blue-ink)', fontWeight: 700, marginBottom: 16,
            }}>{o.eyebrow}</div>
            <div style={{
              fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em',
              lineHeight: 1.2, marginBottom: 12, color: 'var(--cal-ink)',
            }}>{o.title}</div>
            <div style={{
              fontSize: 14.5, lineHeight: 1.55, color: 'var(--cal-body)',
              flex: 1, marginBottom: 20,
            }}>{o.body}</div>
            <div style={{
              fontFamily: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
              fontSize: 11.5, letterSpacing: '0.06em',
              color: 'var(--cal-muted)',
              paddingTop: 16, borderTop: '1px solid var(--cal-line-2)',
            }}>{o.stat}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  ScrollProgress, Nav, NavLogo, CommandPalette, AucklandHeartbeat, CmdKTrigger,
  MegaMenuProduct, MegaColumn, MegaItem, BuyoutCard,
  HeroRotator, HERO_HEADLINES,
  LogoTicker, StatBand, ProductTabs, Pillars, BillCompare,
  Pricing, Testimonials, FAQ, Footer, CTABand,
  ComparisonTable, ObjectionStrip, ScoutHighlight,
  CAL_CUR_MAP,
});