// PillarTiles — what the product covers, as two tiles.
//
// Answers the second question a security buyer asks after "is this real?":
// "does it cover my stack?" They are checking against a mental list, so the
// capabilities are a scannable list rather than prose — a paragraph makes them
// read to find out whether DAST is in there.
//
// Content lives in data/homePillars.js (window.HomePillars).

function PillarTiles() {
  const { React } = window;
  const pillars = window.HomePillars || [];
  if (!pillars.length) return null;

  return (
    <section className="ah-pillars" data-screen-label="03 What we cover — two pillars">
      <div className="ah-pillars-inner">
        <div className="ah-pillars-head">
          <h2 className="ah-h2">Everything an attacker would try. Both sides of it.</h2>
          <p className="ah-sub">
            Most teams buy five or six tools to cover this ground and then correlate
            the results by hand. Sekura runs it as one pass and connects what it finds.
          </p>
        </div>

        <div className="ah-tiles">
          {pillars.map((p) => (
            <div className={`ah-tile ah-tile--${p.k}`} key={p.k}>
              <p className="ah-eyebrow">{p.label}</p>
              <h3 className="ah-h3 ah-tile-title">{p.title}</h3>
              <p className="ah-body ah-tile-body">{p.body}</p>
              <ul className="ah-caps">
                {p.caps.map((c) => (
                  <li className="ah-cap" key={c}>
                    <window.AhCheck />
                    {c}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Why one platform rather than two good ones: the argument is abstract
            until you show the arithmetic. */}
        <window.ExploitChainFigure heading="Why both halves have to be in one graph" />
      </div>
    </section>
  );
}

window.PillarTiles = PillarTiles;