import { SectionTitle } from "@/sections/shared/SectionTitle";
import { SecWrap, ChipList, type Chip } from "@/sections/shared/grids";

const CHIPS: ReadonlyArray<Chip> = [
  { icon: "user", label: "الأفراد" },
  { icon: "users-round", label: "العائلات" },
  { icon: "user-plus", label: "المجموعات" },
  { icon: "heart", label: "كبار السن" },
  { icon: "building-2", label: "الشركات والجهات" },
  { icon: "flag", label: "الحملات المنظمة" },
];

export function ReligiousAudience() {
  return (
    <SecWrap screenLabel="04 Audience">
      <SectionTitle
        accent="green"
        eyebrow="الفئات المستهدفة"
        heading={
          <>
            نُنظّم لكلّ من
            <br />
            <em>يرغب في تجربة مرتّبة.</em>
          </>
        }
      />
      <ChipList chips={CHIPS} accent="green" />
    </SecWrap>
  );
}