"use client";
import React from "react";

function MainComponent() {
  const [hoveredButton, setHoveredButton] = React.useState(null);
  const [navigationError, setNavigationError] = React.useState(null);

  const handleNavigation = (url, featureName) => {
    try {
      setNavigationError(null);
      // Check if the URL is valid
      if (!url || typeof url !== "string") {
        throw new Error(`Invalid URL for ${featureName}`);
      }

      // Try to navigate
      window.location.href = url;

      // Set a timeout to catch navigation failures
      setTimeout(() => {
        // If we're still on the same page after 3 seconds, navigation might have failed
        if (window.location.pathname === "/") {
          setNavigationError(
            `Unable to navigate to ${featureName}. Please try again.`
          );
        }
      }, 3000);
    } catch (error) {
      console.error(`Navigation error for ${featureName}:`, error);
      setNavigationError(
        `Failed to open ${featureName}. Please try again or check your connection.`
      );
    }
  };

  const navigateToJasperito = () => {
    handleNavigation("/jasperito-101", "Jasperito101 AI");
  };

  const features = [
    {
      id: "jasperito",
      title: "Jasperito101 AI",
      subtitle: "Elite AI Assistant - Unlimited Daily Use",
      description:
        "Your clever digital companion with swagger. Get help with anything from Year 1 to PhD level - math, science, history, coding, creative writing, and more. No limits, no caps, just pure AI power.",
      icon: "🤖",
      action: navigateToJasperito,
      available: true,
    },
    {
      id: "image-generator",
      title: "Jasperito101 Image Generator",
      subtitle: "Unlimited Visual Creation",
      description:
        "Turn any wild idea into stunning visuals. From 'purple elephant on Mars' to professional logos - unlimited generations, zero restrictions, pure creative freedom.",
      icon: "🎨",
      action: () => handleNavigation("/image-generator", "Image Generator"),
      available: true,
    },
    {
      id: "translator",
      title: "Jasperito101 Language Translator",
      subtitle: "Smart Cultural Translation",
      description:
        "Translate with style and context intact. Keeps slang, tone, and cultural nuances perfect. 13+ languages, unlimited translations, native-level accuracy.",
      icon: "🌍",
      action: () => handleNavigation("/translator", "Language Translator"),
      available: true,
    },
  ];

  return (
    <div
      className="min-h-screen font-roboto"
      style={{
        background:
          "linear-gradient(135deg, #1a0000 0%, #330000 25%, #000000 75%, #1a0000 100%)",
      }}
    >
      {/* Navigation Error Banner */}
      {navigationError && (
        <div className="fixed top-0 left-0 right-0 z-50 bg-red-600 text-white px-4 py-3 text-center">
          <div className="flex items-center justify-between max-w-6xl mx-auto">
            <span>{navigationError}</span>
            <button
              onClick={() => setNavigationError(null)}
              className="text-white hover:text-red-200 ml-4 text-xl font-bold"
            >
              ×
            </button>
          </div>
        </div>
      )}

      {/* Header */}
      <div
        className="relative overflow-hidden"
        style={{
          background:
            "linear-gradient(90deg, #cc0000 0%, #000000 50%, #cc0000 100%)",
          marginTop: navigationError ? "60px" : "0",
        }}
      >
        <div
          className="absolute inset-0 opacity-10"
          style={{
            backgroundImage:
              "radial-gradient(circle at 25% 25%, #ff0000 0%, transparent 50%), radial-gradient(circle at 75% 75%, #ff0000 0%, transparent 50%)",
          }}
        ></div>
        <div className="relative z-10 text-center py-16 px-4">
          <h1 className="text-5xl md:text-7xl font-bold text-white mb-4 tracking-tight">
            Welcome to <span className="text-red-400">Jasperito101</span>
          </h1>
          <p className="text-xl md:text-2xl text-red-100 mb-2 font-light">
            Your AI-Powered Digital Toolkit
          </p>
          <p className="text-lg text-red-200 opacity-90 max-w-2xl mx-auto">
            Explore powerful AI tools designed to enhance your learning,
            creativity, and communication
          </p>
        </div>
      </div>

      {/* Main Content */}
      <div className="max-w-6xl mx-auto px-4 py-16">
        {/* Features Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature) => (
            <div
              key={feature.id}
              className="relative group cursor-pointer transform transition-all duration-300 hover:scale-105"
              onMouseEnter={() => setHoveredButton(feature.id)}
              onMouseLeave={() => setHoveredButton(null)}
              onClick={feature.action}
            >
              {/* Card Background */}
              <div
                className="relative overflow-hidden rounded-2xl p-8 h-80 flex flex-col justify-between border-2 transition-all duration-300"
                style={{
                  background:
                    hoveredButton === feature.id
                      ? "linear-gradient(135deg, #cc0000 0%, #990000 50%, #000000 100%)"
                      : "linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(51,0,0,0.6) 50%, rgba(0,0,0,0.9) 100%)",
                  borderColor:
                    hoveredButton === feature.id ? "#ff0000" : "#cc0000",
                  boxShadow:
                    hoveredButton === feature.id
                      ? "0 20px 40px rgba(204,0,0,0.3), 0 0 20px rgba(255,0,0,0.2)"
                      : "0 10px 20px rgba(0,0,0,0.3)",
                }}
              >
                {/* Animated Background Pattern */}
                <div
                  className="absolute inset-0 opacity-20 transition-opacity duration-300"
                  style={{
                    backgroundImage:
                      "radial-gradient(circle at 20% 80%, #ff0000 0%, transparent 50%), radial-gradient(circle at 80% 20%, #cc0000 0%, transparent 50%)",
                    opacity: hoveredButton === feature.id ? 0.3 : 0.1,
                  }}
                ></div>

                {/* Content */}
                <div className="relative z-10">
                  <div className="text-6xl mb-4 transform transition-transform duration-300 group-hover:scale-110">
                    {feature.icon}
                  </div>
                  <h3 className="text-2xl font-bold text-white mb-2">
                    {feature.title}
                  </h3>
                  <p className="text-red-300 font-medium mb-3">
                    {feature.subtitle}
                  </p>
                  <p className="text-red-100 text-sm leading-relaxed">
                    {feature.description}
                  </p>
                </div>

                {/* Status Badge */}
                <div className="relative z-10 flex justify-between items-center">
                  <div
                    className={`px-3 py-1 rounded-full text-xs font-bold ${
                      feature.available
                        ? "bg-green-600 text-white"
                        : "bg-yellow-600 text-white"
                    }`}
                  >
                    {feature.available ? "Available Now" : "Coming Soon"}
                  </div>
                  <div className="text-white opacity-70 transform transition-transform duration-300 group-hover:translate-x-2">
                    →
                  </div>
                </div>

                {/* Hover Glow Effect */}
                <div
                  className="absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-300 pointer-events-none"
                  style={{
                    background:
                      "linear-gradient(135deg, rgba(255,0,0,0.1) 0%, rgba(204,0,0,0.05) 100%)",
                    opacity: hoveredButton === feature.id ? 1 : 0,
                  }}
                ></div>
              </div>
            </div>
          ))}
        </div>

        {/* Bottom Section */}
        <div className="text-center mt-16 px-4">
          <div
            className="inline-block p-8 rounded-2xl border-2 border-red-800"
            style={{
              background:
                "linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(51,0,0,0.4) 100%)",
            }}
          >
            <h2 className="text-3xl font-bold text-white mb-4">
              Ready to Get Started?
            </h2>
            <p className="text-red-200 text-lg mb-6 max-w-2xl">
              Choose any tool above to begin your AI-powered journey. Each tool
              is designed to make your tasks easier, faster, and more efficient.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <div className="text-red-300 text-sm">
                ✨ Powered by Advanced AI Technology
              </div>
              <div className="text-red-300 text-sm">
                🚀 Fast & Reliable Performance
              </div>
              <div className="text-red-300 text-sm">🔒 Secure & Private</div>
            </div>
          </div>
        </div>
      </div>

      <style jsx global>{`
        @keyframes pulse-glow {
          0%, 100% { 
            box-shadow: 0 0 20px rgba(204,0,0,0.3);
          }
          50% { 
            box-shadow: 0 0 30px rgba(255,0,0,0.5);
          }
        }
        
        .group:hover .animate-pulse-glow {
          animation: pulse-glow 2s ease-in-out infinite;
        }
        
        body {
          overflow-x: hidden;
        }
        
        * {
          scrollbar-width: thin;
          scrollbar-color: #cc0000 rgba(0,0,0,0.3);
        }
        
        *::-webkit-scrollbar {
          width: 6px;
        }
        
        *::-webkit-scrollbar-track {
          background: rgba(0,0,0,0.3);
        }
        
        *::-webkit-scrollbar-thumb {
          background: #cc0000;
          border-radius: 3px;
        }
        
        *::-webkit-scrollbar-thumb:hover {
          background: #ff0000;
        }
      `}</style>
    </div>
  );
}

export default MainComponent;