/* Comparison — Lamha vs the traditional carrier-by-carrier approach */

function Compare({ t }) {
  return (
    <section className="compare section" id="compare">
      <div className="container">
        <div className="compare-head reveal">
          <span className="eyebrow"><span className="dot"></span>{t.compare.eyebrow}</span>
          <h2 className="section-title" style={{ marginTop: 16 }}>
            {t.compare.title_1}<em>{t.compare.title_em}</em>
          </h2>
          <p className="section-subtitle" style={{ marginTop: 16 }}>{t.compare.sub}</p>
        </div>

        <div className="compare-table reveal">
          <div className="compare-row compare-header">
            <span className="compare-label"></span>
            <span className="compare-cell compare-ours">
              <LamhaLogo height={26} kind="icon" />
              <b>{t.compare.col_lamha}</b>
            </span>
            <span className="compare-cell compare-theirs"><b>{t.compare.col_market}</b></span>
          </div>

          {t.compare.rows.map((r, i) => (
            <div key={i} className="compare-row">
              <span className="compare-label">{r.label}</span>
              <span className="compare-cell compare-ours">
                <span className="compare-mark yes">{Icons.check}</span>
                <span>{r.lamha}</span>
              </span>
              <span className="compare-cell compare-theirs">
                <span className="compare-mark no">{Icons.cross}</span>
                <span>{r.market}</span>
              </span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Compare = Compare;