import type { Metadata } from "next";
import MedicalCenters from "@/components/services/MedicalCenters";
import MedicalDestinations from "@/components/services/MedicalDestinations";

export const metadata: Metadata = {
  title: "Medical Tourism | Discover Syria",
  description: "Medical centers by specialty and city, and the hubs that welcome medical travelers.",
};

export default function Page() {
  return (
    <>
      <header className="lf-head">
        <div className="wrap">
          <span className="eyebrow">Services and Information</span>
          <h1 className="lf-title">Medical Tourism</h1>
          <p className="lead">Find a medical center by specialty and city, or start from a hub that looks after medical travelers.</p>
        </div>
      </header>
      <section className="wrap lf-body" id="centers" aria-labelledby="centers-h">
        <h2 id="centers-h" className="lfd-h2">Medical centers</h2>
        <MedicalCenters />
      </section>
      <section className="wrap lf-body" id="destinations" aria-labelledby="destinations-h">
        <h2 id="destinations-h" className="lfd-h2">Medical tourism hubs</h2>
        <MedicalDestinations />
      </section>
    </>
  );
}