import { jsx as i, jsxs as r } from "react/jsx-runtime";
import l from "./assets/hs-bg-orchre.jpg.es.js";
import c from "./assets/hs-bg-indigo.jpg.es.js";
import n from "./assets/hs-bg-solar.jpg.es.js";
import d from "./assets/hs-bg-lilac.jpg.es.js";
import a from "../../modules/HighestStandards/highestStandards.module.css";
import { HighlightedTitle as g } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
import { Typography as h } from "../../components/Typography/Typography.es.js";
import { TabsMenu as p } from "./components/TabsMenu/TabsMenu.es.js";
const f = {
  orchre: l,
  indigo: c,
  solar: n,
  lilac: d
}, C = ({ title: o, description: t, image: m, background: e, accordionItems: s }) => /* @__PURE__ */ i("section", { className: a.root, children: /* @__PURE__ */ r("div", { className: a.container, children: [
  /* @__PURE__ */ r("div", { className: a.header, children: [
    /* @__PURE__ */ i(
      g,
      {
        title: o,
        defaultVariant: "displayMd",
        mobileVariant: "headingXl",
        className: a.title
      }
    ),
    /* @__PURE__ */ i(h, { defaultVariant: "bodyLg", mobileVariant: "bodySm", className: a.description, children: t })
  ] }),
  /* @__PURE__ */ r("div", { className: a.content, children: [
    /* @__PURE__ */ i(
      "div",
      {
        style: { backgroundImage: `url(${f[e]})` },
        className: a.imageContainer,
        children: /* @__PURE__ */ i("img", { src: m, alt: "background image", className: a.image })
      }
    ),
    /* @__PURE__ */ i("div", { "data-gradient": e, className: a.accordionBackground, children: /* @__PURE__ */ i("div", { className: a.accordionContainer, children: /* @__PURE__ */ i(p, { items: s }) }) })
  ] })
] }) });
export {
  C as HighestStandards
};
