import { SectionTitle } from "@/sections/shared/SectionTitle";
import { SecWrap } from "@/sections/shared/grids";

interface Destination {
  className: string;
  eyebrow: string;
  title: string;
}

const DESTINATIONS: ReadonlyArray<Destination> = [
  { className: "d1", eyebrow: "الوسط", title: "الرياض" },
  { className: "d2", eyebrow: "الغرب", title: "جدة" },
  { className: "d3", eyebrow: "الشمال", title: "العُلا" },
  { className: "d4", eyebrow: "الغرب", title: "الطائف" },
  { className: "d5", eyebrow: "الجنوب", title: "أبها" },
  { className: "d6", eyebrow: "الغرب", title: "مكة" },
  { className: "d7", eyebrow: "الغرب", title: "المدينة" },
  { className: "d8", eyebrow: "حسب الطلب", title: "الوجهات الخليجية" },
];

export function TourismDestinations() {
  return (
    <SecWrap screenLabel="04 Destinations">
      <SectionTitle
        accent="green"
        eyebrow="وجهات مقترحة"
        heading={
          <>
            ثمان وجهات،
            <br />
            من <em>الوسط</em> إلى الأطراف.
          </>
        }
        lede="نُغطّي أبرز الوجهات داخل المملكة، مع برامج للوجهات الخليجية حسب الطلب."
      />
      <div className="dest-grid">
        {DESTINATIONS.map((dest) => (
          <div key={dest.className} className={`dest ${dest.className}`}>
            <div className="lab">
              <div className="eb">{dest.eyebrow}</div>
              <div className="ttl">{dest.title}</div>
            </div>
          </div>
        ))}
      </div>
    </SecWrap>
  );
}