"use client"

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

export interface Error404Props {
  /** Rendered width of the illustration */
  size?: number;
  /** Accent colour for the plug, cable and highlights */
  accent?: string;
  /** Headline under the artwork. Pass `null` for artwork only */
  title?: string | null;
  /** Supporting line under the title */
  description?: string | null;
  /** Stops the drift and spark animations */
  still?: boolean;
  className?: string;
}

/**
 * Error404 — a not-found illustration where the zero in "404" breaks into
 * two halves that drift apart, with a spark arcing across the gap.
 * Renders standalone with zero props.
 */
export default function Error404({
  size = 300,
  accent = "#7c3aed",
  title = "Page not found",
  description = "The link may be broken, or the page may have moved.",
  still = false,
  className = "",
}: Error404Props) {
  return (
    <div
      className={className}
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        gap: 6,
        fontFamily: "inherit",
        color: "#18181b",
        textAlign: "center",
      }}
    >
      <svg
        width={size}
        height={size * 0.6}
        viewBox="0 0 300 180"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        role="img"
        aria-label="404 — page not found"
      >
        <defs>
          <linearGradient id="e404-num" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#27272a" />
            <stop offset="100%" stopColor="#52525b" />
          </linearGradient>
        </defs>

        <ellipse cx="150" cy="150" rx="96" ry="9" fill="#18181b" opacity="0.06" />

        {/* The two 4s */}
        <text
          x="52"
          y="120"
          textAnchor="middle"
          fontFamily="inherit"
          fontSize="104"
          fontWeight="700"
          letterSpacing="-0.05em"
          fill="url(#e404-num)"
        >
          4
        </text>
        <text
          x="248"
          y="120"
          textAnchor="middle"
          fontFamily="inherit"
          fontSize="104"
          fontWeight="700"
          letterSpacing="-0.05em"
          fill="url(#e404-num)"
        >
          4
        </text>

        {/* The 0, split into two halves that drift apart like a broken link */}
        <motion.path
          d="M150 42 A40 40 0 0 0 150 122"
          fill="none"
          stroke={accent}
          strokeWidth="15"
          strokeLinecap="round"
          animate={still ? undefined : { x: [0, -7, 0] }}
          transition={still ? undefined : { duration: 3.4, ease: "easeInOut", repeat: Infinity }}
        />
        <motion.path
          d="M150 42 A40 40 0 0 1 150 122"
          fill="none"
          stroke={accent}
          strokeWidth="15"
          strokeLinecap="round"
          animate={still ? undefined : { x: [0, 7, 0] }}
          transition={still ? undefined : { duration: 3.4, ease: "easeInOut", repeat: Infinity }}
        />

        {/* Spark arcing across the gap as the halves separate */}
        {!still && (
          <motion.path
            d="M144 62 L154 74 L145 78 L155 90"
            fill="none"
            stroke="#f59e0b"
            strokeWidth="3.5"
            strokeLinecap="round"
            strokeLinejoin="round"
            animate={{ opacity: [0, 0, 1, 0, 0] }}
            transition={{ duration: 3.4, repeat: Infinity, times: [0, 0.35, 0.5, 0.62, 1] }}
          />
        )}
      </svg>

      {title && (
        <span style={{ fontSize: 16, fontWeight: 600, letterSpacing: "-0.01em" }}>{title}</span>
      )}
      {description && (
        <span style={{ fontSize: 13.5, color: "#71717a", maxWidth: 300, lineHeight: 1.55 }}>
          {description}
        </span>
      )}
    </div>
  );
}
Error 404
