"use client";
import { motion } from "framer-motion";

export function BentoGrid() {
  const container = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1
      }
    }
  };

  const item = {
    hidden: { opacity: 0, y: 20 },
    show: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 300, damping: 24 } }
  };

  return (
    <motion.div 
      variants={container}
      initial="hidden"
      animate="show"
      className="grid grid-cols-3 grid-rows-2 gap-4 w-full max-w-2xl h-[400px]"
    >
      <motion.div variants={item} className="col-span-2 row-span-1 rounded-2xl border border-border bg-[#0a0a0a] p-6 flex flex-col justify-end transition-colors hover:bg-[#111111]">
        <h3 className="font-medium text-foreground">Analytics</h3>
        <p className="text-sm text-muted-foreground">Monitor your performance</p>
      </motion.div>
      <motion.div variants={item} className="col-span-1 row-span-2 rounded-2xl border border-border bg-[#080808] p-6 flex flex-col justify-end transition-colors hover:bg-[#111111]">
        <h3 className="font-medium text-foreground">Integrations</h3>
        <p className="text-sm text-muted-foreground">Connect your tools</p>
      </motion.div>
      <motion.div variants={item} className="col-span-1 row-span-1 rounded-2xl border border-border bg-[#111111] p-6 flex flex-col justify-end transition-colors hover:bg-[#1a1a1a]">
        <h3 className="font-medium text-foreground">Security</h3>
      </motion.div>
      <motion.div variants={item} className="col-span-1 row-span-1 rounded-2xl border border-border bg-[#0a0a0a] p-6 flex flex-col justify-end transition-colors hover:bg-[#111111]">
        <h3 className="font-medium text-foreground">Speed</h3>
      </motion.div>
    </motion.div>
  );
}