import { useState, useEffect } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
import { useNavigate } from 'react-router-dom';
import { HeroCarousel } from './HomePage/HeroCarousel';
import { FeaturesGrid } from './HomePage/FeaturesGrid';
import { motion } from 'framer-motion';

export const HomePage = () => {
  const { loginWithRedirect, isAuthenticated } = useAuth0();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  const navigate = useNavigate();

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 100);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const handleAuthAction = () => {
    if (isAuthenticated) {
      navigate('/garage');
      return;
    }

    loginWithRedirect({ appState: { returnTo: '/garage' } });
  };

  const handleSignup = () => {
    navigate('/signup');
  };

  return (
    <div className="min-h-screen bg-nero text-avus">
      {/* Navigation Bar */}
      <nav className={`fixed top-0 left-0 right-0 z-50 transition-colors duration-300 ${isScrolled ? 'bg-nero/95 backdrop-blur-sm' : 'bg-transparent'}`}>
        <div className="w-full px-4 md:px-8 lg:px-12">
          <div className="flex justify-between items-center h-16">
            {/* Logo */}
            <div className="flex-shrink-0">
              <a href="#home" className="flex items-center">
                <img
                  src="/images/logos/motovaultpro-title-slogan.png"
                  alt="MotoVaultPro - Precision Vehicle Management"
                  className="h-8 md:h-10 w-auto"
                />
              </a>
            </div>

            {/* Desktop Menu */}
            <div className="hidden md:flex items-center space-x-8">
              <a href="#home" className="text-white/75 hover:text-white transition-colors">
                Home
              </a>
              <a
                href="#features"
                className="text-white/75 hover:text-white transition-colors"
              >
                Features
              </a>
              <a href="#about" className="text-white/75 hover:text-white transition-colors">
                About
              </a>
              <button
                onClick={handleSignup}
                className="border border-primary-500/90 text-primary-500 hover:bg-primary-500/10 hover:border-primary-500 font-semibold py-2 px-6 rounded-lg transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary-500/50"
              >
                Sign Up
              </button>
              <button
                onClick={handleAuthAction}
                className="bg-primary-500 hover:bg-primary-600 text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-300 shadow-lg shadow-black/30 focus:outline-none focus:ring-2 focus:ring-primary-500/50"
              >
                Login
              </button>
            </div>

            {/* Mobile Menu Button */}
            <div className="md:hidden">
              <button
                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                className="text-white/80 hover:text-white focus:outline-none"
              >
                <svg
                  className="h-6 w-6"
                  fill="none"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  {mobileMenuOpen ? (
                    <path d="M6 18L18 6M6 6l12 12" />
                  ) : (
                    <path d="M4 6h16M4 12h16M4 18h16" />
                  )}
                </svg>
              </button>
            </div>
          </div>

          {/* Mobile Menu */}
          {mobileMenuOpen && (
            <motion.div
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: 'auto' }}
              exit={{ opacity: 0, height: 0 }}
              className="md:hidden py-4 space-y-3 bg-nero/95 backdrop-blur-sm border-t border-white/10"
            >
              <a
                href="#home"
                className="block text-white/75 hover:text-white transition-colors py-2"
              >
                Home
              </a>
              <a
                href="#features"
                className="block text-white/75 hover:text-white transition-colors py-2"
              >
                Features
              </a>
              <a
                href="#about"
                className="block text-white/75 hover:text-white transition-colors py-2"
              >
                About
              </a>
              <button
                onClick={handleSignup}
                className="w-full border border-primary-500/90 text-primary-500 hover:bg-primary-500/10 font-semibold py-2 px-6 rounded-lg transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary-500/50"
              >
                Sign Up
              </button>
              <button
                onClick={handleAuthAction}
                className="w-full bg-primary-500 hover:bg-primary-600 text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary-500/50"
              >
                Login
              </button>
            </motion.div>
          )}
        </div>
      </nav>

      {/* Hero Carousel */}
      <section id="home">
        <HeroCarousel onGetStarted={handleAuthAction} />
      </section>

      {/* Welcome Section */}
      <section className="py-16 px-4 md:px-8 bg-[#1D1A18] border-t border-white/5">
        <div className="max-w-4xl mx-auto text-center">
          {/* Full Logo */}
          <div className="mb-8">
            <img
              src="/images/logos/motovaultpro-logo-title.png"
              alt="MotoVaultPro - Precision Vehicle Management"
              className="w-[280px] sm:w-[380px] md:w-[520px] lg:w-[620px] max-w-[90vw] h-auto mx-auto"
              loading="eager"
            />
          </div>
          <p className="text-lg text-titanio leading-relaxed mb-8">
            We are pleased to provide comprehensive vehicle management solutions including Vehicle
            Tracking, Fuel Log Management, Maintenance Records, Document Storage, Service Station
            Locations, and detailed Analytics for all your vehicles. A combination of these features
            can create a perfect management system for your fleet. Based on your specific needs, our
            platform will help you determine the best approach to managing your vehicles.
          </p>
          <p className="text-lg text-titanio leading-relaxed mb-8">
            Do not hesitate to reach out for assistance in creating a custom workflow that best fits
            your needs.
          </p>
          <button
            onClick={handleAuthAction}
            className="bg-primary-500 hover:bg-primary-600 text-white font-semibold py-3 px-8 rounded-lg transition-colors duration-300 shadow-lg shadow-black/30 focus:outline-none focus:ring-2 focus:ring-primary-500/50"
          >
            Get Started
          </button>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-16 px-4 md:px-8 bg-nero border-t border-white/5">
        <div className="max-w-6xl mx-auto">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <h3 className="text-sm font-semibold text-primary-500 uppercase tracking-wide mb-4">
                About Us
              </h3>
              <h2 className="text-3xl md:text-4xl font-bold text-avus mb-6">
                Overall, our goal is to meet each individual&apos;s needs with quality, passion, and
                professionalism.
              </h2>
              <p className="text-lg text-titanio leading-relaxed mb-6">
                Most importantly, we treat each and every vehicle as if it were our own and strive to
                achieve perfection in vehicle management. If you are unsure of what you need for your
                vehicles, we are happy to help talk you through the best options for comprehensive
                tracking.
              </p>
              <p className="text-lg text-titanio leading-relaxed">
                We are proud to use the finest technology and best practices to provide quality and
                satisfaction for our users.
              </p>
            </div>
            <div className="flex justify-center">
              <div className="w-64 h-64 bg-primary-500 rounded-lg border border-white/10 flex items-center justify-center shadow-lg shadow-black/30">
                <div className="text-center text-white p-8">
                  <svg
                    className="w-32 h-32 mx-auto mb-4"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
                    <path
                      fillRule="evenodd"
                      d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z"
                      clipRule="evenodd"
                    />
                  </svg>
                  <p className="text-xl font-bold">Trusted Platform</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features Grid */}
      <section id="features">
        <FeaturesGrid />
      </section>

      {/* Bottom CTA */}
      <section className="py-16 px-4 md:px-8 bg-gradient-to-r from-primary-700 via-primary-500 to-primary-700 text-white border-t border-white/10">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-2xl md:text-3xl font-bold mb-6">
            We are a cloud-based platform accessible anywhere, anytime.
          </h2>
          <button
            onClick={handleAuthAction}
            className="bg-white/95 text-primary-500 hover:bg-white font-semibold py-3 px-8 rounded-lg transition-colors duration-300 shadow-lg shadow-black/30 focus:outline-none focus:ring-2 focus:ring-white/50"
          >
            Get Started
          </button>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-black text-white py-8 px-4 md:px-8 border-t border-white/10">
        <div className="max-w-7xl mx-auto text-center">
          <p className="text-white/50">
            &copy; {new Date().getFullYear()} MotoVaultPro. All rights reserved.
          </p>
        </div>
      </footer>
    </div>
  );
};