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

  const items = [
    {
      id: 'S-01', tKey: 's1',
      href: 'mailto:mtzstrategies@gmail.com?subject=Request%20access%20-%20Warehouse%20Dock%20Assignment',
    },
    {
      id: 'S-02', tKey: 's2',
      href: 'mailto:mtzstrategies@gmail.com?subject=Request%20access%20-%20Cargo%20Manifest',
    },
    {
      id: 'S-03', tKey: 's3',
      href: 'mailto:mtzstrategies@gmail.com?subject=Request%20access%20-%20Labeling%20System',
    },
  ];

  return (
    <section style={aotsStyles.wrap} id="shelf">
      <div style={aotsStyles.inner}>
        <div style={aotsStyles.header}>
          <div style={aotsStyles.eyebrow}>{t('shelf.eyebrow')}</div>
          <h2 style={aotsStyles.h2}>{t('shelf.h2')}</h2>
          <p style={aotsStyles.lede}>{t('shelf.lede')}</p>
        </div>

        <div style={aotsStyles.grid}>
          {items.map(item => (
            <div key={item.id} style={aotsStyles.card}>
              <div style={aotsStyles.cardTop}>
                <span style={aotsStyles.code}>{item.id}</span>
                <span style={aotsStyles.confidential}>
                  <span style={aotsStyles.confidentialDot}/> {t('shelf.confidential')}
                </span>
              </div>

              <div style={aotsStyles.domain}>{t(`shelf.${item.tKey}.domain`)}</div>
              <div style={aotsStyles.name}>{t(`shelf.${item.tKey}.name`)}</div>
              <p style={aotsStyles.desc}>{t(`shelf.${item.tKey}.desc`)}</p>

              <div style={aotsStyles.divider}/>

              <a href={item.href} style={aotsStyles.action}>
                {t('shelf.cta')} <span style={{marginLeft: 6}}>→</span>
              </a>
            </div>
          ))}
        </div>

        <div style={aotsStyles.footnote}>
          <span style={aotsStyles.footnoteMark}>*</span>
          {t('shelf.footnote')}
        </div>
      </div>
    </section>
  );
}

const aotsStyles = {
  wrap: { padding: '96px 32px', background: 'var(--ink-950)' },
  inner: { maxWidth: 1240, margin: '0 auto' },

  header: { display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 40, maxWidth: 760 },
  eyebrow: { fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: 'var(--cyan-400)', letterSpacing: '0.14em', textTransform: 'uppercase' },
  h2: { fontFamily: 'Montserrat', fontWeight: 700, fontSize: 40, lineHeight: 1.1, letterSpacing: '-0.02em', color: 'var(--fg-1)', margin: 0 },
  lede: { fontFamily: 'Inter', fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0 },

  grid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 },
  card: {
    background: 'var(--ink-900)', border: '1px solid var(--border-default)',
    borderRadius: 12, padding: 24,
    display: 'flex', flexDirection: 'column', gap: 10,
    position: 'relative', overflow: 'hidden',
  },
  cardTop: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    paddingBottom: 12, borderBottom: '1px solid var(--border-subtle)',
  },
  code: { fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: 'var(--cyan-400)', letterSpacing: '0.06em' },
  confidential: {
    display: 'inline-flex', alignItems: 'center', gap: 6,
    fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
    color: 'var(--fg-3)', letterSpacing: '0.14em',
    padding: '3px 8px', borderRadius: 4,
    background: 'var(--ink-800)', border: '1px solid var(--border-subtle)',
  },
  confidentialDot: { width: 5, height: 5, borderRadius: '50%', background: 'var(--fg-4)' },

  domain: { fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--fg-3)', letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 6 },
  name: { fontFamily: 'Montserrat', fontWeight: 600, fontSize: 17, color: 'var(--fg-1)', letterSpacing: '-0.005em', lineHeight: 1.3 },
  desc: { fontFamily: 'Inter', fontSize: 13.5, lineHeight: 1.55, color: 'var(--fg-2)', margin: 0 },

  divider: { height: 1, background: 'var(--border-subtle)', margin: '12px 0 4px' },

  action: {
    display: 'inline-flex', alignItems: 'center',
    fontFamily: 'Montserrat', fontWeight: 500, fontSize: 13,
    color: 'var(--cyan-400)',
    textDecoration: 'none', cursor: 'pointer',
    alignSelf: 'flex-start',
  },

  footnote: {
    marginTop: 24,
    fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--fg-4)',
    letterSpacing: '0.04em', lineHeight: 1.6, maxWidth: 780,
  },
  footnoteMark: { color: 'var(--cyan-400)', marginRight: 6 },
};