'use client';

import React from "react";
import {motion} from "framer-motion";
import {useThemeColors} from "@/utils/useThemeColors";
import Section from "@/components/Section";
import AboutHero from "@/components/About/Section/AboutHero";
import AboutTimeline from "@/components/About/Section/AboutTimeline";
import TeamSection from "@/components/About/Section/TeamSection";
import AboutIntro from "@/components/About/Section/AboutIntro";
import AboutProcess from "@/components/About/Section/AboutProcess";

const AboutContent = () => {
    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>
                <AboutHero/>
            </Section>

            <Section style={{backgroundColor: colors.secondaryBg}} shadow>
                <AboutIntro/>
            </Section>

            <Section style={{backgroundColor: colors.primaryBg}} shadow>
                <AboutProcess/>
            </Section>

            <Section style={{backgroundColor: colors.secondaryBg}} shadow>
                <AboutTimeline/>
            </Section>

            <Section style={{backgroundColor: colors.primaryBg}} shadow>
                <TeamSection/>
            </Section>

        </motion.div>
    );
};

export default AboutContent;