// site/Differentiators.jsx — accepts optional `data` prop from Sanity
const DIFFS_DEFAULT = [
  { num: '01', title: 'Strategy before logistics', body: 'Every program begins with a clear business objective. We design meetings that support growth, alignment, and momentum — not just activity.' },
  { num: '02', title: 'A global network of partners', body: "We collaborate with leading hotels, venues, destination experts, and production partners worldwide — so you're never locked to a single supplier." },
  { num: '03', title: 'Transparency at every step', body: 'Clear pricing, open communication, collaborative planning. You always know where your investment is going, and why.' },
  { num: '04', title: 'Technology at the core', body: 'One of the few agencies actively building AI-enabled planning tools — including Happy Sites, our hotel site inspection platform.' },
];

function Differentiators({ terse, data }) {
  const eyebrow = (data && data.eyebrow) || 'The ENGAGE difference';
  const heading = (data && data.heading) || 'Built for the future of business gatherings.';
  const intro   = (data && data.intro)   || "A few beliefs we've organized the whole company around. They're why our clients stay with us for years, not projects.";
  const diffs   = (data && data.items)
    ? data.items.map(d => ({num: d.number, title: d.title, body: d.body}))
    : DIFFS_DEFAULT;

  return (
    <section className="diffs">
      <div className="container">
        <div className="diffs-head">
          <div>
            <span className="eyebrow-row"><span className="bar" />{eyebrow}</span>
            <h2>{heading}<span className="period">.</span></h2>
          </div>
          {!terse && <p className="intro">{intro}</p>}
        </div>
        <div className="diffs-grid">
          {diffs.map(d => (
            <div key={d.num} className="diff-card">
              <div className="diff-num">{d.num}</div>
              <div className="diff-textwrap">
                <h3 className="diff-title">{d.title}</h3>
                {!terse && <p className="diff-body">{d.body}</p>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Differentiators = Differentiators;