/* Hero + opening principle strip */

function Hero() {
  return (
    <section id="top" style={{ position: 'relative', paddingTop: 168, paddingBottom: 96, overflow: 'hidden' }}>
      <div className="container">
        {/* Asymmetric eyebrow row */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 96 }}>
          <div className="eyebrow">
            <span className="label">RICS / 001</span>
          </div>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--on-surface-dim)' }}>
            Geopolitik &nbsp;·&nbsp; DACH &nbsp;·&nbsp; Q2 2026
          </div>
        </div>

        {/* Main statement — offset right to break the centred-template look */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 11fr', gap: 24 }}>
          <div /> {/* intentional gutter */}
          <div>
            <Reveal>
              <h1 className="display-lg" style={{ margin: 0, color: 'var(--primary)' }}>
                Geopolitik ist<br />
                <span style={{ color: 'var(--on-surface-variant)' }}>eine Portfolio-Entscheidung.</span>
              </h1>
            </Reveal>
          </div>
        </div>

        {/* Subline + CTAs row + principles tiles */}
        <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 24, marginTop: 96, alignItems: 'end' }}>
          <Reveal delay={120}>
            <div>
              <p className="body" style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--on-surface-variant)', maxWidth: 500, margin: 0 }}>
                RICS Analytics übersetzt geopolitische Strukturen in konkrete Allokations- und Risikoentscheidungen — für Investoren und Vermögensverwalter im DACH-Raum. Falsifizierbare Wahrscheinlichkeiten, benannte Mechanismen, explizite Marktimplikationen.
              </p>
              <div style={{ display: 'flex', gap: 10, marginTop: 32, flexWrap: 'wrap' }}>
                <a href="dashboard.html" className="btn btn-primary btn-sm">
                  Dashboard öffnen <span className="arrow">→</span>
                </a>
                <a href="#methodology" className="btn btn-secondary btn-sm">
                  Methodik ansehen
                </a>
              </div>
            </div>
          </Reveal>

          {/* Right column: three principles, not vanity stats */}
          <Reveal delay={240}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--ghost-strong)' }}>
              {[
                ['Portfolio-Output', 'Allokation, Position-Sizing, Tail-Hedge — nicht Beobachtung.'],
                ['Falsifizierbar',  'Explizite Wahrscheinlichkeiten, harter Cutoff.'],
                ['DACH-Anleger',    'Vermögensverwalter, Family Offices, Communities und Privatanleger.'],
              ].map(([n, l], i) => (
                <div key={i} style={{ background: 'var(--surface)', padding: '28px 24px 26px' }}>
                  <div style={{ fontSize: 18, lineHeight: 1.1, letterSpacing: '-0.02em', color: 'var(--primary)', fontWeight: 500 }}>{n}</div>
                  <div className="body-sm" style={{ marginTop: 16, color: 'var(--on-surface-dim)', fontSize: 12, lineHeight: 1.5 }}>{l}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>

      {/* Bottom strip — honest credentials, not invented logos */}
      <div style={{ marginTop: 128, paddingTop: 32, paddingBottom: 32, background: 'var(--surface-low)' }}>
        <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 48, flexWrap: 'wrap' }}>
          <div className="label" style={{ color: 'var(--on-surface-dim)' }}>Aktuelle Schwerpunktszenarien</div>
          <div style={{ display: 'flex', gap: 56, alignItems: 'center', flexWrap: 'wrap' }}>
            {['Russland · Ukraine', 'Iran · Israel · USA', 'Taiwan · China', 'Kuba · USA'].map((n, i) => (
              <span key={i} className="mono" style={{ fontSize: 12, letterSpacing: '0.12em', color: 'var(--on-surface-dim)', textTransform: 'uppercase' }}>
                {n}
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;