"use client";
import * as React from "react";
import { motion, useAnimationControls } from "motion/react";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";

/* Ported from the company profile site (web/components/Accents.tsx) so the brand behaves the same everywhere. */

const BODY =
  "M280.0 46.0C287.4 46.2 311.9 47.1 323.3 48.3C334.8 49.4 340.1 50.8 348.4 52.8C356.8 54.9 365.9 57.8 373.6 60.8C381.2 63.9 386.9 66.5 394.1 71.1C401.3 75.7 410.8 82.9 416.9 88.2C423.0 93.6 426.2 97.5 430.6 103.1C435.0 108.6 439.8 115.6 443.2 121.3C446.6 127.0 448.5 130.6 451.2 137.3C453.8 144.0 457.1 152.7 459.2 161.3C461.2 169.8 463.0 180.5 463.7 188.7C464.5 196.8 464.3 202.7 463.7 210.3C463.1 218.0 462.0 226.3 460.3 234.3C458.6 242.3 456.5 250.3 453.4 258.3C450.4 266.3 446.2 275.0 442.0 282.3C437.8 289.5 433.5 295.6 428.3 301.7C423.2 307.7 416.9 313.8 411.2 318.8C405.5 323.7 400.6 327.3 394.1 331.3C387.6 335.3 379.6 339.5 372.4 342.7C365.2 346.0 358.1 348.4 350.7 350.7C343.3 353.0 335.7 354.9 327.9 356.4C320.1 358.0 315.2 359.3 303.9 359.9C292.7 360.4 270.8 360.2 260.6 359.9C250.3 359.5 245.5 352.4 242.3 357.6C239.1 362.7 242.5 378.7 241.2 390.7C239.8 402.7 236.8 420.3 234.3 429.5C231.8 438.6 228.8 441.7 226.3 445.5C223.9 449.3 222.3 450.2 219.5 452.3C216.6 454.4 214.7 456.1 209.2 458.0C203.7 459.9 193.6 462.4 186.4 463.7C179.2 465.0 177.1 465.8 165.8 466.0C154.6 466.2 128.7 465.4 119.0 464.9C109.3 464.3 112.8 464.3 107.6 462.6C102.5 460.9 92.8 456.9 88.2 454.6C83.7 452.3 82.9 451.4 80.2 448.9C77.6 446.4 74.5 443.6 72.3 439.8C70.0 435.9 67.7 431.2 66.5 426.1C65.4 420.9 65.0 416.2 65.4 408.9C65.8 401.7 66.5 395.6 68.8 382.7C71.1 369.8 77.4 344.1 79.1 331.3C80.8 318.6 79.9 313.8 79.1 306.2C78.3 298.6 78.3 297.3 74.5 285.7C70.7 274.1 60.6 250.5 56.3 236.6C51.9 222.7 49.4 214.5 48.3 202.4C47.1 190.2 48.1 173.8 49.4 163.6C50.8 153.3 54.4 146.1 56.3 140.7C58.2 135.4 58.6 135.4 60.8 131.6C63.1 127.8 64.3 124.0 70.0 117.9C75.7 111.8 86.7 101.2 95.1 95.1C103.4 89.0 111.8 85.4 120.2 81.4C128.6 77.4 136.2 74.3 145.3 71.1C154.4 67.9 164.3 64.8 175.0 62.0C185.6 59.1 195.3 56.5 209.2 54.0C223.1 51.5 246.7 48.3 258.3 47.1C269.9 46.0 275.2 47.3 278.8 47.1C282.4 47.0 272.5 45.8 280.0 46.0Z";

