'use client'

import { useEffect, useState, type ReactNode } from 'react'
import Link from 'next/link'
import { Syne } from 'next/font/google'
import { Moon, Sun, ArrowLeft } from 'lucide-react'

const syne = Syne({ subsets: ['latin'], weight: ['400', '500', '600', '700', '800'] })

type LegalPageShellProps = {
  title: string
  subtitle: string
  children: ReactNode
}

export default function LegalPageShell({ title, subtitle, children }: LegalPageShellProps) {
  const [theme, setTheme] = useState('theme-light')

  useEffect(() => {
    const savedTheme = localStorage.getItem('theme')
    if (savedTheme) {
      setTheme(savedTheme)
    }
  }, [])

  const toggleTheme = () => {
    const newTheme = theme === 'theme-dark' ? 'theme-light' : 'theme-dark'
    setTheme(newTheme)
    localStorage.setItem('theme', newTheme)
  }

  return (
    <>
      <style>{`
        .theme-light {
          --bg: #FAFAFA;
          --nav-bg: rgba(250, 250, 250, 0.85);
          --ink: #111111;
          --ink-muted: rgba(17, 17, 17, 0.62);
          --ink-faint: rgba(17, 17, 17, 0.1);
          --gold: #C9973A;
          --gold-light: #B8862D;
          --gold-faint: rgba(201, 151, 58, 0.08);
          --card-bg: rgba(255, 255, 255, 0.64);
          --glass-border: rgba(17, 17, 17, 0.06);
        }

        .theme-dark {
          --bg: #0C0B09;
          --nav-bg: rgba(12, 11, 9, 0.85);
          --ink: #EAE6DA;
          --ink-muted: rgba(234, 230, 218, 0.58);
          --ink-faint: rgba(234, 230, 218, 0.12);
          --gold: #C9973A;
          --gold-light: #DFB25C;
          --gold-faint: rgba(201, 151, 58, 0.16);
          --card-bg: rgba(20, 19, 17, 0.45);
          --glass-border: rgba(234, 230, 218, 0.08);
        }

        .legal-page {
          min-height: 100vh;
          background: var(--bg);
          color: var(--ink);
          background-image:
            radial-gradient(circle at 15% 40%, var(--gold-faint), transparent 28%),
            radial-gradient(circle at 84% 22%, var(--gold-faint), transparent 24%);
          transition: background 0.25s, color 0.25s;
        }

        .nav {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 40;
          height: 64px;
          display: flex;
          align-items: center;
          background: var(--nav-bg);
          border-bottom: 1px solid var(--ink-faint);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
        }

        .nav-inner {
          max-width: 1280px;
          width: 100%;
          margin: 0 auto;
          padding: 0 32px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .logo {
          font-weight: 800;
          font-size: 1.125rem;
          letter-spacing: -0.02em;
          display: flex;
          align-items: center;
        }

        .logo-accent { color: var(--gold); }

        .logo-pro {
          font-size: 0.65rem;
          background: var(--gold-faint);
          color: var(--gold);
          padding: 3px 6px;
          border-radius: 4px;
          margin-left: 8px;
          letter-spacing: 0.05em;
          text-transform: uppercase;
        }

        .nav-links {
          display: flex;
          align-items: center;
          gap: 26px;
        }

        .nav-link {
          font-size: 0.875rem;
          color: var(--ink-muted);
          text-decoration: none;
          transition: color 0.15s;
        }

        .nav-link:hover { color: var(--ink); }

        .theme-btn {
          background: none;
          border: none;
          cursor: pointer;
          padding: 4px;
          display: inline-flex;
          align-items: center;
          color: var(--ink-muted);
        }

        .theme-btn:hover { color: var(--ink); }

        .back-link {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          color: var(--ink-muted);
          text-decoration: none;
          font-size: 0.875rem;
          margin-bottom: 24px;
          transition: color 0.15s;
        }

        .back-link:hover { color: var(--ink); }

        .main-wrap {
          max-width: 980px;
          margin: 0 auto;
          padding: 132px 32px 76px;
        }

        .eyebrow {
          font-size: 0.75rem;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--gold);
          font-weight: 600;
          margin-bottom: 16px;
        }

        .page-title {
          font-weight: 800;
          letter-spacing: -0.03em;
          line-height: 0.96;
          font-size: clamp(2rem, 5vw, 3.3rem);
          margin: 0 0 22px;
          color: var(--ink);
        }

        .page-subtitle {
          margin: 0 0 30px;
          max-width: 760px;
          color: var(--ink-muted);
          line-height: 1.7;
          font-size: 0.98rem;
        }

        .legal-card {
          background: var(--card-bg);
          border: 1px solid var(--glass-border);
          border-radius: 18px;
          padding: 34px;
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
        }

        .legal-sections {
          display: flex;
          flex-direction: column;
          gap: 30px;
        }

        .legal-section h2 {
          margin: 0 0 12px;
          font-size: 1rem;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          color: var(--gold);
        }

        .legal-section p {
          margin: 0 0 8px;
          color: var(--ink);
          line-height: 1.7;
          font-size: 0.95rem;
        }

        .legal-section .muted { color: var(--ink-muted); }

        .legal-list {
          margin: 0;
          padding-left: 18px;
          color: var(--ink);
        }

        .legal-list li {
          margin-bottom: 6px;
          line-height: 1.7;
          font-size: 0.95rem;
        }

        .legal-link {
          color: var(--gold);
          text-decoration: none;
        }

        .legal-link:hover {
          color: var(--gold-light);
          text-decoration: underline;
        }

        .footer {
          border-top: 1px solid var(--ink-faint);
          padding: 34px 0;
        }

        .footer-inner {
          max-width: 1280px;
          margin: 0 auto;
          padding: 0 32px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 20px;
        }

        .footer-copy {
          margin: 0;
          font-size: 0.75rem;
          color: var(--ink-muted);
          font-family: Georgia, serif;
        }

        .footer-links {
          display: flex;
          gap: 24px;
        }

        .footer-link {
          font-size: 0.8125rem;
          color: var(--ink-muted);
          text-decoration: none;
          transition: color 0.15s;
        }

        .footer-link:hover { color: var(--ink); }

        @media (max-width: 767px) {
          .nav-inner,
          .main-wrap,
          .footer-inner {
            padding-left: 18px;
            padding-right: 18px;
          }

          .nav-links .nav-link[data-hide-mobile="true"] { display: none; }

          .legal-card { padding: 22px 18px; }

          .footer-inner {
            flex-direction: column;
            align-items: flex-start;
          }
        }
      `}</style>

      <div className={`legal-page ${syne.className} ${theme}`}>
        <nav className="nav">
          <div className="nav-inner">
            <Link href="/" className="logo">
              Innungs<span className="logo-accent">App</span>{' '}
              <span className="logo-pro">PRO</span>
            </Link>
            <div className="nav-links">
              <Link href="/#leistungen" className="nav-link" data-hide-mobile="true">
                Leistungen
              </Link>
              <button
                type="button"
                onClick={toggleTheme}
                className="theme-btn"
                aria-label="Theme wechseln"
                title={theme === 'theme-dark' ? 'Light Mode' : 'Dark Mode'}
              >
                {theme === 'theme-dark' ? <Sun size={18} /> : <Moon size={18} />}
              </button>
              <Link href="/login" className="nav-link">
                Login
              </Link>
            </div>
          </div>
        </nav>

        <main className="main-wrap">
          <Link href="/" className="back-link">
            <ArrowLeft size={16} />
            Zurück zur Startseite
          </Link>
          <div className="eyebrow">Rechtliches</div>
          <h1 className="page-title">{title}</h1>
          <p className="page-subtitle">{subtitle}</p>
          <div className="legal-card">{children}</div>
        </main>

        <footer className="footer">
          <div className="footer-inner">
            <p className="footer-copy">
              © {new Date().getFullYear()} InnungsApp SaaS. Alle Rechte vorbehalten.
            </p>
            <div className="footer-links">
              <Link href="/impressum" className="footer-link">
                Impressum
              </Link>
              <Link href="/datenschutz" className="footer-link">
                Datenschutz
              </Link>
            </div>
          </div>
        </footer>
      </div>
    </>
  )
}