import { useState } 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 navigate = useNavigate();

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

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

  return (
    <div className="min-h-screen bg-white">
      {/* Navigation Bar */}
      <nav className="bg-white shadow-md sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 md:px-8">
          <div className="flex justify-between items-center h-16">
            {/* Logo */}
            <div className="flex-shrink-0">
              <h1 className="text-2xl font-bold text-primary-500">MotoVaultPro</h1>
            </div>

            {/* Desktop Menu */}
            <div className="hidden md:flex items-center space-x-8">
              <a href="#home" className="text-gray-700 hover:text-primary-500 transition-colors">
                Home
              </a>
              <a
                href="#features"
                className="text-gray-700 hover:text-primary-500 transition-colors"
              >
                Features
              </a>
              <a href="#about" className="text-gray-700 hover:text-primary-500 transition-colors">
                About
              </a>
              <button
                onClick={handleAuthAction}
                className="bg-primary-500 hover:bg-primary-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-300"
              >
                Login
              </button>
            </div>

            {/* Mobile Menu Button */}
            <div className="md:hidden">
              <button
                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                className="text-gray-700 hover:text-primary-500 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"
            >
              <a
                href="#home"
                className="block text-gray-700 hover:text-primary-500 transition-colors py-2"
              >
                Home
              </a>
              <a
                href="#features"
                className="block text-gray-700 hover:text-primary-500 transition-colors py-2"
              >
                Features
              </a>
              <a
                href="#about"
                className="block text-gray-700 hover:text-primary-500 transition-colors py-2"
              >
                About
              </a>
              <button
                onClick={handleAuthAction}
                className="w-full bg-primary-500 hover:bg-primary-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-300"
              >
                Login
              </button>
            </motion.div>
          )}
        </div>
      </nav>

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

      {/* Welcome Section */}
      <section className="py-16 px-4 md:px-8 bg-white">
        <div className="max-w-4xl mx-auto text-center">
          <p className="text-primary-500 text-sm font-semibold uppercase tracking-wide mb-4">
            Welcome
          </p>
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
            Thank you for your interest in MotoVaultPro!
          </h2>
          <p className="text-lg text-gray-600 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-gray-600 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-700 text-white font-semibold py-3 px-8 rounded-lg transition-colors duration-300"
          >
            Get Started
          </button>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-16 px-4 md:px-8 bg-gray-100">
        <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-gray-900 mb-6">
                Overall, our goal is to meet each individual&apos;s needs with quality, passion, and
                professionalism.
              </h2>
              <p className="text-lg text-gray-600 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-gray-600 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 flex items-center justify-center">
                <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-primary-500 text-white">
        <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 text-primary-500 hover:bg-gray-100 font-semibold py-3 px-8 rounded-lg transition-colors duration-300"
          >
            Get Started
          </button>
        </div>
      </section>

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