'use client';

import Link from 'next/link';
import {motion} from 'framer-motion';

export default function DualCTA() {
    return (
        <section className="bg-gray-50 py-24 px-6 md:px-16 lg:px-36">
            <motion.div
                initial={{opacity: 0, y: 30}}
                whileInView={{opacity: 1, y: 0}}
                transition={{duration: 0.8, ease: 'easeOut'}}
                viewport={{once: true, amount: 0.3}}
                className="grid md:grid-cols-2 gap-8"
            >
                <CTABox
                    title="Fündig geworden?"
                    text="Zögern Sie nicht, uns zu kontaktieren – wir helfen Ihnen gerne weiter."
                    href="/kontakt"
                    linkText="Zum Kontakt"
                />
                <CTABox
                    title="Mehr über uns erfahren?"
                    text="Wir stehen für nahe und zuverlässige Betreuung. Erfahren Sie mehr über unsere Werte."
                    href="/ueber-uns"
                    linkText="Über uns"
                />
            </motion.div>
        </section>
    );
}

function CTABox({
                    title,
                    text,
                    href,
                    linkText,
                }: Readonly<{
    title: string;
    text: string;
    href: string;
    linkText: string;
}>) {
    return (
        <motion.div
            whileHover={{scale: 1.01}}
            className="flex flex-col justify-between h-full border border-gray-200 px-8 py-10 rounded-2xl bg-white text-gray-800 shadow-sm transition-shadow hover:shadow-md"
        >
            <div className="space-y-3 mb-6">
                <h3 className="text-xl md:text-2xl font-bold tracking-tight">{title}</h3>
                <p className="text-base md:text-lg leading-relaxed text-gray-700">{text}</p>
            </div>
            <div className="w-full flex justify-end">
                <Link
                    href={href}
                    className="group inline-flex items-center font-semibold text-base md:text-lg text-blue-700 hover:text-blue-900 transition-colors"
                >
                    <span className="group-hover:underline">{linkText}</span>
                    <span className="ml-2 transform transition-transform duration-200 group-hover:translate-x-1">
                        →
                    </span>
                </Link>
            </div>
        </motion.div>
    );
}