import { SecWrap, SplitIntro, OfferGrid, type OfferItem } from "@/sections/shared/grids";

const OFFERS: ReadonlyArray<OfferItem> = [
  { num: "٠١", title: "اقتراح الوجهات", description: "قائمة وجهات مدروسة حسب الموسم والميزانية والاهتمام.", variant: "green" },
  { num: "٠٢", title: "إعداد البرنامج", description: "تصميم برنامج تفصيلي بأنشطة ومواقع واضحة.", variant: "green" },
  { num: "٠٣", title: "تنسيق التنقّل", description: "حجز وترتيب وسائل النقل بين الوجهات بسلاسة.", variant: "green" },
  { num: "٠٤", title: "تنسيق الأنشطة", description: "حجز التذاكر، الجولات، والتجارب المحلية.", variant: "green" },
  { num: "٠٥", title: "ترتيب الجدول", description: "جدول يومي متوازن بين الراحة والتجربة.", variant: "green" },
  { num: "٠٦", title: "دعم ومتابعة", description: "فريق متابعة قبل وأثناء الرحلة لأي طلب.", variant: "green" },
  { num: "٠٧", title: "خيارات حسب الميزانية", description: "برامج مرنة تتكيّف مع ميزانيتك بدون تنازلات أساسية.", variant: "green" },
];

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

export function TourismOffer() {
  return (
    <SecWrap screenLabel="03 What We Offer" style={SECTION_STYLE}>
      <SplitIntro
        accent="green"
        eyebrow="ماذا نقدّم"
        heading={
          <>
            برنامج جاهز،
            <br />
            أو <em>مفصّل لك.</em>
          </>
        }
        lede="نتولّى كل التفاصيل التي تشغل بالك عن متعة الرحلة."
      >
        <OfferGrid items={OFFERS} />
      </SplitIntro>
    </SecWrap>
  );
}