/* global React */

const PILLARS = [
  {
    n: "001",
    t: "Evidence specific to your category.",
    b: "We monitor and analyse market data — category dynamics, competitor performance, ranking movements, and customer search behaviour — so recommendations are grounded in what's actually happening in your segment, not industry averages.",
  },
  {
    n: "002",
    t: "Organic first. Paid second.",
    b: "Listings, content, and operations have to perform on their own before we add paid amplification. It costs less revenue in the short term and reveals the truth: what your products actually deliver, before media spend masks it.",
  },
  {
    n: "003",
    t: "We build the workflow around your business.",
    b: "Every brand operates differently — different distributors, different order handoffs, different reporting needs. We've seen what breaks at scale, and we automate the parts that will, in the shape your operation requires.",
  },
];

function Pillars() {
  return (
    <section className="section section--paper" id="approach" data-screen-label="02 Pillars">
      <div className="shell">
        <div className="pillars__head">
          <div>
            <h2>
              Three principles<br/>
              we <span className="accent">work by</span>.
            </h2>
          </div>
          <p className="sub">
            A data-led approach to marketplace operations — from research through to daily execution.
          </p>
        </div>
        <div className="pillars__grid">
          {PILLARS.map(p => (
            <div className="pillar" key={p.n}>
              <div className="n">{p.n}</div>
              <h3>{p.t}</h3>
              <p>{p.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Pillars = Pillars;