// Hero — deep-indigo brushed-metal blueprint canvas, gold eyebrow, serif H1.
function Hero() {
  return (
    <section className="site-hero" style={{ position: 'relative' }}>
      <div className="crop-ticks"><span /><span /><span /><span /></div>
      <DataTag style={{ position: 'absolute', top: 30, left: 'max(var(--fs-gutter), calc((100% - var(--fs-container)) / 2 + var(--fs-gutter)))', zIndex: 2 }}>
        REF&middot;0481 / ENTERPRISE ARCHITECTURE
      </DataTag>
      <DataTag style={{ position: 'absolute', top: 30, right: 'max(var(--fs-gutter), calc((100% - var(--fs-container)) / 2 + var(--fs-gutter)))', zIndex: 2 }}>
        TARGET STATE &middot; PATH TO GREEN
      </DataTag>

      <div className="wrap" style={{ position: 'relative', zIndex: 2, padding: '150px var(--fs-gutter) 132px' }}>
        <div style={{ maxWidth: 880 }}>
          <Reveal>
            <Eyebrow dark>Enterprise Architecture &amp; IT Turnaround Advisory</Eyebrow>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{
              fontFamily: 'var(--fs-font-display)', fontWeight: 700,
              fontSize: 'var(--fs-step-hero)', lineHeight: 1.12, letterSpacing: '-0.015em',
              color: 'var(--fs-pearl)', margin: '26px 0 0', textWrap: 'balance',
            }}>
              I rescue failing IT landscapes and architect post&#8209;merger integrations.
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p style={{
              fontFamily: 'var(--fs-font-body)', fontSize: 'var(--fs-step-body-lg)',
              lineHeight: 1.75, color: 'var(--fs-indigo-200)', margin: '28px 0 0', maxWidth: 660, textWrap: 'pretty',
            }}>
              When technical debt, legacy systems, and post&#8209;acquisition gridlock threaten your
              valuation, I parachute in to audit the mess, rationalize the portfolio, and force a
              path to green.
            </p>
          </Reveal>
          <Reveal delay={240}>
            <div style={{ display: 'flex', gap: 16, marginTop: 40, flexWrap: 'wrap', alignItems: 'center' }}>
              <Button variant="primary" size="lg" href="#contact" icon="arrow-right">Request a Triage Audit</Button>
              <a href="#problem" onClick={(e) => { e.preventDefault(); document.querySelector('#problem').scrollIntoView({ behavior: 'auto' }); }}
                style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  fontFamily: 'var(--fs-font-body)', fontSize: 13, fontWeight: 600,
                  letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fs-indigo-200)',
                  textDecoration: 'none', borderBottom: '1px solid rgba(156,146,200,0.4)', paddingBottom: 4,
                }}>
                See where it breaks <Icon name="arrow-down" size={14} />
              </a>
            </div>
          </Reveal>
        </div>
      </div>

      {/* baseline forensic rule */}
      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ borderTop: '1px solid rgba(156,146,200,0.22)', paddingTop: 18, paddingBottom: 26, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 14 }}>
          <DataTag style={{ color: 'var(--fs-indigo-300)' }}>AUDIT &middot; RATIONALIZE &middot; REMEDIATE &middot; GOVERN</DataTag>
          <DataTag style={{ color: 'var(--fs-indigo-300)' }}>SCHONING.COM</DataTag>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Hero });