Glass Card

"use client";

import { type Variants, motion } from "motion/react";
import { ArrowUpRight, Bell, Mail, Plus } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

const containerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.08,
      delayChildren: 0.15,
    },
  },
};

const itemVariants: Variants = {
  hidden: { opacity: 0, y: 14, filter: "blur(6px)" },
  visible: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: {
      duration: 0.45,
      ease: [0.23, 1, 0.32, 1] as [number, number, number, number],
    },
  },
};

export default function GlassCard() {
  return (
    <div className="rounded-[45px] w-[480px] shadow-2xl p-4 flex items-center justify-center relative bg-[radial-gradient(circle_at_center,#525252_0%,#262626_40%,#171717_90%)]">
      <motion.div
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        className="rounded-[45px] bg-neutral-900/80 backdrop-blur-xl border border-white/10 p-6 mt-24 flex flex-col items-start shadow-[0_8px_32px_rgba(0,0,0,0.4)]"
      >
        {/* Header */}
        <div className="flex items-start gap-4">
          {/* Profile Image */}
          <motion.div
            variants={itemVariants}
            className="w-24 h-24 ml-2 rounded-full overflow-hidden shadow-lg ring-2 ring-neutral-500/30 -mt-14"
          >
            <Image
              src="/profile.jpeg"
              alt="Profile"
              width={96}
              height={96}
              className="object-cover"
            />
          </motion.div>

          {/* Name + Tags */}
          <div className="flex flex-col justify-center -mt-2">
            <motion.h2 variants={itemVariants} className="text-2xl font-medium text-white">
              <Link
                href="https://x.com/ZingadePiyush"
                className="flex items-center gap-1 hover:text-neutral-300 transition-colors duration-200"
                target="_blank"
              >
                Piyush Zingade
                <ArrowUpRight className="w-5 h-5" />
              </Link>
            </motion.h2>

            <motion.div variants={itemVariants} className="flex gap-2 mt-2">
              <span className="px-3 py-1 text-xs font-medium rounded-full bg-neutral-500/20 text-neutral-300 border border-neutral-500/30">
                Frontend
              </span>
              <span className="px-3 py-1 text-xs font-medium rounded-full bg-neutral-600/20 text-neutral-300 border border-neutral-600/30">
                Software Developer
              </span>
            </motion.div>
          </div>
        </div>

        {/* Bio */}
        <motion.p
          variants={itemVariants}
          className="text-sm text-left mt-3 text-neutral-400 leading-relaxed"
        >
          Passionate about building modern, responsive web apps with clean UI
          and smooth user experience.
        </motion.p>

        {/* Buttons */}
        <motion.div variants={itemVariants} className="flex gap-3 mt-6 w-full">
          <motion.button
            whileHover={{ scale: 1.03 }}
            whileTap={{ scale: 0.97 }}
            transition={{ type: "spring", stiffness: 400, damping: 17 }}
            className="flex-1 px-4 py-2.5 rounded-full bg-white hover:bg-neutral-200 text-neutral-900 font-medium flex items-center justify-center gap-2 transition-colors shadow-lg cursor-pointer"
          >
            <Plus className="size-4" />
            Follow
          </motion.button>

          <motion.button
            whileHover={{ scale: 1.08, backgroundColor: "rgba(38,38,38,0.8)" }}
            whileTap={{ scale: 0.92 }}
            transition={{ type: "spring", stiffness: 400, damping: 17 }}
            className="flex-none w-12 h-10 flex items-center justify-center rounded-full border border-neutral-700 text-neutral-300 hover:text-white hover:border-neutral-600 transition-colors cursor-pointer"
          >
            <Mail size={18} />
          </motion.button>

          <motion.button
            whileHover={{ scale: 1.08, backgroundColor: "rgba(38,38,38,0.8)" }}
            whileTap={{ scale: 0.92 }}
            transition={{ type: "spring", stiffness: 400, damping: 17 }}
            className="flex-none w-12 h-10 flex items-center justify-center rounded-full border border-neutral-700 text-neutral-300 hover:text-white hover:border-neutral-600 transition-colors cursor-pointer"
          >
            <Bell size={18} />
          </motion.button>
        </motion.div>
      </motion.div>
    </div>
  );
}