"use client";

import { useEffect, useRef } from "react";

const sections = [
    { year: "26.10.1966", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper in ultricies vivamus nulla posuere elit tortor diam curabitur nec mattis commodo malesuada. Adipiscing pellentesque dapibus mattis dictumst dapibus ullamcorper elementum placerat ultricies quis bibendum aenean non." },
    { year: "1972", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper in ultricies vivamus nulla posuere elit tortor diam curabitur nec mattis commodo malesuada. Adipiscing pellentesque dapibus mattis dictumst dapibus ullamcorper elementum placerat ultricies quis bibendum aenean non." },
    { year: "1972", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper in ultricies vivamus nulla posuere elit tortor diam curabitur nec mattis commodo malesuada. Adipiscing pellentesque dapibus mattis dictumst dapibus ullamcorper elementum placerat ultricies quis bibendum aenean non." },
    { year: "1990", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper in ultricies vivamus nulla posuere elit tortor diam curabitur nec mattis commodo malesuada. Adipiscing pellentesque dapibus mattis dictumst dapibus ullamcorper elementum placerat ultricies quis bibendum aenean non." },
    { year: "1994", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper in ultricies vivamus nulla posuere elit tortor diam curabitur nec mattis commodo malesuada. Adipiscing pellentesque dapibus mattis dictumst dapibus ullamcorper elementum placerat ultricies quis bibendum aenean non." },
    { year: "1996", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper in ultricies vivamus nulla posuere elit tortor diam curabitur nec mattis commodo malesuada. Adipiscing pellentesque dapibus mattis dictumst dapibus ullamcorper elementum placerat ultricies quis bibendum aenean non." },
    { year: "31.10.2019", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper in ultricies vivamus nulla posuere elit tortor diam curabitur nec mattis commodo malesuada. Adipiscing pellentesque dapibus mattis dictumst dapibus ullamcorper elementum placerat ultricies quis bibendum aenean non." },
    { year: "01.11.2019", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper in ultricies vivamus nulla posuere elit tortor diam curabitur nec mattis commodo malesuada. Adipiscing pellentesque dapibus mattis dictumst dapibus ullamcorper elementum placerat ultricies quis bibendum aenean non." }
];

export default function Page() {
    const refs = useRef<(HTMLDivElement | null)[]>([]);

    useEffect(() => {
        const observer = new IntersectionObserver(
            entries => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add("opacity-100", "translate-y-0");
                    }
                });
            },
            { threshold: 0.2 }
        );

        refs.current.forEach(el => el && observer.observe(el));
        return () => observer.disconnect();
    }, []);

    return (
        <main className="min-h-screen bg-gray-100 py-10">
            <h1 className="text-4xl font-bold text-center mb-20 text-gray-800">
                Über uns
            </h1>

            <div className="relative w-full flex justify-center py-20">
                <div className="relative w-full max-w-3xl">

                    {/* Mittlere Linie */}
                    <div className="absolute inset-0 flex justify-center">
                        <div className="w-1 bg-gray-300"></div>
                    </div>

                    {sections.map((section, index) => (
                        <div
                            key={index}
                            ref={(el: HTMLDivElement | null): void => {
                                refs.current[index] = el;
                            }}
                            className="relative mb-20 opacity-0 translate-y-10 transition-all duration-700"
                        >
                            {/* Jahr */}
                            <div className="absolute left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white text-[var(--color-primary)] px-6 py-2 text-3xl font-bold shadow z-10">
                                {section.year}
                            </div>

                            {/* Text */}
                            <div className="mt-20 text-center">
                                <p className="text-gray-700 text-lg">{section.text}</p>
                            </div>
                        </div>
                    ))}

                </div>
            </div>
        </main>
    );
}
