// Offerings.jsx. Three Strategies (tabs + detail panel)
function Offerings({ theme, ornaments, onOpenProperty }) {
  const isDark = theme === 'dark';
  const bg = isDark ? 'var(--obsidian)' : 'var(--cream)';
  const cardBg = isDark ? 'var(--night-owl)' : '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.18)' : 'var(--sandstone)';

  const [active, setActive] = React.useState(0);
  const horizons = [
    {
      num: '01', eye: '12+ MONTH LEASES', title: 'Long Term', tag: 'Long',
      uplift: 'stable',
      body: 'Stable, predictable income with qualified tenants. Ideal for building equity and minimizing operational overhead on stabilized assets.',
      points: ['Rigorous tenant screening', 'Lease enforcement & renewals', 'Predictable cash flow', 'Low turnover costs'],
      img: 'assets/property-3.jpeg', count: 'Stabilized assets',
    },
    {
      num: '02', eye: '1 to 6 MONTH FURNISHED', title: 'Mid Term', tag: 'Mid',
      uplift: '15 to 40% above LTR',
      body: 'Corporate travelers, healthcare workers, and relocating professionals pay premium rates. Higher yield than LTR without full STR volatility.',
      points: ['30 to 180 day furnished stays', 'Corporate & relocation demand', '15 to 40% above LTR rates', 'Reduced STR regulatory risk'],
      img: 'assets/property-2.avif', count: 'Premium demand pools',
    },
    {
      num: '03', eye: 'NIGHTLY / WEEKLY', title: 'Short Term', tag: 'Short',
      uplift: 'ceiling unlocked',
      body: 'Revenue ceiling unlocked. Dynamic pricing, listing optimization, and guest experience management designed to maximize RevPAR on every night.',
      points: ['Dynamic pricing engine', 'Multi-platform listing', 'Guest screening & support', 'Revenue reporting'],
      img: 'assets/property-1.avif', count: 'Highest yield',
    },
  ];

  const slug = ['long', 'mid', 'short'];

  return (
    <section id="strategies" style={{ padding: '140px 40px', background: bg, color: fg, position: 'relative', overflow: 'hidden' }}>
      {ornaments && <img src="brand-assets/line-squiggle.svg" alt="" style={{ position: 'absolute', right: '6%', top: 60, width: 60, height: 200, opacity: 0.5, pointerEvents: 'none' }} />}
      <div style={{ maxWidth: 1240, margin: '0 auto 64px', display: 'grid', gridTemplateColumns: '1fr 1.2fr', 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)' }}>// OUR APPROACH</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 64, lineHeight: 1.04, letterSpacing: '-0.015em', margin: '20px 0 0', color: fg, textWrap: 'pretty' }}>
            Three <em style={{ fontStyle: 'italic', color: 'var(--sovana-gold)' }}>Strategies</em>.<br />One Firm.
          </h2>
        </div>
        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 18, lineHeight: 1.6, margin: 0, color: mute, maxWidth: 520 }}>
          We don't force your asset into a box. We analyze each property, neighborhood, and market cycle. Then deploy the strategy that maximizes your return with the right risk profile.
        </p>
      </div>

      <div style={{ maxWidth: 1240, margin: '0 auto 0', display: 'flex', borderTop: `1px solid ${border}`, borderBottom: `1px solid ${border}` }} className="sv-tabs">
        {horizons.map((h, i) => (
          <button key={i} id={`strategies-${slug[i]}`} onClick={() => setActive(i)} style={{
            flex: 1, background: 'transparent', border: 0, padding: '28px 24px', cursor: 'pointer', textAlign: 'left',
            fontFamily: 'var(--font-sans)', display: 'flex', alignItems: 'center', gap: 16,
            color: active === i ? fg : mute,
            borderRight: i < horizons.length - 1 ? `1px solid ${border}` : 'none',
            background: active === i ? (isDark ? 'rgba(196,162,101,0.06)' : 'rgba(196,162,101,0.08)') : 'transparent',
            transition: 'background 240ms var(--ease-out), color 240ms var(--ease-out)',
          }}>
            <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 32, color: 'var(--sovana-gold)', letterSpacing: '-0.01em', lineHeight: 1 }}>{h.num}</span>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '-0.01em', color: active === i ? fg : mute, fontWeight: 500 }}>{h.title}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', fontWeight: 600, color: 'var(--sovana-gold)', textTransform: 'uppercase', marginTop: 4 }}>{h.eye}</div>
            </div>
          </button>
        ))}
      </div>

      <div style={{ maxWidth: 1240, margin: '0 auto', overflow: 'hidden', display: 'grid', gridTemplateColumns: '1.05fr 1fr', background: cardBg, borderLeft: `1px solid ${border}`, borderRight: `1px solid ${border}`, borderBottom: `1px solid ${border}` }} className="sv-grid-collapse">
        <div style={{ position: 'relative', minHeight: 520 }}>
          <img src={horizons[active].img} alt={horizons[active].title} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          <div style={{ position: 'absolute', left: 28, bottom: 28, padding: '18px 22px', background: 'rgba(26,26,23,0.78)', backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)', border: '1px solid rgba(196,162,101,0.3)' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', fontWeight: 600, color: 'var(--sovana-gold)', textTransform: 'uppercase' }}>// Yield Profile</div>
            <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 30, color: 'var(--cream)', marginTop: 6, letterSpacing: '-0.01em' }}>{horizons[active].uplift}</div>
          </div>
        </div>
        <div style={{ padding: '56px 56px 48px' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--sovana-gold)', marginBottom: 10 }}>// {horizons[active].num}</div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 56, lineHeight: 1.02, letterSpacing: '-0.015em', margin: 0, color: fg }}>{horizons[active].title}</h3>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.2em', fontWeight: 600, color: 'var(--sovana-gold)', textTransform: 'uppercase', marginTop: 10, marginBottom: 22 }}>{horizons[active].eye}</div>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.65, margin: '0 0 32px', color: mute }}>{horizons[active].body}</p>
          <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 36px' }}>
            {horizons[active].points.map((p, i) => (
              <li key={i} style={{ fontFamily: 'var(--font-sans)', fontSize: 15, padding: '14px 0', display: 'flex', alignItems: 'center', gap: 16, color: fg, borderBottom: i < horizons[active].points.length - 1 ? `1px solid ${border}` : 'none' }}>
                <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--sovana-gold)', fontSize: 14 }}>→</span>
                {p}
              </li>
            ))}
          </ul>
          <button style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', background: 'transparent', border: 0, borderBottom: '1.5px solid var(--sovana-gold)', paddingBottom: 6, cursor: 'pointer', color: fg }} onClick={() => onOpenProperty(horizons[active])}>
            Open a sample deployment →
          </button>
        </div>
      </div>
    </section>
  );
}

window.Offerings = Offerings;