/* Industries section.
   8-up grid of industries with a one-line note. */
function Industries() {
  const { t } = useT();
  const mobile = useMobile();
  const items = t("industries.items");

  const titleStyle = mobile
    ? { ...window.sectionTitle, font: "700 32px/1.1 'Inter'" }
    : window.sectionTitle;

  return (
    <section id="industries" data-bg="industries" style={{ padding: mobile ? "72px 20px 56px" : "112px 32px 80px", maxWidth: 1200, margin: "0 auto" }}>
      <div style={{ ...window.eyebrowBlue, color: "#F59E0B" }}>{t("industries.eyebrow")}</div>
      <h2 style={titleStyle}>{t("industries.title")}</h2>
      <p style={window.sectionLede}>{t("industries.sub")}</p>

      <div style={{
        display: "grid",
        gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(4, 1fr)",
        gap: mobile ? 10 : 14,
        marginTop: mobile ? 40 : 56
      }}>
        {Array.isArray(items) && items.map((it, i) => (
          <div key={i} style={{
            background: "var(--tb-surface)",
            border: "1px solid var(--tb-line)",
            borderRadius: 14,
            padding: mobile ? 16 : 22,
            display: "flex",
            flexDirection: "column",
            gap: 8,
            minHeight: mobile ? undefined : 132
          }}>
            <div style={{
              font: "600 13px/1 'JetBrains Mono'",
              color: "#64748B",
              letterSpacing: "0.04em"
            }}>{String(i + 1).padStart(2, "0")}</div>
            <div style={{
              font: mobile ? "600 14px/1.3 'Inter'" : "600 16px/1.3 'Inter'",
              color: "#fff",
              letterSpacing: "-0.01em"
            }}>{it.name}</div>
            {!mobile && (
              <div style={{
                font: "400 13px/1.5 'Inter'",
                color: "#94A3B8"
              }}>{it.note}</div>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}

window.Industries = Industries;