import type { Metadata } from "next";
import SeasonGuide from "@/components/services/SeasonGuide";
import WeatherForecast from "@/components/services/WeatherForecast";

export const metadata: Metadata = {
  title: "Syrian Calendar | Discover Syria",
  description: "What each season is like in Syria, with travel tips and the week's weather by city.",
};

export default function Page() {
  return (
    <>
      <header className="lf-head">
        <div className="wrap">
          <span className="eyebrow">Services and Information</span>
          <h1 className="lf-title">Syrian Calendar</h1>
          <p className="lead">What each season feels like, what to pack for it, and the week ahead in the city you are visiting.</p>
        </div>
      </header>
      <section className="wrap lf-body" id="seasons" aria-labelledby="seasons-h">
        <h2 id="seasons-h" className="lfd-h2">Seasons</h2>
        <SeasonGuide />
      </section>
      <section className="wrap lf-body" id="weather" aria-labelledby="weather-h">
        <h2 id="weather-h" className="lfd-h2">This week&apos;s weather</h2>
        <WeatherForecast />
      </section>
    </>
  );
}