/* Honest comparison: ReplyFirst vs the alternatives.
   Cells validated against what each option typically delivers — the
   ReplyFirst column maps to real platform capability (24/7 voice answering,
   AI qualification, missed-call text-back, instant routing). */
function Compare() {
  const cols = ['ReplyFirst', 'Voicemail', 'Answering service', 'In-house receptionist'];
  const rows = [
    ['Answers 24/7, nights & weekends',         ['y', 'n', 'y', 'n']],
    ['A real conversation, not a recording',     ['y', 'n', 'y', 'y']],
    ['Qualifies the job & scores urgency',       ['y', 'n', 'n', 'y']],
    ['Texts the customer back automatically',    ['y', 'n', 'n', 'n']],
    ['Routes urgent leads to you in seconds',    ['y', 'n', 'p', 'y']],
    ['Flat monthly price, no per-minute fees',   ['y', 'y', 'n', 'n']],
    ['No salary, sick days, or turnover',        ['y', 'y', 'y', 'n']],
  ];
  const Check = () => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>);
  const Ex = () => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>);
  const Mark = ({ v }) => v === 'y'
    ? <span className="mark y"><Check /></span>
    : v === 'p'
      ? <span className="mark p" title="Sometimes — varies by provider">~</span>
      : <span className="mark n"><Ex /></span>;

  return (
    <section className="compare" id="compare">
      <div className="site sec-pad">
        <div className="sec-head" style={{ marginBottom: 36 }}>
          <div className="eyebrow">The honest comparison</div>
          <h2 className="display" style={{ marginTop: 12 }}>Why owners pick reply<span style={{ color: 'var(--yellow)' }}>first</span></h2>
          <p className="cmp-sub">Voicemail loses the job. An answering service reads a script. A receptionist costs a salary and clocks out at five. ReplyFirst does all of it, around the clock, from $120 a month.</p>
        </div>
        <div className="cmp-card"><div className="cmp-scroll">
          <table className="cmp">
            <thead>
              <tr>
                <th className="lbl"></th>
                {cols.map((c, i) => i === 0
                  ? <th key={i} className="rf" scope="col">
                      <span className="cmp-flag">Best for trades</span>
                      <img className="cmp-logo" src="assets/logo-lockup.png" alt="ReplyFirst" width="190" height="50" />
                    </th>
                  : <th key={i} className="" scope="col">{c}</th>)}
              </tr>
            </thead>
            <tbody>
              {rows.map((r, ri) => (
                <tr key={ri}>
                  <td className="lbl" scope="row">{r[0]}</td>
                  {r[1].map((v, ci) => <td key={ci} className={ci === 0 ? 'rf' : ''}><Mark v={v} /></td>)}
                </tr>
              ))}
            </tbody>
          </table>
        </div></div>
        <div className="cmp-payoff">
          <span className="cmp-payoff-t">Every green check, one flat price.</span>
          <a className="btn" href="#pricing"><Icon name="bolt" /><span>See pricing</span></a>
        </div>
        <div className="cmp-note">The ReplyFirst column reflects what our platform delivers. The rest are typical of each option. Exact features vary by provider.</div>
      </div>
    </section>
  );
}
window.Compare = Compare;