'use client';

import React from 'react';
import Link from 'next/link';
import {motion} from 'framer-motion';

const Footer = () => {
    return (
        <motion.footer
            initial={{opacity: 0, y: 20}}
            whileInView={{opacity: 1, y: 0}}
            viewport={{once: true}}
            transition={{duration: 0.6, ease: 'easeOut'}}
            className="py-10 transition-theme text-white"
            style={{
                backgroundColor: '#16171f', // modern dark blue-purple tone
            }}
        >
            <div className="w-[90%] mx-auto px-4 sm:px-6 lg:px-8">
                <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-8">
                    {/* Logo and description */}
                    <div>
                        <h1 className="text-xl md:text-2xl font-bold text-white">
                            <span className="text-3xl md:text-4xl text-pink-700">R</span>hein Software
                        </h1>
                    </div>

                    {/* Informationen */}
                    <div>
                        <h3 className="text-lg font-semibold text-white">Informationen</h3>
                        <ul className="mt-4 space-y-4 text-sm font-semibold text-gray-400">
                            <li>
                                <Link href="/contact">
                                    <p className="nav_link transition-all duration-300 ease-in-out hover:text-white">
                                        Kontakt
                                    </p>
                                </Link>
                            </li>
                            <li>
                                <Link href="/contact">
                                    <p className="nav_link transition-all duration-300 ease-in-out hover:text-white">
                                        Zahlung und Versand
                                    </p>
                                </Link>
                            </li>
                        </ul>
                    </div>

                    {/* Rechtliches */}
                    <div>
                        <h3 className="text-lg font-semibold text-white">Rechtliches</h3>
                        <ul className="mt-4 space-y-4 text-sm font-semibold text-gray-400">
                            <li>
                                <Link href="/legal/terms-of-use">
                                    <p className="nav_link transition-all duration-300 ease-in-out hover:text-white">
                                        AGB
                                    </p>
                                </Link>
                            </li>
                            <li>
                                <Link href="/legal/revocation">
                                    <p className="nav_link transition-all duration-300 ease-in-out hover:text-white">
                                        Widerruf
                                    </p>
                                </Link>
                            </li>
                            <li>
                                <Link href="/legal/privacy">
                                    <p className="nav_link transition-all duration-300 ease-in-out hover:text-white">
                                        Datenschutz
                                    </p>
                                </Link>
                            </li>
                            <li>
                                <Link href="/legal/imprint">
                                    <p className="nav_link transition-all duration-300 ease-in-out hover:text-white">
                                        Impressum
                                    </p>
                                </Link>
                            </li>
                        </ul>
                    </div>
                </div>

                {/* Bottom Section */}
                <div
                    className="mt-8 border-t border-gray-600 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-gray-400">
                    <p className="text-center md:text-left">
                        © 2025 Rhein Software Development. All rights reserved.
                    </p>
                </div>
            </div>
        </motion.footer>
    );
};

export default Footer;