// components/PlanosTable.jsx — tabela comparativa (scroll horizontal no mobile)
const ROW_KEYS = [
  { key: 'price', highlight: false },
  { key: 'hubs', highlight: false },
  { key: 'agents', highlight: false },
  { key: 'members', highlight: false },
  { key: 'messages', highlight: false },
  { key: 'fee', highlight: true, fixedValues: ['0%', '0%', '0%', '0%'] },
  { key: 'domain', highlight: false, fixedValues: [true, true, true, true] },
  { key: 'byok', highlight: false, fixedValues: [true, true, true, true] },
  { key: 'stripe', highlight: false, fixedValues: [true, true, true, true] },
  { key: 'whitelabel', highlight: false },
  { key: 'support', highlight: false },
];

const PlanosTable = () => {
  const cols = (window.MEMBER_I18N && window.MEMBER_I18N[window.MAI_LANG] && window.MEMBER_I18N[window.MAI_LANG].planos && window.MEMBER_I18N[window.MAI_LANG].planos.table && window.MEMBER_I18N[window.MAI_LANG].planos.table.cols) || ['Basic', 'Expert', 'Business', 'Business+'];

  const rows = ROW_KEYS.map(rk => {
    const label = t('planos.table.rows.' + rk.key);
    let values;
    if (rk.fixedValues) {
      values = rk.fixedValues;
    } else {
      const dictVals = window.MEMBER_I18N && window.MEMBER_I18N[window.MAI_LANG] && window.MEMBER_I18N[window.MAI_LANG].planos && window.MEMBER_I18N[window.MAI_LANG].planos.table && window.MEMBER_I18N[window.MAI_LANG].planos.table.values && window.MEMBER_I18N[window.MAI_LANG].planos.table.values[rk.key];
      values = dictVals || ['—', '—', '—', '—'];
    }
    return { label, values, highlight: rk.highlight };
  });

  return (
    <section className="p-table" id="comparativo">
      <div className="container">
        <div className="p-table-head">
          <span className="t-eyebrow">{t('planos.table.eyebrow')}</span>
          <h2>{t('planos.table.title')}</h2>
          <p className="p-table-sub">{t('planos.table.sub')}</p>
        </div>

        <div className="p-table-wrap">
          <table className="p-table-grid">
            <thead>
              <tr>
                <th className="p-table-corner" />
                {cols.map((c, i) => (
                  <th key={c} className={"p-table-col " + (i === 1 ? 'is-featured' : '')}>
                    <span className="p-table-col-name">{c}</span>
                    {i === 1 && <span className="p-table-pop mono">{t('planos.table.most_popular')}</span>}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r, ri) => (
                <tr key={ri} className={r.highlight ? 'is-hi' : ''}>
                  <th className="p-table-row-label mono">{r.label}</th>
                  {r.values.map((v, ci) => (
                    <td key={ci} className={ci === 1 ? 'is-featured' : ''}>
                      {v === true ? (
                        <span className="p-table-check">
                          <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7.5l3 3L12 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
                        </span>
                      ) : v === false ? (
                        <span className="p-table-dash">—</span>
                      ) : (
                        <span className={r.highlight ? 'p-table-val-hi' : ''}>{v}</span>
                      )}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="p-table-scroll-hint mono">{t('planos.table.scroll_hint')}</p>
      </div>
    </section>
  );
};