// Comparison.jsx — legacy vs the Myra way
function Comparison() {
  const bad = ['Reports nobody trusts', 'Data trapped in silos', 'Months of agency back-and-forth', 'Black-box systems you can\u2019t maintain', 'Lock-in by design'];
  const good = ['Numbers your CFO signs off on', 'One governed source of truth', 'Direct access to senior engineers', 'Documented systems your team owns', 'Replaceable by design'];
  return (
    <section className="w-section w-section--white" id="compare">
      <span className="w-ov w-ov-squiggle w-ov-cmp1" aria-hidden></span>
      <span className="w-ov w-ov-ball w-ov-cmp2" aria-hidden></span>
      <div className="w-wrap">
        <div className="w-section__head" data-reveal>
          <p className="w-eyebrow w-section__eyebrow">The difference</p>
          <h2 className="w-section__title">Stop guessing<br /><span className="w-hl">Start deciding</span></h2>
        </div>
        <div className="w-compare">
          <div className="w-compare__col w-compare__col--bad" data-reveal>
            <div className="w-compare__tag">Legacy stack</div>
            <ul className="w-compare__list">
              {bad.map(t => <li key={t}><span className="w-compare__mark" aria-hidden>✕</span>{t}</li>)}
            </ul>
          </div>
          <div className="w-compare__col w-compare__col--good" data-reveal data-reveal-delay="1">
            <div className="w-compare__tag">The Myra way</div>
            <ul className="w-compare__list">
              {good.map(t => <li key={t}><span className="w-compare__mark" aria-hidden>✓</span>{t}</li>)}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Comparison });