"use client"

import dynamic from "next/dynamic"

import { cn } from "@/lib/utils"

const MeshGradient = dynamic(
  () => import("@paper-design/shaders-react").then((mod) => mod.MeshGradient),
  { ssr: false }
)
const DotOrbit = dynamic(
  () => import("@paper-design/shaders-react").then((mod) => mod.DotOrbit),
  { ssr: false }
)

function ShaderVisual() {
  return (
    <div className="absolute inset-0">
      <MeshGradient className="absolute inset-0" colors={["#020202", "#04131f", "#062534", "#0b3947"]} speed={0.8} />
      <div className="absolute inset-0 opacity-70">
        <DotOrbit
          className="h-full w-full"
          colors={["#0f172a", "#155e75", "#22d3ee"]}
          colorBack="#020617"
          speed={1.4}
          size={0.9}
          sizeRange={0.4}
          spreading={1.0}
          stepsPerColor={3}
        />
      </div>
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute left-1/4 top-1/3 h-24 w-24 rounded-full bg-cyan-300/10 blur-3xl animate-pulse" />
        <div
          className="absolute right-1/4 bottom-1/3 h-20 w-20 rounded-full bg-sky-500/15 blur-2xl animate-pulse"
          style={{ animationDelay: "1s" }}
        />
        <div
          className="absolute right-1/3 top-1/2 h-16 w-16 rounded-full bg-white/10 blur-xl animate-pulse"
          style={{ animationDelay: "0.5s" }}
        />
      </div>
    </div>
  )
}

export function BackgroundPaperShaders({ className }: { className?: string }) {
  return (
    <div className={cn("shader-surface relative flex h-full w-full items-center justify-center bg-[#1f3d45]", className)}>
      <div className="absolute h-[780px] w-[780px] -translate-y-6 rounded-full border border-white/10 opacity-30" />
      <div className="absolute h-[640px] w-[640px] -translate-y-4 rounded-full border border-white/15 opacity-60" />
      <div className="relative flex h-[520px] w-[520px] items-center justify-center rounded-full border border-white/20 bg-black/85 shadow-[0_0_160px_rgba(0,0,0,0.5)]">
        <div className="absolute inset-6 rounded-full border border-white/15" />
        <div className="relative h-[420px] w-[420px] overflow-hidden rounded-full">
          <ShaderVisual />
          <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center px-10 text-center text-white">
            <div className="text-sm uppercase tracking-[0.32em] text-white/50">Sistema de Chamados</div>
            <h2 className="mt-4 text-xl font-semibold md:text-2xl">Atendimento moderno e colaborativo</h2>
            <p className="mt-3 text-sm text-white/70">
              Tenha visão unificada de todos os canais, monitore SLAs em tempo real e mantenha os clientes informados
              com atualizações automáticas.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default BackgroundPaperShaders