/** The P mascot. Pupils follow the cursor, blinks every few seconds, wiggles on hover. */
export function LiveLogo({
  size = 40,
  className,
  upsideDown = false,
}: {
  size?: number;
  className?: string;
  /** Hanging upside down (e.g. from the footer's cloud edge). Eye tracking is inverted to match. */
  upsideDown?: boolean;
}) {
  const pupils = React.useRef<SVGGElement>(null);
  const ref = React.useRef<SVGSVGElement>(null);
  const lids = useAnimationControls();
  const clip = React.useId().replace(/:/g, "");

  React.useEffect(() => {
    const move = (e: PointerEvent) => {
      const r = ref.current?.getBoundingClientRect();
      if (!r || !pupils.current) return;
      const flip = upsideDown ? -1 : 1;
      const dx = flip * (e.clientX - (r.left + r.width / 2));
      const dy = flip * (e.clientY - (r.top + r.height / 2));
      const d = Math.hypot(dx, dy) || 1;
      const k = Math.min(1, d / 200);
      pupils.current.setAttribute("transform", `translate(${(dx / d) * 16 * k} ${(dy / d) * 14 * k})`);
    };
    window.addEventListener("pointermove", move);
    const t = setInterval(() => lids.start({ scaleY: [0, 1, 0], transition: { duration: 0.22 } }), 3800);
    return () => {
      window.removeEventListener("pointermove", move);
      clearInterval(t);
    };
  }, [lids, upsideDown]);

  return (
    <motion.svg
      ref={ref}
      viewBox="40 40 432 432"
      width={size}
      height={size}
      className={cn("shrink-0", className)}
      whileHover={{ rotate: [0, -12, 10, -6, 0], scale: 1.15 }}
      transition={{ duration: 0.6 }}
      aria-hidden
    >
      {/* Flip inside the SVG so motion's hover rotation on the element doesn't cancel it. */}
      <g transform={upsideDown ? "rotate(180 256 256)" : undefined}>
      <path fill="var(--coral)" d={BODY} />
      <defs>
        <clipPath id={clip}>
          <ellipse cx="230" cy="197" rx="60" ry="55" transform="rotate(-8 230 197)" />
          <ellipse cx="381" cy="183" rx="39" ry="43" />
        </clipPath>
      </defs>
      <ellipse cx="230" cy="197" rx="60" ry="55" transform="rotate(-8 230 197)" fill="#FFF6EC" />
      <ellipse cx="381" cy="183" rx="39" ry="43" fill="#FFF6EC" />
      <g clipPath={`url(#${clip})`}>
        <g ref={pupils}>
          <ellipse cx="248" cy="196" rx="28" ry="36" fill="#3A1F17" />
          <ellipse cx="388" cy="186" rx="21" ry="33" fill="#3A1F17" />
        </g>
        <motion.rect x="160" y="130" width="280" height="130" fill="var(--coral)" initial={{ scaleY: 0 }} animate={lids} style={{ originY: 0 }} />
      </g>
      <path fill="#3A1F17" d="M296 246 Q322 274 352 244" stroke="#3A1F17" strokeWidth="14" strokeLinecap="round" />
      </g>
    </motion.svg>
  );
}

const rollColors = ["var(--coral)", "var(--blue)", "var(--lime)", "var(--grape)"];

/**
 * Letters roll up in a staggered wave on hover and are replaced by brand-colored copies.
 * Pass `hover` to drive it from a parent (e.g. hovering the whole logo link).
 */
export function RollWordmark({ text, hover, className }: { text: string; hover?: boolean; className?: string }) {
  const controlled = hover !== undefined;
  return (
    <motion.span
      initial="rest"
      animate={controlled ? (hover ? "hover" : "rest") : "rest"}
      whileHover={controlled ? undefined : "hover"}
      className={cn("inline-flex select-none whitespace-pre", className)}
      aria-label={text}
      role="img"
    >
      {text.split("").map((ch, i) => (
        <span key={i} aria-hidden className="relative inline-block overflow-hidden align-bottom leading-[1.1]">
          <motion.span
            className="inline-block"
            variants={{ rest: { y: "0%", rotate: 0 }, hover: { y: "-110%", rotate: -8 } }}
            transition={{ ...springs.squish, delay: i * 0.028 }}
          >
            {ch}
          </motion.span>
          <motion.span
            className="absolute left-0 top-0 inline-block"
            style={{ color: rollColors[i % rollColors.length] }}
            variants={{ rest: { y: "110%", rotate: 8 }, hover: { y: "0%", rotate: 0 } }}
            transition={{ ...springs.squish, damping: 14, delay: i * 0.028 }}
          >
            {ch}
          </motion.span>
        </span>
      ))}
    </motion.span>
  );
}

/** Logo + wordmark lockup. Hovering anywhere on it rolls the wordmark. */
export function BrandMark({ text = "Parlemen UI", size = 36, className }: { text?: string; size?: number; className?: string }) {
  const [hover, setHover] = React.useState(false);
  return (
    <span
      className={cn("inline-flex items-center gap-2 text-lg font-extrabold tracking-tight", className)}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <LiveLogo size={size} />
      <RollWordmark text={text} hover={hover} />
    </span>
  );
}
Installation
