// Hero.jsx. 3 variants
function Hero({ variant, theme, headline, accent, ornaments, onInquire, onExplore, editable }) {
  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 goldOpacity = accent === 'bold' ? 1 : accent === 'subtle' ? 0.35 : 0.75;

  if (variant === 'split') return <HeroSplit {...{ theme, headline, bg, fg, mute, ornaments, goldOpacity, onInquire, onExplore, editable }} />;
  if (variant === 'bleed') return <HeroBleed {...{ theme, headline, ornaments, goldOpacity, onInquire, onExplore, editable }} />;
  return <HeroEditorial {...{ theme, headline, bg, fg, mute, ornaments, goldOpacity, onInquire, onExplore, editable }} />;
}

function HeroEditorial({ bg, fg, mute, headline, ornaments, goldOpacity, onInquire, onExplore, editable }) {
  return (
    <section style={{ ...heroStyles.wrap, background: bg, color: fg }}>
      {ornaments && (
        <>
          <div className="sv-orbit" style={{ ...heroStyles.orbitLg, opacity: goldOpacity }} aria-hidden="true">
            <div style={heroStyles.orbitDot} />
            <div style={heroStyles.orbitDot2} />
          </div>
          <div className="sv-orbit" style={{ ...heroStyles.orbitSm, opacity: goldOpacity * 0.55 }} aria-hidden="true" />
        </>
      )}
      <div style={heroStyles.inner}>
        <div style={{ ...heroStyles.eye, color: 'var(--sovana-gold)' }}>// CHICAGOLAND'S INVESTOR FIRST PM FIRM</div>
        <h1 style={{ ...heroStyles.title, color: fg }} contentEditable={editable || undefined} suppressContentEditableWarning>
          {headline.a}<br />
          {headline.b} <em style={heroStyles.em}>{headline.accent}</em>.
        </h1>
        <p style={{ ...heroStyles.sub, color: mute }}>
          Long term stability. Mid term premiums. Short term maximization. We match the right strategy to every property. So your assets perform at their true ceiling, not someone else's comfort level.
        </p>
        <div style={heroStyles.actions}>
          <button style={heroStyles.primary} onClick={onInquire}>Get a free portfolio analysis</button>
          <button style={{ ...heroStyles.secondary, borderColor: fg, color: fg }} onClick={onExplore}>
            See our strategies
            <svg width="16" height="12" viewBox="0 0 16 12" style={{ marginLeft: 8 }} aria-hidden="true">
              <path d="M1 6 L14 6 M9 1 L14 6 L9 11" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </button>
        </div>
      </div>
    </section>
  );
}

