export function Divider() {
  return (
    <div className="flex items-center justify-center pb-[1.25rem] pt-[3rem] w-full bg-[#f5f0e8]">
      <div className="flex gap-[2rem] items-center overflow-clip shrink-0">

        <p
          className="font-bold leading-normal text-[#222221] text-[2rem] whitespace-nowrap"
          style={{ fontFamily: "var(--font-caveat)" }}
        >
          Klarheit
        </p>

        {/* Arrow separator (flipped) */}
        <div className="flex items-center justify-center">
          <div className="-scale-y-100 rotate-180">
            <div className="h-[0.75rem] relative w-[2.625rem]">
              <img alt="" src="/icon-separator.svg" className="absolute inset-0 w-full h-full" />
            </div>
          </div>
        </div>

        <p
          className="font-bold leading-normal text-[#222221] text-[2rem] whitespace-nowrap"
          style={{ fontFamily: "var(--font-caveat)" }}
        >
          Fokus
        </p>

        {/* Arrow separator (flipped) */}
        <div className="flex items-center justify-center">
          <div className="-scale-y-100 rotate-180">
            <div className="h-[0.75rem] relative w-[2.625rem]">
              <img alt="" src="/icon-separator.svg" className="absolute inset-0 w-full h-full" />
            </div>
          </div>
        </div>

        <p
          className="font-bold leading-normal text-[#222221] text-[2rem] whitespace-nowrap"
          style={{ fontFamily: "var(--font-caveat)" }}
        >
          Entlastung
        </p>

        {/* Sparkle icon */}
        <div className="flex items-center justify-center h-[2.506rem] w-[1.919rem]">
          <div style={{ rotate: "4.6deg" }}>
            <div className="h-[2.375rem] relative w-[1.734rem]">
              <img alt="" src="/icon-separator-right.svg" className="absolute inset-0 w-full h-full" />
            </div>
          </div>
        </div>

      </div>
    </div>
  );
}