'use client'

import { motion } from 'framer-motion'

const text = ['Build', 'beautiful', 'experiences']

export function StaggeredHero() {
  const container = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.12,
      },
    },
  }

  const item = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.5,
        ease: 'easeOut',
      },
    },
  }

  return (
    <motion.div
      variants={container}
      initial="hidden"
      animate="visible"
      className="text-center"
    >
      {text.map((word, index) => (
        <motion.h1
          key={index}
          variants={item}
          className="mb-2 text-4xl font-bold md:text-6xl"
        >
          {word}
        </motion.h1>
      ))}
      <motion.p
        variants={item}
        className="mt-4 text-lg text-[var(--foreground)]/70"
      >
        With smooth animations
      </motion.p>
    </motion.div>
  )
}