import {
  FaGithub,
  FaLinkedin,
  FaTwitter,
  FaInstagram,
  FaGoogle,
  FaGamepad,
  FaQuora,
  FaMedium,
} from "react-icons/fa";
import "./Hero.css";
import me from "/me.jpg";
import me2 from "/me2.jpg";
import { useTheme } from "../context/ThemeContext";
import { useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
import axios from "axios";
import { getDeviceInfo } from "../utils/deviceDetection";
import { getFeatureFlag } from "../utils/getFlags";
import ResumeDisplayer from "../ui/resumeDisplayer";
// Preload the hero image
const heroImage = new Image();
heroImage.src = me;

const Hero = () => {
  const navigate = useNavigate();
  const [socialLinks, setSocialLinks] = useState({});
  const [display, setDisplay] = useState(false);
  useEffect(() => {
    const sendDeviceInfo = async () => {
      try {
        const deviceInfo = getDeviceInfo();
        const backend =
          import.meta.env.VITE_BACKEND_URL ||
          "https://portfoliobackend-nu.vercel.app";
        console.log("backend", backend, deviceInfo);
        await axios.post(backend, { deviceInfo });
      } catch (error) {
        console.error("Error sending device info:", error);
      }
    };

    // Load social links from JSON
    const loadSocialLinks = async () => {
      try {
        const response = await fetch("/data/about.json");
        const data = await response.json();
        setSocialLinks(data.contact || {});
      } catch (error) {
        console.error("Error loading social links:", error);
      }
    };

    sendDeviceInfo();
    loadSocialLinks();
  }, []);

  // Static content for faster loading
  const heroData = {
    description:
      "I build interactive, AI-powered web products focused on real-world problems—fashion tech, automation, and intelligent systems for software development. Currently, I'm focused on building full-stack applications and enhancing my problem-solving skills.",
  };

  // Social links configuration
  const socialLinksConfig = [
    {
      key: "github",
      icon: <FaGithub />,
      fallback: "https://github.com/adi2687",
    },
    {
      key: "linkedin",
      icon: <FaLinkedin />,
      fallback: "https://www.linkedin.com/in/aditya-kurani",
    },
    {
      key: "twitter",
      icon: <FaTwitter />,
      fallback: "https://x.com/AdityaKurani",
    },
    {
      key: "instagram",
      icon: <FaInstagram />,
      fallback: "https://www.instagram.com/aditya_kurani_26/",
    },
    { key: "quora", icon: <FaQuora />, fallback: null },
    { key: "leetcode", icon: <i className="fas fa-code"></i>, fallback: null },
  ];

  const scrollToSection = (id) => {
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
  };

  const { theme } = useTheme();
  const checkForPic = getFeatureFlag("profilePic");
  return (
    <section id="home" className="hero">
      {/* Background Elements */}
      <div className="grid-background"></div>

      {/* Main Hero Container */}
      <div className="hero-container">
        {/* Hero Content Grid */}
        <div className="hero-content">
          {/* Left Column - Text Content */}
          <div className="hero-text">
            <h1 className="hero-name animate-fadeInUp">
              Aditya Kurani<span className="cursor-blink">_</span>
            </h1>
            <h2 className="hero-title animate-fadeInUp">
              Computer Science Student & Developer
            </h2>
            <p className="hero-description animate-fadeInUp">
              {heroData.description ||
                "I'm a dedicated student at IIIT Nagpur with a strong passion for software development. Currently, I'm focused on building full-stack applications and enhancing my problem-solving skills."}
            </p>

            {/* Call-to-Action Buttons */}
            <div className="hero-cta animate-fadeInUp">
              <button
                onClick={() => scrollToSection("projects")}
                className="btn btn-primary"
              >
                View Projects
                <i className="fas fa-arrow-right"></i>
              </button>
              <button
                onClick={() => scrollToSection("contact")}
                className="btn btn-outline"
              >
                Get In Touch
              </button>
              <button
                className="btn btn-outline"
                onClick={() => {
                  setDisplay((d) => !d);
                }}
              >
                Resume
              </button>
            </div>
            {display ? <ResumeDisplayer /> : null}
            {/* Social Links */}
            <div className="hero-social animate-fadeInUp" id="socialLinks">
              {socialLinksConfig.map((social) => {
                const href = socialLinks[social.key] || social.fallback;
                if (!href) return null;

                return (
                  <a
                    key={social.key}
                    href={href}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="social-link"
                  >
                    {social.icon}
                  </a>
                );
              })}
            </div>
          </div>

          {/* Right Column - Visual Content */}
          <div className="hero-visual">
            <div className="hero-image-wrapper">
              <div
                className={`${theme === "dark" ? "hero-image-border" : "hero-image-border light"}`}
              ></div>
              <img
                src={checkForPic ? me : me2}
                alt="Aditya Kurani"
                className="hero-photo"
                loading="eager"
                fetchpriority="high"
                decoding="async"
                onDoubleClick={() => {
                  navigate("/blog");
                }}
              />
            </div>
          </div>
        </div>

        {/* Scroll Indicator */}
        <div className="scroll-indicator">
          <div className="scroll-mouse">
            <div className="scroll-wheel"></div>
          </div>
          <span className="scroll-text">Scroll</span>
        </div>

        {/* Interactive Game Section */}
        <div className="interactive-game-section animate-fadeInUp">
          <div className="game-card">
            <div className="game-card-header">
              <div className="game-icon">
                <FaGamepad />
              </div>
              <div className="game-title">
                <h3>Interactive Portfolio</h3>
                <p>Experience my work through an Iron Man themed game</p>
              </div>
            </div>

            {/* <div className="game-features">
              <div className="feature-item">
                <FaRocket className="feature-icon" />
                <span>3D Interactive Experience</span>
              </div>
              <div className="feature-item">
                <FaPlay className="feature-icon" />
                <span>Portfolio Showcase</span>
              </div>
            </div> */}

            <a
              href="https://adi2687.github.io/iron_man/"
              target="_blank"
              rel="noopener noreferrer"
              className="game-link-enhanced"
            >
              <span className="game-link-text">
                <FaGamepad className="link-icon" />
                Launch Interactive Game
              </span>
              <div className="game-link-arrow">
                <span>→</span>
              </div>
              <div className="game-link-glow"></div>
            </a>

            <div className="game-preview">
              <div className="preview-text">
                Experience my portfolio like never before
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Hero;