Introduction to Chitagá Tech

import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';

const ScrollAnimation = ({
  children,
  variants = {},
  delay = 0,
  as = "div"
}) => {
  const ref = useRef(null);
  const isInView = useInView(ref, { 
    once: true, 
    amount: 0.3,
    margin: "0px 0px -100px 0px"
  });

  const defaultVariants = {
    hidden: { opacity: 0, y: 50 },
    visible: { opacity: 1, y: 0 }
  };

  const MotionComponent = motion[as];

  return (
    <MotionComponent
      ref={ref}
      initial="hidden"
      animate={isInView ? "visible" : "hidden"}
      variants={{ ...defaultVariants, ...variants }}
      transition={{ duration: 0.6, ease: "easeOut", delay }}
    >
      {children}
    </MotionComponent>
  );
};

const toggleTheme = () => {
    document.documentElement.classList.toggle('dark');
}