import type { Metadata } from "next";
import { CalendarClock, PhoneCall } from "lucide-react";
import { BookingTrigger } from "@/components/booking-modal";
import { siteConfig } from "@/config/site";
import { getSiteContactSettings } from "@/lib/site-settings";

export const metadata: Metadata = {
  title: "Бронирование",
  description: "Оставьте заявку на бронирование стола в КИЛН."
};

export default async function BookingPage() {
  const contact = await getSiteContactSettings();
  return (
    <section className="section">
      <div className="site-container max-w-3xl">
        <div className="max-w-2xl">
          <p className="eyebrow">Бронирование</p>
          <h1 className="display-title mt-2 text-5xl md:text-7xl">Ваш стол в КИЛН</h1>
          <p className="mt-4 muted">Мы не показываем ложное мгновенное подтверждение. Менеджер проверит стол и подтвердит бронь звонком или сообщением.</p>
          <div className="mt-6 grid gap-3 text-sm text-kiln-milk/78">
            <p>{contact.address}</p>
            <p>{siteConfig.hours}</p>
            <p><a href={contact.phoneHref}>{contact.phone}</a></p>
          </div>
          <div className="mt-7 flex flex-wrap gap-3">
            <BookingTrigger className="button button-primary"><CalendarClock size={19} /> Оставить заявку</BookingTrigger>
            <a href={contact.phoneHref} className="button button-secondary"><PhoneCall size={19} /> Позвонить</a>
          </div>
          <div className="card mt-6 p-4 text-sm text-kiln-milk/72">Заявка требует подтверждения ресторана. Если стол нужен срочно, лучше позвонить.</div>
        </div>
      </div>
    </section>
  );
}