import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Link from "next/link";
import MobileMenu from "@/components/mobile-menu";

const inter = Inter({ subsets: ["latin", "cyrillic"] });

export const metadata: Metadata = {
  title: "WorkParking — Умные парковки",
  description:
    "Апгрейд дворовых шлагбаумов в Москве: въезд и выезд по номеру, приложение, история проездов и подписка на сервис.",
};

const navLinks = [
  { href: "/services", label: "Услуги" },
  { href: "/cases", label: "Кейсы" },
  { href: "/for-uk", label: "Для УК" },
  { href: "/pricing", label: "Цены" },
  { href: "/about", label: "О компании" },
  { href: "/contacts", label: "Контакты" },
];

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ru">
      <body className={`${inter.className} bg-neutral-950 text-white`}>
        <header className="sticky top-0 z-50 border-b border-white/10 bg-black/85 backdrop-blur-xl">
          <div className="max-w-7xl mx-auto flex items-center justify-between gap-4 px-4 py-3 sm:px-6 sm:py-4">
            <Link href="/" className="flex flex-col leading-none">
              <span className="text-lg font-semibold tracking-[-0.03em] sm:text-2xl">
                WorkParking
              </span>
              <span className="mt-1 text-[9px] uppercase tracking-[0.2em] text-neutral-500 sm:text-[11px] sm:tracking-[0.24em]">
                Smart entry systems
              </span>
            </Link>

            <nav className="hidden md:flex items-center gap-6 text-sm text-neutral-200">
              {navLinks.map((link) => (
                <Link
                  key={link.href}
                  href={link.href}
                  className="hover:text-emerald-300 transition-colors"
                >
                  {link.label}
                </Link>
              ))}
            </nav>

            <MobileMenu navLinks={navLinks} />
          </div>
        </header>

        {children}

        <footer className="border-t border-white/10 bg-black">
          <div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 sm:py-10">
            <div className="rounded-[28px] border border-white/10 bg-neutral-950/70 px-5 py-5 shadow-[0_24px_80px_rgba(0,0,0,0.28)] sm:px-8 sm:py-7">
              <div className="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
                <div className="max-w-xl">
                  <div className="text-lg font-semibold tracking-[-0.03em] sm:text-xl">
                    WorkParking
                  </div>
                  <p className="mt-2 max-w-md text-sm leading-relaxed text-neutral-400">
                    Умные системы въезда для дворов, ЖК и управляющих компаний
                    без перегруженного внедрения.
                  </p>
                </div>

                <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-[auto_auto_auto] lg:gap-8">
                  <div>
                    <div className="mb-3 text-[11px] uppercase tracking-[0.22em] text-neutral-500">
                      Навигация
                    </div>
                    <div className="grid grid-cols-2 gap-x-5 gap-y-2 text-sm sm:flex sm:flex-col sm:gap-2">
                      {navLinks.map((link) => (
                        <Link
                          key={link.href}
                          href={link.href}
                          className="text-neutral-300 transition-colors hover:text-emerald-300"
                        >
                          {link.label}
                        </Link>
                      ))}
                    </div>
                  </div>

                  <div>
                    <div className="mb-3 text-[11px] uppercase tracking-[0.22em] text-neutral-500">
                      Контакты
                    </div>
                    <div className="flex flex-col gap-2 text-sm">
                      <a
                        href="tel:+79999698149"
                        className="text-neutral-300 transition-colors hover:text-emerald-300"
                      >
                        +7 (999) 969-81-49
                      </a>
                      <a
                        href="mailto:sale@parkflow.ru"
                        className="text-neutral-300 transition-colors hover:text-emerald-300"
                      >
                        sale@parkflow.ru
                      </a>
                      <a
                        href="mailto:info@parkflow.ru"
                        className="text-neutral-300 transition-colors hover:text-emerald-300"
                      >
                        info@parkflow.ru
                      </a>
                    </div>
                  </div>

                  <div>
                    <div className="mb-3 text-[11px] uppercase tracking-[0.22em] text-neutral-500">
                      Каналы
                    </div>
                    <div className="flex flex-col gap-2 text-sm">
                      <a
                        href="#"
                        className="text-neutral-300 transition-colors hover:text-emerald-300"
                      >
                        VK
                      </a>
                      <a
                        href="#"
                        className="text-neutral-300 transition-colors hover:text-emerald-300"
                      >
                        Telegram
                      </a>
                      <a
                        href="#"
                        className="text-neutral-300 transition-colors hover:text-emerald-300"
                      >
                        MAX
                      </a>
                    </div>
                  </div>
                </div>
              </div>

              <div className="mt-5 flex flex-col gap-1 border-t border-white/10 pt-4 text-xs text-neutral-500 sm:flex-row sm:items-center sm:justify-between sm:text-sm">
                <div>© 2026 WorkParking</div>
                <div>ООО «Пракфлоу» • ИНН 7777773333</div>
              </div>
            </div>
          </div>
        </footer>
      </body>
    </html>
  );
}
