"use client";

/* eslint-disable no-unused-vars */

import * as React from "react";
import { motion } from "framer-motion";
import { IllustrationProps } from "./types";

export const HeroMainIllustration: React.FC<IllustrationProps> = ({
  className = "",
  delay: _delay = 0,
}) => {
  return (
    <svg
      className={className}
      viewBox="0 0 800 700"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      {/* Matrix-style Binary Rain Background */}
      <g className="opacity-[0.08]">
        {Array.from({ length: 20 }).map((_, col) => {
          const colX = 20 + col * 40;
          const speed = 8 + (col % 6);
          const startDelay = col % 5;
          return (
            <motion.g
              key={`rain-col-${col}`}
              initial={{ y: -700 }}
              animate={{ y: 700 }}
              transition={{
                duration: speed,
                repeat: Infinity,
                ease: "linear",
                delay: startDelay,
              }}
            >
              {Array.from({ length: 25 }).map((_, row) => (
                <text
                  key={`${col}-${row}`}
                  x={colX}
                  y={row * 28}
                  className="fill-slate-900 font-mono"
                  style={{ fontSize: 12 }}
                >
                  {(col + row) % 2 === 0 ? "1" : "0"}
                </text>
              ))}
            </motion.g>
          );
        })}
      </g>

      {/* Layer 1: Base Platform */}
      <motion.g
        animate={{ y: [0, 8, 0] }}
        transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }}
      >
        <rect
          x="150"
          y="500"
          width="500"
          height="30"
          rx="4"
          className="fill-slate-100 stroke-slate-300"
          strokeWidth="1"
        />
        <rect
          x="170"
          y="510"
          width="460"
          height="10"
          rx="2"
          className="fill-slate-200"
        />
        {/* Binary on base */}
        <text
          x="180"
          y="518"
          className="fill-slate-400 font-mono"
          style={{ fontSize: 8 }}
        >
          01010101010101010101010101010101010101
        </text>
      </motion.g>

      {/* Layer 2: Server/Database Layer */}
      <motion.g
        animate={{ y: [0, 6, 0] }}
        transition={{
          duration: 5,
          repeat: Infinity,
          ease: "easeInOut",
          delay: 0.3,
        }}
      >
        {/* Left Server Block */}
        <g transform="translate(200, 400)">
          <rect
            x="0"
            y="0"
            width="120"
            height="80"
            rx="6"
            className="fill-white stroke-slate-900"
            strokeWidth="2"
          />
          <rect
            x="10"
            y="10"
            width="100"
            height="15"
            rx="2"
            className="fill-slate-100"
          />
          <rect
            x="10"
            y="30"
            width="80"
            height="10"
            rx="2"
            className="fill-slate-200"
          />
          <rect
            x="10"
            y="45"
            width="60"
            height="10"
            rx="2"
            className="fill-slate-200"
          />
          <circle cx="100" cy="65" r="5" className="fill-slate-900" />
          <text
            x="15"
            y="20"
            className="fill-slate-500 font-mono"
            style={{ fontSize: 8 }}
          >
            SERVER
          </text>
        </g>

        {/* Right Database Block */}
        <g transform="translate(480, 400)">
          <rect
            x="0"
            y="0"
            width="120"
            height="80"
            rx="6"
            className="fill-white stroke-slate-900"
            strokeWidth="2"
          />
          <rect
            x="10"
            y="10"
            width="100"
            height="15"
            rx="2"
            className="fill-slate-100"
          />
          <rect
            x="10"
            y="30"
            width="100"
            height="8"
            rx="2"
            className="fill-slate-200"
          />
          <rect
            x="10"
            y="42"
            width="100"
            height="8"
            rx="2"
            className="fill-slate-200"
          />
          <rect
            x="10"
            y="54"
            width="100"
            height="8"
            rx="2"
            className="fill-slate-200"
          />
          <text
            x="15"
            y="20"
            className="fill-slate-500 font-mono"
            style={{ fontSize: 8 }}
          >
            DATABASE
          </text>
        </g>

        {/* Connection Lines */}
        <motion.path
          d="M 320 440 L 400 440 L 480 440"
          stroke="currentColor"
          strokeWidth="2"
          className="text-slate-400"
          strokeDasharray="6 4"
          animate={{ strokeDashoffset: [0, -20] }}
          transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
        />
      </motion.g>

      {/* Layer 3: Browser/Website */}
      <motion.g
        animate={{ y: [0, 4, 0] }}
        transition={{
          duration: 5,
          repeat: Infinity,
          ease: "easeInOut",
          delay: 0.6,
        }}
      >
        {/* Browser Window */}
        <rect
          x="180"
          y="100"
          width="440"
          height="280"
          rx="8"
          className="fill-white stroke-slate-900"
          strokeWidth="2"
        />

        {/* Browser Chrome */}
        <rect
          x="180"
          y="100"
          width="440"
          height="30"
          rx="8"
          className="fill-slate-900"
        />
        <rect
          x="180"
          y="120"
          width="440"
          height="10"
          className="fill-slate-900"
        />

        {/* Browser Dots */}
        <circle cx="200" cy="115" r="5" className="fill-slate-600" />
        <circle cx="218" cy="115" r="5" className="fill-slate-600" />
        <circle cx="236" cy="115" r="5" className="fill-slate-600" />

        {/* Address Bar */}
        <rect
          x="260"
          y="108"
          width="200"
          height="14"
          rx="3"
          className="fill-slate-700"
        />

        {/* Website Content */}
        <g transform="translate(200, 150)">
          {/* Navigation */}
          <rect x="0" y="0" width="400" height="20" className="fill-slate-50" />
          <rect
            x="10"
            y="5"
            width="60"
            height="10"
            rx="2"
            className="fill-slate-900"
          />
          <rect
            x="280"
            y="5"
            width="30"
            height="10"
            rx="2"
            className="fill-slate-300"
          />
          <rect
            x="320"
            y="5"
            width="30"
            height="10"
            rx="2"
            className="fill-slate-300"
          />
          <rect
            x="360"
            y="5"
            width="30"
            height="10"
            rx="2"
            className="fill-slate-300"
          />

          {/* Hero Section */}
          <rect
            x="0"
            y="30"
            width="400"
            height="100"
            className="fill-slate-100"
          />
          <rect
            x="20"
            y="50"
            width="180"
            height="16"
            rx="2"
            className="fill-slate-900"
          />
          <rect
            x="20"
            y="72"
            width="140"
            height="10"
            rx="2"
            className="fill-slate-400"
          />
          <rect
            x="20"
            y="88"
            width="100"
            height="10"
            rx="2"
            className="fill-slate-400"
          />
          <rect
            x="20"
            y="108"
            width="80"
            height="16"
            rx="4"
            className="fill-slate-900"
          />

          {/* Hero Image Placeholder */}
          <rect
            x="240"
            y="40"
            width="140"
            height="80"
            rx="4"
            className="fill-slate-200"
          />
          <path
            d="M 280 80 L 310 60 L 340 80 L 310 100 Z"
            className="fill-slate-300"
          />

          {/* Cards Section */}
          <g transform="translate(0, 140)">
            <rect
              x="0"
              y="0"
              width="125"
              height="70"
              rx="4"
              className="fill-slate-50 stroke-slate-200"
              strokeWidth="1"
            />
            <rect
              x="10"
              y="10"
              width="105"
              height="30"
              rx="2"
              className="fill-slate-200"
            />
            <rect
              x="10"
              y="48"
              width="80"
              height="8"
              rx="2"
              className="fill-slate-300"
            />

            <rect
              x="137"
              y="0"
              width="125"
              height="70"
              rx="4"
              className="fill-slate-50 stroke-slate-200"
              strokeWidth="1"
            />
            <rect
              x="147"
              y="10"
              width="105"
              height="30"
              rx="2"
              className="fill-slate-200"
            />
            <rect
              x="147"
              y="48"
              width="80"
              height="8"
              rx="2"
              className="fill-slate-300"
            />

            <rect
              x="274"
              y="0"
              width="125"
              height="70"
              rx="4"
              className="fill-slate-50 stroke-slate-200"
              strokeWidth="1"
            />
            <rect
              x="284"
              y="10"
              width="105"
              height="30"
              rx="2"
              className="fill-slate-200"
            />
            <rect
              x="284"
              y="48"
              width="80"
              height="8"
              rx="2"
              className="fill-slate-300"
            />
          </g>
        </g>
      </motion.g>

      {/* Connecting Lines from Browser to Infrastructure */}
      <motion.g>
        <motion.path
          d="M 400 380 L 400 400"
          stroke="currentColor"
          strokeWidth="2"
          className="text-slate-400"
          strokeDasharray="4 4"
          animate={{ strokeDashoffset: [0, -16] }}
          transition={{ duration: 0.8, repeat: Infinity, ease: "linear" }}
        />
        <motion.path
          d="M 260 480 L 260 500"
          stroke="currentColor"
          strokeWidth="2"
          className="text-slate-400"
          strokeDasharray="4 4"
          animate={{ strokeDashoffset: [0, -16] }}
          transition={{ duration: 0.8, repeat: Infinity, ease: "linear" }}
        />
        <motion.path
          d="M 540 480 L 540 500"
          stroke="currentColor"
          strokeWidth="2"
          className="text-slate-400"
          strokeDasharray="4 4"
          animate={{ strokeDashoffset: [0, -16] }}
          transition={{ duration: 0.8, repeat: Infinity, ease: "linear" }}
        />
      </motion.g>
    </svg>
  );
};
