import Navbar from "../components/Navbar";
import Hero from "../components/Hero";
import Produk from "../components/Produk";
import Cakupan from "../components/Cakupan";
import { motion } from "framer-motion";

const sectionVariant = {
  hidden: { opacity: 0, y: 40 },
  visible: (delay = 0) => ({
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.8,
      delay,
      ease: "easeOut",
    },
  }),
};

export default function Home() {
  return (
    <motion.div
      className="font-sans"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.6 }}
    >
      {/* Navbar muncul pertama */}
      <motion.div
        variants={sectionVariant}
        initial="hidden"
        animate="visible"
        custom={0.1}
      >
        <Navbar />
      </motion.div>

      {/* Hero muncul kedua */}
      <motion.section
        variants={sectionVariant}
        initial="hidden"
        animate="visible"
        custom={0.3}
      >
        <Hero />
      </motion.section>

      {/* Produk muncul ketiga */}
      <motion.section
        variants={sectionVariant}
        initial="hidden"
        animate="visible"
        custom={0.6}
      >
        <Produk />
      </motion.section>

      {/* Cakupan muncul terakhir */}
      <motion.section
        variants={sectionVariant}
        initial="hidden"
        animate="visible"
        custom={0.9}
      >
        <Cakupan />
      </motion.section>
    </motion.div>
  );
}