// Comparison vs Apple Intelligence and proxy-style competitors
const Comparison = () => {
  const rows = [
    ['Pick your AI provider (8 supported)', true, false, 'one'],
    ['Bring your own API key', true, false, false],
    ['Per-account voice learning', true, false, false],
    ['No backend in the AI path', true, true, false],
    ['Cost caps + redacted request log', true, false, false],
    ['Action items, follow-ups, briefings', true, false, true],
    ['Provider kill-switch (no app update)', true, false, false],
    ['Free tier (Apple Intelligence + Ollama)', true, true, false],
    ['7 languages out of the box', true, true, 'partial'],
    ['Native macOS, signed + notarized', 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)' }}>One only</span>;
    if (v === 'partial') return <span style={{ fontSize: 12, color:'var(--muted)' }}>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" /> The honest comparison</div>
          <h2 style={{ marginTop: 18 }}>How MailTwin <span className="serif" style={{ fontStyle:'italic' }}>actually</span> compares.</h2>
          <p className="lede" style={{ marginTop: 22 }}>
            Apple Intelligence is great. So are the SaaS contenders. Here's what's different.
          </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 }}>Capability</div>
            {[
              { name: 'MailTwin', accent: true },
              { name: 'Apple Mail', sub: '+ Apple Intelligence' },
              { name: 'SaaS proxies', sub: 'Superhuman AI, Shortwave…' },
            ].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;