import { Logo } from '@/components/logo';
import { MarketingMobileMenu } from '@/components/marketing-mobile-menu';
import Link from 'next/link';

export default function MarketingLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 border-b border-[--color-border] bg-[--color-bg]/80 backdrop-blur-md">
        <div className="mx-auto flex h-12 max-w-6xl items-center justify-between px-5 sm:px-6">
          <div className="flex items-center gap-6">
            <Logo />
            <nav className="hidden items-center gap-5 text-[13px] text-[--color-fg-muted] md:flex">
              <Link href="/#how" className="transition-colors hover:text-[--color-fg]">
                How it works
              </Link>
              <Link href="/templates" className="transition-colors hover:text-[--color-fg]">
                Templates
              </Link>
              <Link href="/pricing" className="transition-colors hover:text-[--color-fg]">
                Pricing
              </Link>
              <Link href="/docs" className="transition-colors hover:text-[--color-fg]">
                Docs
              </Link>
              <Link href="/changelog" className="transition-colors hover:text-[--color-fg]">
                Changelog
              </Link>
            </nav>
          </div>
          <div className="flex items-center gap-1.5 sm:gap-2">
            <Link
              href="/login"
              className="hidden rounded-md px-3 py-1.5 text-[13px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg] sm:block"
            >
              Sign in
            </Link>
            <Link
              href="/login"
              className="rounded-md bg-[--color-accent] px-3 py-1.5 text-[13px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
            >
              Start building
            </Link>
            <MarketingMobileMenu />
          </div>
        </div>
      </header>
      <main className="flex-1">{children}</main>
      <footer className="border-t border-[--color-border] py-8">
        <div className="mx-auto flex max-w-6xl flex-col gap-4 px-6 text-[12px] text-[--color-fg-subtle] md:flex-row md:items-center md:justify-between">
          <Link
            href="/status"
            className="flex items-center gap-2 transition-colors hover:text-[--color-fg]"
          >
            <span className="size-1.5 animate-pulse rounded-full bg-emerald-400" />
            <span>System status</span>
          </Link>
          <div className="flex flex-wrap gap-x-5 gap-y-1">
            <Link href="/docs" className="transition-colors hover:text-[--color-fg]">
              Docs
            </Link>
            <Link href="/security" className="transition-colors hover:text-[--color-fg]">
              Security
            </Link>
            <Link href="/privacy" className="transition-colors hover:text-[--color-fg]">
              Privacy
            </Link>
            <Link href="/terms" className="transition-colors hover:text-[--color-fg]">
              Terms
            </Link>
          </div>
          <div>&copy; {new Date().getFullYear()} BuildMyMCPServer</div>
        </div>
      </footer>
    </div>
  );
}