function HeroSplit({ bg, fg, mute, headline, ornaments, goldOpacity, onInquire, onExplore, editable }) {
  return (
    <section style={{ ...heroStyles.wrap, background: bg, color: fg, minHeight: 'auto' }}>
      <div style={heroStyles.splitGrid} className="sv-grid-collapse">
        <div>
          <div style={{ ...heroStyles.eye, color: 'var(--sovana-gold)' }}>// CHICAGOLAND'S INVESTOR FIRST PM FIRM</div>
          <h1 style={{ ...heroStyles.splitTitle, color: fg }} contentEditable={editable || undefined} suppressContentEditableWarning>
            {headline.a} {headline.b} <em style={heroStyles.em}>{headline.accent}</em>.
          </h1>
          <p style={{ ...heroStyles.splitSub, color: mute }}>
            Long term stability. Mid term premiums. Short term maximization. One firm, three playbooks, one portfolio.
          </p>
          <div style={{ ...heroStyles.actions, justifyContent: 'flex-start' }}>
            <button style={heroStyles.primary} onClick={onInquire}>Get a free portfolio analysis</button>
            <button style={{ ...heroStyles.secondary, borderColor: fg, color: fg }} onClick={onExplore}>See our strategies →</button>
          </div>
          <div style={{ ...heroStyles.statsRow, justifyContent: 'flex-start', gap: 48, marginTop: 56 }}>
            {[['80%', 'occupancy'], ['+28%', 'roi uplift'], ['24 hr', 'response']].map(([n, l], i) => (
              <div key={i} style={heroStyles.stat}>
                <div style={{ ...heroStyles.statNum, color: fg, fontSize: 40 }}>{n}</div>
                <div style={{ ...heroStyles.statLbl, color: mute }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={heroStyles.splitRight}>
          <div style={heroStyles.splitPhoto}>
            <img src="assets/property-1.avif" alt="A Sovana managed property" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            {ornaments && <div style={{ ...heroStyles.splitOrbit, opacity: goldOpacity }} />}
          </div>
          <div style={{ marginTop: 20, padding: '16px 4px' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', fontWeight: 600, color: 'var(--sovana-gold)', textTransform: 'uppercase' }}>// FEATURED · UNIT #CHI-0412</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: fg, marginTop: 6 }}>1842 W. Division, Unit 2</div>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: mute, marginTop: 2 }}>Mid Term Furnished · $2,900/mo · 97.4% YTD</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroBleed({ headline, ornaments, goldOpacity, onInquire, onExplore, editable }) {
  return (
    <section style={heroStyles.bleedWrap}>
      <img src="assets/property-1.avif" alt="" style={heroStyles.bleedImg} aria-hidden="true" />
      <div style={heroStyles.bleedShade} aria-hidden="true" />
      {ornaments && <div className="sv-orbit" style={{ ...heroStyles.orbitLg, opacity: goldOpacity, top: '46%' }} aria-hidden="true"><div style={heroStyles.orbitDot} /></div>}
      <div style={{ ...heroStyles.inner, color: 'var(--cream)' }}>
        <div style={{ ...heroStyles.eye, color: 'var(--sovana-gold)' }}>// CHICAGOLAND'S INVESTOR FIRST PM FIRM</div>
        <h1 style={{ ...heroStyles.title, color: 'var(--cream)', textShadow: '0 2px 24px rgba(0,0,0,0.4)' }} contentEditable={editable || undefined} suppressContentEditableWarning>
          {headline.a}<br />
          {headline.b} <em style={heroStyles.em}>{headline.accent}</em>.
        </h1>
        <p style={{ ...heroStyles.sub, color: 'var(--warm-sand)' }}>
          Long term stability. Mid term premiums. Short term maximization. The right playbook for every property in your portfolio.
        </p>
        <div style={heroStyles.actions}>
          <button style={heroStyles.primary} onClick={onInquire}>Get a free portfolio analysis</button>
          <button style={{ ...heroStyles.secondary, borderColor: 'var(--cream)', color: 'var(--cream)' }} onClick={onExplore}>See our strategies →</button>
        </div>
      </div>
    </section>
  );
}

const heroStyles = {
  wrap: { position: 'relative', overflow: 'hidden', minHeight: 680, transition: 'background 300ms var(--ease-out), color 300ms var(--ease-out)' },
  orbitLg: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%) rotate(-8deg)', width: 1100, height: 380, border: '1.5px solid var(--sovana-gold)', borderRadius: '50%', pointerEvents: 'none' },
  orbitSm: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%) rotate(14deg)', width: 680, height: 680, border: '1px solid var(--sovana-gold)', borderRadius: '50%', pointerEvents: 'none' },
  orbitDot: { position: 'absolute', left: '4%', top: '50%', width: 10, height: 10, borderRadius: '50%', background: 'var(--sovana-gold)', boxShadow: '0 0 0 4px rgba(196,162,101,0.15)' },
  orbitDot2: { position: 'absolute', right: '22%', top: '50%', width: 6, height: 6, borderRadius: '50%', background: 'var(--sovana-gold)', opacity: 0.7 },
  inner: { position: 'relative', maxWidth: 1040, margin: '0 auto', padding: '120px 40px 60px', textAlign: 'center' },
  eye: { fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 12, letterSpacing: '0.18em', marginBottom: 32, textTransform: 'uppercase' },
  title: { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 88, lineHeight: 1.02, letterSpacing: '-0.015em', margin: 0, outline: 'none' },
  em: { fontStyle: 'italic', color: 'var(--sovana-gold)', fontWeight: 400 },
  sub: { fontFamily: 'var(--font-sans)', fontWeight: 400, fontSize: 19, lineHeight: 1.6, margin: '32px auto 0', maxWidth: 640 },
  actions: { display: 'flex', gap: 14, justifyContent: 'center', marginTop: 40, flexWrap: 'wrap' },
  primary: { border: 0, background: 'var(--sovana-gold)', color: 'var(--obsidian)', padding: '16px 28px', borderRadius: 4, fontWeight: 700, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', cursor: 'pointer', fontFamily: 'var(--font-sans)' },
  secondary: { border: '1.5px solid', background: 'transparent', padding: '14.5px 26px', borderRadius: 4, fontWeight: 700, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', cursor: 'pointer', fontFamily: 'var(--font-sans)', display: 'inline-flex', alignItems: 'center' },
  statsRow: { marginTop: 72, display: 'flex', justifyContent: 'center', gap: 64, flexWrap: 'wrap' },
  stat: { textAlign: 'left' },
  statNum: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 36, letterSpacing: '-0.01em', lineHeight: 1 },
  statLbl: { fontFamily: 'var(--font-sans)', fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 8, fontWeight: 600 },
  splitGrid: { maxWidth: 1320, margin: '0 auto', padding: '96px 40px', display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 80, alignItems: 'center' },
  splitTitle: { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 76, lineHeight: 1.03, letterSpacing: '-0.015em', margin: '24px 0 0', outline: 'none', textWrap: 'pretty' },
  splitSub: { fontFamily: 'var(--font-sans)', fontSize: 19, lineHeight: 1.6, margin: '28px 0 0', maxWidth: 520 },
  splitRight: { position: 'relative' },
  splitPhoto: { position: 'relative', aspectRatio: '4/5', borderRadius: 4, overflow: 'hidden', boxShadow: '0 24px 64px rgba(26,26,23,0.18)' },
  splitOrbit: { position: 'absolute', right: -60, bottom: -60, width: 260, height: 260, border: '1.5px solid var(--sovana-gold)', borderRadius: '50%', pointerEvents: 'none' },
  bleedWrap: { position: 'relative', overflow: 'hidden', background: 'var(--obsidian)', color: 'var(--cream)', minHeight: 760 },
  bleedImg: { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.52) saturate(0.88)' },
  bleedShade: { position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,26,23,0.3) 0%, rgba(26,26,23,0.55) 70%, rgba(26,26,23,0.75) 100%)' },
};

window.Hero = Hero;