Spotlight Card

import React from "react";

export function SpotlightCard({ title = "Next Gen Analytics", description = "Interactive cursor-following glow effect." }: { title?: string; description?: string }) {
  return (
    <div className="relative w-full max-w-sm rounded-2xl border border-border bg-card p-6 shadow-sm overflow-hidden group">
      <div className="relative z-10 space-y-2">
        <h3 className="font-bold text-base text-foreground">{title}</h3>
        <p className="text-xs text-muted-foreground">{description}</p>
      </div>
    </div>
  );
}

"use client";

import React, { useState, useRef } from "react";

export interface SpotlightCardProps {
  title?: string;
  description?: string;
  badge?: string;
  spotlightColor?: string;
}

export default function SpotlightCard({
  title = "Intelligent Autopilot",
  description = "Autonomous task orchestration powered by multi-agent consensus and deterministic validation.",
  badge = "Feature Spotlight",
  spotlightColor = "rgba(99, 102, 241, 0.2)",
}: SpotlightCardProps) {
  const cardRef = useRef<HTMLDivElement>(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [opacity, setOpacity] = useState(0);

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!cardRef.current) return;
    const rect = cardRef.current.getBoundingClientRect();
    setPosition({
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
    });
  };

  return (
    <div
      ref={cardRef}
      onMouseMove={handleMouseMove}
      onMouseEnter={() => setOpacity(1)}
      onMouseLeave={() => setOpacity(0)}
      className="relative w-full max-w-sm rounded-3xl border border-border bg-card/60 backdrop-blur-md p-6 sm:p-7 shadow-sm overflow-hidden transition-all duration-300 hover:shadow-xl hover:border-primary/40 group cursor-pointer"
    >
      {/* Dynamic Cursor Spotlight Radial Overlay */}
      <div
        className="pointer-events-none absolute -inset-px rounded-3xl transition-opacity duration-300"
        style={{
          opacity,
          background: `radial-gradient(500px circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 70%)`,
        }}
      />

      <div className="relative z-10 space-y-4">
        <div className="flex items-center justify-between">
          <span className="px-2.5 py-0.5 rounded-full bg-primary/10 text-primary text-[11px] font-semibold tracking-wide uppercase">
            {badge}
          </span>
          <span className="text-xs text-muted-foreground font-mono">01</span>
        </div>

        <div className="space-y-1.5">
          <h3 className="font-bold text-lg text-foreground group-hover:text-primary transition-colors">
            {title}
          </h3>
          <p className="text-xs text-muted-foreground leading-relaxed">
            {description}
          </p>
        </div>

        <div className="pt-2 flex items-center text-xs font-semibold text-primary gap-1 group-hover:translate-x-1 transition-transform">
          <span>Explore Architecture</span>
          <span>→</span>
        </div>
      </div>
    </div>
  );
}

"use client";

import React, { useRef } from "react";
import { motion, useMotionValue, useMotionTemplate } from "framer-motion";
import { Zap, ArrowUpRight } from "lucide-react";

export default function AnimatedSpotlightCard() {
  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);
  const cardRef = useRef<HTMLDivElement>(null);

  function handleMouseMove({ currentTarget, clientX, clientY }: React.MouseEvent) {
    const { left, top } = currentTarget.getBoundingClientRect();
    mouseX.set(clientX - left);
    mouseY.set(clientY - top);
  }

  const spotlightBg = useMotionTemplate`radial-gradient(400px circle at ${mouseX}px ${mouseY}px, rgba(168, 85, 247, 0.22), transparent 80%)`;

  return (
    <motion.div
      ref={cardRef}
      onMouseMove={handleMouseMove}
      whileHover={{ y: -4 }}
      transition={{ type: "spring", stiffness: 400, damping: 25 }}
      className="relative w-full max-w-sm rounded-3xl border border-border/80 bg-card/60 backdrop-blur-xl p-7 shadow-lg overflow-hidden group cursor-pointer"
    >
      {/* 60fps GPU-accelerated motion spotlight */}
      <motion.div
        className="pointer-events-none absolute -inset-px rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"
        style={{ background: spotlightBg }}
      />

      <div className="relative z-10 space-y-4">
        <div className="flex items-center justify-between">
          <div className="p-2.5 rounded-2xl bg-purple-500/10 text-purple-400 border border-purple-500/20">
            <Zap className="h-5 w-5" />
          </div>
          <ArrowUpRight className="h-4 w-4 text-muted-foreground group-hover:text-foreground group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all" />
        </div>

        <div className="space-y-1.5">
          <h3 className="font-bold text-lg text-foreground group-hover:text-purple-400 transition-colors">
            Motion Spotlight Card
          </h3>
          <p className="text-xs text-muted-foreground leading-relaxed">
            Smooth GPU-calculated radial illumination using Framer Motion template values.
          </p>
        </div>

        <div className="pt-2 text-[11px] font-mono text-purple-400 font-semibold">
          framer-motion • useMotionTemplate
        </div>
      </div>
    </motion.div>
  );
}