REMind/src/pages/dreamarchive/ResearchLive.tsx

import {FaCalendarAlt, FaClipboardCheck, FaGlobeAmericas} from 'react-icons/fa';
import mockResearchLive from '../../data/MockResearchLive';
import HeroSection from '../../components/dreamarchive/HeroSection';
import SectionHeader from '../../components/dreamarchive/SectionHeader';
import DreamyCard from '../../components/dreamarchive/DreamyCard';
import StudyCard from '../../components/dreamarchive/StudyCard';
import ResearcherInterviewCard from '../../components/dreamarchive/ResearcherInterviewCard';
import IconWithBackground from '../../components/dreamarchive/IconWithBackground';

export default function ResearchLive() {
    return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
        {/* Hero Section */}
        <HeroSection
            title="Traumforschung Live"
            subtitle="Aktuelle Studien, Citizen Science und Forscher-Interviews"
            containerTitle="Sei Teil der Traumforschung"
            description="Entdecke laufende Forschungsprojekte, nimm an Studien teil und lerne von führenden Traumforschern aus der ganzen Welt."
        />

        {/* Current Studies */}
        <div className="mb-12">
            <SectionHeader title="Aktuelle Studien"/>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {mockResearchLive.currentStudies.slice(0, 2).map((study) => (
                    <StudyCard key={study.id} study={study}/>))}
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                {mockResearchLive.currentStudies.slice(2, 4).map((study) => (
                    <StudyCard key={study.id} study={study}/>))}
            </div>
        </div>

        {/* Citizen Science */}
        <div className="mb-12">
            <SectionHeader title="Citizen Science: Mitmachen bei der Traumforschung"/>

            <DreamyCard color="violet">
                <div className="flex items-center mb-6">
                    <IconWithBackground
                        icon={<FaCalendarAlt/>}
                        color="violet"
                        size={28}
                        className="mr-4"
                    />
                    <h3 className="text-xl font-bold dreamy-text">Wie du zur Wissenschaft beitragen kannst</h3>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                    {mockResearchLive.citizenScienceProjects.map((project) => {
                        // Dynamically determine which icon component to use
                        let IconComponent;
                        switch (project.icon) {
                            case 'FaClipboardCheck':
                                IconComponent = FaClipboardCheck;
                                break;
                            case 'FaGlobeAmericas':
                                IconComponent = FaGlobeAmericas;
                                break;
                            case 'FaCalendarAlt':
                                IconComponent = FaCalendarAlt;
                                break;
                            default:
                                IconComponent = FaClipboardCheck;
                        }

                        return (<div key={project.id} className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
                            <div className="flex justify-center mb-3">
                                <div className="p-2 bg-violet-500/20 rounded-full">
                                    <IconComponent className="text-violet-600 dark:text-violet-400" size={20}/>
                                </div>
                            </div>
                            <h4 className="font-bold mb-2 text-center">{project.title}</h4>
                            <p className="text-sm">
                                {project.description}
                            </p>
                            <div className="mt-3 text-center">
                                <button
                                    className="py-1 px-3 bg-violet-500 hover:bg-violet-600 text-white text-xs rounded-lg transition-colors">
                                    Beitragen
                                </button>
                            </div>
                        </div>);
                    })}
                </div>

                <p className="text-sm">
                    Citizen Science-Projekte ermöglichen es jedem, zur Traumforschung beizutragen. Deine Teilnahme
                    hilft Wissenschaftlern, größere und vielfältigere Datensätze zu sammeln, was zu robusteren
                    Forschungsergebnissen führt.
                </p>
            </DreamyCard>
        </div>

        {/* Researcher Interviews */}
        <div className="mb-12">
            <SectionHeader title="Forscher-Interviews"/>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {mockResearchLive.researcherInterviews.slice(0, 2).map((interview) => (
                    <ResearcherInterviewCard key={interview.id} interview={interview}/>))}
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                {mockResearchLive.researcherInterviews.slice(2, 4).map((interview) => (
                    <ResearcherInterviewCard key={interview.id} interview={interview}/>))}
            </div>
        </div>

        {/* Upcoming Events */}
        <div className="mb-12">
            <SectionHeader title="Kommende Veranstaltungen"/>

            <DreamyCard color="purple">
                <div className="overflow-x-auto">
                    <table className="w-full">
                        <thead>
                        <tr>
                            <th className="text-left p-2">Datum</th>
                            <th className="text-left p-2">Veranstaltung</th>
                            <th className="text-left p-2">Ort</th>
                            <th className="text-left p-2">Typ</th>
                        </tr>
                        </thead>
                        <tbody>
                        {mockResearchLive.upcomingEvents.map((event, index) => (
                            <tr key={event.id} className={index % 2 === 0 ? "bg-white/10 dark:bg-black/10" : ""}>
                                <td className="p-2">{event.date}</td>
                                <td className="p-2">{event.title}</td>
                                <td className="p-2">{event.location}</td>
                                <td className="p-2">
                                        <span
                                            className={`bg-${event.typeColor}-100 dark:bg-${event.typeColor}-900 text-${event.typeColor}-800 dark:text-${event.typeColor}-200 text-xs px-2 py-0.5 rounded-full`}>
                                          {event.type}
                                        </span>
                                </td>
                            </tr>))}
                        </tbody>
                    </table>
                </div>

                <div className="mt-4 text-center">
                    <button
                        className="py-2 px-4 bg-purple-500 hover:bg-purple-600 text-white rounded-lg transition-colors">
                        Alle Veranstaltungen anzeigen
                    </button>
                </div>
            </DreamyCard>
        </div>
    </div>);
}