// Comparison.jsx — "Traditional care vs Peaceful Hearts" with two layouts (table / cards)
const phCompare = [
  { label: 'Time with your provider', trad: '7–15 rushed minutes', ph: '30–60 unhurried minutes' },
  { label: 'Getting an appointment', trad: 'Days or weeks of waiting', ph: 'Same-day & next-day' },
  { label: 'Reaching your provider', trad: 'Phone trees and callbacks', ph: 'Secure message, same-day reply' },
  { label: 'How you pay', trad: 'Copays and surprise bills', ph: 'One flat monthly fee' },
  { label: 'Who your provider answers to', trad: 'Insurance and billing codes', ph: 'You' },
  { label: 'Patients per provider', trad: '2,000+ on the panel', ph: 'A small, capped panel' },
];

function Comparison({ layout = 'table' }) {
  return (
    <section className="ph-section is-tint" id="compare">
      <div className="ph-container">
        <SectionHead center eyebrow="The difference" title="Traditional care vs. Peaceful Hearts"
          sub="The same care, without the rush." />

        {layout === 'cards' ? (
          <div className="ph-cmp-cards">
            <div className="ph-cmp-card is-trad">
              <div className="ph-cmp-card-head">
                <span className="ph-cmp-tag">Traditional primary care</span>
                <h3>The usual rushed visit</h3>
              </div>
              <ul>
                {phCompare.map(r => (
                  <li key={r.label}>
                    <Icon name="x" size={18} color="#868D97" />
                    <span><strong>{r.label}:</strong> {r.trad}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="ph-cmp-card is-ph">
              <div className="ph-cmp-card-head">
                <span className="ph-cmp-tag">Peaceful Hearts</span>
                <h3>Calm, personal care</h3>
              </div>
              <ul>
                {phCompare.map(r => (
                  <li key={r.label}>
                    <Icon name="check" size={18} color="#ACBF77" />
                    <span><strong>{r.label}:</strong> {r.ph}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        ) : (
          <div className="ph-cmp-table" role="table" aria-label="Traditional care versus Peaceful Hearts">
            <div className="ph-cmp-row ph-cmp-headrow" role="row">
              <div className="ph-cmp-cell ph-cmp-rowlabel" role="columnheader"></div>
              <div className="ph-cmp-cell ph-cmp-col-trad" role="columnheader">Traditional care</div>
              <div className="ph-cmp-cell ph-cmp-col-ph" role="columnheader">
                <span className="ph-cmp-col-ph-tag">Peaceful Hearts</span>
              </div>
            </div>
            {phCompare.map(r => (
              <div className="ph-cmp-row" role="row" key={r.label}>
                <div className="ph-cmp-cell ph-cmp-rowlabel" role="rowheader">{r.label}</div>
                <div className="ph-cmp-cell ph-cmp-col-trad" role="cell">
                  <Icon name="x" size={18} color="#A6ADB7" /> <span>{r.trad}</span>
                </div>
                <div className="ph-cmp-cell ph-cmp-col-ph" role="cell">
                  <Icon name="check" size={18} color="#506330" /> <span>{r.ph}</span>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}
Object.assign(window, { Comparison });