"use client";

import React, {useContext} from "react";
import {ThemeContext} from "@/components/provider/ThemeProvider";
import {themeColors} from "@/components/Helper/ThemeColors";
import {motion} from "framer-motion";

const fadeInUp = {
    hidden: {opacity: 0, y: 30},
    visible: (i: number) => ({
        opacity: 1,
        y: 0,
        transition: {
            duration: 0.6,
            delay: i * 0.2,
            ease: "easeOut",
        },
    }),
};

const ImprintComp = () => {
    const {theme} = useContext(ThemeContext);
    const colors = themeColors[theme];

    return (
        <div
            className="overflow-hidden transition-colors duration-500"
            style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}
        >
            {/* Imprint Content */}
            <div className="mt-16 w-[90%] sm:w-[80%] mx-auto py-12 space-y-10 text-base leading-relaxed">
                {[
                    {
                        title: "Impressum",
                        content: (
                            <>
                                Thatsaphorn Atchariyaphap<br/>
                                Rhein-Software (Einzelunternehmer)<br/>
                                Mühlenstrasse 13<br/>
                                79664 Wehr
                            </>
                        ),
                    },
                    {
                        title: "Kontakt",
                        content: (
                            <>
                                Telefon: +49 (0) 151 24003632<br/>
                                E-Mail:{" "}
                                <a
                                    href="mailto:contact@rhein-software.dev"
                                    className="underline text-blue-500"
                                >
                                    contact@rhein-software.dev
                                </a>
                            </>
                        ),
                    },
                    {
                        title: "EU-Streitschlichtung",
                        content: (
                            <>
                                Die Europäische Kommission stellt eine Plattform zur
                                Online-Streitbeilegung (OS) bereit:{" "}
                                <a
                                    href="https://ec.europa.eu/consumers/odr/"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="underline text-blue-500"
                                >
                                    https://ec.europa.eu/consumers/odr/
                                </a>
                                .<br/>
                                Unsere E-Mail-Adresse finden Sie oben im Impressum.
                            </>
                        ),
                    },
                    {
                        title:
                            "Verbraucherstreitbeilegung / Universalschlichtungsstelle",
                        content: (
                            <>
                                Wir sind nicht bereit oder verpflichtet, an
                                Streitbeilegungsverfahren vor einer
                                Verbraucherschlichtungsstelle teilzunehmen.
                            </>
                        ),
                    },
                ].map((section, i) => (
                    <motion.div
                        key={section.title}
                        custom={i}
                        initial="hidden"
                        animate="visible"
                        variants={fadeInUp}
                    >
                        <h2 className="text-2xl font-bold">{section.title}</h2>
                        <motion.div
                            className="w-6 h-[2px] mt-2 mb-6 bg-amber-500"
                            initial={{opacity: 0, x: -20}}
                            whileInView={{opacity: 1, x: 0}}
                            viewport={{once: true}}
                            transition={{duration: 0.4, delay: 0.1}}
                        />
                        <p>{section.content}</p>
                    </motion.div>
                ))}

                <motion.p
                    className="text-sm text-gray-500"
                    custom={4}
                    initial="hidden"
                    animate="visible"
                    variants={fadeInUp}
                >
                    Quelle:{" "}
                    <a
                        href="https://www.e-recht24.de"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="underline"
                    >
                        www.e-recht24.de
                    </a>
                </motion.p>
            </div>
        </div>
    );
};

export default ImprintComp;