import { SecWrap, SplitIntro, FeatureList, type FeatureItem } from "@/sections/shared/grids";

const BENEFITS: ReadonlyArray<FeatureItem> = [
  { title: "تنظيم واضح", description: "برنامج تفصيلي بمواعيد وأماكن محدّدة منذ البداية." },
  { title: "متابعة دقيقة", description: "متابعة كل مرحلة بدقّة وبتواصل مستمر معك." },
  { title: "برامج مناسبة للمجموعات", description: "تخطيط يأخذ بعين الاعتبار حجم المجموعة وتنوّع احتياجاتها." },
  { title: "اهتمام براحة المشاركين", description: "تنسيق المواعيد والمسافات لتقليل الإرهاق." },
  { title: "تنسيق مسبق للتنقّلات", description: "وسائل نقل جاهزة بين المواقع بأقل وقت انتظار." },
  { title: "دعم عبر واتساب", description: "قناة تواصل سريعة معك طوال أيام الرحلة." },
];

const SECTION_STYLE = {
  background: "#fff",
  borderTop: "1px solid var(--border)",
  borderBottom: "1px solid var(--border)",
} as const;

export function ReligiousBenefits() {
  return (
    <SecWrap screenLabel="03 Benefits" style={SECTION_STYLE}>
      <SplitIntro
        accent="green"
        eyebrow="مميّزات الرحلات معنا"
        heading={
          <>
            تنظيم واضح،
            <br />
            راحة <em>مستمرة.</em>
          </>
        }
        lede="نُركّز على ما يهمّك حقًا في رحلتك الدينية — الراحة، الوضوح، والاطمئنان."
      >
        <FeatureList items={BENEFITS} />
      </SplitIntro>
    </SecWrap>
  );
}