'use client';

import {CheckCircle} from 'lucide-react';
import {motion} from 'framer-motion';
import Link from 'next/link';
import Image from 'next/image';

const points = [
    'Fertigstellung in 4–8 Wochen',
    'Fester Ansprechpartner von Anfang bis Ende',
    'Struktur & Klarheit',
    'Starkes Alleinstellungsmerkmal',
    'Zuverlässiges Team mit Weitblick',
];

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

                <motion.div
                    className="w-12 h-[2px] mt-2 mb-10 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="rounded-2xl p-8 md:p-10 bg-gradient-to-br from-[#1e3a8a] to-[#2563eb] text-white shadow-xl relative overflow-hidden"
                    initial={{opacity: 0, y: 40}}
                    whileInView={{opacity: 1, y: 0}}
                    viewport={{once: true}}
                    transition={{duration: 0.5}}
                >
                    {/* Logo */}
                    <div className="mb-6">
                        <Image src="/logo.svg" alt="Rhein Software Logo" width={120} height={32}/>
                    </div>

                    <ul className="space-y-4 mb-8">
                        {points.map((point, index) => (
                            <li key={index} className="flex items-start gap-2">
                                <CheckCircle className="text-white w-5 h-5 flex-shrink-0 mt-0.5"/>
                                <span>{point}</span>
                            </li>
                        ))}
                    </ul>

                    <Link
                        href="/contact"
                        className="inline-block bg-white text-blue-700 font-semibold px-6 py-3 rounded-full text-center shadow-md hover:bg-slate-100 transition"
                    >
                        Kostenlose Beratung anfragen
                    </Link>
                </motion.div>
            </div>
        </section>
    );
}