import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { Package, BarChart3, Bell, Shield, LogIn, ArrowRight, CheckCircle, Clipboard, ShoppingCart, Calendar, BellRing, Heart, BookOpen, UtensilsCrossed, ChevronLeft, ChevronRight, Building2, Users, ArrowUp } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext';
import Logo from '../components/Logo';
import image1 from '../assets/image1.jpg';
import image2 from '../assets/image2.jpg';
import image3 from '../assets/image3.jpg';
import image4 from '../assets/image4.jpg';
import image5 from '../assets/image5.jpg';

const Home: React.FC = () => {
  const { user } = useAuth();
  const heroImages = [image1, image2, image3, image4, image5];
  const [currentSlide, setCurrentSlide] = useState(0);

  useEffect(() => {
    if (heroImages.length <= 1) return;

    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % heroImages.length);
    }, 5000);

    return () => clearInterval(timer);
  }, [heroImages.length]);

  const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });

  return (
    <div className="min-h-screen bg-transparent">
      {/* Header */}
      <header className="bg-white/90 backdrop-blur border-b border-light-gray shadow-soft">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-4">
            {/* Logo */}
            <Logo size="md" />
            
            {/* Navigation */}
            <nav className="hidden md:flex items-center space-x-8">
              <a href="#features" className="text-secondary-text hover:text-primary-green transition-colors font-medium">
                Features
              </a>
              <a href="#about" className="text-secondary-text hover:text-primary-green transition-colors font-medium">
                About
              </a>
              {user ? (
                <Link
                  to={user.role === 'admin' ? '/admin-dashboard' : user.role === 'volunteer' ? '/team-dashboard' : '/user-dashboard'}
                  className="primary-cta inline-flex items-center gap-2 text-sm sm:text-base"
                >
                  Dashboard
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              ) : (
                <Link
                  to="/login"
                  className="primary-cta inline-flex items-center gap-2 text-sm sm:text-base"
                >
                  <LogIn className="mr-2 h-4 w-4" />
                  Sign In
                </Link>
              )}
            </nav>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="py-16 sm:py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="glass-card py-8 sm:py-10 px-6 sm:px-10 grid grid-cols-1 lg:grid-cols-5 gap-8 items-center">
            {/* Text side */}
            <div className="text-center lg:text-left lg:col-span-2">
              <h2 className="text-5xl sm:text-6xl font-extrabold text-deep-forest mb-6">
                Pantry Sync
              </h2>
              <p className="text-lg sm:text-xl text-secondary-text max-w-3xl mx-auto lg:mx-0 mb-10">
                A digital platform designed to help schools and universities manage and distribute food assistance efficiently. Empowering institutions to fight food insecurity through smart, accessible technology.
              </p>
              
              {user ? (
                <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start items-center">
                  <Link
                    to={user.role === 'admin' ? '/admin-dashboard' : user.role === 'volunteer' ? '/team-dashboard' : '/user-dashboard'}
                    className="primary-cta inline-flex items-center px-8 py-4 text-lg font-bold hover:-translate-y-0.5"
                  >
                    Go to Dashboard
                    <ArrowRight className="ml-3 h-5 w-5" />
                  </Link>
                  <div className="px-6 py-3 bg-fresh/20 border border-fresh rounded-xl shadow-soft">
                    <p className="text-primary-green font-semibold">
                      ✓ Logged in as {user.fullName || user.email}
                    </p>
                  </div>
                </div>
              ) : (
                <div className="flex justify-center lg:justify-start">
                  <a
                    href="#features"
                    className="inline-flex items-center px-8 py-4 border border-primary-green text-primary-green bg-white rounded-xl hover:bg-card-hover transition-all font-semibold text-lg shadow-soft"
                  >
                    Learn More
                  </a>
                </div>
              )}
            </div>

            {/* Image carousel */}
            <div className="relative w-full h-64 sm:h-80 lg:h-[420px] rounded-2xl overflow-hidden shadow-card lg:col-span-3">
              {heroImages.map((src, index) => (
                <img
                  key={index}
                  src={src}
                  alt={`Pantry Sync hero ${index + 1}`}
                  className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-700 ease-in-out ${
                    index === currentSlide ? 'opacity-100' : 'opacity-0 pointer-events-none'
                  }`}
                />
              ))}

              {/* Gradient overlays for readability */}
              <div className="absolute inset-0 bg-gradient-to-tr from-black/30 via-black/10 to-transparent pointer-events-none" />

              {/* Dots */}
              <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
                {heroImages.map((_, index) => (
                  <button
                    key={index}
                    type="button"
                    onClick={() => setCurrentSlide(index)}
                    className={`h-2.5 rounded-full transition-all ${
                      index === currentSlide ? 'w-6 bg-white' : 'w-2.5 bg-white/50 hover:bg-white/80'
                    }`}
                  />
                ))}
              </div>

              {/* Prev / Next controls */}
              <button
                type="button"
                onClick={() =>
                  setCurrentSlide((prev) => (prev - 1 + heroImages.length) % heroImages.length)
                }
                className="absolute left-3 top-1/2 -translate-y-1/2 bg-black/40 hover:bg-black/60 text-white rounded-full w-10 h-10 flex items-center justify-center transition-colors"
                aria-label="Previous image"
              >
                <ChevronLeft className="h-6 w-6" />
              </button>
              <button
                type="button"
                onClick={() =>
                  setCurrentSlide((prev) => (prev + 1) % heroImages.length)
                }
                className="absolute right-3 top-1/2 -translate-y-1/2 bg-black/40 hover:bg-black/60 text-white rounded-full w-10 h-10 flex items-center justify-center transition-colors"
                aria-label="Next image"
              >
                <ChevronRight className="h-6 w-6" />
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Stats / Trust bar */}
      <section className="py-8 border-y border-light-gray bg-white/60">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-8 text-center">
            <div className="flex flex-col items-center gap-2">
              <div className="w-12 h-12 rounded-full bg-primary-green/15 flex items-center justify-center">
                <Building2 className="h-6 w-6 text-primary-green" />
              </div>
              <p className="text-2xl sm:text-3xl font-bold text-deep-forest">500+</p>
              <p className="text-sm text-secondary-text">Campuses supported</p>
            </div>
            <div className="flex flex-col items-center gap-2">
              <div className="w-12 h-12 rounded-full bg-primary-green/15 flex items-center justify-center">
                <Users className="h-6 w-6 text-primary-green" />
              </div>
              <p className="text-2xl sm:text-3xl font-bold text-deep-forest">50k+</p>
              <p className="text-sm text-secondary-text">Students reached</p>
            </div>
            <div className="flex flex-col items-center gap-2">
              <div className="w-12 h-12 rounded-full bg-primary-green/15 flex items-center justify-center">
                <Package className="h-6 w-6 text-primary-green" />
              </div>
              <p className="text-2xl sm:text-3xl font-bold text-deep-forest">1M+</p>
              <p className="text-sm text-secondary-text">Items distributed</p>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-16 bg-beige/40">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h3 className="text-3xl font-bold text-deep-forest mb-2">How It Works</h3>
            <div className="w-16 h-1 bg-primary-green rounded-full mx-auto mb-4" />
            <p className="text-lg text-secondary-text max-w-2xl mx-auto">
              Supporting both institutions and students with comprehensive tools
            </p>
          </div>
          
          {/* For Institutions */}
          <div className="mb-12">
            <h4 className="text-2xl font-bold text-deep-forest mb-6 text-center">For Institutions</h4>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              <div className="glass-card p-6 hover:shadow-card transition-all">
                <div className="w-14 h-14 bg-primary-green/10 rounded-lg flex items-center justify-center mb-4">
                  <Package className="h-8 w-8 text-primary-green" />
                </div>
                <h5 className="text-lg font-bold text-deep-forest mb-3">Real-Time Inventory</h5>
                <p className="text-secondary-text text-sm">
                  Log and update available supplies in real time with automatic tracking and organization.
                </p>
              </div>

              <div className="glass-card p-6 hover:shadow-card transition-all">
                <div className="w-14 h-14 bg-expiring/10 rounded-lg flex items-center justify-center mb-4">
                  <Bell className="h-8 w-8 text-expiring" />
                </div>
                <h5 className="text-lg font-bold text-deep-forest mb-3">Smart Alerts</h5>
                <p className="text-secondary-text text-sm">
                  Track items running low or expiring soon to reduce waste and maintain stock levels.
                </p>
              </div>

              <div className="glass-card p-6 hover:shadow-card transition-all">
                <div className="w-14 h-14 bg-stable/10 rounded-lg flex items-center justify-center mb-4">
                  <BarChart3 className="h-8 w-8 text-stable" />
                </div>
                <h5 className="text-lg font-bold text-deep-forest mb-3">Analytics & Reports</h5>
                <p className="text-secondary-text text-sm">
                  Generate insights and reports to improve inventory planning and meet student needs.
                </p>
              </div>

              <div className="glass-card p-6 hover:shadow-card transition-all">
                <div className="w-14 h-14 bg-soft-yellow/10 rounded-lg flex items-center justify-center mb-4">
                  <Shield className="h-8 w-8 text-amber-600" />
                </div>
                <h5 className="text-lg font-bold text-deep-forest mb-3">Activity Monitoring</h5>
                <p className="text-secondary-text text-sm">
                  Review student orders and pickup activity to ensure organized operations.
                </p>
              </div>
            </div>
          </div>

          {/* For Students */}
          <div>
            <h4 className="text-2xl font-bold text-deep-forest mb-6 text-center">For Students</h4>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              <div className="glass-card p-6 hover:shadow-card transition-all">
                <div className="w-14 h-14 bg-stable/10 rounded-lg flex items-center justify-center mb-4">
                  <Clipboard className="h-8 w-8 text-stable" />
                </div>
                <h5 className="text-lg font-bold text-deep-forest mb-3">Browse Inventory</h5>
                <p className="text-secondary-text text-sm">
                  View what's currently available in your school's pantry in real-time.
                </p>
              </div>

              <div className="glass-card p-6 hover:shadow-card transition-all">
                <div className="w-14 h-14 bg-primary-green/10 rounded-lg flex items-center justify-center mb-4">
                  <ShoppingCart className="h-8 w-8 text-primary-green" />
                </div>
                <h5 className="text-lg font-bold text-deep-forest mb-3">Reserve Items</h5>
                <p className="text-secondary-text text-sm">
                  Reserve the items you need before visiting the pantry location.
                </p>
              </div>

              <div className="glass-card p-6 hover:shadow-card transition-all">
                <div className="w-14 h-14 bg-soft-yellow/10 rounded-lg flex items-center justify-center mb-4">
                  <Calendar className="h-8 w-8 text-amber-600" />
                </div>
                <h5 className="text-lg font-bold text-deep-forest mb-3">Schedule Pickup</h5>
                <p className="text-secondary-text text-sm">
                  Choose a convenient pickup time that works with your class schedule.
                </p>
              </div>

              <div className="glass-card p-6 hover:shadow-card transition-all">
                <div className="w-14 h-14 bg-expiring/10 rounded-lg flex items-center justify-center mb-4">
                  <BellRing className="h-8 w-8 text-expiring" />
                </div>
                <h5 className="text-lg font-bold text-deep-forest mb-3">Get Notifications</h5>
                <p className="text-secondary-text text-sm">
                  Receive updates when new supplies are added or items are about to expire.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Mission Section */}
      <section className="py-16">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="relative rounded-2xl border border-light-gray bg-white p-8 sm:p-10 shadow-card overflow-hidden">
            {/* Soft gradient accent in corner */}
            <div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-bl from-primary-green/10 to-transparent rounded-full -translate-y-1/2 translate-x-1/2 pointer-events-none" />
            <div className="absolute bottom-0 left-0 w-48 h-48 bg-gradient-to-tr from-fresh/10 to-transparent rounded-full translate-y-1/2 -translate-x-1/2 pointer-events-none" />

            <div className="relative">
              <span className="inline-block px-3 py-1 rounded-full bg-primary-green/15 text-primary-green text-sm font-semibold mb-6">
                Our Mission
              </span>
              <blockquote className="border-l-4 border-primary-green pl-6 mb-8">
                <p className="text-2xl sm:text-3xl font-bold text-deep-forest leading-snug">
                  No student should have to choose between studying and eating.
                </p>
              </blockquote>
              <p className="text-secondary-text leading-relaxed mb-8 max-w-2xl">
                By bridging technology and compassion, our platform helps schools build stronger support systems—so food assistance is <strong className="text-primary-text">easy</strong>, <strong className="text-primary-text">respectful</strong>, and <strong className="text-primary-text">sustainable</strong>.
              </p>
              <ul className="space-y-3 mb-8">
                <li className="flex items-start gap-3 text-secondary-text">
                  <CheckCircle className="h-5 w-5 text-primary-green flex-shrink-0 mt-0.5" />
                  <span>Students access campus food resources simply and with dignity.</span>
                </li>
                <li className="flex items-start gap-3 text-secondary-text">
                  <CheckCircle className="h-5 w-5 text-primary-green flex-shrink-0 mt-0.5" />
                  <span>Administrators get simple tools to track supplies, reduce waste, and serve their communities.</span>
                </li>
              </ul>
              <div className="flex flex-wrap gap-3">
                <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-green/10 text-primary-green font-medium text-sm">
                  <BookOpen className="h-4 w-4" /> Study
                </span>
                <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-green/10 text-primary-green font-medium text-sm">
                  <UtensilsCrossed className="h-4 w-4" /> Eat
                </span>
                <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-green/10 text-primary-green font-medium text-sm">
                  <Heart className="h-4 w-4" /> Thrive
                </span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-16 bg-gradient-to-br from-primary-green to-deep-forest">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h3 className="text-4xl font-bold text-white mb-6">
              You Get
            </h3>
            <p className="text-light-green text-lg max-w-2xl mx-auto">
              Everything your institution needs to run an efficient campus pantry
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl mx-auto mb-12">
            <div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-6">
              <div className="flex items-start space-x-4">
                <CheckCircle className="h-8 w-8 text-fresh mt-1 flex-shrink-0" />
                <div>
                  <h4 className="text-xl font-semibold text-white mb-2">Real-Time Inventory Tracking</h4>
                  <p className="text-light-green">
                    Monitor supplies with automatic low-stock alerts and expiration tracking to minimize waste.
                  </p>
                </div>
              </div>
            </div>

            <div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-6">
              <div className="flex items-start space-x-4">
                <CheckCircle className="h-8 w-8 text-fresh mt-1 flex-shrink-0" />
                <div>
                  <h4 className="text-xl font-semibold text-white mb-2">Student Reservation System</h4>
                  <p className="text-light-green">
                    Students can browse, reserve items, and schedule pickups that fit their class schedules.
                  </p>
                </div>
              </div>
            </div>

            <div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-6">
              <div className="flex items-start space-x-4">
                <CheckCircle className="h-8 w-8 text-fresh mt-1 flex-shrink-0" />
                <div>
                  <h4 className="text-xl font-semibold text-white mb-2">Admin Dashboards</h4>
                  <p className="text-light-green">
                    Comprehensive analytics and reports help administrators understand and meet student needs.
                  </p>
                </div>
              </div>
            </div>

            <div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-6">
              <div className="flex items-start space-x-4">
                <CheckCircle className="h-8 w-8 text-fresh mt-1 flex-shrink-0" />
                <div>
                  <h4 className="text-xl font-semibold text-white mb-2">AI-Powered Insights</h4>
                  <p className="text-light-green">
                    Vanna AI data assistant provides quick insights for smarter inventory planning.
                  </p>
                </div>
              </div>
            </div>

            <div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-6">
              <div className="flex items-start space-x-4">
                <CheckCircle className="h-8 w-8 text-fresh mt-1 flex-shrink-0" />
                <div>
                  <h4 className="text-xl font-semibold text-white mb-2">Multi-Institution Support</h4>
                  <p className="text-light-green">
                    Each school manages its own pantry space independently with secure access controls.
                  </p>
                </div>
              </div>
            </div>

            <div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-6">
              <div className="flex items-start space-x-4">
                <CheckCircle className="h-8 w-8 text-fresh mt-1 flex-shrink-0" />
                <div>
                  <h4 className="text-xl font-semibold text-white mb-2">Privacy & Dignity</h4>
                  <p className="text-light-green">
                    Designed to provide food assistance with respect, privacy, and human-centered care.
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-8 max-w-3xl mx-auto">
            <h4 className="text-2xl font-bold text-white mb-6 text-center">Our Vision</h4>
            <p className="text-light-green text-center text-lg">
              To connect every campus pantry under one system that values transparency, community, and care making food assistance more efficient, fair, and human-centered.
            </p>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-white border-t border-light-gray">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            {/* Logo & Description */}
            <div className="col-span-1 md:col-span-2">
              <div className="flex items-center space-x-3 mb-4">
                <Logo size="sm" />
                <p className="text-xs text-secondary-text mt-1">
                  Supporting Student Food Security
                </p>
              </div>
              <p className="text-secondary-text text-sm mb-4">
                A digital platform helping schools and universities manage and distribute food assistance efficiently. Empowering institutions to fight student food insecurity through smart, accessible technology.
              </p>
              <button
                type="button"
                onClick={scrollToTop}
                className="inline-flex items-center gap-2 text-sm font-medium text-primary-green hover:text-deep-forest transition-colors"
              >
                <ArrowUp className="h-4 w-4" /> Back to top
              </button>
              <p className="text-xs text-secondary-text mt-4">
                © 2025 Pantry Sync. All rights reserved.
              </p>
            </div>
            
            {/* Quick Links */}
            <div>
              <h5 className="text-deep-forest font-semibold mb-4">Quick Links</h5>
              <ul className="space-y-2">
                <li>
                  <a href="#features" className="text-secondary-text hover:text-primary-green transition-colors text-sm">
                    Features
                  </a>
                </li>
                <li>
                  <a href="#about" className="text-secondary-text hover:text-primary-green transition-colors text-sm">
                    About
                  </a>
                </li>
                <li>
                  <Link to="/login" className="text-secondary-text hover:text-primary-green transition-colors text-sm">
                    Login
                  </Link>
                </li>
              </ul>
            </div>
            
            {/* Contact Info */}
            <div>
              <h5 className="text-deep-forest font-semibold mb-4">Contact</h5>
              <ul className="space-y-2 text-sm text-secondary-text">
                <li>support@pantrysync.edu</li>
                <li>(555) 123-4567</li>
                <li className="text-xs pt-2">
                  Pantry Sync Initiative<br />
                  Supporting Educational Institutions<br />
                  Nationwide
                </li>
              </ul>
            </div>
          </div>
          
        
        </div>
      </footer>
    </div>
  );
};

export default Home;
