function Hero() {
  const { t } = window.useT();
  return (
    <section style={heroStyles.wrap} id="top">
      <div style={heroStyles.grid} />
      <div style={heroStyles.inner}>
        <div style={heroStyles.col}>
          <div style={heroStyles.eyebrow}>
            <span style={heroStyles.eyebrowDot}></span>
            {t('hero.eyebrow')}
          </div>
          <h1 style={heroStyles.h1}>
            {t('hero.h1.main')} <span style={heroStyles.accent}>{t('hero.h1.accent')}</span>
          </h1>
          <p style={heroStyles.lede}>{t('hero.lede')}</p>
          <div style={heroStyles.statement}>
            <span style={heroStyles.quote}>"</span>
            {t('hero.quote.a')}
            <strong style={heroStyles.emph}>{t('hero.quote.b')}</strong>
            {t('hero.quote.c')}
            <strong style={heroStyles.emph}>{t('hero.quote.d')}</strong>
            {t('hero.quote.e')}
          </div>
          <div style={heroStyles.actions}>
            <a href="mailto:mtzstrategies@gmail.com?subject=Discovery%20call%20request" style={heroStyles.primary}>
              {t('hero.cta.primary')} <span style={{marginLeft:8}}>→</span>
            </a>
            <a href="tel:+19568151714" style={heroStyles.secondary}>
              <span style={heroStyles.pulseDot}></span>
              {t('hero.cta.secondary')}
              <span style={heroStyles.phoneNum}>(956) 815-1714</span>
            </a>
          </div>
          <div style={heroStyles.proof}>
            <div style={heroStyles.proofItem}>
              <strong style={heroStyles.proofNum}>{t('hero.stat1.num')}<span style={heroStyles.proofNumSup}>+</span></strong>
              <span style={heroStyles.proofLbl}>{t('hero.stat1.label')}</span>
            </div>
            <div style={heroStyles.proofDivider}/>
            <div style={heroStyles.proofItem}>
              <strong style={heroStyles.proofNum}>{t('hero.stat2.num')}</strong>
              <span style={heroStyles.proofLbl}>{t('hero.stat2.label')}</span>
            </div>
            <div style={heroStyles.proofDivider}/>
            <div style={heroStyles.proofItem}>
              <strong style={heroStyles.proofNum}>{t('hero.stat3.num')}</strong>
              <span style={heroStyles.proofLbl}>{t('hero.stat3.label')}</span>
            </div>
          </div>
        </div>
        <div style={heroStyles.diagramCol}>
          <SystemDiagram />
          <div style={heroStyles.diagramCaption}>
            <span style={{color: 'var(--cyan-400)'}}>{t('hero.diagram.caption.a')}</span> {t('hero.diagram.caption.b')}
          </div>
        </div>
      </div>
    </section>
  );
}

const heroStyles = {
  wrap: { position: 'relative', padding: '80px 32px 96px', background: 'var(--ink-950)', overflow: 'hidden' },
  grid: {
    position: 'absolute', inset: 0,
    backgroundImage: 'linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)',
    backgroundSize: '48px 48px',
    maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 80%)',
    WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 80%)',
    pointerEvents: 'none',
  },
  inner: { position: 'relative', maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'center' },
  col: { display: 'flex', flexDirection: 'column', gap: 22 },
  eyebrow: {
    display: 'inline-flex', alignItems: 'center', gap: 10, alignSelf: 'flex-start',
    fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--fg-3)',
    letterSpacing: '0.14em', textTransform: 'uppercase',
    padding: '6px 12px', border: '1px solid var(--border-default)', borderRadius: 999,
    background: 'rgba(10,18,32,0.6)',
  },
  eyebrowDot: {
    width: 6, height: 6, background: 'var(--cyan-400)', borderRadius: '50%',
    display: 'inline-block',
    boxShadow: '0 0 0 3px rgba(45,206,255,0.20)',
    animation: 'oi-pulse 1.8s ease-in-out infinite',
  },
  h1: {
    fontFamily: 'Montserrat', fontWeight: 700, fontSize: 'clamp(2.5rem, 4.5vw, 3.75rem)',
    lineHeight: 1.08, letterSpacing: '-0.02em', color: 'var(--fg-1)', margin: 0,
  },
  accent: { color: 'var(--cyan-400)' },
  lede: { fontFamily: 'Inter', fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', maxWidth: 560, margin: 0 },
  statement: {
    borderLeft: '2px solid var(--blue-500)', padding: '6px 16px',
    fontFamily: 'Inter', fontSize: 15, lineHeight: 1.55, color: 'var(--fg-3)', fontStyle: 'italic',
  },
  quote: { color: 'var(--cyan-400)', fontFamily: 'Montserrat', fontWeight: 700, marginRight: 4 },
  emph: { color: 'var(--fg-1)', fontStyle: 'normal', fontWeight: 600 },
  actions: { display: 'flex', gap: 12, marginTop: 8, flexWrap: 'wrap', alignItems: 'stretch' },
  primary: {
    fontFamily: 'Montserrat', fontWeight: 600, fontSize: 14, letterSpacing: '0.005em',
    background: 'var(--yellow-400)', color: 'var(--fg-on-yellow)',
    padding: '14px 22px', borderRadius: 10, border: 'none', cursor: 'pointer',
    boxShadow: 'var(--shadow-cta)',
    textDecoration: 'none', display: 'inline-flex', alignItems: 'center',
  },
  secondary: {
    fontFamily: 'Montserrat', fontWeight: 500, fontSize: 13,
    background: 'transparent', color: 'var(--fg-2)',
    padding: '13px 18px', borderRadius: 10, border: '1px solid var(--border-strong)', cursor: 'pointer',
    textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10,
  },
  pulseDot: {
    width: 8, height: 8, borderRadius: '50%', background: 'var(--signal-success)',
    boxShadow: '0 0 0 3px rgba(43,214,139,0.18)',
    animation: 'oi-pulse 1.6s ease-in-out infinite',
  },
  phoneNum: {
    fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: 'var(--cyan-400)',
    marginLeft: 4, letterSpacing: '0.04em',
  },
  proof: {
    display: 'flex', alignItems: 'center', gap: 24, marginTop: 28,
    padding: '20px 24px', border: '1px solid var(--border-default)', borderRadius: 12, background: 'var(--ink-900)',
    flexWrap: 'wrap',
  },
  proofItem: { display: 'flex', flexDirection: 'column', gap: 4 },
  proofNum: { fontFamily: 'JetBrains Mono, monospace', fontSize: 24, color: 'var(--fg-1)', fontWeight: 500 },
  proofNumSup: { fontSize: 14, color: 'var(--cyan-400)', marginLeft: 2, verticalAlign: 'top' },
  proofLbl: { fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--fg-3)', letterSpacing: '0.1em', textTransform: 'uppercase' },
  proofDivider: { width: 1, height: 32, background: 'var(--border-default)' },
  diagramCol: { display: 'flex', flexDirection: 'column', gap: 12 },
  diagramCaption: {
    fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--fg-3)',
    letterSpacing: '0.04em', lineHeight: 1.5, paddingLeft: 4,
  },
};