const { useState: useStateCalc } = React;

const calcStyles = {
  card: {
    background: '#fff',
    border: '1px solid var(--line-soft)',
    borderRadius: 20,
    padding: 28,
    boxShadow: 'var(--shadow-lg)',
    position: 'relative',
  },
  head: {
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    paddingBottom: 18, borderBottom: '1px solid var(--line-soft)', marginBottom: 18,
  },
  eyebrow: { fontSize: 11, color: 'var(--ink-muted)', fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase' },
  badge: {
    display: 'flex', alignItems: 'center', gap: 6,
    fontSize: 11, fontWeight: 500, color: 'var(--blue)',
    padding: '3px 8px', borderRadius: 999, background: 'var(--blue-soft)',
  },
  title: {
    fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 26, lineHeight: 1.1,
    letterSpacing: '-0.02em', marginBottom: 6, fontWeight: 600,
  },
  subtitle: { fontSize: 13, color: 'var(--ink-muted)', marginBottom: 18, lineHeight: 1.5 },

  // Privacy reassurance pill — sits between subtitle and inputs
  privacy: {
    display: 'flex', alignItems: 'flex-start', gap: 10,
    padding: '10px 12px',
    background: 'var(--blue-soft)',
    border: '1px solid rgba(8,120,216,0.18)',
    borderRadius: 10,
    marginBottom: 18,
    fontSize: 12.5, lineHeight: 1.5, color: 'var(--blue-deep, var(--blue))',
  },
  privacyIcon: {
    width: 20, height: 20, borderRadius: 10,
    background: 'var(--blue)', color: '#fff',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    flexShrink: 0,
    fontSize: 11, lineHeight: 1,
  },
  privacyStrong: { fontWeight: 600 },

  group: { marginBottom: 14 },
  label: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    fontSize: 12, color: 'var(--ink-muted)', marginBottom: 6, fontWeight: 500,
    letterSpacing: '0.02em', textTransform: 'uppercase',
    whiteSpace: 'nowrap', gap: 12,
  },
  labelVal: {
    fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums', fontSize: 13, color: 'var(--ink)',
    fontWeight: 500, textTransform: 'none', letterSpacing: 0,
    whiteSpace: 'nowrap',
  },

  slider: {
    WebkitAppearance: 'none', width: '100%', height: 4, borderRadius: 999,
    background: 'var(--line)', outline: 'none', margin: '10px 0 4px',
  },
  ticks: { display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--ink-muted)', fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums' },

  // Number-input field (replaces the sliders for hours + income)
  inputWrap: {
    display: 'flex', alignItems: 'center', gap: 8,
    background: '#fff',
    border: '1px solid var(--line)',
    borderRadius: 10,
    padding: '0 14px',
    height: 48,
    transition: 'border-color .15s, box-shadow .15s',
  },
  inputPrefix: {
    fontFamily: "'Outfit', system-ui, sans-serif",
    fontSize: 18, color: 'var(--ink-muted)', fontWeight: 500,
    lineHeight: 1, flexShrink: 0,
  },
  inputSuffix: {
    fontSize: 13, color: 'var(--ink-muted)', fontWeight: 500,
    letterSpacing: '0.02em', flexShrink: 0,
  },
  numInput: {
    flex: 1, minWidth: 0,
    border: 'none', outline: 'none', background: 'transparent',
    fontFamily: "'Outfit', system-ui, sans-serif",
    fontVariantNumeric: 'tabular-nums',
    fontSize: 18, color: 'var(--ink)', fontWeight: 500,
    letterSpacing: '-0.01em',
    padding: 0,
    WebkitAppearance: 'none', MozAppearance: 'textfield',
  },

  resultRow: {
    marginTop: 18,
    display: 'flex', flexDirection: 'column', gap: 10,
    alignItems: 'stretch',
  },
  rateCard: {
    padding: '14px 18px',
    background: '#fff',
    border: '1px solid var(--line-soft)',
    borderRadius: 12,
    display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',
    gap: 14,
    minWidth: 0,
  },
  thresholdCard: {
    padding: '14px 18px',
    background: 'linear-gradient(135deg, rgba(8,120,216,0.10) 0%, rgba(8,120,216,0.03) 100%)',
    border: '1px solid rgba(8,120,216,0.22)',
    borderRadius: 12,
    display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',
    gap: 14,
    minWidth: 0,
    position: 'relative',
  },
  resultGlow: { display: 'none' },
  resultRule: { display: 'none' },
  resultLeft: { display: 'flex', alignItems: 'center', gap: 10 },
  resultLabel: {
    fontSize: 13, color: 'var(--ink)', lineHeight: 1.4,
    fontWeight: 400, letterSpacing: 0,
    textTransform: 'none',
    fontFamily: 'inherit',
  },
  bigRow: {
    display: 'inline-flex', alignItems: 'baseline', gap: 2,
    whiteSpace: 'nowrap', lineHeight: 1,
    flexShrink: 0,
  },
  bigNum: {
    fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 22, lineHeight: 1,
    letterSpacing: '-0.01em', color: 'var(--ink)',
    fontVariantNumeric: 'tabular-nums',
    fontWeight: 500,
  },
  bigUnit: {
    fontSize: 13, color: 'var(--ink-muted)',
    fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums',
    fontStyle: 'normal', marginLeft: 2,
    letterSpacing: '0.02em',
  },
  // Threshold-specific (headline value — slightly bigger, blue)
  resultRight: { display: 'flex', alignItems: 'center', gap: 10 },
  resultRightLabel: {
    fontSize: 13, color: 'var(--ink)', lineHeight: 1.4,
    fontWeight: 400, letterSpacing: 0,
    textTransform: 'none',
    fontFamily: 'inherit',
  },
  resultRightVal: {
    fontFamily: "'Outfit', system-ui, sans-serif",
    fontSize: 26, color: 'var(--blue-deep, var(--blue))',
    letterSpacing: '-0.015em',
    lineHeight: 1,
    whiteSpace: 'nowrap',
    fontVariantNumeric: 'tabular-nums',
    fontWeight: 500,
  },
  resultRightUnit: {
    fontSize: 13, color: 'var(--ink-muted)',
    fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums',
    fontStyle: 'normal',
    marginLeft: 2,
    letterSpacing: '0.02em',
  },
  resultRightSub: {
    fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums',
    fontSize: 10.5, color: 'var(--ink-muted)',
    letterSpacing: '0.04em',
    marginTop: 4,
    textAlign: 'right',
  },
  // Small leading icon — matches bridge check / upside arrow
  statIcon: {
    width: 22, height: 22, borderRadius: 11,
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    fontSize: 12, fontWeight: 600, lineHeight: 1,
    flexShrink: 0,
  },
  statIconRate: {
    background: 'var(--blue)', color: '#fff',
    fontFamily: "'Outfit', system-ui, sans-serif",
    fontStyle: 'normal', fontSize: 14,
  },
  statIconThreshold: {
    background: 'var(--blue)', color: '#fff',
  },

  // Promoted "admin hours" slider — the pivot between hero stat and breakdown
  pivot: {
    marginTop: 18,
    padding: '16px 16px 14px',
    background: '#fff',
    border: '1px solid var(--line-soft)',
    borderRadius: 12,
    position: 'relative',
  },
  pivotLead: {
    fontFamily: "'Outfit', system-ui, sans-serif",
    fontSize: 16, lineHeight: 1.35,
    letterSpacing: '-0.01em',
    color: 'var(--ink)',
    marginBottom: 12,
  },
  pivotLeadHi: { color: 'var(--blue)',
  },

  breakdown: {
    marginTop: 14,
    padding: '16px 18px 14px',
    background: 'var(--blue-soft)',
    border: '1px solid rgba(8,120,216,0.15)',
    borderRadius: 12,
    fontSize: 13, color: 'var(--blue-deep)',
    lineHeight: 1.6,
  },
  row: { display: 'flex', justifyContent: 'space-between', padding: '3px 0', alignItems: 'center' },
  // HERO cost-of-doing-it-yourself block
  costBlock: {
    marginTop: 14,
    padding: '28px 24px 26px',
    background: 'linear-gradient(160deg, #B8621B 0%, #8A4712 100%)',
    color: '#fff',
    borderRadius: 14,
    position: 'relative',
    overflow: 'hidden',
    textAlign: 'center',
  },
  costGlow: {
    position: 'absolute', bottom: -80, left: -40, width: 240, height: 240,
    borderRadius: '50%',
    background: 'radial-gradient(circle, rgba(255,200,120,0.2) 0%, transparent 70%)',
    pointerEvents: 'none',
  },
  costLabel: {
    fontSize: 10.5, color: 'rgba(255,255,255,0.92)', letterSpacing: '0.14em',
    textTransform: 'uppercase', fontWeight: 500,
    marginBottom: 10, position: 'relative',
  },
  costNum: {
    fontFamily: "'Outfit', system-ui, sans-serif",
    fontSize: 72, lineHeight: 0.95,
    letterSpacing: '-0.035em',
    fontVariantNumeric: 'tabular-nums',
    color: '#fff',
    position: 'relative',
    whiteSpace: 'nowrap',
    fontWeight: 500,
  },
  costNumUnit: {
    fontSize: 22, color: 'rgba(255,255,255,0.88)',
    fontFamily: "'Outfit', system-ui, sans-serif",
    marginLeft: 4,
  },
  costSub: {
    fontSize: 13, color: 'rgba(255,255,255,0.85)',
    lineHeight: 1.55,
    marginTop: 10,
    position: 'relative',
  },
  rowTotal: {
    display: 'flex', justifyContent: 'space-between', padding: '3px 0',
    alignItems: 'center',
    marginTop: 6, paddingTop: 10,
    borderTop: '1px solid rgba(8,120,216,0.2)',
  },
  mono: { fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums' },

  // Bridge: "our rate fits under your threshold" — the persuasion moment
  bridge: {
    marginTop: 8,
    padding: '10px 14px',
    background: 'transparent',
    border: 'none',
    borderRadius: 0,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    gap: 12, flexWrap: 'wrap',
  },
  bridgeLeft: { display: 'flex', alignItems: 'center', gap: 10 },
  bridgeCheck: {
    width: 18, height: 18, borderRadius: 9,
    background: 'rgba(8,120,216,0.12)', color: 'var(--blue)',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    fontSize: 10, fontWeight: 600, lineHeight: 1,
    flexShrink: 0,
  },
  bridgeCopy: {
    fontSize: 12, color: 'var(--ink-muted)', lineHeight: 1.45,
  },
  bridgeStrong: {
    fontFamily: "'Outfit', system-ui, sans-serif",
    color: 'var(--blue-deep, var(--blue))',
    fontSize: 14,
    fontWeight: 500,
  },
  bridgeRate: {
    fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums',
    fontSize: 10.5, color: 'var(--ink-muted)',
    letterSpacing: '0.04em',
  },

  footer: { marginTop: 14 },
  cta: {
    width: '100%', background: 'var(--blue)', color: '#fff',
    padding: '18px 20px', borderRadius: 12,
    fontSize: 16, fontWeight: 500,
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    transition: 'background .2s, transform .12s, box-shadow .2s',
    boxShadow: '0 8px 20px -8px rgba(8,120,216,0.45)',
    letterSpacing: '-0.005em',
  },
  ctaSub: {
    display: 'block', fontSize: 11, fontWeight: 400, marginTop: 4,
    color: 'rgba(255,255,255,0.9)',
    fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums',
    letterSpacing: '0.04em',
  },
  fine: {
    fontSize: 11, color: 'var(--ink-muted)', textAlign: 'center', marginTop: 12,
    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
    fontFamily: "'Outfit', system-ui, sans-serif", fontVariantNumeric: 'tabular-nums', letterSpacing: '0.02em',
  },
  fineDot: { width: 3, height: 3, borderRadius: 2, background: 'var(--ink-muted)', opacity: 0.5 },

  // Upside reveal block
  upside: {
    marginTop: 8,
    padding: '10px 14px',
    background: 'transparent',
    border: 'none',
    borderRadius: 0,
    display: 'flex', alignItems: 'center', gap: 10,
  },
  upsideIcon: {
    fontSize: 10, color: 'var(--blue)', fontWeight: 600, lineHeight: 1,
    flexShrink: 0,
    width: 18, height: 18, borderRadius: 9,
    background: 'rgba(8,120,216,0.12)',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
  },
  upsideCopy: { fontSize: 12, color: 'var(--ink-muted)', lineHeight: 1.45 },
  upsideStrong: {
    fontFamily: "'Outfit', system-ui, sans-serif",
    fontSize: 14,
    color: 'var(--blue-deep, var(--blue))',
    letterSpacing: '-0.01em',
    fontWeight: 500,
  },
  upsideSub: { color: 'var(--ink-muted)', fontSize: 12 },
};

