import React from 'react';
import { Link } from '@inertiajs/react';
import { usePage } from '@inertiajs/react';

interface MarketingLayoutProps {
  children: React.ReactNode;
  title?: string;
}

const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) => {
  const { props } = usePage();
  const { auth } = props as any;

  return (
    <div className="min-h-screen flex flex-col bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-4">
            {/* Logo */}
            <Link href="/marketing" className="text-2xl font-bold font-display text-pink-500">
              FotoSpiel
            </Link>
            
            {/* Navigation */}
            <nav className="hidden md:flex space-x-8">
              <Link href="/marketing" className="text-gray-700 hover:text-pink-500 font-sans-marketing transition-colors">
                Home
              </Link>
              <Link href="/marketing/packages" className="text-gray-700 hover:text-pink-500 font-sans-marketing transition-colors">
                Pakete
              </Link>
              <Link href="/marketing/blog" className="text-gray-700 hover:text-pink-500 font-sans-marketing transition-colors">
                Blog
              </Link>
              <Link href="/marketing/occasions" className="text-gray-700 hover:text-pink-500 font-sans-marketing transition-colors">
                Anlässe
              </Link>
              {auth.user ? (
                <Link href="/dashboard" className="text-gray-700 hover:text-pink-500 font-sans-marketing transition-colors">
                  Dashboard
                </Link>
              ) : (
                <Link href="/marketing/register" className="text-gray-700 hover:text-pink-500 font-sans-marketing transition-colors">
                  Registrieren
                </Link>
              )}
            </nav>
            
            {/* Mobile Menu Button – TODO: Implementiere Dropdown */}
            <div className="md:hidden">
              <button className="text-gray-700 hover:text-pink-500">☰</button>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-grow">
        {title && (
          <title>{title}</title>
        )}
        {children}
      </main>

      {/* Footer */}
      <footer className="bg-white border-t border-gray-200 mt-auto">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div className="col-span-1 md:col-span-2">
              <Link href="/marketing" className="text-2xl font-bold font-display text-pink-500">
                FotoSpiel
              </Link>
              <p className="text-gray-600 font-sans-marketing mt-2">
                Deine Plattform für Event-Fotos.
              </p>
            </div>
            
            <div>
              <h3 className="font-semibold font-display text-gray-900 mb-4">Rechtliches</h3>
              <ul className="space-y-2 text-sm text-gray-600 font-sans-marketing">
                <li><Link href="/legal/impressum" className="hover:text-pink-500">Impressum</Link></li>
                <li><Link href="/legal/datenschutz" className="hover:text-pink-500">Datenschutz</Link></li>
                <li><Link href="/legal/agb" className="hover:text-pink-500">AGB</Link></li>
                <li><Link href="/legal/kontakt" className="hover:text-pink-500">Kontakt</Link></li>
              </ul>
            </div>
            
            <div>
              <h3 className="font-semibold font-display text-gray-900 mb-4">Social</h3>
              <ul className="space-y-2 text-sm text-gray-600 font-sans-marketing">
                <li><a href="#" className="hover:text-pink-500">Instagram</a></li>
                <li><a href="#" className="hover:text-pink-500">Facebook</a></li>
                <li><a href="#" className="hover:text-pink-500">YouTube</a></li>
              </ul>
            </div>
          </div>
          
          <div className="border-t border-gray-200 mt-8 pt-8 text-center text-sm text-gray-500 font-sans-marketing">
            &copy; 2025 FotoSpiel. Alle Rechte vorbehalten.
          </div>
        </div>
      </footer>
    </div>
  );
};

export default MarketingLayout;