Action Reveal Card

"use client";
import React, { useState } from "react";
import { motion } from "framer-motion";
import { Zap } from "lucide-react";

export default function ActionRevealCard({
  title = "Ramadhir Singh",
  text = "Hindustan mein jab tak cinema hai, log chu*iye bante rahenge.",
}) {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <motion.div
      onHoverStart={() => setIsHovered(true)}
      onHoverEnd={() => setIsHovered(false)}
      whileHover={{ y: -8, rotateX: -4, rotateY: 4 }}
      transition={{ type: "spring", stiffness: 180, damping: 20 }}
      style={{ transformStyle: "preserve-3d" }}
      className="relative w-80 h-[26rem] rounded-[2.5rem] bg-stone-50 p-1 border border-stone-200 shadow-xl shadow-stone-900/5 group overflow-hidden"
    >
      <motion.div
        animate={{ height: isHovered ? "100%" : "0%" }}
        transition={{ type: "spring", stiffness: 100, damping: 30 }}
        className="absolute bottom-0 left-0 w-full bg-[#E87F24] rounded-[2.3rem] -z-0"
      />

      <motion.div
        layout
        className="relative z-10 w-full h-full flex flex-col p-8"
      >
        <motion.div
          layout="position"
          className="w-16 h-16 rounded-2xl bg-orange-100 flex items-center justify-center mb-6 group-hover:bg-white transition-colors"
        >
          <Zap className="text-orange-700 w-8 h-8" />
        </motion.div>

        <div className="flex-1 space-y-3">
          <motion.h3
            layout="position"
            className={`text-2xl font-bold transition-colors duration-400 ${
              isHovered ? "text-white" : "text-stone-950"
            }`}
          >
            {title}
          </motion.h3>

          <motion.p
            layout="position"
            className={`text-sm leading-relaxed transition-colors duration-400 ${
              isHovered ? "text-orange-50" : "text-stone-600"
            }`}
          >
            {text}
          </motion.p>
        </div>

        <motion.div
          animate={{ opacity: isHovered ? 1 : 0, y: isHovered ? 0 : 20 }}
          transition={{
            type: "spring",
            stiffness: 200,
            damping: 25,
            delay: isHovered ? 0.1 : 0,
          }}
          className="mt-auto"
        >
          <button className="text-sm font-bold uppercase tracking-widest text-white border-b border-orange-200 pb-1.5 hover:border-white transition-colors">
            Go there
          </button>
        </motion.div>
      </motion.div>
    </motion.div>
  );
}