// Map a user's region to a currency symbol. Falls back to $ for anything we don't recognize.
function getLocalCurrencySymbol() {
  try {
    // ?locale=de-DE override for previewing
    const params = new URLSearchParams(window.location.search);
    const lang = (params.get('locale') || navigator.language || 'en-US');
    const region = (lang.split('-')[1] || '').toUpperCase();
    const map = {
      US: '$', CA: '$', AU: '$', NZ: '$', SG: '$', HK: '$', MX: '$',
      GB: '£',
      EU: '€', DE: '€', FR: '€', ES: '€', IT: '€', NL: '€', BE: '€', IE: '€', PT: '€', AT: '€', FI: '€', GR: '€',
      JP: '¥', CN: '¥',
      IN: '₹',
      KR: '₩',
      BR: 'R$',
      CH: 'Fr',
      SE: 'kr', NO: 'kr', DK: 'kr',
      PL: 'zł',
      RU: '₽',
      TR: '₺',
      ZA: 'R',
      AE: 'د.إ',
    };
    if (map[region]) return map[region];
    // Language-only fallbacks
    const langOnly = lang.split('-')[0].toLowerCase();
    const langMap = { en: '$', de: '€', fr: '€', es: '€', it: '€', nl: '€', pt: '€', ja: '¥', zh: '¥', ko: '₩', hi: '₹' };
    return langMap[langOnly] || '$';
  } catch (e) { return '$'; }
}

