'use client';

import React from "react";
import {motion} from "framer-motion";
import {useThemeColors} from "@/utils/useThemeColors";

const timeline = [
    {
        date: "Oktober 2024",
        title: "Projektgründung",
        description: "Entwicklung der Idee und erste Umsetzungsschritte – inspiriert durch Technik und Nachhaltigkeit.",
        current: false,
    },
    {
        date: "Mai 2025",
        title: "Go-Live",
        description: "Offizieller Start mit Kundenprojekten und einem umfassenden Full-Service-Angebot.",
        current: true,
    },
];

const AboutTimeline3 = () => {
    const colors = useThemeColors();

    return (
        <div className="relative w-full px-6 sm:px-12 py-8 max-w-5xl mx-auto">
            <h2
                className="text-2xl sm:text-3xl font-bold mt-10"
                style={{color: colors.primaryText}}
            >
                Von der Idee bis heute
            </h2>
            <motion.div
                className="w-12 h-[2px] mt-2 mb-12 bg-amber-500"
                initial={{opacity: 0, x: -20}}
                whileInView={{opacity: 1, x: 0}}
                viewport={{once: true}}
                transition={{duration: 0.4, delay: 0.1}}
            />

            <div className="relative border-l-2 border-gray-300 dark:border-gray-700 ml-6">
                {timeline.map((item, idx) => (
                    <motion.div
                        key={idx}
                        initial={{opacity: 0, y: 20}}
                        whileInView={{opacity: 1, y: 0}}
                        viewport={{once: true}}
                        transition={{duration: 0.5, delay: idx * 0.2}}
                        className="relative mb-10 pl-12"
                    >
                        {/* Timeline dot */}
                        <div className="absolute left-[-22px] top-0 z-10">
                            <div
                                className={`w-10 h-10 rounded-full border-2 flex items-center justify-center bg-white dark:bg-gray-900 ${
                                    item.current
                                        ? "border-blue-600"
                                        : "border-gray-400 dark:border-gray-600"
                                }`}
                            >
                                {item.current && (
                                    <motion.span
                                        className="absolute w-10 h-10 rounded-full bg-blue-600 opacity-40"
                                        animate={{scale: [1, 1.6, 1], opacity: [0.4, 0, 0.4]}}
                                        transition={{repeat: Infinity, duration: 1.6}}
                                    />
                                )}
                            </div>
                        </div>

                        {/* Timeline card */}
                        <motion.div
                            whileHover={{scale: 1.02, translateX: 4}}
                            transition={{type: "spring", stiffness: 260, damping: 20}}
                            className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 cursor-default"
                        >
                            <div className="text-sm text-blue-600 font-semibold mb-1">{item.date}</div>
                            <div
                                className="text-lg font-bold mb-2"
                                style={{color: colors.primaryText}}
                            >
                                {item.title}
                            </div>
                            <div className="text-sm" style={{color: colors.secondaryText}}>
                                {item.description}
                            </div>
                        </motion.div>
                    </motion.div>
                ))}
            </div>
        </div>
    );
};

export default AboutTimeline3;