function Pillars() {
  return (
    <section className="pillars" id="what-we-do">
      <div className="container">
        <div className="pillars-header reveal">
          <div>
            <span className="eyebrow">What we do</span>
            <h2 className="h-section" style={{ marginTop: 16 }}>
              Five ways we get<br/>your business AI-ready.
            </h2>
          </div>
          <p className="body-lg">
            Most SMEs don't need another platform — they need a guide who'll roll up their
            sleeves, find the boring task eating your week, and replace it with something quiet
            and useful. That's the entire job.
          </p>
        </div>

        <div className="bento">
          <div className="bento-card bento-1 reveal">
            <span className="num">01 / Strategy</span>
            <div className="icon-pill" aria-hidden>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
            </div>
            <h3>AI strategy that fits a real business</h3>
            <p>We sit with you for an afternoon, map your actual workflows, and walk out with a 90-day plan you could explain to your accountant. No 60-page decks.</p>
            <div className="visual">
              <svg viewBox="0 0 200 200"><circle cx="100" cy="100" r="80" fill="none" stroke="currentColor" strokeWidth="2"/><circle cx="100" cy="100" r="50" fill="none" stroke="currentColor" strokeWidth="2"/><circle cx="100" cy="100" r="20" fill="currentColor"/></svg>
            </div>
          </div>

          <div className="bento-card bento-2 reveal delay-1">
            <span className="num" style={{ color: "var(--color-highlight)" }}>02 / Automation</span>
            <div className="icon-pill" aria-hidden>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 4h6v6M10 20H4v-6M20 4l-8 8M4 20l8-8"/></svg>
            </div>
            <h3>Workflow automation that runs while you sleep</h3>
            <p>n8n, Make, Zapier — connected to the tools you already use. Quotes, invoices, lead routing, reporting. Quietly, accurately, every single time.</p>
          </div>

          <div className="bento-card bento-3 reveal delay-2">
            <span className="num">03 / Custom</span>
            <div className="icon-pill" aria-hidden>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"/></svg>
            </div>
            <h3>Custom GPTs &amp; agents</h3>
            <p>Trained on your tone, your products, your SOPs. They sound like your best employee on a Tuesday morning.</p>
          </div>

          <div className="bento-card bento-4 reveal delay-2">
            <span className="num">04 / Training</span>
            <div className="icon-pill" aria-hidden>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c0 1.66 3.58 3 8 3s8-1.34 8-3v-5"/></svg>
            </div>
            <h3>Hands-on team training</h3>
            <p>Half a day with your people. They leave with prompts, playbooks, and the confidence to stop pretending they "got AI sorted."</p>
          </div>

          <div className="bento-card bento-5 reveal delay-3">
            <span className="num">05 / Support</span>
            <div className="icon-pill" aria-hidden>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            </div>
            <h3>Ongoing support, on tap</h3>
            <p>One Slack channel. We're there when models update, prompts drift, or someone breaks the automation at 4pm on a Friday.</p>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Pillars = Pillars;