"use client";

import { motion } from "framer-motion";

export const HELIO_GREEN = "#f59e0b"; // Golden Amber accent

export function CloudHelioMark({
  size = 40,
  className = "",
  animate = false,
  rotate360 = false,
  is3D = true,
}: {
  size?: number;
  className?: string;
  animate?: boolean;
  rotate360?: boolean;
  is3D?: boolean;
}) {
  const width = size * 0.8;

  const markContent = (
    <div
      className={`relative inline-flex items-center justify-center shrink-0 ${className}`}
      style={{
        width,
        height: size,
        perspective: 1200,
        transformStyle: "preserve-3d",
      }}
    >
      {/* Golden Solar Aura Glow */}
      <div
        className="pointer-events-none absolute -inset-2 rounded-full opacity-70 blur-lg"
        style={{
          background: "radial-gradient(circle, rgba(245,158,11,0.7) 0%, rgba(251,191,36,0.3) 55%, transparent 80%)",
          transform: "translateZ(-15px)",
        }}
      />

      {/* Main 3D Golden Eagle Symbol */}
      <img
        src="/symbol.png"
        alt="3D Solar Eagle Symbol"
        className="relative z-10 h-full w-full object-contain filter drop-shadow-[0_0_18px_rgba(245,158,11,0.7)]"
        style={{
          transform: is3D ? "translateZ(30px)" : "none",
          transformStyle: "preserve-3d",
        }}
      />

      {/* 3D Metallic Specular Highlight Sheen */}
      <div
        className="pointer-events-none absolute inset-0 rounded-full opacity-30 mix-blend-overlay"
        style={{
          background: "linear-gradient(135deg, rgba(255,255,255,0.9) 0%, transparent 50%, rgba(0,0,0,0.5) 100%)",
          transform: "translateZ(35px)",
        }}
      />
    </div>
  );

  return (
    <motion.div
      className="inline-block cursor-pointer"
      whileHover={{ scale: 1.1, rotateX: 15, rotateY: -15 }}
      animate={
        rotate360
          ? {
              rotateY: [0, 360],
              rotateX: [0, 8, 0, -8, 0],
              scale: animate ? [1, 1.08, 1] : 1,
            }
          : {
              rotateX: [0, 6, 0, -6, 0],
              rotateY: [0, -8, 0, 8, 0],
              scale: animate ? [1, 1.06, 1] : 1,
            }
      }
      transition={{
        rotateY: rotate360
          ? { duration: 8, repeat: Infinity, ease: "linear" }
          : { duration: 6, repeat: Infinity, ease: "easeInOut" },
        rotateX: { duration: 5, repeat: Infinity, ease: "easeInOut" },
        scale: { duration: 3, repeat: Infinity, ease: "easeInOut" },
      }}
      style={{ perspective: 1000, transformStyle: "preserve-3d" }}
    >
      {markContent}
    </motion.div>
  );
}

/**
 * Brand Logo component — Golden Eagle Emblem paired with CloudHelio wordmark.
 */
export default function CloudHelioLogo({
  size = 40,
  tone = "dark",
  stacked = false,
  tagline = false,
  showText = true,
  className = "",
  animateMark = false,
  rotate360 = false,
}: {
  size?: number;
  tone?: "dark" | "light";
  stacked?: boolean;
  tagline?: boolean;
  showText?: boolean;
  className?: string;
  animateMark?: boolean;
  rotate360?: boolean;
}) {
  const cloudText = tone === "light" ? "text-white" : "text-zinc-950";

  return (
    <span
      className={`inline-flex shrink-0 items-center justify-center ${className}`}
    >
      <CloudHelioMark size={size} animate={animateMark} rotate360={rotate360} />
      
      {showText && (
        <span className={stacked ? "flex flex-col items-center ml-3" : "flex flex-col ml-3"}>
          <span
            className={`leading-none font-bold tracking-tight whitespace-nowrap transition-colors duration-500 ${cloudText}`}
            style={{ fontSize: stacked ? size * 0.42 : size * 0.46 }}
          >
            Cloud<span className="text-amber-500">Helio</span>
          </span>

          {tagline && (
            <span
              className="mt-2.5 flex items-center gap-2.5 font-mono font-bold tracking-[0.2em] whitespace-nowrap uppercase drop-shadow-[0_0_12px_rgba(245,158,11,0.6)]"
              style={{
                fontSize: Math.max(9, size * 0.16),
                color: tone === "light" ? "#fde68a" : "#d97706",
              }}
            >
              <span
                className="h-px w-6"
                style={{ background: tone === "light" ? "#fde68a" : "#d97706", opacity: 0.8 }}
              />
              Clean energy. Clean impact.
              <span
                className="h-px w-6"
                style={{ background: tone === "light" ? "#fde68a" : "#d97706", opacity: 0.8 }}
              />
            </span>
          )}
        </span>
      )}
    </span>
  );
}