import type { Metadata } from "next";
import FaqList from "@/components/services/FaqList";
import NumbersDirectory from "@/components/services/NumbersDirectory";

export const metadata: Metadata = {
  title: "Services and Information | Discover Syria",
  description: "Important phone numbers and answers to common questions.",
};

export default function Page() {
  return (
    <>
      <header className="lf-head">
        <div className="wrap">
          <span className="eyebrow">Services and Information</span>
          <h1 className="lf-title">Services and Information</h1>
          <p className="lead">Phone numbers worth saving, and answers to common questions.</p>
        </div>
      </header>
      <section className="wrap lf-body" id="numbers" aria-labelledby="numbers-h">
        <h2 id="numbers-h" className="lfd-h2">Important numbers</h2>
        <NumbersDirectory />
      </section>
      <section className="wrap lf-body" id="faq" aria-labelledby="faq-h">
        <h2 id="faq-h" className="lfd-h2">Frequently asked questions</h2>
        <FaqList />
      </section>
    </>
  );
}