'use client';

import React from "react";
import {motion} from "framer-motion";
import {useThemeColors} from "@/utils/useThemeColors";
import ServiceHero from "@/components/Services/Section/ServiceHero";
import OverviewTabs from "@/components/Services/Section/OverviewTabs";
import ContactCTA from "@/components/Home/Sections/ContactCTA";
import Section from "@/components/Section";

const Home = () => {
    const colors = useThemeColors();

    return (
        <motion.div
            initial={{opacity: 0, y: 20}}
            animate={{opacity: 1, y: 0}}
            transition={{duration: 0.7, ease: "easeOut"}}
            className="overflow-hidden"
        >
            <Section style={{backgroundColor: colors.primaryBg}} shadow>
                <ServiceHero/>
            </Section>
            <Section style={{backgroundColor: colors.secondaryBg}} shadow>
                <OverviewTabs/>
            </Section>
            <Section style={{backgroundColor: colors.primaryBg}} shadow>
                <ContactCTA
                    title="Nichts Passendes gefunden?"
                    description="Nimm einfach Kontakt mit uns auf – gemeinsam finden wir die passende Lösung für dein Vorhaben."
                    buttonLabel="Kontakt aufnehmen"
                />
            </Section>
        </motion.div>
    );
};

export default Home;