"use client";

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

interface ServiceCard {
  slug: string;
  href: string;
  label: string;
  icon: string;
  title: string;
  description: string;
}

const SERVICES: ReadonlyArray<ServiceCard> = [
  {
    slug: "events",
    href: "/events",
    label: "فعاليات",
    icon: "sparkles",
    title: "الفعاليات التي تقام",
    description:
      "تنظيم وتنسيق فعاليات ترفيهية، عائلية، موسمية، وفعاليات للشركات بأسلوب احترافي يهتم بكل تفصيلة.",
  },
  {
    slug: "religious",
    href: "/religious",
    label: "دينية",
    icon: "compass",
    title: "الرحلات الدينية",
    description: "رحلات وزيارات دينية بتنظيم واضح ومتابعة مستمرة، مناسبة للأفراد والمجموعات والعائلات.",
  },
  {
    slug: "umrah",
    href: "/umrah",
    label: "العمرة",
    icon: "moon-star",
    title: "العمرة",
    description:
      "برامج عمرة مصمّمة لتسهيل رحلتك من البداية للنهاية، مع خيارات تناسب الأفراد والعائلات والمجموعات.",
  },
  {
    slug: "tourism",
    href: "/tourism",
    label: "سياحة",
    icon: "map",
    title: "السياحة",
    description:
      "برامج سياحية وتجارب سفر داخل المملكة والخليج، رحلات عائلية وجماعية بخيارات تناسب كل ميزانية.",
  },
];

export function ServicesSection() {
  useLucideIcons();
  return (
    <section className="services" id="services" data-screen-label="03 Services">
      <div className="wrap">
        <div className="head">
          <div>
            <span className="eyebrow">
              <span className="pip" />
              خدماتنا
            </span>
            <h2 className="h-section">
              أربع تجارب،
              <br />
              <em>تجربة واحدة لا تُنسى.</em>
            </h2>
          </div>
          <div className="right">
            <a href="/about">
              تعرّف على الفريق <i data-lucide="arrow-left" />
            </a>
          </div>
        </div>
        <div className="svc-grid">
          {SERVICES.map((service) => (
            <a key={service.slug} className={`svc ${service.slug}`} href={service.href}>
              <div className="visual">
                <span className="label">{service.label}</span>
                <span className="ico">
                  <i data-lucide={service.icon} />
                </span>
              </div>
              <div className="body">
                <h3>{service.title}</h3>
                <p>{service.description}</p>
                <span className="more">
                  اعرف المزيد <i data-lucide="arrow-left" />
                </span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}