import type { Metadata } from "next";
import ExploreHeader from "@/components/explore/ExploreHeader";
import SectionIndex from "@/components/explore/SectionIndex";
import ArticleSection from "@/components/explore/ArticleSection";
import { sections } from "@/data/explore";

export const metadata: Metadata = {
  title: "About Syria | Discover Syria",
  description: "Syria's geography, history, cities, people, culture and cuisine: a general overview of the land and its layered past.",
};

const items = sections.map(({ id, title }) => ({ id, title }));

export default function AboutSyriaPage() {
  return (
    <>
      <ExploreHeader />
      <div className="wrap ex-layout">
        <SectionIndex items={items} />
        <article className="ex-article">
          {sections.map((s, i) => (
            <ArticleSection key={s.id} section={s} n={i + 1} />
          ))}
        </article>
      </div>
    </>
  );
}