import type { ReactNode } from "react";
import Link from "next/link";
import Logo from "./Logo";

interface LegalLayoutProps {
  title: string;
  children: ReactNode;
}

export default function LegalLayout({ title, children }: LegalLayoutProps) {
  return (
    <div className="min-h-screen bg-[#f0f4f8] dark:bg-[#18212f]">
      {/* Top tagline bar */}
      <div className="bg-orange-500 py-2 px-4 text-center">
        <span className="text-white text-xs font-black tracking-[0.2em] uppercase">
          Digital Denken. Lokal Handeln.
        </span>
      </div>

      {/* Header – matches main site */}
      <header className="bg-white dark:bg-[#111925] border-b border-slate-200 dark:border-gray-800 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <Link href="/" className="flex items-center gap-3 group">
              <Logo className="h-8 w-auto" />
              <div className="flex flex-col leading-tight">
                <span className="font-black text-slate-900 dark:text-white text-base tracking-wider uppercase">
                  MBO-
                  <span className="bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">
                    TECH-IT
                  </span>
                </span>
                <span className="text-[9px] font-semibold tracking-[0.2em] text-orange-400/70 uppercase hidden sm:block">
                  Digital Denken. Lokal Handeln.
                </span>
              </div>
            </Link>

            <div className="flex items-center gap-6">
              <Link href="/pakete" className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-sm font-medium hidden sm:block">
                Pakete & Preise
              </Link>
              <Link href="/#contact" className="btn-nav">
                Anfragen
              </Link>
              <Link
                href="/"
                className="flex items-center gap-1.5 text-slate-500 hover:text-orange-400 transition-colors text-sm"
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
                Startseite
              </Link>
            </div>
          </div>
        </div>
      </header>

      {/* Page hero */}
      <div className="relative bg-[#e8eef4] dark:bg-[#111925] border-b border-slate-200 dark:border-gray-800 overflow-hidden">
        <div className="absolute inset-0 bg-grid opacity-40" />
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,rgba(249,115,22,0.08)_0%,transparent_60%)]" />
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 relative">
          <div className="flex items-center gap-2 text-xs text-slate-500 mb-4 font-mono">
            <Link href="/" className="hover:text-orange-400 transition-colors">Home</Link>
            <span>/</span>
            <span className="text-orange-400">{title}</span>
          </div>
          <h1 className="text-4xl sm:text-5xl font-black text-slate-900 dark:text-white">{title}</h1>
          <div className="w-16 h-1 bg-orange-500 rounded mt-4" />
        </div>
      </div>

      {/* Content */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="grid lg:grid-cols-4 gap-10">
          {/* Sidebar */}
          <aside className="lg:col-span-1">
            <div className="sticky top-24 space-y-2">
              <p className="text-xs font-bold text-slate-500 uppercase tracking-widest mb-4">Rechtliches</p>
              <Link
                href="/impressum"
                className="flex items-center gap-2 px-4 py-3 rounded-xl bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800 hover:border-orange-500/40 text-slate-600 dark:text-slate-300 hover:text-orange-400 transition-all text-sm font-medium group"
              >
                <svg className="w-4 h-4 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                </svg>
                Impressum
              </Link>
              <Link
                href="/datenschutz"
                className="flex items-center gap-2 px-4 py-3 rounded-xl bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800 hover:border-orange-500/40 text-slate-600 dark:text-slate-300 hover:text-orange-400 transition-all text-sm font-medium group"
              >
                <svg className="w-4 h-4 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                </svg>
                Datenschutz
              </Link>
              <div className="mt-6 p-4 rounded-xl bg-orange-500/5 border border-orange-500/20">
                <p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed">
                  Fragen zu Datenschutz oder rechtlichen Themen?
                </p>
                <Link href="/#contact" className="text-xs text-orange-400 font-bold mt-2 block hover:text-orange-300 transition-colors">
                  Kontakt aufnehmen &rarr;
                </Link>
              </div>
            </div>
          </aside>

          {/* Main content */}
          <div className="lg:col-span-3">
            <div className="bg-white dark:bg-gray-900 border border-slate-200 dark:border-gray-800 rounded-2xl p-8 sm:p-10 legal-content">
              {children}
            </div>
          </div>
        </div>
      </main>

      {/* Footer */}
      <footer className="bg-[#e8eef4] dark:bg-[#111925] border-t border-slate-200 dark:border-gray-800 mt-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-slate-500 dark:text-slate-600 text-sm">
            &copy; {new Date().getFullYear()} MBO-Tech-IT &mdash; Digital Denken. Lokal Handeln.
          </p>
          <div className="flex gap-6 text-sm text-slate-500 dark:text-slate-600">
            <Link href="/impressum" className="hover:text-orange-400 transition-colors">Impressum</Link>
            <Link href="/datenschutz" className="hover:text-orange-400 transition-colors">Datenschutz</Link>
            <Link href="/" className="hover:text-orange-400 transition-colors">Startseite</Link>
          </div>
        </div>
      </footer>
    </div>
  );
}