function Compare() {
  const rows = [
    { label: 'Avg. total fee', a: '₹2.4L', b: '₹1.8L', c: '₹1.4L' },
    { label: 'Duration', a: '24 months', b: '24 months', c: '24 months' },
    { label: 'Placement support', a: '3 mo', b: '6 mo', c: '9 mo' },
    { label: 'Mentorship', a: null, b: 'Limited', c: 'Monthly' },
    { label: 'EMI plans', a: '12 mo', b: '12–24 mo', c: '0% · up to 36 mo' },
    { label: 'Doc support', a: null, b: 'Partial', c: 'Full concierge' },
    { label: 'Scholarship help', a: null, b: null, c: 'Yes' },
  ];
  const renderCell = (v, highlight = false) => {
    if (v === null) return <div className={`compare-cell tick no ${highlight ? 'compare-col-highlight' : ''}`}>—</div>;
    return <div className={`compare-cell compare-val ${highlight ? 'compare-col-highlight' : ''}`}><strong>{v}</strong></div>;
  };
  return (
    <section className="section compare-section">
      <div className="container">
        <FadeUp>
          <div className="section-head">
            <div className="section-eyebrow">Compare</div>
            <h2 className="section-title">
              Direct admission vs. aggregators vs. <span className="serif">MentVecity.</span>
            </h2>
            <p className="section-sub">Side-by-side on the things that actually affect your outcome.</p>
          </div>
        </FadeUp>
        <FadeUp>
          <div className="compare-table">
            <div className="compare-row compare-head">
              <div className="compare-cell label" style={{fontFamily:'Inter', letterSpacing:0, fontSize: 13}}>What matters</div>
              <div className="compare-cell"><h4>Direct to university</h4><div className="sub">Self-navigated</div></div>
              <div className="compare-cell"><h4>Typical aggregator</h4><div className="sub">Commission-first</div></div>
              <div className="compare-cell highlight"><h4>MentVecity</h4><div className="sub">Student-first</div></div>
            </div>
            {rows.map((r, i) => (
              <div key={i} className="compare-row">
                <div className="compare-cell label">{r.label}</div>
                {renderCell(r.a)}
                {renderCell(r.b)}
                {renderCell(r.c, true)}
              </div>
            ))}
          </div>
        </FadeUp>
      </div>
    </section>
  );
}
window.Compare = Compare;