// Snapshot.jsx. Portfolio Snapshot stats box (replaces press trust bar)
function Snapshot({ theme }) {
  const isDark = theme === 'dark';
  const bg = isDark ? 'var(--obsidian)' : 'var(--cream)';
  const cardBg = isDark ? 'rgba(42,37,32,0.5)' : 'var(--linen)';
  const fg = isDark ? 'var(--cream)' : 'var(--night-owl)';
  const mute = isDark ? 'var(--warm-sand)' : 'var(--dusk)';
  const border = isDark ? 'rgba(196,162,101,0.28)' : 'var(--sandstone)';
  const line = isDark ? 'rgba(196,162,101,0.14)' : 'rgba(26,26,23,0.08)';

  const rows = [
    { label: 'Avg. occupancy rate', value: '80', unit: '%' },
    { label: 'Avg. owner ROI uplift', value: '+28', unit: '%' },
    { label: 'Strategies deployed', value: '3', unit: 'models' },
    { label: 'Markets covered', value: '12+', unit: 'zones' },
    { label: 'Response time', value: '24', unit: 'hrs' },
  ];

  return (
    <section style={{ background: bg, padding: '20px 40px 100px' }}>
      <div style={{ maxWidth: 720, margin: '0 auto', background: cardBg, border: `1px solid ${border}`, borderRadius: 4, padding: '28px 32px 10px' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', fontWeight: 600, color: 'var(--sovana-gold)', textTransform: 'uppercase', paddingBottom: 18, borderBottom: `1px solid ${line}` }}>
          // Portfolio Snapshot · Chicagoland
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', padding: '22px 0', borderBottom: i < rows.length - 1 ? `1px solid ${line}` : 'none' }}>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500, color: mute, letterSpacing: '0.005em' }}>{r.label}</div>
            <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 4 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 500, fontSize: 34, color: 'var(--sovana-gold)', letterSpacing: '-0.01em', lineHeight: 1 }}>{r.value}</span>
              <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: mute, letterSpacing: '0.08em', textTransform: 'lowercase' }}>{r.unit}</span>
            </div>
          </div>
        ))}
      </div>
      <StrategyJumpNav theme={theme} />
    </section>
  );
}

function StrategyJumpNav({ theme }) {
  const isDark = theme === 'dark';
  const fg = isDark ? 'var(--warm-sand)' : 'var(--dusk)';
  const border = isDark ? 'rgba(196,162,101,0.18)' : 'var(--sandstone)';
  const items = [
    { label: 'Long Term Rentals', href: '#strategies-long' },
    { label: 'Mid Term Furnished', href: '#strategies-mid' },
    { label: 'Short Term', href: '#strategies-short' },
  ];
  return (
    <div style={{ maxWidth: 900, margin: '56px auto 0', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', borderTop: `1px solid ${border}`, borderBottom: `1px solid ${border}` }} className="sv-feat-grid">
      {items.map((it, i) => (
        <a key={it.label} href={it.href} style={{ display: 'block', padding: '22px 20px', textAlign: 'center', textDecoration: 'none', borderRight: i < items.length - 1 ? `1px solid ${border}` : 'none', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.2em', fontWeight: 600, textTransform: 'uppercase', color: fg, transition: 'color 180ms var(--ease-out)' }}
          onMouseEnter={e => e.currentTarget.style.color = 'var(--sovana-gold)'}
          onMouseLeave={e => e.currentTarget.style.color = fg}
        >
          {it.label}
        </a>
      ))}
    </div>
  );
}

// Expose with both names for backwards compat
window.Snapshot = Snapshot;
window.TrustBar = Snapshot;