'use client';

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

const Footer = () => {
    const { openCookieSettings } = useCookieSettings();

    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>

                    <FooterSection title="Informationen" delay={0.4}>
                        <li className="flex items-center gap-2">
                            <Mail className="w-4 h-4" />
                            <Link href="/contact" className="hover:underline">
                                Kontakt
                            </Link>
                        </li>
                    </FooterSection>

                    <FooterSection title="Rechtliches" delay={0.5}>
                        <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>
                    </FooterSection>
                </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;