'use client'

import {demoCategories} from './data/demos'
import Link from 'next/link'
import {motion} from 'framer-motion'

export default function Home() {
    return (
        <main className="min-h-screen bg-zinc-900 text-white py-10 px-6 font-sans">
            <h1 className="text-4xl font-bold text-center mb-12">Demos</h1>

            {demoCategories.map((section) => (
                <section key={section.label} className="mb-16">
                    <h2 className="text-2xl font-semibold mb-6">{section.label}</h2>

                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                        {section.items.map((demo) => (
                            <motion.div
                                key={demo.name}
                                className="flex flex-col rounded-lg border border-zinc-700 shadow-md overflow-hidden bg-zinc-800"
                                initial={{opacity: 0, y: 20}}
                                animate={{opacity: 1, y: 0}}
                                transition={{duration: 0.4}}
                            >
                                {/* Preview iframe */}
                                <div className="relative w-full h-[270px] overflow-hidden bg-black">
                                    <motion.div
                                        className="absolute inset-0"
                                        style={{height: '200%', width: '100%'}}
                                        animate={{y: ['0%', '-50%']}}
                                        transition={{
                                            repeat: Infinity,
                                            repeatType: 'reverse',
                                            duration: 7,
                                            ease: 'easeInOut',
                                        }}
                                    >
                                        <iframe
                                            src={demo.url}
                                            className="w-full h-full"
                                            style={{
                                                border: 'none',
                                                pointerEvents: 'none',
                                            }}
                                        />
                                    </motion.div>
                                </div>

                                {/* Info and button */}
                                <div className="flex flex-col flex-1 p-4">
                                    <h3 className="text-xl font-semibold mb-2">{demo.name}</h3>

                                    {demo.description?.length > 0 && (
                                        <ul className="text-sm text-zinc-400 list-disc list-inside space-y-1 mb-4">
                                            {demo.description.map((line, i) => (
                                                <li key={i}>{line}</li>
                                            ))}
                                        </ul>
                                    )}

                                    <div className="mt-auto">
                                        <Link
                                            href={demo.url}
                                            target="_blank"
                                            prefetch={false}
                                            className="block text-center bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded w-full transition-colors"
                                        >
                                            Demo Öffnen
                                        </Link>
                                    </div>
                                </div>
                            </motion.div>
                        ))}
                    </div>
                </section>
            ))}
        </main>
    )
}