import Link from "next/link";
import type { ReactNode } from "react";
import { ThemeToggle } from "../components/theme-toggle";
import { footerSections, productNav } from "./site-content";

export default function WebsiteLayout({ children }: { children: ReactNode }) {
  return (
    <div className="min-h-screen bg-brand-paper text-slate-950 dark:bg-brand-night dark:text-slate-100">
      <header className="sticky top-0 z-20 border-b border-brand-primary/15 bg-white/95 backdrop-blur dark:border-slate-800 dark:bg-slate-950/92">
        <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-6 py-4">
          <Link href="/" className="flex items-center gap-3 text-lg font-bold tracking-tight text-brand-ink dark:text-white">
            <span className="grid h-9 w-9 place-items-center rounded-lg bg-brand-primary text-sm font-black text-white shadow-sm">W</span>
            <span>WorkOnClock</span>
          </Link>
          <nav className="hidden items-center gap-5 text-sm font-semibold text-slate-600 lg:flex dark:text-slate-300">
            {productNav.map((item) => (
              <Link className="transition hover:text-brand-primary dark:hover:text-brand-tertiary" href={item.href} key={item.href}>
                {item.label}
              </Link>
            ))}
          </nav>
          <div className="flex items-center gap-2">
            <ThemeToggle />
            <Link className="hidden rounded-lg border border-brand-secondary/25 px-4 py-2 text-sm font-semibold text-brand-secondary transition hover:bg-brand-mist sm:inline-flex dark:border-slate-700 dark:text-slate-100" href="/login">
              Sign In
            </Link>
            <Link className="rounded-lg bg-brand-primary px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-brand-primaryDark" href="/register">
              Start Trial
            </Link>
          </div>
        </div>
      </header>
      {children}
      <footer className="border-t border-brand-primary/20 bg-white dark:border-slate-800 dark:bg-slate-950">
        <div className="mx-auto grid max-w-7xl gap-10 px-6 py-12 md:grid-cols-[1fr_1.8fr]">
          <div>
            <p className="text-lg font-bold text-brand-ink dark:text-white">WorkOnClock</p>
            <p className="mt-3 max-w-sm text-sm leading-6 text-slate-600">
              Professional employee time tracking with screenshots, policy controls, tenant-ready admin tools, and desktop reliability.
            </p>
            <div className="mt-5 flex flex-wrap gap-2">
              <Link className="brand-button" href="/register">Create Workspace</Link>
              <Link className="brand-button-secondary" href="/contact">Talk to Sales</Link>
            </div>
          </div>
          <div className="grid gap-6 text-sm sm:grid-cols-4">
            {footerSections.map((section) => (
              <div key={section.title}>
                <p className="font-semibold">{section.title}</p>
                <div className="mt-3 grid gap-2 text-slate-600 dark:text-slate-400">
                  {section.links.map((link) => <Link className="hover:text-brand-primary" href={link.href} key={link.href}>{link.label}</Link>)}
                </div>
              </div>
            ))}
            <div>
              <p className="font-semibold">Workspace</p>
              <div className="mt-3 grid gap-2 text-slate-600 dark:text-slate-400">
                <Link href="/register">Register</Link>
                <Link href="/login">Login</Link>
                <Link href="/admin">Admin dashboard</Link>
                <Link href="/download">Desktop tracker</Link>
              </div>
            </div>
          </div>
        </div>
        <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-3 border-t border-brand-primary/20 px-6 py-4 text-xs text-slate-500 dark:border-slate-800">
          <span>Copyright &copy; 2026 WorkOnClock. All rights reserved.</span>
          <span>Built for accountable remote, hybrid, and operations teams.</span>
        </div>
      </footer>
    </div>
  );
}