'use client';

import React from 'react';
import Link from 'next/link';
import {motion} from 'framer-motion';
import {Mail, Gavel, ShieldCheck, Cookie} from 'lucide-react';

const Footer = () => {
    const openCookieSettings = () => {
        window.dispatchEvent(new Event('show-cookie-banner'));
    };

    return (
        <motion.footer
            initial={{opacity: 0, y: 20}}
            whileInView={{opacity: 1, y: 0}}
            viewport={{once: true}}
            transition={{duration: 0.6, ease: 'easeOut'}}
            className="py-12 text-white"
            style={{backgroundColor: '#16171f'}}
        >
            <motion.div
                initial={{opacity: 0, y: 10}}
                whileInView={{opacity: 1, y: 0}}
                viewport={{once: true}}
                transition={{duration: 0.6, delay: 0.2}}
                className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"
            >
                <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
                    {/* Logo */}
                    <motion.div
                        initial={{opacity: 0, y: 10}}
                        whileInView={{opacity: 1, y: 0}}
                        viewport={{once: true}}
                        transition={{duration: 0.5, delay: 0.3}}
                    >
                        <h1 className="text-2xl font-bold">
                            <span className="text-pink-700 text-4xl">R</span>hein Software
                        </h1>
                        <p className="mt-4 text-sm text-gray-400">
                            Individuelle Web- und Appentwicklung mit Qualität und Weitblick.
                        </p>
                    </motion.div>

                    {/* Informationen */}
                    <motion.div
                        initial={{opacity: 0, y: 10}}
                        whileInView={{opacity: 1, y: 0}}
                        viewport={{once: true}}
                        transition={{duration: 0.5, delay: 0.4}}
                    >
                        <h3 className="text-lg font-semibold mb-4">Informationen</h3>
                        <ul className="space-y-3 text-sm text-gray-300">
                            <li className="flex items-center gap-2">
                                <Mail className="w-4 h-4"/>
                                <Link href="/contact" className="hover:underline">
                                    Kontakt
                                </Link>
                            </li>
                        </ul>
                    </motion.div>

                    {/* Rechtliches */}
                    <motion.div
                        initial={{opacity: 0, y: 10}}
                        whileInView={{opacity: 1, y: 0}}
                        viewport={{once: true}}
                        transition={{duration: 0.5, delay: 0.5}}
                    >
                        <h3 className="text-lg font-semibold mb-4">Rechtliches</h3>
                        <ul className="space-y-3 text-sm text-gray-300">
                            <li className="flex items-center gap-2">
                                <ShieldCheck className="w-4 h-4"/>
                                <Link href="/legal/privacy" className="hover:underline">
                                    Datenschutz
                                </Link>
                            </li>
                            <li className="flex items-center gap-2">
                                <Gavel className="w-4 h-4"/>
                                <Link href="/legal/imprint" className="hover:underline">
                                    Impressum
                                </Link>
                            </li>
                            <li className="flex items-center gap-2">
                                <Cookie className="w-4 h-4"/>
                                <button
                                    onClick={openCookieSettings}
                                    className="hover:underline text-left"
                                >
                                    Cookie-Einstellungen
                                </button>
                            </li>
                        </ul>
                    </motion.div>
                </div>

                <motion.div
                    className="mt-12 border-t border-gray-700 pt-6 text-center text-sm text-gray-500"
                    initial={{opacity: 0, y: 10}}
                    whileInView={{opacity: 1, y: 0}}
                    viewport={{once: true}}
                    transition={{duration: 0.5, delay: 0.6}}
                >
                    © 2025 Rhein Software Development. Alle Rechte vorbehalten.
                </motion.div>
            </motion.div>
        </motion.footer>
    );
};

export default Footer;