import {BsMoonStars, BsStars} from 'react-icons/bs';
import {
    FaBed,
    FaBook,
    FaBrain,
    FaChartBar,
    FaCloud,
    FaEye,
    FaHeart,
    FaMicrophone,
    FaMoon,
    FaPen,
    FaRobot,
    FaStar,
    FaVrCardboard,
} from 'react-icons/fa';
import {HiSparkles} from 'react-icons/hi';
import {NavLink} from 'react-router-dom';
import {useEffect, useState} from 'react';
import logotext from '../assets/logotext.svg'
import logotext_dark from '../assets/logotext_dark.svg'

export default function Overview() {
    const [isDarkTheme, setIsDarkTheme] = useState(false);

    useEffect(() => {
        // Initialize theme state
        const updateThemeState = () => {
            const theme = document.documentElement.getAttribute('data-theme');
            setIsDarkTheme(theme === 'dark');
        };

        // Set initial state
        updateThemeState();

        // Create observer to watch for theme changes
        const observer = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                if (mutation.attributeName === 'data-theme') {
                    updateThemeState();
                }
            });
        });

        // Start observing
        observer.observe(document.documentElement, {attributes: true});

        // Cleanup
        return () => observer.disconnect();
    }, []);
    return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
        {/* Floating Background Elements */}
        <div className="absolute inset-0 pointer-events-none">
            <div className="absolute top-20 left-0 text-purple-200 opacity-30">
                <FaCloud size={40}/>
            </div>
            <div className="absolute top-60 right-5 text-purple-300 opacity-20">
                <BsStars size={30}/>
            </div>
            <div className="absolute bottom-10 left-32 text-purple-200 opacity-25">
                <BsMoonStars size={35}/>
            </div>
        </div>

        {/* Hero Section */}
        <div className="text-center mb-12 sm:mb-16 relative z-10">
            <div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
                <div className="flex items-center justify-around">
                    {isDarkTheme ? (
                        <img src={logotext} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
                    ) : (
                        <img src={logotext_dark} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
                    )}
                </div>
                <p className="text-lg sm:text-xl dreamy-text">Träume analysieren, Gesellschaft verstehen</p>
            </div>
            <div
                className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
                style={{animationDelay: '0.2s'}}>
                <div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
                    <HiSparkles className="text-yellow-400 mb-2 sm:mb-0 sm:mr-2" size={20}/>
                    <h2 className="dream-title text-xl sm:text-2xl">Träume sammeln • KI verstehen • VR erleben</h2>
                    <HiSparkles className="text-yellow-400 mt-2 sm:mt-0 sm:ml-2 hidden sm:block" size={20}/>
                </div>
                <p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
                    Verwandle deine nächtlichen Reisen in interaktive Traumlandschaften
                    mit KI-gestützter Analyse und immersiven VR-Erlebnissen
                </p>
            </div>
        </div>
        {/* Main Features Grid - Dreamy Cards */
        }
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
            {/* KI-Traumdeutung */}
            <div
                className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6 floating backdrop-blur-md bg-gradient-to-br from-purple-100/50 to-pink-100/50 border border-purple-200/30 dark:bg-gradient-to-br dark:from-purple-900/30 dark:to-pink-900/30 dark:border-purple-700/30"
                style={{animationDelay: '0.5s'}}>
                <div className="flex justify-center mb-4">
                    <div className="p-3 sm:p-4 bg-purple-500/20 rounded-full">
                        <FaBrain className="text-purple-600 dark:text-purple-400" size={28}/>
                    </div>
                </div>
                <h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center dreamy-text">
                    KI-Traumdeutung
                </h3>
                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
                    Deine Träume werden von KI entschlüsselt -
                    Symbole erkannt, Emotionen analysiert, Bedeutungen offenbart
                </p>
            </div>

            {/* Multimediale Traumerfassung */}
            <div
                className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6 floating backdrop-blur-md bg-gradient-to-br from-blue-100/50 to-indigo-100/50 border border-blue-200/30 dark:bg-gradient-to-br dark:from-blue-900/30 dark:to-indigo-900/30 dark:border-blue-700/30"
                style={{animationDelay: '1s'}}>
                <div className="flex justify-center mb-4">
                    <div className="p-3 sm:p-4 bg-blue-500/20 rounded-full">
                        <FaMicrophone className="text-blue-600 dark:text-blue-400" size={28}/>
                    </div>
                </div>
                <h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center dreamy-text">
                    Träume einfangen
                </h3>
                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
                    Sprich deine Träume in der Nacht, zeichne traumhafte Skizzen
                    oder schreibe poetische Beschreibungen
                </p>
            </div>

            {/* VR-Traumwelten */}
            <div
                className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6 floating backdrop-blur-md bg-gradient-to-br from-violet-100/50 to-purple-100/50 border border-violet-200/30 dark:bg-gradient-to-br dark:from-violet-900/30 dark:to-purple-900/30 dark:border-violet-700/30"
                style={{animationDelay: '1.5s'}}>
                <div className="flex justify-center mb-4">
                    <div className="p-3 sm:p-4 bg-violet-500/20 rounded-full">
                        <FaVrCardboard className="text-violet-600 dark:text-violet-400" size={28}/>
                    </div>
                </div>
                <h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center dreamy-text">
                    VR-Traumreisen
                </h3>
                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
                    Betritt deine Träume als begehbare Welten -
                    schwebe durch Erinnerungen, berühre Traumsymbole
                </p>
            </div>

            {/* Traumarchiv */}
            <div
                className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6 floating backdrop-blur-md bg-gradient-to-br from-emerald-100/50 to-teal-100/50 border border-emerald-200/30 dark:bg-gradient-to-br dark:from-emerald-900/30 dark:to-teal-900/30 dark:border-emerald-700/30"
                style={{animationDelay: '2s'}}>
                <div className="flex justify-center mb-4">
                    <div className="p-3 sm:p-4 bg-emerald-500/20 rounded-full">
                        <FaBook className="text-emerald-600 dark:text-emerald-400" size={28}/>
                    </div>
                </div>
                <h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center dreamy-text">
                    Traumschatzkammer
                </h3>
                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
                    Deine Traumsammlung wächst - durchsuchbar nach Gefühlen,
                    Symbolen und magischen Momenten
                </p>
            </div>

            {/* Traumstatistiken */}
            <div
                className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6 floating backdrop-blur-md bg-gradient-to-br from-amber-100/50 to-orange-100/50 border border-amber-200/30 dark:bg-gradient-to-br dark:from-amber-900/30 dark:to-orange-900/30 dark:border-amber-700/30"
                style={{animationDelay: '2.5s'}}>
                <div className="flex justify-center mb-4">
                    <div className="p-3 sm:p-4 bg-amber-500/20 rounded-full">
                        <FaChartBar className="text-amber-600 dark:text-amber-400" size={28}/>
                    </div>
                </div>
                <h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center dreamy-text">
                    Traummuster
                </h3>
                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
                    Entdecke die geheimen Muster deiner Nachtreisen -
                    welche Träume kehren zurück?
                </p>
            </div>

            {/* Schlafrhythmus */}
            <div
                className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6 floating backdrop-blur-md bg-gradient-to-br from-rose-100/50 to-pink-100/50 border border-rose-200/30 dark:bg-gradient-to-br dark:from-rose-900/30 dark:to-pink-900/30 dark:border-rose-700/30"
                style={{animationDelay: '3s'}}>
                <div className="flex justify-center mb-4">
                    <div className="p-3 sm:p-4 bg-rose-500/20 rounded-full">
                        <FaMoon className="text-rose-600 dark:text-rose-400" size={28}/>
                    </div>
                </div>
                <h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center dreamy-text">
                    Schlafzyklen
                </h3>
                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
                    Verstehe deine Schlafrhythmen und wie sie deine
                    Traumlandschaften formen
                </p>
            </div>
        </div>

        {/* Dreamy Workflow Section */
        }
        <div
            className="dream-container floating mb-16 backdrop-blur-lg bg-gradient-to-br from-pink-500/30 to-red-400/30 dark:from-pink-800/30 dark:to-red-900/30 rounded-xl sm:rounded-2xl md:rounded-3xl p-6 sm:p-8 md:p-12"
            style={{animationDelay: '3.2s'}}>
            <div className="text-center">
                <FaHeart className="text-pink-500 dark:text-pink-400 mx-auto mb-4" size={32}/>
                <h2 className="dream-title text-2xl sm:text-3xl">Deine magische Traumreise</h2>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8 mt-6 sm:mt-8">
                <div className="text-center">
                    <div
                        className="bg-gradient-to-br from-purple-400 to-purple-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
                        <FaBed className="text-white" size={24}/>
                    </div>
                    <h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">1. Träumen</h4>
                    <p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
                        In der Nacht zeichnen deine Sensoren sanft deine Traumreisen auf
                    </p>
                </div>
                <div className="text-center">
                    <div
                        className="bg-gradient-to-br from-blue-400 to-blue-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
                        <FaPen className="text-white" size={24}/>
                    </div>
                    <h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">2. Einfangen</h4>
                    <p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
                        Beim Erwachen flüsterst du deine Träume in die App
                    </p>
                </div>
                <div className="text-center">
                    <div
                        className="bg-gradient-to-br from-violet-400 to-violet-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
                        <FaRobot className="text-white" size={24}/>
                    </div>
                    <h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">3. Verzaubern</h4>
                    <p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
                        KI-Magie verwandelt deine Worte in Bilder, Klänge und Bedeutungen
                    </p>
                </div>
                <div className="text-center">
                    <div
                        className="bg-gradient-to-br from-pink-400 to-pink-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
                        <FaEye className="text-white" size={24}/>
                    </div>
                    <h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">4. Erleben</h4>
                    <p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
                        Tauche ein in deine VR-Traumwelten und entdecke dich selbst
                    </p>
                </div>
            </div>
        </div>

        {/* Dreamy CTA Section */
        }
        <div className="relative mt-12 sm:mt-16">
            <div
                className="dreamy-card rounded-xl sm:rounded-2xl p-6 sm:p-8 md:p-12 text-center floating bg-gradient-to-br from-pink-600 via-violet-600 to-purple-600 border-none overflow-hidden"
                style={{animationDelay: '3.5s'}}>
                <div className="relative z-10">
                    <div className="flex flex-col sm:flex-row justify-center items-center mb-4 sm:mb-6">
                        <FaStar className="text-yellow-300 mb-2 sm:mb-0 sm:mr-3" size={24}/>
                        <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white">Wo Träume Realität
                            werden</h2>
                        <FaStar className="text-yellow-300 mt-2 sm:mt-0 sm:ml-3 hidden sm:block" size={24}/>
                    </div>
                    <p className="text-base sm:text-lg md:text-xl text-purple-100 mb-6 sm:mb-8 md:mb-10 max-w-2xl mx-auto">
                        Lass dich von KI-gestützter Traumdeutung, VR-Erlebnissen und personalisierten
                        Einsichten in eine tiefere Welt deines Unterbewusstseins führen
                    </p>
                    <div className="flex justify-center w-full">
                        <NavLink
                            to='/home'
                            className="dreamy-button inline-flex items-center justify-center text-center mx-auto text-sm sm:text-base px-6 py-3 rounded-full font-medium shadow-lg"
                            style={{minWidth: '200px'}}
                        >
                            <FaMoon className="mr-2 sm:mr-3" size={18}/>
                            Lass die Magie beginnen!
                            <HiSparkles className="ml-2 sm:ml-3" size={18}/>
                        </NavLink>
                    </div>
                </div>
            </div>
        </div>
    </div>)
}