<style>
    .site-footer {
        background: #1a1a2e;
        color: #9ca3af;
        margin-top: 80px;
        font-size: 0.875em;
    }
    .site-footer .inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 56px 20px 32px;
    }
    .site-footer .grid {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 48px;
        margin-bottom: 48px;
    }
    @media (max-width: 768px) {
        .site-footer .grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    }
    .site-footer .brand-name {
        font-size: 1.1em;
        font-weight: 800;
        color: white;
        letter-spacing: -0.02em;
        margin-bottom: 10px;
    }
    .site-footer .brand-name span { color: #818cf8; }
    .site-footer .brand-desc {
        line-height: 1.65;
        color: #6b7280;
    }
    .site-footer h5 {
        color: white;
        font-weight: 700;
        margin-bottom: 16px;
        font-size: 0.8em;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }
    .site-footer ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .site-footer ul a {
        color: #9ca3af;
        text-decoration: none;
        transition: color 0.2s;
    }
    .site-footer ul a:hover { color: white; }
    .site-footer .divider {
        border: none;
        border-top: 1px solid #2d2d44;
        margin-bottom: 28px;
    }
    .site-footer .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
    }
    .site-footer .copyright { color: #6b7280; }
    .site-footer .social {
        display: flex;
        gap: 20px;
    }
    .site-footer .social a {
        color: #6b7280;
        text-decoration: none;
        transition: color 0.2s;
    }
    .site-footer .social a:hover { color: white; }
</style>

<footer class="site-footer">
    <div class="inner">
        <div class="grid">
            <div>
                <div class="brand-name">Veranstaltungs<span>-App</span></div>
                <p class="brand-desc">Die beste Plattform zur Entdeckung und Verwaltung von Veranstaltungen in Deiner Nähe.</p>
            </div>

            <div>
                <h5>Navigation</h5>
                <ul>
                    <li><a href="{{ url('/') }}">Home</a></li>
                    <li><a href="{{ route('events') }}">Events</a></li>
                </ul>
            </div>

            <div>
                <h5>Rechtliches</h5>
                <ul>
                    <li><a href="{{ route('privacy') }}">Datenschutz</a></li>
                    <li><a href="{{ route('impressum') }}">Impressum</a></li>
                    <li><a href="{{ route('agb') }}">AGB</a></li>
                </ul>
            </div>

            <div>
                <h5>Kontakt</h5>
                <ul>
                    <li><a href="mailto:support@veranstaltungen.app">support@veranstaltungen.app</a></li>
                    <li>+49 (0)123 456789</li>
                    <li>Musterstraße 1, 12345 Musterstadt</li>
                </ul>
            </div>
        </div>

        <hr class="divider">

        <div class="bottom">
            <span class="copyright">&copy; {{ date('Y') }} Veranstaltungs-App. Alle Rechte vorbehalten.</span>
            <div class="social">
                <a href="https://facebook.com" target="_blank">Facebook</a>
                <a href="https://twitter.com" target="_blank">Twitter</a>
                <a href="https://instagram.com" target="_blank">Instagram</a>
            </div>
        </div>
    </div>
</footer>
