"use client";

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

const ITEMS = [
  { title: "فهم احتياجات العملاء", sub: "نسأل ونستمع قبل أن نقترح — لنبني برنامجًا يشبهك." },
  { title: "تصميم برامج حسب الطلب", sub: "برامج جاهزة وبرامج مفصّلة على مقاسك، بدون خيارات جامدة." },
  { title: "تنظيم مرن ومناسب", sub: "قابلية للتعديل في أي مرحلة بشكل سلس بدون تعقيد." },
  { title: "تواصل سريع", sub: "قنوات تواصل مفتوحة طوال الوقت برسائل واضحة ومباشرة." },
  { title: "اهتمام بتجربة العميل من البداية للنهاية", sub: "كل تفصيلة في الرحلة مرتبطة بسؤال واحد: راحتك." },
];

export function AboutDifferentiators() {
  useLucideIcons();
  return (
    <section className="sec" data-screen-label="04 What sets us apart">
      <div className="wrap">
        <div className="split-intro">
          <div>
            <span className="eyebrow">
              <span className="pip" />
              ماذا يميّزنا
            </span>
            <h2 className="h-section">
              خمسة أشياء
              <br />
              تجعلنا <em>مختلفين.</em>
            </h2>
            <p className="lede">نتشارك معك في كل مرحلة من الرحلة — قبلها، أثناءها، وبعدها.</p>
          </div>
          <ul className="feature-list purple">
            {ITEMS.map((item) => (
              <li key={item.title}>
                <span className="tick">
                  <i data-lucide="check" />
                </span>
                <div>
                  <b>{item.title}</b>
                  <small>{item.sub}</small>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}