// 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)' }}>// BY INVESTORS · FOR INVESTORS · CHICAGOLAND</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 }}>
          Investor owned. Investor run. 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>
        </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)' }}>// BY INVESTORS · FOR INVESTORS · CHICAGOLAND</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 }}>
            Investor owned. Investor run. 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>
          </div>
          <div style={{ ...heroStyles.statsRow, justifyContent: 'flex-start', gap: 48, marginTop: 56 }}>
            {[['+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)' }}>// BY INVESTORS · FOR INVESTORS · CHICAGOLAND</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)' }}>
          Investor owned. Investor run. 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>
        </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) 55%, rgba(26,26,23,0.78) 78%, rgba(243,237,226,0.55) 94%, rgb(243,237,226) 100%)' },
};

window.Hero = Hero;