'use client';

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

export default function DualCTA() {
    return (
        <section
            className="relative py-24 px-6 md:px-16 lg:px-36 bg-gradient-to-br from-background via-muted to-background">
            <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 max-w-7xl mx-auto"
            >
                <CTABox
                    title="Fündig geworden?"
                    text="Zögern Sie nicht, uns zu kontaktieren – wir helfen Ihnen gerne weiter."
                    href="/contact"
                    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="/about"
                    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.015}}
            className="flex flex-col justify-between h-full border border-border/50 backdrop-blur-sm bg-background/70 text-foreground px-8 py-10 rounded-2xl shadow-lg transition-all duration-300"
        >
            <div className="space-y-4 mb-6">
                <h3 className="text-2xl md:text-3xl font-bold tracking-tight">{title}</h3>
                <p className="text-base md:text-lg leading-relaxed text-muted-foreground">{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 hover:text-primary/80 transition-colors text-blue-600"
                >
                    <span className="group-hover:underline">{linkText}</span>
                    <ArrowRight className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1"/>
                </Link>
            </div>
        </motion.div>
    );
}
