import type { Metadata } from "next";
import EventDirectory from "@/components/events/EventDirectory";
import VenueDirectory from "@/components/events/VenueDirectory";

export const metadata: Metadata = {
  title: "Festivals & Events | Discover Syria",
  description: "Music nights, food festivals and evenings in historic venues across Syria, with dates and prices.",
};

export default function FestivalsAndEventsPage() {
  return (
    <>
      <header className="lf-head">
        <div className="wrap">
          <span className="eyebrow">Life and Fun</span>
          <h1 className="lf-title">Festivals &amp; Events</h1>
          <p className="lead">Music nights, food festivals and evenings in historic venues, with dates and prices.</p>
        </div>
      </header>
      <section className="wrap lf-body">
        <EventDirectory scope="festivals" />
      </section>
      <section className="wrap lf-body" id="venues" aria-labelledby="venues-h">
        <h2 id="venues-h" className="lfd-h2">Wedding and celebration venues</h2>
        <p className="lf-muted lf-sub">Halls, heritage houses and beach venues for weddings and private celebrations.</p>
        <VenueDirectory />
      </section>
    </>
  );
}