// Pricing.jsx. By The Numbers + Case Study (Results section)
function Pricing({ theme, onInquire }) {
  const isDark = theme === 'dark';
  const bg = isDark ? 'var(--obsidian)' : 'var(--cream)';
  const fg = isDark ? 'var(--cream)' : 'var(--night-owl)';
  const mute = isDark ? 'var(--warm-sand)' : 'var(--dusk)';
  const cardBg = isDark ? 'var(--night-owl)' : 'var(--linen)';
  const border = isDark ? 'rgba(196,162,101,0.18)' : 'var(--sandstone)';

  return (
    <>
      <section id="results" style={{ padding: '140px 40px 0', background: bg, color: fg }}>
        <div style={{ maxWidth: 980, margin: '0 auto 72px', textAlign: 'center' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--sovana-gold)' }}>// BY THE NUMBERS</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 60, lineHeight: 1.04, letterSpacing: '-0.015em', margin: '20px 0 0', textWrap: 'balance', color: fg }}>Results <em style={{ fontStyle: 'italic', color: 'var(--sovana-gold)' }}>Investors</em> Understand.</h2>
        </div>
        <div style={{ maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: `1px solid ${border}` }} className="sv-feat-grid">
          {[
            { value: '80', unit: '%', label: 'Average occupancy rate' },
            { value: '+28', unit: '%', label: 'Avg. revenue uplift vs. prior PM' },
            { value: '3', unit: 'models', label: 'Rental strategies deployed' },
            { value: '24', unit: 'hr', label: 'Owner response guarantee' },
          ].map((s, i) => (
            <div key={i} style={{ padding: '56px 36px', borderRight: i < 3 ? `1px solid ${border}` : 'none', background: cardBg }}>
              <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 500, fontSize: 72, letterSpacing: '-0.02em', lineHeight: 1, color: 'var(--sovana-gold)' }}>
                {s.value}<span style={{ fontSize: 30, marginLeft: 4 }}>{s.unit}</span>
              </div>
              <div style={{ marginTop: 18, fontFamily: 'var(--font-sans)', fontSize: 13, letterSpacing: '0.04em', color: mute, lineHeight: 1.4, maxWidth: 200 }}>{s.label}</div>
            </div>
          ))}
        </div>
      </section>

      <CaseStudy theme={theme} onInquire={onInquire} />
    </>
  );
}

