function About() {
  const { t } = window.useT();

  const bgRows = [
    { years: '2024 →',      role: t('about.bg.role.amds'), company: 'AM Digital Solutions',            tag: t('about.bg.tag.consulting') },
    { years: '2021 →',      role: t('about.bg.role.cc'),   company: 'CryptoCultura',                   tag: t('about.bg.tag.product') },
    { years: '2021 – 2025', role: t('about.bg.role.buck'), company: 'Buckland Solutions · Laredo, TX', tag: t('about.bg.tag.customs') },
    { years: '2019 – 2021', role: t('about.bg.role.mast'), company: 'Mastronardi Produce',             tag: t('about.bg.tag.logistics') },
  ];

  return (
    <section style={aboutStyles.wrap} id="about">
      <div style={aboutStyles.inner}>
        {/* ROW 1 — narrative + portrait/profile */}
        <div style={aboutStyles.row1}>
          <div style={aboutStyles.left}>
            <div style={aboutStyles.eyebrow}>{t('about.eyebrow')}</div>
            <h2 style={aboutStyles.h2}>
              {t('about.h2.a')}
              <span style={{color: 'var(--fg-3)'}}>{t('about.h2.b')}</span>
            </h2>

            <p style={aboutStyles.body}>{t('about.p1')}</p>
            <p style={aboutStyles.body}>{t('about.p2')}</p>
            <p style={aboutStyles.body}>
              {t('about.p3.a')}
              <strong style={aboutStyles.emph}>{t('about.p3.emph')}</strong>
              {t('about.p3.b')}
            </p>

            <div style={aboutStyles.principles}>
              <div style={aboutStyles.principlesLabel}>{t('about.principles.label')}</div>
              <div style={aboutStyles.principleList}>
                <div style={aboutStyles.principle}>
                  <span style={aboutStyles.principleNum}>01</span>
                  <span>{t('about.principle1')}</span>
                </div>
                <div style={aboutStyles.principle}>
                  <span style={aboutStyles.principleNum}>02</span>
                  <span>{t('about.principle2')}</span>
                </div>
                <div style={aboutStyles.principle}>
                  <span style={aboutStyles.principleNum}>03</span>
                  <span>{t('about.principle3')}</span>
                </div>
              </div>
            </div>
          </div>

          <div style={aboutStyles.right}>
            <div style={aboutStyles.portraitFrame}>
              <div style={aboutStyles.portraitRing}>
                <div style={aboutStyles.portrait}>
                  <img
                    src="./assets/headshot-alfredo.jpg"
                    alt="Alfredo A. Martínez"
                    style={aboutStyles.portraitImg}
                  />
                  <div style={aboutStyles.portraitTint}/>
                </div>
              </div>
              <div style={{...aboutStyles.tick, top: 8, left: '50%', transform: 'translateX(-50%)'}}/>
              <div style={{...aboutStyles.tick, bottom: 8, left: '50%', transform: 'translateX(-50%)'}}/>
              <div style={{...aboutStyles.tick, left: 8, top: '50%', transform: 'translateY(-50%)'}}/>
              <div style={{...aboutStyles.tick, right: 8, top: '50%', transform: 'translateY(-50%)'}}/>
            </div>

            <div style={aboutStyles.card}>
              <div style={aboutStyles.cardHead}>
                <span style={aboutStyles.cardHeadLabel}>{t('about.profile.label')}</span>
                <span style={aboutStyles.statusChip}>
                  <span style={aboutStyles.statusDot}/> {t('about.profile.active')}
                </span>
              </div>
              <div style={aboutStyles.cardName}>Alfredo A. Martínez</div>
              <div style={aboutStyles.cardRole}>{t('about.profile.role')}</div>
              <div style={aboutStyles.cardCompany}>
                {t('about.profile.company.a')}<span style={aboutStyles.cardCompanyName}>AM Digital Solutions</span>
              </div>

              <div style={aboutStyles.credChips}>
                <span style={aboutStyles.credChip}>
                  <span style={aboutStyles.credChipDot}/> {t('about.profile.cred.ccs')}
                </span>
                <span style={aboutStyles.credChipMuted}>{t('about.profile.cred.ba')}</span>
              </div>

              <div style={aboutStyles.metaGrid}>
                <div>
                  <div style={aboutStyles.metaLabel}>{t('about.profile.based')}</div>
                  <div style={aboutStyles.metaValue}>{t('about.profile.basedVal')}</div>
                </div>
                <div>
                  <div style={aboutStyles.metaLabel}>{t('about.profile.focus')}</div>
                  <div style={aboutStyles.metaValue}>{t('about.profile.focusVal')}</div>
                </div>
                <div>
                  <div style={aboutStyles.metaLabel}>{t('about.profile.langs')}</div>
                  <div style={aboutStyles.metaValue}>{t('about.profile.langsVal')}</div>
                </div>
                <div>
                  <div style={aboutStyles.metaLabel}>{t('about.profile.avail')}</div>
                  <div style={{...aboutStyles.metaValue, color: 'var(--signal-success)'}}>{t('about.profile.availVal')}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* ROW 2 — full-width horizontal timeline */}
        <div style={aboutStyles.bgCard}>
          <div style={aboutStyles.bgHeadRow}>
            <span style={aboutStyles.bgHeadLbl}>{t('about.bg.label')}</span>
            <span style={aboutStyles.bgHeadNote}>{t('about.bg.note')}</span>
          </div>
          <div style={aboutStyles.bgTimeline}>
            {bgRows.map((r, i, arr) => (
              <div key={r.company} style={aboutStyles.bgCol}>
                <div style={aboutStyles.bgColHead}>
                  <span style={aboutStyles.bgYears}>{r.years}</span>
                  <span style={aboutStyles.bgTag}>{r.tag}</span>
                </div>
                <div style={aboutStyles.bgRole}>{r.role}</div>
                <div style={aboutStyles.bgCompany}>{r.company}</div>
                {i < arr.length - 1 && <div style={aboutStyles.bgConnector}/>}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const aboutStyles = {
  wrap: { padding: '96px 32px', background: 'var(--ink-900)', borderTop: '1px solid var(--border-subtle)' },
  inner: { maxWidth: 1240, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 40 },
  row1: { display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 64, alignItems: 'start' },
  left: { display: 'flex', flexDirection: 'column', gap: 18 },
  eyebrow: { fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: 'var(--cyan-400)', letterSpacing: '0.14em', textTransform: 'uppercase' },
  h2: { fontFamily: 'Montserrat', fontWeight: 700, fontSize: 36, lineHeight: 1.18, letterSpacing: '-0.015em', color: 'var(--fg-1)', margin: 0, marginBottom: 6 },
  body: { fontFamily: 'Inter', fontSize: 16, lineHeight: 1.65, color: 'var(--fg-2)', margin: 0 },
  emph: { color: 'var(--fg-1)', fontWeight: 600 },
  principles: {
    marginTop: 20, padding: 28, background: 'var(--ink-800)',
    border: '1px solid var(--border-default)', borderRadius: 12,
  },
  principlesLabel: {
    fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--fg-3)',
    letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 18,
  },
  principleList: { display: 'flex', flexDirection: 'column', gap: 14 },
  principle: {
    display: 'flex', gap: 14, alignItems: 'baseline',
    fontFamily: 'Montserrat', fontWeight: 500, fontSize: 17, color: 'var(--fg-1)',
  },
  principleNum: {
    fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: 'var(--cyan-400)',
    letterSpacing: '0.06em', minWidth: 24,
  },

  right: { display: 'flex', flexDirection: 'column', gap: 20 },
  portraitFrame: {
    position: 'relative', width: '100%', aspectRatio: '1 / 1',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    background: 'radial-gradient(circle at 50% 50%, rgba(47,118,255,0.08) 0%, transparent 65%), var(--ink-800)',
    border: '1px solid var(--border-default)', borderRadius: 20, overflow: 'hidden',
  },
  portraitRing: {
    position: 'relative', width: '80%', aspectRatio: '1 / 1',
    borderRadius: '50%', padding: 6,
    background: 'conic-gradient(from 200deg, rgba(45,206,255,0.45), rgba(19,87,234,0.35), rgba(45,206,255,0.05), rgba(45,206,255,0.45))',
  },
  portrait: {
    position: 'relative', width: '100%', height: '100%',
    borderRadius: '50%', overflow: 'hidden',
    border: '2px solid var(--ink-900)', background: 'var(--ink-900)',
  },
  portraitImg: {
    width: '100%', height: '100%',
    objectFit: 'cover', objectPosition: '68% 42%',
    filter: 'grayscale(0.35) contrast(1.05) saturate(0.75)',
    display: 'block',
  },
  portraitTint: {
    position: 'absolute', inset: 0,
    background: 'radial-gradient(circle at 65% 40%, transparent 40%, rgba(10,18,32,0.45) 100%), linear-gradient(180deg, rgba(19,87,234,0.05) 0%, rgba(10,18,32,0.35) 100%)',
    pointerEvents: 'none',
  },
  tick: {
    position: 'absolute', width: 6, height: 6, background: 'var(--cyan-400)',
    borderRadius: '50%', boxShadow: '0 0 0 3px rgba(45,206,255,0.15)',
  },

  card: {
    background: 'var(--ink-800)', border: '1px solid var(--border-default)',
    borderRadius: 12, padding: 24, display: 'flex', flexDirection: 'column', gap: 8,
  },
  cardHead: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    paddingBottom: 14, borderBottom: '1px solid var(--border-subtle)', marginBottom: 4,
  },
  cardHeadLabel: { fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--fg-3)', letterSpacing: '0.14em' },
  statusChip: {
    display: 'inline-flex', alignItems: 'center', gap: 6,
    fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
    color: 'var(--signal-success)', letterSpacing: '0.12em',
    padding: '3px 8px', borderRadius: 4,
    background: 'rgba(43,214,139,0.10)', border: '1px solid rgba(43,214,139,0.30)',
  },
  statusDot: {
    width: 5, height: 5, borderRadius: '50%', background: 'var(--signal-success)',
    boxShadow: '0 0 0 2px rgba(43,214,139,0.20)',
  },
  cardName: { fontFamily: 'Montserrat', fontWeight: 700, fontSize: 18, color: 'var(--fg-1)', letterSpacing: '-0.01em', marginTop: 6 },
  cardRole: { fontFamily: 'Inter', fontSize: 13, color: 'var(--fg-3)', marginBottom: 4 },
  cardCompany: { fontFamily: 'Inter', fontSize: 12, color: 'var(--fg-3)', marginBottom: 14 },
  cardCompanyName: { color: 'var(--cyan-400)', fontWeight: 600 },

  credChips: { display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 14 },
  credChip: {
    display: 'inline-flex', alignItems: 'center', gap: 6,
    fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
    color: 'var(--cyan-400)', letterSpacing: '0.10em',
    padding: '4px 8px', borderRadius: 4,
    background: 'rgba(45,206,255,0.08)', border: '1px solid rgba(45,206,255,0.30)',
  },
  credChipDot: { width: 4, height: 4, borderRadius: '50%', background: 'var(--cyan-400)' },
  credChipMuted: {
    display: 'inline-flex', alignItems: 'center',
    fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
    color: 'var(--fg-3)', letterSpacing: '0.10em',
    padding: '4px 8px', borderRadius: 4,
    background: 'var(--ink-900)', border: '1px solid var(--border-subtle)',
  },

  metaGrid: {
    display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
    paddingTop: 12, borderTop: '1px solid var(--border-subtle)',
  },
  metaLabel: { fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: 'var(--fg-4)', letterSpacing: '0.12em', marginBottom: 4 },
  metaValue: { fontFamily: 'Inter', fontSize: 13, color: 'var(--fg-1)', fontWeight: 500, lineHeight: 1.4 },

  bgCard: {
    background: 'var(--ink-800)', border: '1px solid var(--border-default)',
    borderRadius: 16, padding: 32,
  },
  bgHeadRow: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
    paddingBottom: 20, marginBottom: 24,
    borderBottom: '1px solid var(--border-subtle)',
    gap: 24, flexWrap: 'wrap',
  },
  bgHeadLbl: {
    fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--cyan-400)',
    letterSpacing: '0.14em', textTransform: 'uppercase',
  },
  bgHeadNote: {
    fontFamily: 'Inter', fontSize: 13, color: 'var(--fg-3)', lineHeight: 1.5,
    fontStyle: 'italic', maxWidth: 640, textAlign: 'right',
  },
  bgTimeline: {
    display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16,
    position: 'relative',
  },
  bgCol: {
    position: 'relative', padding: 20,
    background: 'var(--ink-900)', border: '1px solid var(--border-default)',
    borderRadius: 12,
    display: 'flex', flexDirection: 'column', gap: 8, minHeight: 140,
  },
  bgConnector: {
    position: 'absolute', right: -16, top: 32,
    width: 16, height: 1,
    background: 'linear-gradient(90deg, var(--cyan-400) 0%, transparent 100%)',
    opacity: 0.5,
  },
  bgColHead: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    paddingBottom: 10, marginBottom: 6,
    borderBottom: '1px dashed var(--border-subtle)',
  },
  bgYears: {
    fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
    color: 'var(--cyan-400)', letterSpacing: '0.06em',
  },
  bgTag: {
    fontFamily: 'JetBrains Mono, monospace', fontSize: 8,
    color: 'var(--fg-4)', letterSpacing: '0.14em',
    padding: '2px 6px', borderRadius: 3,
    background: 'var(--ink-800)', border: '1px solid var(--border-subtle)',
  },
  bgRole: {
    fontFamily: 'Montserrat', fontWeight: 600, fontSize: 13, color: 'var(--fg-1)',
    letterSpacing: '0.005em', lineHeight: 1.35,
  },
  bgCompany: {
    fontFamily: 'Inter', fontSize: 12, color: 'var(--fg-3)', lineHeight: 1.4,
    marginTop: 'auto',
  },
};