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

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

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

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