import { SectionTitle } from "@/sections/shared/SectionTitle";
import { SecWrap, TypeGrid, type TypeCard } from "@/sections/shared/grids";

const SERVICES: ReadonlyArray<TypeCard> = [
  { icon: "map-pinned", title: "زيارات دينية", description: "تنسيق برامج زيارة منظّمة بمواعيد ومسارات واضحة.", variant: "green" },
  { icon: "users-round", title: "رحلات جماعية", description: "برامج للمجموعات بأحجام مختلفة مع تنسيق شامل.", variant: "green" },
  { icon: "home", title: "برامج عائلية", description: "برامج مصمّمة لاحتياجات العائلات والأطفال وكبار السن.", variant: "green" },
  { icon: "bed-double", title: "تنسيق السكن والتنقل", description: "حجز السكن وترتيب وسائل النقل بين المواقع بسلاسة.", variant: "green" },
  { icon: "calendar-clock", title: "متابعة جدول الرحلة", description: "متابعة دقيقة لكل مرحلة من البرنامج طوال الرحلة.", variant: "green" },
  { icon: "book-open", title: "خدمات إرشادية", description: "إرشاد ومرافقة حسب طبيعة كل برنامج وحاجة المجموعة.", variant: "green" },
];

export function ReligiousServices() {
  return (
    <SecWrap screenLabel="02 Services">
      <SectionTitle
        accent="green"
        eyebrow="خدمات الرحلات الدينية"
        heading={
          <>
            برامج مرنة،
            <br />
            تجربة <em>متكاملة.</em>
          </>
        }
        lede="ست خدمات أساسية نقدّمها بأسلوب منظّم يخفّف عنك التفاصيل ويترك لك مساحة للروحانية."
      />
      <TypeGrid cards={SERVICES} />
    </SecWrap>
  );
}