// ═══════════════════════════════════════════════════════════════════
// src/sections/Diferenciais.jsx
// Three value-proposition cards on the deep-green background.
// Data sourced from DIFFERENTIALS constant in data.jsx.
// ═══════════════════════════════════════════════════════════════════

function Diferenciais() {
  return (
    <section id="diferenciais" className="section section-deep">
      <div className="container">

        <div className="section-head reveal">
          <div className="eyebrow">Por que nos escolher</div>
          <h2 className="display">
            Três compromissos que <em>fazem</em><br/>toda a diferença.
          </h2>
        </div>

        <div className="diff-grid">
          {DIFFERENTIALS.map((d, i) => (
            <div key={d.num} className={`diff-card reveal d${i + 1}`}>
              <div className="num">{d.num}</div>
              <h3>{d.title}</h3>
              <p>{d.desc}</p>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}