"use client";

import { useLucideIcons } from "@/hooks/useLucideIcons";

interface WhyCard {
  num: string;
  icon: string;
  title: string;
  description: string;
}

const WHY_CARDS: ReadonlyArray<WhyCard> = [
  { num: "/ ٠١", icon: "badge-check", title: "تنظيم احترافي", description: "فريق متخصص في تنسيق الرحلات والفعاليات، مع جدول واضح ومتابعة لكل تفاصيل البرنامج." },
  { num: "/ ٠٢", icon: "settings-2", title: "برامج مرنة", description: "برامج جاهزة وأخرى حسب الطلب، نُكيّفها مع عدد الأشخاص، الميزانية، والتاريخ المتاح." },
  { num: "/ ٠٣", icon: "life-buoy", title: "متابعة قبل وأثناء الرحلة", description: "تواصل مستمر معك قبل السفر، ودعم على مدار الرحلة لضمان تجربة سلسة بلا مفاجآت." },
  { num: "/ ٠٤", icon: "users-round", title: "للأفراد والمجموعات", description: "خيارات تناسب المسافر الفردي، العائلات، الأصدقاء، والشركات والجهات المنظمة." },
  { num: "/ ٠٥", icon: "message-circle", title: "تواصل سريع عبر واتساب", description: "راسلنا متى ما أردت — نرد عليك بسرعة بتفاصيل واضحة بدون نماذج طويلة أو انتظار." },
  { num: "/ ٠٦", icon: "rocket", title: "من الاستفسار حتى التنفيذ", description: "نأخذك خطوة بخطوة من أول سؤال إلى لحظة العودة بأقل تعقيد وأعلى راحة ممكنة." },
];

export function WhyUsSection() {
  useLucideIcons();
  return (
    <section className="whyus" data-screen-label="04 Why Us">
      <div className="wrap">
        <div className="head">
          <span className="eyebrow green">
            <span className="pip" />
            لماذا تختارنا
          </span>
          <h2 className="h-section green">
            نحن نخطّط،
            <br />
            وأنت <em>تستمتع.</em>
          </h2>
          <p className="lede" style={{ margin: "14px auto 0" }}>
            ست أسباب تجعل تجربتك معنا أكثر راحة ومرونة — من أول استفسار حتى آخر يوم في الرحلة.
          </p>
        </div>
        <div className="why-grid">
          {WHY_CARDS.map((card) => (
            <div key={card.num} className="why-card">
              <span className="num">{card.num}</span>
              <div className="ic">
                <i data-lucide={card.icon} />
              </div>
              <h3>{card.title}</h3>
              <p>{card.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}