import type { Metadata } from "next";
import Link from "next/link";
import { Building2, CalendarClock, Clock3, Mail, MapPin, PhoneCall, Route } from "lucide-react";
import { siteConfig } from "@/config/site";
import { BookingTrigger } from "@/components/booking-modal";
import { getSiteContactSettings } from "@/lib/site-settings";
import { YandexMap } from "@/components/yandex-map";

export const metadata: Metadata = {
  title: "Контакты",
  description: "Адрес, телефон, часы работы и маршрут до ресторана КИЛН."
};

export default async function ContactsPage() {
  const contact = await getSiteContactSettings();
  return (
    <section className="section">
      <div className="site-container grid gap-8 lg:grid-cols-[0.8fr_1.2fr]">
        <div>
          <h1 className="display-title text-5xl text-kiln-flame md:text-7xl">Контакты</h1>
          <div className="mt-6 grid gap-4 text-kiln-milk/78">
            <p className="flex items-start gap-3"><MapPin className="mt-0.5 shrink-0 text-kiln-flame" size={19} /><span>{contact.address}<br />Метро {siteConfig.metro}</span></p>
            <p className="flex items-center gap-3"><Clock3 className="shrink-0 text-kiln-flame" size={19} /><span>{siteConfig.hours}</span></p>
            <p className="flex items-center gap-3"><PhoneCall className="shrink-0 text-kiln-flame" size={19} /><a href={contact.phoneHref}>{contact.phone}</a></p>
            <p className="flex items-center gap-3"><Mail className="shrink-0 text-kiln-flame" size={19} /><a href="mailto:bar@kiln.spb.ru">bar@kiln.spb.ru</a></p>
          </div>
          <div className="mt-6 border-t border-white/10 pt-5 text-sm text-kiln-milk/72">
            <h2 className="flex items-center gap-3 text-lg text-kiln-milk"><Building2 className="shrink-0 text-kiln-flame" size={19} />Реквизиты</h2>
            <p className="mt-3 grid gap-1"><span>ООО «КИЛН»</span><span>ИНН 7840117342</span><span>КПП 784001001</span><span>ОГРН 1247800130192</span><span>Юр. адрес: {contact.address}</span></p>
          </div>
          <div className="mt-6 flex flex-wrap gap-3">
            <a href={siteConfig.yandex.routeUrl} className="button button-primary"><Route size={18} /> Построить маршрут</a>
            <a href={contact.phoneHref} className="button button-secondary"><PhoneCall size={18} /> Позвонить</a>
            <BookingTrigger className="button button-secondary"><CalendarClock size={18} /> Забронировать</BookingTrigger>
            <Link href="/delivery" className="button button-secondary">Доставка</Link>
          </div>
        </div>
        <YandexMap routeUrl={siteConfig.yandex.routeUrl} />
      </div>
    </section>
  );
}