import { Card, CardContent } from "@/components/ui/card";
import { AlertCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import go4LogoPath from "@assets/go4_1756394900352.png";

export default function NotFound() {
  return (
    <div className="min-h-screen bunny-dark static-triangles">
      {/* Header - same as other pages */}
      <div className="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md relative overflow-hidden">
        {/* Triangle decorations in header */}
        <div className="absolute top-2 right-20 w-0 h-0 border-l-[35px] border-l-transparent border-r-[35px] border-r-transparent border-b-[50px] border-b-blue-400/15 rotate-12"></div>
        <div className="absolute top-3 left-1/3 w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-purple-400/12 -rotate-6"></div>
        <div className="absolute top-1 right-1/2 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[30px] border-b-cyan-400/10 rotate-45"></div>
        
        <div className="triangle-decoration-2 opacity-30" style={{top: '10px', right: '15%'}}></div>
        <div className="triangle-decoration-3 opacity-20" style={{top: '30px', left: '70%'}}></div>
        
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="flex items-center justify-between h-20">
            <div className="flex items-center space-x-4">
              <a href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
                <div className="w-9 h-9 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
                  <div className="w-0 h-0 border-l-[10px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
                </div>
                <h1 className="text-2xl font-bold text-white tracking-wide">go4.video</h1>
              </a>
            </div>
            
            <div className="hidden md:flex items-center space-x-6">
              <nav className="flex space-x-6">
                <a href="/" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-home">
                  Home
                </a>
              </nav>
            </div>
            
            {/* Mobile Menu Button */}
            <Button 
              variant="ghost" 
              className="md:hidden text-bunny-light" 
              onClick={() => window.location.href = '/'}
              data-testid="button-mobile-home-404"
            >
              <Menu className="text-xl" />
            </Button>
          </div>
        </div>
      </div>

      {/* Background logo decorations */}
      <div 
        style={{
          position: 'absolute',
          top: '30%', 
          right: '10%', 
          transform: 'rotate(-18deg)',
          width: 'clamp(200px, 20vw, 400px)',
          height: 'clamp(100px, 10vw, 200px)',
          backgroundImage: `url(${go4LogoPath})`,
          backgroundSize: 'contain',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center',
          pointerEvents: 'none',
          zIndex: 0,
          opacity: 0.15,
          filter: 'blur(1px)'
        }}
      />
      <div 
        style={{
          position: 'absolute',
          top: '70%', 
          left: '8%', 
          transform: 'rotate(22deg)',
          width: 'clamp(150px, 15vw, 300px)',
          height: 'clamp(75px, 7.5vw, 150px)',
          backgroundImage: `url(${go4LogoPath})`,
          backgroundSize: 'contain',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center',
          pointerEvents: 'none',
          zIndex: 0,
          opacity: 0.12,
          filter: 'blur(0.5px)'
        }}
      />
      <div 
        style={{
          position: 'absolute',
          top: '15%', 
          left: '5%', 
          transform: 'rotate(50deg)',
          width: 'clamp(100px, 10vw, 200px)',
          height: 'clamp(50px, 5vw, 100px)',
          backgroundImage: `url(${go4LogoPath})`,
          backgroundSize: 'contain',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center',
          pointerEvents: 'none',
          zIndex: 0,
          opacity: 0.08,
          filter: 'blur(0.5px)'
        }}
      />
      
      {/* 404 Content */}
      <div className="flex items-center justify-center min-h-[60vh] px-4 relative z-10">
        <Card className="w-full max-w-md mx-4 bg-bunny-gray/50 border-white/20">
          <CardContent className="pt-6">
            <div className="flex flex-col items-center text-center space-y-4">
              <AlertCircle className="h-16 w-16 text-red-400" />
              <h1 className="text-2xl font-bold text-white">404 Page Not Found</h1>
              <p className="text-bunny-muted">
                The page you're looking for doesn't exist or has been moved.
              </p>
              <Button
                onClick={() => window.location.href = '/'}
                className="gradient-primary hover:opacity-90 text-white"
              >
                Back to Home
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Footer - same as other pages */}
      <footer className="bunny-gray/50 border-t border-white/10 mt-16 relative overflow-hidden">
        {/* Triangle decorations in footer - manjši in bolje pozicionirani */}
        <div className="absolute top-2 right-10 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[25px] border-b-purple-400/5 rotate-12 z-0"></div>
        <div className="absolute top-1 left-10 w-0 h-0 border-l-[15px] border-l-transparent border-r-[15px] border-r-transparent border-b-[20px] border-b-blue-400/4 -rotate-12 z-0"></div>
        
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative z-10">
          <div className="flex flex-col md:flex-row items-center justify-between">
            <div className="flex items-center space-x-2 mb-4 md:mb-0">
              <div className="w-8 h-8 gradient-primary rounded-lg flex items-center justify-center shadow-md">
                <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-0.5"></div>
              </div>
              <span className="text-lg font-semibold text-white">go4.video</span>
            </div>
            
            <div className="text-sm text-bunny-muted">
              © 2024 go4.video. All rights reserved.
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}