function CaseStudy({ theme, onInquire }) {
  const isDark = theme === 'dark';
  const bg = isDark ? 'var(--obsidian)' : 'var(--cream)';
  const fg = isDark ? 'var(--cream)' : 'var(--night-owl)';
  const mute = isDark ? 'var(--warm-sand)' : 'var(--dusk)';
  const cardBg = isDark ? 'var(--night-owl)' : 'var(--linen)';
  const beforeBg = isDark ? 'rgba(42,37,32,0.5)' : 'rgba(212,196,174,0.25)';
  const afterBg = isDark ? 'rgba(27,42,59,0.4)' : 'rgba(196,162,101,0.08)';
  const border = isDark ? 'rgba(196,162,101,0.18)' : 'var(--sandstone)';

  const before = [
    { value: '$1,850', label: 'Monthly rent (LTR)' },
    { value: '82%', label: 'Avg. occupancy' },
    { value: '3 wks', label: 'Avg. vacancy gap' },
  ];
  const after = [
    { value: '$2,900', label: 'Monthly avg. (MTR)' },
    { value: '97%', label: 'Occupancy rate' },
    { value: '3 days', label: 'Avg. vacancy gap' },
  ];

  return (
    <section id="case" style={{ padding: '140px 40px', background: bg, color: fg }}>
      <div style={{ maxWidth: 1240, margin: '0 auto 56px', display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'end' }} className="sv-grid-collapse">
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--sovana-gold)' }}>// CASE STUDY</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 56, lineHeight: 1.04, letterSpacing: '-0.015em', margin: '20px 0 0', color: fg, textWrap: 'pretty' }}>From Stagnant to<br /><em style={{ fontStyle: 'italic', color: 'var(--sovana-gold)' }}>Optimized</em>.</h2>
        </div>
        <div>
          <p style={{ fontFamily: 'var(--font-display)', fontSize: 28, lineHeight: 1.3, margin: 0, color: fg, textWrap: 'pretty' }}>
            Out of state investor. Wicker Park 2 bed. Stuck in the wrong strategy.
          </p>
        </div>
      </div>

      <div style={{ maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 0, border: `1px solid ${border}` }} className="sv-case-grid">
        <div style={{ padding: '48px 48px 40px', background: beforeBg }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: mute, paddingBottom: 14, borderBottom: `1px solid ${border}` }}>Before Sovana</div>
          {before.map((b, i) => (
            <div key={i} style={{ padding: '28px 0', borderBottom: i < before.length - 1 ? `1px solid ${border}` : 'none' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 500, lineHeight: 1, color: fg, letterSpacing: '-0.01em' }}>{b.value}</div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: mute, letterSpacing: '0.04em', marginTop: 8 }}>{b.label}</div>
            </div>
          ))}
        </div>

        <div className="sv-case-divider" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 12px', background: cardBg, borderLeft: `1px solid ${border}`, borderRight: `1px solid ${border}`, minWidth: 72 }}>
          <svg width="32" height="40" viewBox="0 0 32 40" fill="none" style={{ marginBottom: 16 }}>
            <path d="M6 20 L26 20 M16 8 L26 20 L16 32" stroke="var(--sovana-gold)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', fontWeight: 600, color: 'var(--sovana-gold)', textTransform: 'uppercase', writingMode: 'vertical-rl', transform: 'rotate(180deg)', marginTop: 8 }}>90 days</div>
        </div>

        <div style={{ padding: '48px 48px 40px', background: afterBg }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--sovana-gold)', paddingBottom: 14, borderBottom: `1px solid ${border}` }}>After 90 days</div>
          {after.map((b, i) => (
            <div key={i} style={{ padding: '28px 0', borderBottom: i < after.length - 1 ? `1px solid ${border}` : 'none' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 46, fontWeight: 500, lineHeight: 1, color: 'var(--sovana-gold)', letterSpacing: '-0.01em' }}>{b.value}</div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: mute, letterSpacing: '0.04em', marginTop: 8 }}>{b.label}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ maxWidth: 1240, margin: '32px auto 0', display: 'flex', justifyContent: 'center' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12, padding: '14px 22px', background: 'var(--sovana-gold)', color: 'var(--obsidian)', borderRadius: 4, fontFamily: 'var(--font-mono)', fontSize: 14, letterSpacing: '0.08em', fontWeight: 700 }}>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 14 L8 2 M3 7 L8 2 L13 7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
          +57% revenue in 90 days
        </div>
      </div>

      <div style={{ maxWidth: 860, margin: '72px auto 0', color: mute, fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.7 }}>
        <p style={{ margin: '0 0 20px' }}>The owner had held the property for 4 years on a standard 12 month lease. The unit was chronically underperforming the market. Not because the property was bad, but because the strategy was wrong for the location and tenant demand.</p>
        <p style={{ margin: '0 0 20px' }}>We converted the unit to a mid term furnished model targeting traveling nurses and corporate relocations. A massive and underserved demand pool in the Chicago medical district corridor. Within 90 days, revenue had jumped 57% with no capital improvement required.</p>
        <p style={{ margin: '0 0 36px', color: fg }}>The owner now has a diversified strategy across their portfolio. Each unit deployed to its highest yield model.</p>
        <button style={{ background: 'transparent', border: 0, borderBottom: '1.5px solid var(--sovana-gold)', color: fg, padding: '6px 0', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', cursor: 'pointer' }} onClick={onInquire}>Request the full case breakdown →</button>
      </div>
    </section>
  );
}

window.Pricing = Pricing;
window.CaseStudy = CaseStudy;