// components/PlanosPillars.jsx — barra horizontal com 4 pilares que aparecem em todos os planos
const PILLAR_ICONS = [
  (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
      <path d="M3 8h18M3 16h18" strokeLinecap="round" />
      <path d="M8 12l-4 4M16 12l4 4M8 12l-4-4M16 12l4-4" strokeLinecap="round" />
    </svg>
  ),
  (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
      <circle cx="8" cy="12" r="4" />
      <path d="M12 12h9M17 12v4M20 12v3" strokeLinecap="round" />
    </svg>
  ),
  (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
      <circle cx="12" cy="12" r="9" />
      <path d="M3 12h18M12 3c2.5 2.8 4 6.2 4 9s-1.5 6.2-4 9M12 3c-2.5 2.8-4 6.2-4 9s1.5 6.2 4 9" />
    </svg>
  ),
  (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
      <rect x="3" y="6" width="18" height="12" rx="2" />
      <path d="M3 10h18M7 15h3" strokeLinecap="round" />
    </svg>
  ),
];

const PlanosPillars = () => {
  const items = PILLAR_ICONS.map((icon, i) => ({
    kicker: '0' + (i + 1),
    icon,
    title: t('planos.pillars.items.' + i + '.title'),
    body: t('planos.pillars.items.' + i + '.body'),
  }));
  return (
    <section className="p-pillars" id="diferenciais">
      <div className="container">
        <div className="p-pillars-head">
          <span className="t-eyebrow">{t('planos.pillars.eyebrow')}</span>
          <h2>{t('planos.pillars.title_a')} <em>{t('planos.pillars.title_em')}</em>{t('planos.pillars.title_b')}</h2>
        </div>
        <div className="p-pillars-grid">
          {items.map((p) => (
            <article key={p.kicker} className="p-pillar">
              <div className="p-pillar-top">
                <span className="p-pillar-kicker mono">{p.kicker}</span>
                <span className="p-pillar-icon">{p.icon}</span>
              </div>
              <h3 className="p-pillar-title">{p.title}</h3>
              <p className="p-pillar-body">{p.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};