'use client';

import { motion } from 'framer-motion';
import Link from 'next/link';
import { SectionTitle } from '@/components/ui/SectionTitle';
import { ServiceCard } from '@/components/ui/ServiceCard';
import { servicesData } from '@/constant/ServicesData';

const HomeServices = () => {
    return (
        <section id="services" className="w-full py-24 bg-background text-foreground">
            <div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
                <SectionTitle title="Leistungen" />

                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    {servicesData.map((service, index) => (
                        <ServiceCard
                            key={service.title}
                            title={service.title}
                            description={service.description}
                            bullets={service.bullets}
                            index={index}
                        />
                    ))}
                </div>

                <motion.div
                    className="mt-12 text-center"
                    initial={{ opacity: 0 }}
                    whileInView={{ opacity: 1 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.4, delay: 0.3 }}
                >
                    <p className="text-muted-foreground mb-4 text-base md:text-lg">
                        Du möchtest mehr über unsere Leistungen erfahren oder hast ein konkretes Projekt im Kopf?
                    </p>
                    <Link
                        href="/contact"
                        className="text-sm font-semibold text-primary hover:underline"
                    >
                        Jetzt Kontakt aufnehmen →
                    </Link>
                </motion.div>
            </div>
        </section>
    );
};

export default HomeServices;