import React, { ReactNode } from 'react';
import { Head } from '@inertiajs/react';
import MarketingHeader from '@/components/marketing/MarketingHeader';
import MarketingFooter from '@/components/marketing/MarketingFooter';

interface MarketingLayoutProps {
  children: ReactNode;
  title?: string;
  description?: string;
}

const MarketingLayout: React.FC<MarketingLayoutProps> = ({ 
  children, 
  title = 'Fotospiel - Event-Fotos einfach und sicher mit QR-Codes', 
  description = 'Sammle Gastfotos für Events mit QR-Codes und unserer PWA-Plattform. Für Hochzeiten, Firmenevents und mehr. Kostenloser Einstieg.' 
}) => {
  return (
    <>
      <Head>
        <title>{title}</title>
        <meta name="description" content={description} />
        <style>{`
          @keyframes aurora {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
          }
          .bg-aurora {
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: aurora 15s ease infinite;
          }
        `}</style>
      </Head>
      <div className="bg-gray-50 text-gray-900 min-h-screen flex flex-col font-sans antialiased">
        <MarketingHeader />
        <main className="flex-grow">
          {children}
        </main>
        <MarketingFooter />
      </div>
    </>
  );
};

export default MarketingLayout;