import {BsMoonStars, BsStars} from 'react-icons/bs';
import {
    FaBrain,
    FaChartBar,
    FaCloud,
    FaFlask,
    FaHeart,
    FaHeartbeat,
    FaMicrochip,
    FaPlug,
    FaRunning,
    FaShieldAlt,
    FaUniversity,
    FaUserMd,
    FaUsers,
} from 'react-icons/fa';
import {HiSparkles} from 'react-icons/hi';
import logotext from "../assets/logotext.svg";

export default function ChipOverview() {
    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">
                    <img src={logotext} 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">Bahnbrechende Traumtechnologie</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">Der erste aufklebbare Sensor-Chip für vollständige
                        Traumerfassung</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)'}}>
                    Unser innovativer Chip vereint drei revolutionäre Technologien in einem einzigen, aufklebbaren
                    Sensorsystem
                    mit KI-gestützter Inhaltsanalyse
                </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">
            {/* EEG-Sensoren */}
            <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">
                    EEG-Sensoren
                </h3>
                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
                    Erfassung von Hirnströmen zur Traumdetektion mit über 85% Genauigkeit
                </p>
            </div>

            {/* Herzfrequenz-Sensoren */}
            <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">
                        <FaHeartbeat 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">
                    Herzfrequenz-Sensoren
                </h3>
                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
                    Präzise Pulsmessung und kontinuierliche Herzratenvariabilität-Überwachung während des Schlafs
                </p>
            </div>

            {/* Bewegungssensoren */}
            <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">
                        <FaRunning 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">
                    Bewegungssensoren
                </h3>
                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
                    6-Achsen-Bewegungssensor für Körperbewegungsanalyse und automatische Schlafphasenerkennung
                </p>
            </div>

            {/* KI-Algorithmen */}
            <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">
                        <FaChartBar 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">
                    KI-Algorithmen
                </h3>
                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
                    Fortschrittliche Algorithmen interpretieren Trauminhalte mit einer Genauigkeit von über 85%
                </p>
            </div>

            {/* Adhäsiv-Technologie */}
            <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">
                        <FaShieldAlt 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">
                    Adhäsiv-Technologie
                </h3>
                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
                    Biokompatible Materialien für hautfreundliche Haftung und schmerzfreie Entfernung
                </p>
            </div>

            {/* Drahtlose Energieversorgung */}
            <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">
                        <FaPlug 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">
                    Drahtlose Energieversorgung
                </h3>
                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
                    Thermoelektrische Generatoren nutzen Körperwärme für kontinuierlichen Betrieb ohne Batteriewechsel
                </p>
            </div>
        </div>

        {/* Technical Specifications Section */}
        <div
            className="dream-container floating mb-16 backdrop-blur-lg bg-gradient-to-br from-blue-500/30 to-purple-400/30 dark:from-blue-800/30 dark:to-purple-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">
                <FaMicrochip className="text-blue-500 dark:text-blue-400 mx-auto mb-4" size={32}/>
                <h2 className="dream-title text-2xl sm:text-3xl">Technische Spezifikationen</h2>
                <p className="text-base sm:text-lg mt-2 mb-6" style={{color: 'var(--text)'}}>
                    Basierend auf aktueller Forschung
                </p>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 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">
                        <FaBrain className="text-white" size={24}/>
                    </div>
                    <h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">EEG-Sensormodul</h4>
                    <ul className="text-xs sm:text-sm text-left list-disc pl-5" style={{color: 'var(--text)'}}>
                        <li>Ultra-low-power Design mit nur 0,8 mW Verbrauch</li>
                        <li>Drahtlose Datenübertragung via Bluetooth 5.0</li>
                        <li>Miniaturisierte Bauweise: 9,2 Gramm Gesamtgewicht</li>
                        <li>Bewegungsartefakt-Kompensation</li>
                    </ul>
                </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">
                        <FaHeartbeat className="text-white" size={24}/>
                    </div>
                    <h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">Herzfrequenz-Monitoring</h4>
                    <ul className="text-xs sm:text-sm text-left list-disc pl-5" style={{color: 'var(--text)'}}>
                        <li>Photoplethysmographie (PPG) Technologie</li>
                        <li>Kontinuierliche Herzratenvariabilität-Überwachung</li>
                        <li>Mittlere absolute Abweichung unter 2 bpm</li>
                        <li>Präzise Pulsmessung während des Schlafs</li>
                    </ul>
                </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">
                        <FaRunning className="text-white" size={24}/>
                    </div>
                    <h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">Bewegungssensorik</h4>
                    <ul className="text-xs sm:text-sm text-left list-disc pl-5" style={{color: 'var(--text)'}}>
                        <li>6-Achsen-Bewegungssensor mit ±16 g Bereich</li>
                        <li>Automatische Schlafphasenerkennung</li>
                        <li>74,6% Genauigkeit bei Schlafstadienklassifizierung</li>
                        <li>Bewegungsanalyse für präzise Traumdetektion</li>
                    </ul>
                </div>
            </div>
        </div>

        {/* Research Section */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
            {/* KI-basierte Traumanalyse */}
            <div
                className="dreamy-card rounded-xl sm:rounded-2xl p-6 sm:p-8 floating backdrop-blur-md bg-gradient-to-br from-indigo-100/50 to-blue-100/50 border border-indigo-200/30 dark:bg-gradient-to-br dark:from-indigo-900/30 dark:to-blue-900/30 dark:border-indigo-700/30"
                style={{animationDelay: '3.5s'}}>
                <div className="flex justify-center mb-4">
                    <div className="p-3 sm:p-4 bg-indigo-500/20 rounded-full">
                        <FaFlask className="text-indigo-600 dark:text-indigo-400" size={28}/>
                    </div>
                </div>
                <h3 className="text-lg sm:text-xl font-bold mb-3 sm:mb-4 text-center dreamy-text">
                    Aktuelle Forschungsgrundlagen
                </h3>
                <div className="space-y-4">
                    <div>
                        <h4 className="font-semibold mb-2 text-sm sm:text-base">EEG-basierte Traumdetektion:</h4>
                        <p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
                            Die neueste Forschung zeigt, dass EEG-Signale zur automatischen Traumdetektion mit über 85%
                            Genauigkeit verwendet werden können.
                            Eine 2025 veröffentlichte Studie demonstriert, dass bereits 8-10 EEG-Kanäle für eine
                            effektive Traumerkennung ausreichen.
                        </p>
                    </div>
                    <div>
                        <h4 className="font-semibold mb-2 text-sm sm:text-base">Multimodale Traumanalyse:</h4>
                        <p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
                            Das innovative DreamNet-Framework erreicht 99,0% Genauigkeit bei der Kombination von
                            EEG-Daten mit physiologischen Signalen.
                            Diese Technologie ermöglicht sowohl semantische als auch emotionale Traumanalyse mit 95,2%
                            F1-Score.
                        </p>
                    </div>
                </div>
            </div>

            {/* KI-Algorithmen */}
            <div
                className="dreamy-card rounded-xl sm:rounded-2xl p-6 sm:p-8 floating backdrop-blur-md bg-gradient-to-br from-teal-100/50 to-green-100/50 border border-teal-200/30 dark:bg-gradient-to-br dark:from-teal-900/30 dark:to-green-900/30 dark:border-teal-700/30"
                style={{animationDelay: '4s'}}>
                <div className="flex justify-center mb-4">
                    <div className="p-3 sm:p-4 bg-teal-500/20 rounded-full">
                        <FaBrain className="text-teal-600 dark:text-teal-400" size={28}/>
                    </div>
                </div>
                <h3 className="text-lg sm:text-xl font-bold mb-3 sm:mb-4 text-center dreamy-text">
                    KI-basierte Traumanalyse
                </h3>
                <div className="space-y-4">
                    <div>
                        <h4 className="font-semibold mb-2 text-sm sm:text-base">EEG-Musteranalyse:</h4>
                        <p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
                            Forschungsergebnisse von 2025 zeigen, dass Common Spatial Patterns (CSP) mit k-nearest
                            neighbors (KNN) die höchste Genauigkeit bei der Traumdetektion erreichen.
                        </p>
                    </div>
                    <div>
                        <h4 className="font-semibold mb-2 text-sm sm:text-base">Spektrale Traumanalyse:</h4>
                        <p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
                            Aktuelle Studien belegen, dass Beta-Frequenzaktivität (15-30 Hz) während des REM-Schlafs als
                            neuraler Fingerabdruck der Gedächtnisreaktivierung fungiert.
                        </p>
                    </div>
                    <div>
                        <h4 className="font-semibold mb-2 text-sm sm:text-base">Trauminhalt-Dekodierung:</h4>
                        <p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
                            Das DreamNet-Framework verwendet Transformer-basierte Architektur mit multimodaler
                            Aufmerksamkeit zur Dekodierung von Traumthemen und emotionalen Zuständen.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        {/* Applications Section */}
        <div
            className="dream-container floating mb-16 backdrop-blur-lg bg-gradient-to-br from-green-500/30 to-teal-400/30 dark:from-green-800/30 dark:to-teal-900/30 rounded-xl sm:rounded-2xl md:rounded-3xl p-6 sm:p-8 md:p-12"
            style={{animationDelay: '4.2s'}}>
            <div className="text-center">
                <FaHeart className="text-green-500 dark:text-green-400 mx-auto mb-4" size={32}/>
                <h2 className="dream-title text-2xl sm:text-3xl">Anwendungsbereiche und Zielgruppen</h2>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-8 mt-6 sm:mt-8">
                <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">
                        <FaUserMd className="text-white" size={24}/>
                    </div>
                    <h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">Medizinische
                        Anwendungen</h4>
                    <ul className="text-xs sm:text-sm text-left list-disc pl-5" style={{color: 'var(--text)'}}>
                        <li>Schlafdiagnostik und Traumstörungsbehandlung</li>
                        <li>Neurologische Forschung zu Bewusstseinszuständen</li>
                        <li>Postoperative Überwachung in klinischen Umgebungen</li>
                    </ul>
                </div>
                <div className="text-center">
                    <div
                        className="bg-gradient-to-br from-teal-400 to-teal-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">
                        <FaUniversity className="text-white" size={24}/>
                    </div>
                    <h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">Forschung und
                        Entwicklung</h4>
                    <ul className="text-xs sm:text-sm text-left list-disc pl-5" style={{color: 'var(--text)'}}>
                        <li>Neurowissenschaftliche Studien zu Traummechanismen</li>
                        <li>Brain-Computer-Interface Entwicklung</li>
                        <li>Psychologische Forschung zu Unterbewusstsein</li>
                    </ul>
                </div>
                <div className="text-center">
                    <div
                        className="bg-gradient-to-br from-green-400 to-green-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">
                        <FaUsers className="text-white" size={24}/>
                    </div>
                    <h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">Verbraucheranwendungen</h4>
                    <ul className="text-xs sm:text-sm text-left list-disc pl-5" style={{color: 'var(--text)'}}>
                        <li>Persönliche Schlafoptimierung und Traumtagebuch</li>
                        <li>Wellness-Monitoring für bessere Schlafqualität</li>
                        <li>Biofeedback-Systeme für Entspannung</li>
                    </ul>
                </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: '4.5s'}}>
                <div className="relative z-10">
                    <div className="flex flex-col sm:flex-row justify-center items-center mb-4 sm:mb-6">
                        <FaMicrochip 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">Technische Vorteile</h2>
                        <FaMicrochip 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">
                        Wissenschaftlich fundierte Sensorfusion, benutzerfreundliche Installation und maximaler
                        Datenschutz
                        in einem revolutionären Traumerfassungssystem
                    </p>
                    {/*<div className="flex justify-center w-full">*/}
                    {/*    <NavLink*/}
                    {/*        to='/'*/}
                    {/*        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'}}*/}
                    {/*    >*/}
                    {/*        <FaWifi className="mr-2 sm:mr-3" size={18}/>*/}
                    {/*        Mehr über die Technologie*/}
                    {/*        <HiSparkles className="ml-2 sm:ml-3" size={18}/>*/}
                    {/*    </NavLink>*/}
                    {/*</div>*/}
                </div>
            </div>
        </div>
    </div>)
}