'use client'

import Link from 'next/link'
import {motion} from 'framer-motion'
import SmallHero from '@/components/Helper/SmallHero'
import {Card, CardContent} from '@/components/ui/card'

const legalLinks = [
    {
        label: 'Impressum',
        href: '/legal/imprint',
    },
    {
        label: 'Datenschutz',
        href: '/legal/privacy',
    },
    {
        label: 'Widerrufsrecht',
        href: '/legal/revocation',
    },
    {
        label: 'Nutzungsbedingungen',
        href: '/legal/terms-of-use',
    },
]

export default function LegalOverviewPage() {
    return (
        <>
            <SmallHero
                title="Rechtliches"
                subtitle="Alle rechtlich relevanten Informationen auf einen Blick."
                backgroundImage="/images/contact.png"
                blurBackground
            />

            <section className="px-6 sm:px-12 py-16 max-w-6xl mx-auto">
                <motion.div
                    className="grid grid-cols-1 sm:grid-cols-2 gap-6"
                    initial={{opacity: 0, y: 20}}
                    animate={{opacity: 1, y: 0}}
                    transition={{duration: 0.5, delay: 0.3}}
                >
                    {legalLinks.map(({label, href}) => (
                        <Card key={href} className="hover:shadow-md transition-shadow">
                            <CardContent className="p-6">
                                <Link
                                    href={href}
                                    className="text-primary font-medium text-lg hover:underline"
                                >
                                    {label}
                                </Link>
                            </CardContent>
                        </Card>
                    ))}
                </motion.div>
            </section>
        </>
    )
}