function Comparison() {
  const rows = [
    { feat: 'Dedicated support', ck: 'Same person, every month', firm: 'Rotates between staff', diy: 'Just you' },
    { feat: 'Pricing', ck: 'Flat monthly rate', firm: 'Often hourly', diy: 'Your time' },
    { feat: 'Consistency', ck: 'Reliable, consistent service', firm: 'Staff changes', diy: 'When/if you get to it' },
    { feat: 'Expertise', ck: 'Specialized in service businesses', firm: 'Broader client focus', diy: 'No expertise' },
    { feat: 'Communication', ck: 'Direct access — no middlemen', firm: 'Layers & account managers', diy: 'No expert guidance' },
    { feat: 'Turnaround time', ck: 'Monthly reports by the 15th', firm: { mid: '— Depends on capacity' }, diy: 'When you get to it' },
    { feat: 'Financial confidence', ck: 'Clear numbers & decisions', firm: 'Reactive support', diy: 'Constant uncertainty' },
  ];

  const Cell = ({ kind, text }) => {
    if (kind === 'ck') return (
      <td style={{
        padding: '16px 18px', background: 'rgba(63,128,116,0.06)',
        borderBottom: '1px solid #e6efee', color: '#3F8074', fontWeight: 600,
        fontSize: 13.5, verticalAlign: 'middle', textAlign: 'center',
      }}><span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><CheckStroke />{text}</span></td>
    );
    if (kind === 'mid') return <td style={{ padding: '16px 18px', borderBottom: '1px solid #e6efee', color: '#6e8a86', textAlign: 'center', fontSize: 13.5 }}>{text}</td>;
    return (
      <td style={{ padding: '16px 18px', borderBottom: '1px solid #e6efee', color: '#b84040', textAlign: 'center', fontSize: 13.5 }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><XMark />{text}</span>
      </td>
    );
  };

  return (
    <section id="compare" style={{ background: '#ffffff', padding: '100px 32px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div style={{
            fontSize: 12, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase',
            color: '#3F8074', marginBottom: 14,
          }}>WHY WORK WITH ME?</div>
          <h2 style={{ fontSize: 'clamp(2rem, 2.8vw, 2.6rem)', fontWeight: 700, color: '#163F34', margin: 0, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
            The smarter way to handle your books.
          </h2>
          <p style={{ fontSize: 16, color: '#345048', marginTop: 14, maxWidth: 640, margin: '14px auto 0' }}>
            How a dedicated solo bookkeeper compares to the alternatives.
          </p>
        </div>
        <div className="ck-table-wrap" style={{ background: '#fff', borderRadius: 26, overflow: 'hidden', boxShadow: '0 8px 24px rgba(22,63,52,.06)', border: '1px solid #d5e7e4' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed' }}>
            <thead>
              <tr>
                <th style={{ padding: '20px 18px', textAlign: 'left', fontSize: 11, fontWeight: 700, letterSpacing: '0.05em', color: '#6e8a86', textTransform: 'uppercase', borderBottom: '1px solid #e6efee', width: '28%' }}></th>
                <th style={{ padding: '20px 18px', background: 'rgba(63,128,116,0.06)', borderBottom: '2px solid #3F8074', fontSize: 14, fontWeight: 700, color: '#163F34', width: '24%', lineHeight: 1.35 }}>✦ Chekbooks<br/><span style={{ fontSize: 12, fontWeight: 500, color: '#3F8074' }}>(Solo Bookkeeper)</span></th>
                <th style={{ padding: '20px 18px', borderBottom: '1px solid #e6efee', fontSize: 14, fontWeight: 700, color: '#163F34', width: '24%', lineHeight: 1.35 }}>Large CPA Firm<br/><span style={{ fontSize: 12, fontWeight: 500, color: '#6e8a86' }}>(One-Stop Shop)</span></th>
                <th style={{ padding: '20px 18px', borderBottom: '1px solid #e6efee', fontSize: 14, fontWeight: 700, color: '#163F34', width: '24%', lineHeight: 1.35 }}>DIY<br/><span style={{ fontSize: 12, fontWeight: 500, color: '#6e8a86' }}>(You &amp; QBO)</span></th>
              </tr>
            </thead>
            <tbody>
              {rows.map(r => (
                <tr key={r.feat}>
                  <td style={{ padding: '16px 18px', borderBottom: '1px solid #e6efee', fontWeight: 600, color: '#1a2e28', fontSize: 14 }}>{r.feat}</td>
                  <Cell kind="ck" text={r.ck} />
                  {typeof r.firm === 'object' && r.firm.mid ? <Cell kind="mid" text={r.firm.mid} /> : <Cell kind="no" text={r.firm} />}
                  <Cell kind="no" text={r.diy} />
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div style={{ textAlign: 'center', marginTop: 36 }}>
          <a href="contact.html" className="ck-btn-primary" style={{
            background: '#3F8074', color: '#fff', textDecoration: 'none', border: '1.5px solid #3F8074',
            padding: '11px 32px', borderRadius: 10, fontWeight: 700, fontSize: 14.5,
            display: 'inline-block',
          }}
            onMouseEnter={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#163F34'; e.currentTarget.style.borderColor = '#163F34'; }}
            onMouseLeave={e => { e.currentTarget.style.background = '#3F8074'; e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = '#3F8074'; }}
          >Book A Free Call</a>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Comparison });