var PILLARS = [
  {
    num: "01",
    title: "Built on Real Infrastructure",
    desc: "We didn't start with AI theory. We've designed, deployed, and maintained IT systems for enterprises across Azerbaijan. We know what breaks, what works, and what makes a difference.",
  },
  {
    num: "02",
    title: "Intelligence That Integrates",
    desc: "We automate your processes, not replace them. Our AI solutions work within your existing systems — faster approvals, smarter decisions, less manual work.",
  },
  {
    num: "03",
    title: "From Conversation to Working Software",
    desc: "No endless consulting cycles. We scope your problem, build the solution, and ship it fast. You measure impact, not billable hours.",
  },
];

var Pillars = function() {
  return (
    <section className="section section--mist">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Why Aphina</span>
            <h2 className="section-title">
              We think in <span className="accent-magenta">products,</span><br />not tickets.
            </h2>
          </div>
          <p className="section-deck">
            We're not a consultancy that bills hours. We're a product-first team that scopes your problem, assembles the right people, and ships working software.
          </p>
        </div>
        <div className="pillars-num">
          {PILLARS.map(function(p) {
            return (
              <div key={p.num} className="pillar">
                <span className="num">{p.num}</span>
                <h3 className="ptitle">{p.title}</h3>
                <p className="pdesc">{p.desc}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};