// Comparison vs Apple Intelligence and proxy-style competitors
const Comparison = () => {
  const rows = [
    [t('compare.row1'),  true, false, 'one'],
    [t('compare.row2'),  true, false, false],
    [t('compare.row3'),  true, false, false],
    [t('compare.row4'),  true, true,  false],
    [t('compare.row5'),  true, false, false],
    [t('compare.row6'),  true, false, true],
    [t('compare.row7'),  true, false, false],
    [t('compare.row8'),  true, true,  false],
    [t('compare.row9'),  true, true,  'partial'],
    [t('compare.row10'), true, true,  false],
  ];

  const Cell = ({ v }) => {
    if (v === true) return <Icons.Check size={20} stroke={2.4} style={{ color:'#1f8c3a' }} />;
    if (v === false) return <Icons.X size={20} stroke={2} style={{ color:'rgba(15,11,20,0.25)' }} />;
    if (v === 'one') return <span style={{ fontSize: 12, color:'var(--muted)' }}>{t('compare.cell_one_only')}</span>;
    if (v === 'partial') return <span style={{ fontSize: 12, color:'var(--muted)' }}>{t('compare.cell_partial')}</span>;
    return <span style={{ fontSize: 12, color:'var(--muted)' }}>{v}</span>;
  };

  return (
    <section id="compare" style={{ background:'var(--bg)' }}>
      <div className="container-tight">
        <div style={{ textAlign:'center', maxWidth: 760, margin:'0 auto 56px' }}>
          <div className="eyebrow" style={{ justifyContent:'center', display:'inline-flex' }}><span className="dot" /> {t('compare.eyebrow')}</div>
          <h2 style={{ marginTop: 18 }}>{t('compare.h2_part1')}<span className="serif" style={{ fontStyle:'italic' }}>{t('compare.h2_part2')}</span>{t('compare.h2_part3')}</h2>
          <p className="lede" style={{ marginTop: 22 }}>
            {t('compare.lede')}
          </p>
        </div>

        <div className="card" style={{ overflow:'hidden' }}>
          <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', background:'var(--bg-2)', borderBottom:'1px solid var(--line)' }}>
            <div style={{ padding:'18px 24px', fontSize: 12, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--muted)', fontWeight: 600 }}>{t('compare.col_capability')}</div>
            {[
              { name: t('compare.col_us'), accent: true },
              { name: t('compare.col_apple'), sub: t('compare.col_apple_sub') },
              { name: t('compare.col_saas'), sub: t('compare.col_saas_sub') },
            ].map(c => (
              <div key={c.name} style={{ padding:'18px 16px', textAlign:'center', borderLeft:'1px solid var(--line)' }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: c.accent ? 'var(--purple)' : 'var(--ink)' }}>{c.name}</div>
                {c.sub && <div style={{ fontSize: 11, color:'var(--muted)', marginTop: 2 }}>{c.sub}</div>}
              </div>
            ))}
          </div>
          {rows.map(([label, ai, apple, saas], i) => (
            <div key={label} style={{
              display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr',
              borderBottom: i < rows.length - 1 ? '1px solid var(--line-2)' : 'none',
              background: i % 2 === 0 ? 'transparent' : 'rgba(155,111,224,0.02)',
            }}>
              <div style={{ padding:'16px 24px', fontSize: 14.5, fontWeight: 500 }}>{label}</div>
              {[ai, apple, saas].map((v, j) => (
                <div key={j} style={{ padding:'16px', textAlign:'center', borderLeft:'1px solid var(--line)', display:'flex', alignItems:'center', justifyContent:'center', background: j === 0 ? 'rgba(155,111,224,0.04)' : 'transparent' }}>
                  <Cell v={v} />
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Comparison = Comparison;