// Tech stack grid.
const NS_TS = window.AnsysDigitalDesignSystem_4543d7;
function TechStack() {
  const { SectionHeading } = NS_TS;
  const tech = [
    ["store", "Shopify"], ["rocket", "Shopify Plus"], ["waves", "Hydrogen"],
    ["atom", "React"], ["braces", "Liquid"], ["mail", "Klaviyo"],
    ["bar-chart-3", "GA4"], ["megaphone", "Meta Ads"], ["wind", "Tailwind"],
    ["server", "Node.js"], ["search", "Search & SEO"], ["credit-card", "Shopify Payments"],
  ];
  return (
    <section style={{ background: "var(--surface-page)" }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "var(--section-y) var(--gutter)" }}>
        <div className="reveal" style={{ marginBottom: "clamp(2.5rem,5vw,3.5rem)" }}>
          <SectionHeading eyebrow="Our stack" title="Built on the best technology" description="Enterprise-grade tools, wired together for speed, data, and scale." align="center" />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6,1fr)", gap: 16 }} className="tech-grid">
          {tech.map(([ic, name], i) => (
            <div key={name} className="reveal" style={{ transitionDelay: (i * 30) + "ms", display: "flex", flexDirection: "column", alignItems: "center", gap: 12, padding: "22px 12px", background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-xs)" }}>
              <span style={{ width: 44, height: 44, borderRadius: "var(--radius-md)", background: "var(--blue-50)", color: "var(--brand)", display: "grid", placeItems: "center" }}><Ic name={ic} size={22} /></span>
              <span style={{ fontSize: 13.5, fontWeight: 600, color: "var(--text-primary)", textAlign: "center" }}>{name}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { TechStack });