// Industries strip.
const NS_IND = window.AnsysDigitalDesignSystem_4543d7;
function Industries() {
  const { SectionHeading } = NS_IND;
  const items = [
    ["shirt", "Fashion"], ["sparkles", "Beauty"], ["gem", "Jewellery"], ["smartphone", "Electronics"],
    ["armchair", "Furniture"], ["lamp", "Home Decor"], ["utensils", "Food"], ["heart-pulse", "Health"],
    ["dog", "Pet"], ["crown", "Luxury Brands"], ["download", "Digital Products"], ["store", "& more"],
  ];
  return (
    <section id="industries" style={{ background: "var(--surface-subtle)" }}>
      <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="Industries" title="Shopify stores for every kind of brand" description="We've designed and built stores across a wide range of industries — from fashion to digital products." align="center" />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6,1fr)", gap: 16 }} className="ind-grid">
          {items.map(([ic, name], i) => (
            <div key={name} className="reveal" style={{ transitionDelay: (i * 25) + "ms", display: "flex", flexDirection: "column", alignItems: "center", gap: 12, padding: "24px 12px", background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-xs)" }}>
              <span style={{ width: 46, height: 46, borderRadius: "50%", background: "var(--gold-50)", color: "var(--gold-600)", 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, { Industries });