import Link from 'next/link'
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Ressourcen-Hub | BreakPilot Comply',
  description:
    'Praxisleitfaeden, Checklisten und Glossar zu DSGVO, AI Act und NIS2 — fuer Unternehmen, die Compliance ernst nehmen.',
  openGraph: {
    title: 'Compliance Ressourcen-Hub | BreakPilot Comply',
    description:
      'Praxisleitfaeden, Checklisten und Glossar zu DSGVO, AI Act und NIS2.',
    locale: 'de_DE',
    type: 'website',
  },
}

export default function BlogLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="min-h-screen bg-white">
      {/* Blog Header */}
      <header className="sticky top-0 z-40 bg-white/80 backdrop-blur-md border-b border-slate-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            {/* Logo + Subtitle */}
            <Link href="/" className="flex items-center space-x-3">
              <div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-accent-500 rounded-lg flex items-center justify-center">
                <span className="text-white font-bold text-lg">B</span>
              </div>
              <div className="flex items-baseline space-x-2">
                <span className="font-semibold text-xl text-slate-900">
                  BreakPilot Comply
                </span>
                <span className="hidden sm:inline text-sm text-slate-400 font-medium">
                  Ressourcen-Hub
                </span>
              </div>
            </Link>

            {/* Back to Home */}
            <Link
              href="/"
              className="inline-flex items-center space-x-1.5 text-sm text-slate-500 hover:text-primary-600 transition-colors"
            >
              <svg
                className="w-4 h-4"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={2}
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M10 19l-7-7m0 0l7-7m-7 7h18"
                />
              </svg>
              <span>Zur Startseite</span>
            </Link>
          </div>
        </div>
      </header>

      {/* Content */}
      <main>
        {children}
      </main>
    </div>
  )
}