www_projectmycelium_com/src/components/ui/CubeLight.tsx

"use client";

import React from "react";
import { motion } from "framer-motion";

interface CubeProps {
  title: string;
  descriptionTitle: string;
  description: string;
  isActive: boolean;
  index: number;
  onHover: () => void;
  onLeave: () => void;
  onClick: () => void;
}

const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({ index, ...props }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="507"
    height="234"
    fill="none"
    viewBox="0 0 507 234"
    {...props}
  >
    <path
      fill={`url(#cube-gradient-${index})`}
      d="M491.651 144.747L287.198 227.339C265.219 236.22 241.783 236.22 219.802 227.339L15.3486 144.747C-5.11621 136.479 -5.11621 97.5191 15.3486 89.2539L219.802 6.65884C241.783 -2.21961 265.219 -2.21961 287.198 6.65884L491.651 89.2539C512.116 97.5191 512.116 136.479 491.651 144.747Z"
      stroke="rgba(107, 114, 128, 0.3)"
      strokeWidth="0.5"
    />
    <defs>
      {/* Blue-white soft gradient */}
      <linearGradient
        id={`cube-gradient-${index}`}
        x1="185.298"
        x2="185.298"
        y1="-27.5515"
        y2="206.448"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0%" stopColor="#EBF8FF" stopOpacity="0.75" />
        <stop offset="40%" stopColor="#BEE3F8" stopOpacity="0.8" />
        <stop offset="100%" stopColor="#FFFFFF" stopOpacity="0.9" />
      </linearGradient>
    </defs>
  </svg>
);

export function CubeLight({
  title,
  descriptionTitle,
  description,
  isActive,
  index,
  onHover,
  onLeave,
  onClick,
}: CubeProps) {
  return (
    <div className="relative flex flex-col items-center">
      <motion.div
        className="relative cursor-pointer"
        onMouseEnter={onHover}
        onMouseLeave={onLeave}
        onClick={onClick}
        style={{
          zIndex: 10 - index,
        }}
        animate={{
          scale: isActive ? 1.05 : 1,
        }}
        transition={{
          duration: 0.3,
          ease: "easeOut",
        }}
      >
        {/* Glow aura behind cube */}
        <div
          className={`absolute inset-0 blur-3xl rounded-2xl transition-all duration-500 ${
            isActive
              ? "bg-cyan-400/20 opacity-30"
              : "bg-cyan-200/20 opacity-40"
          }`}
        />

        {/* SVG Cube */}
        <CubeSvg
          index={index}
          className="w-48 sm:w-64 lg:w-80 h-auto relative"
          style={{
            filter: isActive
              ? "drop-shadow(0 0 15px rgba(34, 211, 238, 0.25)) brightness(1.05)"
              : "drop-shadow(0 0 10px rgba(34, 211, 238, 0.15)) brightness(1)",
            transition: "all 0.4s ease",
          }}
        />

        {/* Title overlay */}
        <div className="absolute inset-0 flex items-center justify-center">
          <h3
            className="text-cyan-900 text-sm lg:text-base font-medium text-center px-4"
            style={{
              textShadow:
                "0 0 15px rgba(255,255,255,0.8), 0 0 25px rgba(34, 211, 238, 0.5)",
            }}
          >
            {title}
          </h3>
        </div>

        {/* Description with arrow line - Desktop */}
        {isActive && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.3 }}
            className="hidden lg:block absolute left-full top-1/2 -translate-y-1/2 z-50"
          >
            {/* Arrow line */}
            <svg
              className="absolute left-0 top-1/2 -translate-y-1/2"
              width="120"
              height="2"
              viewBox="0 0 120 2"
              fill="none"
            >
              <line
                x1="0"
                y1="1"
                x2="120"
                y2="1"
                stroke="rgba(34, 211, 238, 0.6)"
                strokeWidth="1"
                opacity="0.8"
              />
            </svg>

            {/* Description text */}
            <div className="ml-32 w-80">
              <h4 className="text-black text-base font-semibold mb-2 drop-shadow-[0_0_6px_rgba(255,255,255,0.6)]">
                {descriptionTitle}
              </h4>
              <p className="text-gray-800 text-sm leading-relaxed font-light drop-shadow-[0_0_4px_rgba(255,255,255,0.4)]">
                {description}
              </p>
            </div>
          </motion.div>
        )}
      </motion.div>
    </div>
  );
}