// ============================================================
// WHY BEYMANN — comparison table
// ============================================================

const WhyBeymann = () => {
  const { t } = useI18n();
  const rows = [
    {
      label: t('why.row1.label'),
      them: t('why.row1.them'),
      us: t('why.row1.us'),
      themTone: 'bad',
    },
    {
      label: t('why.row2.label'),
      them: t('why.row2.them'),
      us: t('why.row2.us'),
      themTone: 'bad',
    },
    {
      label: t('why.row3.label'),
      them: t('why.row3.them'),
      us: t('why.row3.us'),
      themTone: 'bad',
    },
    {
      label: t('why.row4.label'),
      them: t('why.row4.them'),
      us: t('why.row4.us'),
      themTone: 'bad',
    },
  ];

  return (
    <section id="why" style={{ padding: '120px 48px' }}>
      <SectionHeader
        eye={t('why.eyebrow')}
        title={t('why.title')}
        sub={t('why.sub')}
      />

      <div className="why-table" style={{
        maxWidth: 1100, margin: '0 auto',
        border: '1px solid var(--border)', borderRadius: 16, overflow: 'hidden',
        background: 'var(--ink-2)',
      }}>
        {/* Header row */}
        <div className="why-header" style={{
          display: 'grid', gridTemplateColumns: '1.1fr 1fr 1.1fr',
          background: 'var(--ink-3)', borderBottom: '1px solid var(--border)',
        }}>
          <div style={{ padding: '24px 28px', fontSize: 10, letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--fg-dim)', fontWeight: 500 }} />
          <div style={{
            padding: '24px 28px', borderLeft: '1px solid var(--border)',
            fontFamily: 'RH Phonic', fontWeight: 500, fontSize: 14,
            textTransform: 'uppercase', letterSpacing: '.16em', color: 'var(--fg-muted)',
          }}>
            {t('why.them')}
          </div>
          <div style={{
            padding: '24px 28px', borderLeft: '1px solid var(--border)',
            background: 'rgba(196,172,120,.06)',
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <img src="assets3/shield-mark.png" style={{ height: 16, opacity: .9 }} alt="" />
            <span style={{
              fontFamily: 'RH Phonic', fontWeight: 700, fontSize: 14,
              textTransform: 'uppercase', letterSpacing: '.16em',
              color: 'var(--gold-400)',
            }}>{t('why.us')}</span>
          </div>
        </div>

        {rows.map((r, i) => (
          <div key={r.label} className="why-row" style={{
            display: 'grid', gridTemplateColumns: '1.1fr 1fr 1.1fr',
            borderBottom: i < rows.length - 1 ? '1px solid var(--border)' : 'none',
            minHeight: 78,
          }}>
            <div className="why-cell why-label" style={{
              padding: '22px 28px',
              fontFamily: 'RH Phonic', fontWeight: 500, fontSize: 13,
              textTransform: 'uppercase', letterSpacing: '.14em',
              color: 'var(--fg-muted)', display: 'flex', alignItems: 'center',
            }}>{r.label}</div>
            <div className="why-cell why-them" data-label={t('why.them')} style={{
              padding: '22px 28px', borderLeft: '1px solid var(--border)',
              fontSize: 15, color: 'var(--fg-dim)', display: 'flex',
              alignItems: 'center', gap: 12, lineHeight: 1.4,
            }}>
              <span className="material-symbols-rounded" style={{
                fontSize: 18, color: 'var(--red-400)', opacity: .85, flexShrink: 0,
              }}>close</span>
              <span>{r.them}</span>
            </div>
            <div className="why-cell why-us" data-label={t('why.us')} style={{
              padding: '22px 28px', borderLeft: '1px solid var(--border)',
              background: 'rgba(196,172,120,.04)',
              fontSize: 15, color: 'var(--fg)', display: 'flex',
              alignItems: 'center', gap: 12, lineHeight: 1.4, fontWeight: 500,
            }}>
              <span className="material-symbols-rounded" style={{
                fontSize: 18, color: 'var(--gold-400)', flexShrink: 0,
              }}>check</span>
              <span>{r.us}</span>
            </div>
          </div>
        ))}
      </div>

      <div style={{
        maxWidth: 1100, margin: '24px auto 0', textAlign: 'right',
        fontSize: 12, color: 'var(--fg-dim)', letterSpacing: '.04em',
        fontStyle: 'italic', fontFamily: 'Martina Plantijn',
      }}>
        {t('why.footnote')}
      </div>
    </section>
  );
};

Object.assign(window, { WhyBeymann });