import { CookieBanner } from '@/components/cookie-banner';
import { Logo } from '@/components/logo';
import { MarketingAuthButtons } from '@/components/marketing-auth-buttons';
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="/guides" className="transition-colors hover:text-[--color-fg]">
                Guides
              </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">
            <MarketingAuthButtons />
            <MarketingMobileMenu />
          </div>
        </div>
      </header>
      <main className="flex-1">{children}</main>
      <footer className="border-t border-[--color-border] py-12">
        <div className="mx-auto max-w-6xl px-6">
          <div className="grid gap-10 sm:grid-cols-2 md:grid-cols-4">
            {/* Brand column — positioning line + live status. */}
            <div className="sm:col-span-2 md:col-span-1">
              <Logo />
              <p className="mt-3 max-w-xs text-[12.5px] leading-relaxed text-[--color-fg-subtle]">
                From a prompt to a hosted, OAuth-protected MCP server — for Claude, Cursor and
                ChatGPT.
              </p>
              <Link
                href="/status"
                className="mt-4 flex items-center gap-2 text-[12px] text-[--color-fg-subtle] transition-colors hover:text-[--color-fg]"
              >
                <span className="size-1.5 animate-pulse rounded-full bg-emerald-400" />
                <span>System status</span>
              </Link>
            </div>
            <FooterColumn
              title="Product"
              links={[
                { href: '/templates', label: 'Templates' },
                { href: '/pricing', label: 'Pricing' },
                { href: '/changelog', label: 'Changelog' },
                { href: '/security', label: 'Security' },
              ]}
            />
            <FooterColumn
              title="Resources"
              links={[
                { href: '/docs', label: 'Docs' },
                { href: '/guides', label: 'Guides' },
                { href: '/docs/faq', label: 'FAQ' },
                { href: '/contact', label: 'Contact' },
              ]}
            />
            <FooterColumn
              title="Legal"
              links={[
                { href: '/privacy', label: 'Privacy' },
                { href: '/terms', label: 'Terms' },
                { href: '/agb', label: 'AGB' },
                { href: '/impressum', label: 'Impressum' },
              ]}
            />
          </div>
          <div className="mt-10 border-t border-[--color-border] pt-6 text-[12px] text-[--color-fg-subtle]">
            &copy; {new Date().getFullYear()} BuildMyMCPServer
          </div>
        </div>
      </footer>
      <CookieBanner />
    </div>
  );
}

function FooterColumn({
  title,
  links,
}: {
  title: string;
  links: { href: string; label: string }[];
}) {
  return (
    <div>
      <h3 className="text-[11px] font-semibold uppercase tracking-[0.16em] text-[--color-fg-muted]">
        {title}
      </h3>
      <ul className="mt-3 space-y-2 text-[12.5px] text-[--color-fg-subtle]">
        {links.map((l) => (
          <li key={l.href}>
            <Link href={l.href} className="transition-colors hover:text-[--color-fg]">
              {l.label}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}