'use client'

import {demoCategories} from './data/demos'
import Image from 'next/image'
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}}
                            >
                                <Image
                                    src={demo.preview}
                                    alt={`${demo.name} Vorschau`}
                                    width={600}
                                    height={300}
                                    className="w-full h-auto object-cover"
                                />

                                <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"
                                            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>
    )
}