function fmtCurrency(n, sym = '$') {
  if (n >= 1000000) {
    const m = n / 1000000;
    return sym + (m % 1 === 0 ? m.toFixed(0) : m.toFixed(1)) + 'M';
  }
  if (n >= 1000) return sym + (n/1000).toFixed(0) + 'k';
  return sym + Math.round(n).toLocaleString();
}

function CalculatorCard() {
  const localSymbol = getLocalCurrencySymbol();
  // Playbook calculator inputs + math
  // Seed with realistic defaults so the widget shows a meaningful result on
  // first paint instead of "$0/hr" — feels more useful and invites interaction.
  const [annualIncome, setIncome] = useStateCalc(120000);
  const [hoursPerWeek, setHours] = useStateCalc(40);
  const [delegatableHours, setDelegatable] = useStateCalc(0);
  const [interacted, setInteracted] = useStateCalc(false);

  // -- Analytics: track viewport entry + first interaction ------------------
  // Refs prevent double-firing if React re-renders.
  const cardRef = React.useRef(null);
  const viewedFiredRef = React.useRef(false);
  const interactedFiredRef = React.useRef(false);

  // Fire calculator_viewed once when card scrolls into view (50% visible).
  React.useEffect(() => {
    if (!cardRef.current || viewedFiredRef.current) return;
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting && !viewedFiredRef.current) {
          viewedFiredRef.current = true;
          window.bluemoso.analytics.track('calculator_viewed', {
            page: window.location.pathname,
            calculator: 'hourly_rate',
          });
          observer.disconnect();
        }
      });
    }, { threshold: 0.5 });
    observer.observe(cardRef.current);
    return () => observer.disconnect();
  }, []);

  // Fire calculator_interacted on the first slider touch (engagement signal).
  React.useEffect(() => {
    if (!interacted || interactedFiredRef.current) return;
    interactedFiredRef.current = true;
    window.bluemoso.analytics.track('calculator_interacted', {
      page: window.location.pathname,
      calculator: 'hourly_rate',
    });
  }, [interacted]);

  const LOW_VALUE_RATE = 15;
  const workHoursPerYear = Math.max(1, hoursPerWeek * 50);
  const hourly = annualIncome / workHoursPerYear;
  const delegateUnder = Math.round(hourly * 0.5);
  // Cap delegatable hours at total hours worked — can't delegate more than you do
  const effectiveDelegatable = Math.min(delegatableHours, hoursPerWeek);
  // Use 50 weeks (matches hourly denominator), and frame as upside, not cost
  const annualUpside = Math.max(0, hourly - LOW_VALUE_RATE) * effectiveDelegatable * 50;

  // Auto-upside: assume delegating 10 hrs/week of low-value work
  const ASSUMED_DELEGATE_HRS = 10;
  const autoDelegateHrs = Math.min(ASSUMED_DELEGATE_HRS, hoursPerWeek);
  const autoUpside = Math.max(0, hourly - LOW_VALUE_RATE) * autoDelegateHrs * 50;
  const showUpside = hoursPerWeek > 0 && annualIncome > 0;
  const showBridge = hoursPerWeek > 0 && annualIncome > 0;

  const incomePct = (annualIncome / 1000000) * 100;
  const hoursPct = (hoursPerWeek / 100) * 100;
  const delegatablePct = (delegatableHours / 100) * 100;

  const incomeSliderStyle = {
    ...calcStyles.slider,
    background: `linear-gradient(to right, var(--blue) 0%, var(--blue) ${incomePct}%, var(--line) ${incomePct}%, var(--line) 100%)`,
  };
  const hoursSliderStyle = {
    ...calcStyles.slider,
    background: `linear-gradient(to right, var(--blue) 0%, var(--blue) ${hoursPct}%, var(--line) ${hoursPct}%, var(--line) 100%)`,
  };
  const delegatableSliderStyle = {
    ...calcStyles.slider,
    background: `linear-gradient(to right, var(--blue) 0%, var(--blue) ${delegatablePct}%, var(--line) ${delegatablePct}%, var(--line) 100%)`,
    margin: '4px 0 4px',
  };

  return (
    <div style={calcStyles.card} className="bm-calc-card" ref={cardRef}>
      <style>{`
        input[type="range"].bm-calc::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:9px;background:#fff;border:2px solid var(--blue);box-shadow:0 2px 6px rgba(8,120,216,0.25);cursor:grab;transition:transform .12s ease}
        input[type="range"].bm-calc::-moz-range-thumb{width:18px;height:18px;border-radius:9px;background:#fff;border:2px solid var(--blue);box-shadow:0 2px 6px rgba(8,120,216,0.25);cursor:grab}
        input[type="range"].bm-calc:hover::-webkit-slider-thumb{transform:scale(1.1)}
        input[type="range"].bm-calc:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.15)}
        /* Hide native number-input spinner arrows */
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        input[type="number"] { -moz-appearance: textfield; }
        @keyframes bmCalcPop { 0% { opacity: 0.35; transform: translateY(2px); } 60% { opacity: 1; transform: translateY(-1px); } 100% { opacity: 1; transform: translateY(0); } }
        .bm-calc-pop { display: inline-block; animation: bmCalcPop .35s cubic-bezier(.2,.8,.2,1); }
        .bm-calc-upside { /* static — no animation */ }
        /* Mobile: shrink padding + title so the card fits narrow viewports
           (was overflowing past the right edge on phones). */
        @media (max-width: 640px) {
          .bm-calc-card { padding: 18px !important; }
          .bm-calc-card .bm-calc-title { font-size: 22px !important; line-height: 1.15 !important; }
        }
      `}</style>

      <div style={calcStyles.title} className="bm-calc-title">What's your time <span style={{ color: 'var(--blue)', fontStyle: 'normal', fontWeight: 600 }}>actually worth?</span></div>
      <div style={calcStyles.subtitle}>Anything below this number is what you should delegate.</div>

      <div style={calcStyles.privacy} role="note">
        <span style={calcStyles.privacyIcon} aria-hidden="true">
          <svg width="11" height="11" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M4 7V5a4 4 0 1 1 8 0v2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
            <rect x="3" y="7" width="10" height="7" rx="1.5" fill="currentColor"/>
          </svg>
        </span>
        <div>
          <span style={calcStyles.privacyStrong}>This is completely private.</span> We don't store this data.
        </div>
      </div>

      <div style={calcStyles.group}>
        <div style={calcStyles.label}>
          <span>Hours worked per week</span>
        </div>
        <div
          style={calcStyles.inputWrap}
          onFocusCapture={(e) => { e.currentTarget.style.borderColor = 'var(--blue)'; e.currentTarget.style.boxShadow = '0 0 0 3px rgba(8,120,216,0.12)'; }}
          onBlurCapture={(e) => { e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.boxShadow = 'none'; }}
        >
          <input
            type="number"
            inputMode="numeric"
            min={0} max={168} step={1}
            value={hoursPerWeek || ''}
            placeholder="50"
            onChange={(e) => {
              const raw = e.target.value;
              const n = raw === '' ? 0 : Math.max(0, Math.min(168, Number(raw)));
              setHours(Number.isFinite(n) ? n : 0);
              setInteracted(true);
            }}
            style={calcStyles.numInput}
            aria-label="Hours worked per week"
          />
          <span style={calcStyles.inputSuffix}>hrs / week</span>
        </div>
      </div>

      <div style={calcStyles.group}>
        <div style={calcStyles.label}>
          <span>Annual income</span>
        </div>
        <div
          style={calcStyles.inputWrap}
          onFocusCapture={(e) => { e.currentTarget.style.borderColor = 'var(--blue)'; e.currentTarget.style.boxShadow = '0 0 0 3px rgba(8,120,216,0.12)'; }}
          onBlurCapture={(e) => { e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.boxShadow = 'none'; }}
        >
          <span style={calcStyles.inputPrefix}>{localSymbol}</span>
          <input
            type="text"
            inputMode="numeric"
            value={annualIncome ? annualIncome.toLocaleString('en-US') : ''}
            placeholder="250,000"
            onChange={(e) => {
              // Strip everything but digits, then clamp.
              const digits = e.target.value.replace(/[^0-9]/g, '');
              const n = digits === '' ? 0 : Math.min(99999999, Number(digits));
              setIncome(Number.isFinite(n) ? n : 0);
              setInteracted(true);
            }}
            style={calcStyles.numInput}
            aria-label="Annual income"
          />
          <span style={calcStyles.inputSuffix}>/ year</span>
        </div>
      </div>

      <div style={calcStyles.resultRow}>
        <div style={calcStyles.rateCard}>
          <div style={calcStyles.resultLeft}>
            <span style={{ ...calcStyles.statIcon, ...calcStyles.statIconRate }}>{localSymbol}</span>
            <span style={calcStyles.resultLabel}>Your hourly rate</span>
          </div>
          <div style={calcStyles.bigRow}>
            <span key={`hr-${Math.round(hourly)}`} style={calcStyles.bigNum} className="bm-calc-pop">${Math.round(hourly).toLocaleString()}</span>
            <span style={calcStyles.bigUnit}>/&nbsp;hr</span>
          </div>
        </div>
        <div style={calcStyles.thresholdCard}>
          <div style={calcStyles.resultRight}>
            <span style={{ ...calcStyles.statIcon, ...calcStyles.statIconThreshold }}>↓</span>
            <span style={calcStyles.resultRightLabel}>Delegate anything under <span style={{ color: 'var(--ink-muted)' }}>(~50% of your hourly rate)</span></span>
          </div>
          <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 2, whiteSpace: 'nowrap', flexShrink: 0 }}>
            <span key={`du-${delegateUnder}`} style={calcStyles.resultRightVal} className="bm-calc-pop">${delegateUnder.toLocaleString()}</span>
            <span style={calcStyles.resultRightUnit}>/&nbsp;hr</span>
          </div>
        </div>
      </div>

      {/* Upside reveal: always rendered to reserve space; hidden until user interacts */}
      <div style={{ ...calcStyles.upside, visibility: showUpside ? 'visible' : 'hidden' }} aria-hidden={!showUpside}>
        <span style={calcStyles.upsideIcon}>✓</span>
        <div style={calcStyles.upsideCopy}>
          Even delegating just {autoDelegateHrs || 10} hrs/week = <span style={calcStyles.upsideStrong}>~{((autoDelegateHrs || 10) * 50).toLocaleString()} hrs/yr</span>
          <span style={calcStyles.upsideSub}> back for family, focus, or higher-leverage work</span>
        </div>
      </div>

      {/* Bridge: BlueMoso pricing — always rendered to reserve space */}
      <div style={{ ...calcStyles.bridge, visibility: showBridge ? 'visible' : 'hidden' }} aria-hidden={!showBridge}>
        <div style={calcStyles.bridgeLeft}>
          <span style={calcStyles.bridgeCheck}>✓</span>
          <div style={calcStyles.bridgeCopy}>
            BlueMoso VAs from <span style={calcStyles.bridgeStrong}>$700/mo</span>, well under your ${(delegateUnder || 0).toLocaleString()}/hr threshold
          </div>
        </div>
      </div>

      <div style={calcStyles.footer}>
        <a href="#cta" data-booking-modal-trigger data-booking-source="calculator_cta" style={calcStyles.cta}
          onClick={() => {
            window.bluemoso.analytics.track('calculator_cta_clicked', {
              page: window.location.pathname,
              calculator: 'hourly_rate',
              annual_income: annualIncome,
              hours_per_week: hoursPerWeek,
              hourly_rate: Math.round(hourly),
              delegate_under: delegateUnder,
              interacted: interacted,
            });
          }}
          onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--blue-deep)'; e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 14px 28px -10px rgba(8,120,216,0.55)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--blue)'; e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 8px 20px -8px rgba(8,120,216,0.45)'; }}>
          <span>
            Take back your time now
          </span>
          <Icon name="arrow" size={16} />
        </a>
      </div>
    </div>
  );
}

Object.assign(window, { CalculatorCard });