'use client'

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

export default function ReferralSection() {
    return (
        <section id="referral" className="py-24 px-4 bg-background/80 text-foreground">
            <div className="max-w-3xl mx-auto text-center">
                <motion.h2
                    className="text-3xl md:text-4xl font-bold mb-2"
                    initial={{opacity: 0, y: 10}}
                    whileInView={{opacity: 1, y: 0}}
                    viewport={{once: true}}
                    transition={{duration: 0.4}}
                >
                    Weiterempfehlen lohnt sich
                </motion.h2>

                <motion.div
                    className="w-12 h-[2px] mt-2 mb-6 bg-amber-500 mx-auto"
                    initial={{opacity: 0, x: -20}}
                    whileInView={{opacity: 1, x: 0}}
                    viewport={{once: true}}
                    transition={{duration: 0.4, delay: 0.1}}
                />

                <motion.div
                    className="text-sm md:text-base mb-8 text-muted-foreground space-y-4"
                    initial={{opacity: 0, y: 10}}
                    whileInView={{opacity: 1, y: 0}}
                    viewport={{once: true}}
                    transition={{duration: 0.4, delay: 0.2}}
                >
                    <p>
                        Du empfiehlst uns weiter und dein Kontakt wird Kunde?
                        Als Dank erhältst du <strong>10 % Rabatt</strong> auf dein nächstes Projekt bei uns.
                    </p>
                    <p>
                        Einfach, fair und lohnend – ideal für alle, die mit unserer Arbeit zufrieden sind.
                    </p>
                </motion.div>

                <motion.div
                    initial={{opacity: 0, y: 20}}
                    whileInView={{opacity: 1, y: 0}}
                    viewport={{once: true}}
                    transition={{duration: 0.5, delay: 0.3}}
                >
                    <Link
                        href="/contact"
                        className="inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full font-semibold transition"
                    >
                        Jetzt empfehlen
                    </Link>
                </motion.div>
            </div>
        </section>
    )
}