'use client';

import React from "react";
import {motion} from "framer-motion";
import {useThemeColors} from "@/utils/useThemeColors";
import ContactHero from "@/components/Contact/Section/ContactHero";
import ContactFormSection from "@/components/Contact/Section/ContactFormSection";
import Section from "@/components/Section";

const Contact = () => {
    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>
                <ContactHero/>
            </Section>

            <Section style={{backgroundColor: colors.secondaryBg}} shadow>
                <ContactFormSection/>
            </Section>
        </motion.div>
    );
};

export default Contact;