import React, { useState, useEffect } from 'react';
import { Menu, X, ChevronRight, Calendar, MapPin, Clock, Mail, Phone, Instagram, Facebook, Twitter } from 'lucide-react';

const ArtExhibitionWebsite = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [activeSection, setActiveSection] = useState('home');
  const [showModal, setShowModal] = useState(false);
  const [selectedArtwork, setSelectedArtwork] = useState(null);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    ticketType: 'standard',
    attendees: 1,
    specialRequests: ''
  });
  const [formSubmitted, setFormSubmitted] = useState(false);

  // Handle scroll to update active section
  useEffect(() => {
    const handleScroll = () => {
      const sections = ['home', 'about', 'gallery', 'artists', 'schedule', 'register'];
      
      for (const section of sections) {
        const element = document.getElementById(section);
        if (element) {
          const rect = element.getBoundingClientRect();
          if (rect.top <= 100 && rect.bottom >= 100) {
            setActiveSection(section);
            break;
          }
        }
      }
    };

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

  // Smooth scroll to section
  const scrollToSection = (sectionId) => {
    const element = document.getElementById(sectionId);
    if (element) {
      window.scrollTo({
        top: element.offsetTop - 80,
        behavior: 'smooth'
      });
    }
    setIsMenuOpen(false);
  };

  // Handle form input changes
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  // Handle form submission
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    try {
      // In a real application, you would send this data to your backend
      // For demonstration, we'll simulate a successful submission
      console.log('Form submitted:', formData);
      
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      setFormSubmitted(true);
      setFormData({
        name: '',
        email: '',
        ticketType: 'standard',
        attendees: 1,
        specialRequests: ''
      });
      
      // Reset form submission status after 5 seconds
      setTimeout(() => setFormSubmitted(false), 5000);
    } catch (error) {
      console.error('Error submitting form:', error);
    }
  };

  // Open artwork modal
  const openArtworkModal = (artwork) => {
    setSelectedArtwork(artwork);
    setShowModal(true);
  };

  // Exhibition data
  const exhibitionData = {
    title: "SPECTRUM: Contemporary Art Exhibition",
    dates: "June 15 - July 30, 2024",
    location: "Modern Art Gallery, 123 Creative Avenue",
    description: "SPECTRUM brings together diverse contemporary artists exploring the boundaries of color, form, and meaning in today's rapidly evolving visual landscape. This exhibition celebrates the vibrant spectrum of human creativity through various mediums and perspectives.",
    artworks: [
      {
        id: 1,
        title: "Geometric Harmony",
        artist: "Elena Rodriguez",
        medium: "Acrylic on Canvas",
        year: 2023,
        image: "https://assets.sitebrew.ai/Abstract_modern_artwork_with_g-1746597156667.webp"
      },
      {
        id: 2,
        title: "Marble Fluidity",
        artist: "Marcus Chen",
        medium: "Marble Sculpture",
        year: 2022,
        image: "https://assets.sitebrew.ai/Contemporary_sculpture_photogr-1746597157282.webp"
      },
      {
        id: 3,
        title: "Digital Dreamscape",
        artist: "Aisha Johnson",
        medium: "Digital Art",
        year: 2024,
        image: "https://assets.sitebrew.ai/Modern_digital_art_piece_with_-1746597160244.webp"
      }
    ],
    artists: [
      {
        id: 1,
        name: "Elena Rodriguez",
        bio: "Elena Rodriguez is a Barcelona-based artist known for her vibrant geometric abstractions that explore the intersection of color theory and emotional resonance. With an MFA from the Royal College of Art, her work has been exhibited internationally.",
        image: "https://assets.sitebrew.ai/A_professional_headshot_portra-1746597157360.webp"
      },
      {
        id: 2,
        name: "Marcus Chen",
        bio: "Marcus Chen is a sculptor whose work in marble and other natural materials explores themes of fluidity and permanence. A graduate of the School of the Art Institute of Chicago, his sculptures have been commissioned for public spaces worldwide.",
        image: "https://assets.sitebrew.ai/A_professional_headshot_portra-1746597157555.webp"
      }
    ],
    schedule: [
      {
        id: 1,
        date: "June 15, 2024",
        time: "7:00 PM - 10:00 PM",
        event: "Opening Reception",
        description: "Join us for the grand opening with complimentary refreshments and meet the artists."
      },
      {
        id: 2,
        date: "June 22, 2024",
        time: "2:00 PM - 4:00 PM",
        event: "Artist Talk: Elena Rodriguez",
        description: "Elena discusses her creative process and the inspiration behind her geometric works."
      },
      {
        id: 3,
        date: "July 5, 2024",
        time: "3:00 PM - 5:00 PM",
        event: "Sculpture Workshop with Marcus Chen",
        description: "A hands-on workshop exploring sculptural techniques. Materials provided."
      },
      {
        id: 4,
        date: "July 20, 2024",
        time: "6:00 PM - 8:00 PM",
        event: "Curator's Tour",
        description: "An in-depth tour of the exhibition with our curator, highlighting key works and themes."
      },
      {
        id: 5,
        date: "July 30, 2024",
        time: "7:00 PM - 9:00 PM",
        event: "Closing Reception",
        description: "Final opportunity to view the exhibition with special closing remarks."
      }
    ],
    ticketTypes: [
      {
        id: "standard",
        name: "Standard Admission",
        price: "$15"
      },
      {
        id: "student",
        name: "Student/Senior",
        price: "$10"
      },
      {
        id: "member",
        name: "Gallery Member",
        price: "Free"
      }
    ]
  };

  return (
    <div className="font-['Inter',sans-serif] text-[#121212] bg-[#F8F8F8] min-h-screen">
      {/* Navigation */}
      <nav className="fixed top-0 left-0 right-0 bg-white bg-opacity-95 shadow-sm z-50 px-6 py-4">
        <div className="max-w-7xl mx-auto flex justify-between items-center">
          <div className="text-xl font-bold text-[#006D77]">SPECTRUM</div>
          
          {/* Desktop Navigation */}
          <div className="hidden md:flex space-x-8">
            {['home', 'about', 'gallery', 'artists', 'schedule', 'register'].map((item) => (
              <button
                key={item}
                onClick={() => scrollToSection(item)}
                className={`text-sm uppercase tracking-wider ${
                  activeSection === item ? 'text-[#006D77] font-medium' : 'text-gray-600 hover:text-[#006D77]'
                }`}
              >
                {item}
              </button>
            ))}
          </div>
          
          {/* Mobile Menu Button */}
          <button 
            className="md:hidden text-gray-700"
            onClick={() => setIsMenuOpen(!isMenuOpen)}
          >
            {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>
      </nav>
      
      {/* Mobile Menu */}
      {isMenuOpen && (
        <div className="fixed top-16 left-0 right-0 bg-white z-40 shadow-lg md:hidden">
          <div className="flex flex-col p-4">
            {['home', 'about', 'gallery', 'artists', 'schedule', 'register'].map((item) => (
              <button
                key={item}
                onClick={() => scrollToSection(item)}
                className={`py-3 px-4 text-left text-sm uppercase tracking-wider ${
                  activeSection === item ? 'text-[#006D77] font-medium bg-gray-50' : 'text-gray-600'
                }`}
              >
                {item}
              </button>
            ))}
          </div>
        </div>
      )}
      
      {/* Hero Section */}
      <section 
        id="home" 
        className="pt-24 pb-16 md:pt-32 md:pb-24 px-6"
        style={{
          backgroundImage: `url('https://assets.sitebrew.ai/A_minimalist_elegant_art_exhi-1746597156533.webp')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          backgroundRepeat: 'no-repeat'
        }}
      >
        <div className="max-w-7xl mx-auto">
          <div className="bg-white bg-opacity-90 p-8 md:p-12 max-w-2xl">
            <h1 className="text-4xl md:text-5xl font-bold mb-4">{exhibitionData.title}</h1>
            <p className="text-xl mb-6">{exhibitionData.dates}</p>
            <div className="flex items-center mb-8 text-gray-700">
              <MapPin size={18} className="mr-2" />
              <span>{exhibitionData.location}</span>
            </div>
            <button 
              onClick={() => scrollToSection('register')}
              className="bg-[#006D77] hover:bg-[#00565E] text-white px-8 py-3 rounded-sm transition duration-300 flex items-center"
            >
              Register Now
              <ChevronRight size={18} className="ml-2" />
            </button>
          </div>
        </div>
      </section>
      
      {/* About Section */}
      <section id="about" className="py-16 md:py-24 px-6 bg-white">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl md:text-4xl font-bold mb-12 text-center">About the Exhibition</h2>
          <div className="max-w-3xl mx-auto">
            <p className="text-lg leading-relaxed mb-8">
              {exhibitionData.description}
            </p>
            <p className="text-lg leading-relaxed">
              This exhibition brings together 15 artists from around the world, each offering unique perspectives on contemporary visual culture. Through painting, sculpture, digital media, and installation art, SPECTRUM invites viewers to explore the rich diversity of artistic expression in the 21st century.
            </p>
          </div>
        </div>
      </section>
      
      {/* Gallery Section */}
      <section id="gallery" className="py-16 md:py-24 px-6 bg-gray-50">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl md:text-4xl font-bold mb-12 text-center">Featured Artworks</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {exhibitionData.artworks.map((artwork) => (
              <div 
                key={artwork.id} 
                className="bg-white p-4 shadow-sm hover:shadow-md transition-shadow duration-300 cursor-pointer"
                onClick={() => openArtworkModal(artwork)}
              >
                <div className="aspect-w-4 aspect-h-3 mb-4 overflow-hidden">
                  <img 
                    src={artwork.image} 
                    alt={artwork.title} 
                    className="w-full h-64 object-cover"
                  />
                </div>
                <h3 className="text-xl font-semibold mb-2">{artwork.title}</h3>
                <p className="text-gray-700 mb-1">{artwork.artist}</p>
                <p className="text-gray-600 text-sm">{artwork.medium}, {artwork.year}</p>
              </div>
            ))}
          </div>
          <div className="text-center mt-12">
            <p className="text-gray-600">
              These are just a few highlights from our exhibition. Visit us to experience the full collection of over 50 works.
            </p>
          </div>
        </div>
      </section>
      
      {/* Artists Section */}
      <section id="artists" className="py-16 md:py-24 px-6 bg-white">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl md:text-4xl font-bold mb-12 text-center">Featured Artists</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-5xl mx-auto">
            {exhibitionData.artists.map((artist) => (
              <div key={artist.id} className="flex flex-col md:flex-row gap-6">
                <div className="w-full md:w-1/3">
                  <img 
                    src={artist.image} 
                    alt={artist.name} 
                    className="w-full h-auto rounded-sm object-cover aspect-square"
                  />
                </div>
                <div className="w-full md:w-2/3">
                  <h3 className="text-xl font-semibold mb-3">{artist.name}</h3>
                  <p className="text-gray-700 leading-relaxed">{artist.bio}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      
      {/* Schedule Section */}
      <section id="schedule" className="py-16 md:py-24 px-6 bg-gray-50">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl md:text-4xl font-bold mb-12 text-center">Exhibition Schedule</h2>
          <div className="max-w-4xl mx-auto">
            {exhibitionData.schedule.map((event) => (
              <div key={event.id} className="mb-8 border-l-4 border-[#006D77] pl-6 py-2">
                <div className="flex items-center mb-2">
                  <Calendar size={18} className="text-[#006D77] mr-2" />
                  <span className="font-medium">{event.date}</span>
                </div>
                <div className="flex items-center mb-3">
                  <Clock size={18} className="text-[#006D77] mr-2" />
                  <span>{event.time}</span>
                </div>
                <h3 className="text-xl font-semibold mb-2">{event.event}</h3>
                <p className="text-gray-700">{event.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      
      {/* Registration Section */}
      <section id="register" className="py-16 md:py-24 px-6 bg-white">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl md:text-4xl font-bold mb-12 text-center">Register to Attend</h2>
          <div className="max-w-2xl mx-auto bg-gray-50 p-8 shadow-sm">
            {formSubmitted ? (
              <div className="text-center py-8">
                <h3 className="text-2xl font-semibold mb-4 text-[#006D77]">Thank You!</h3>
                <p className="mb-6">Your registration has been received. We look forward to seeing you at the exhibition.</p>
                <p className="text-sm text-gray-600">A confirmation email has been sent to your provided email address.</p>
              </div>
            ) : (
              <form onSubmit={handleSubmit}>
                <div className="mb-6">
                  <label htmlFor="name" className="block mb-2 font-medium">Full Name</label>
                  <input
                    type="text"
                    id="name"
                    name="name"
                    value={formData.name}
                    onChange={handleInputChange}
                    required
                    className="w-full px-4 py-2 border border-gray-300 focus:border-[#006D77] focus:outline-none"
                  />
                </div>
                
                <div className="mb-6">
                  <label htmlFor="email" className="block mb-2 font-medium">Email Address</label>
                  <input
                    type="email"
                    id="email"
                    name="email"
                    value={formData.email}
                    onChange={handleInputChange}
                    required
                    className="w-full px-4 py-2 border border-gray-300 focus:border-[#006D77] focus:outline-none"
                  />
                </div>
                
                <div className="mb-6">
                  <label htmlFor="ticketType" className="block mb-2 font-medium">Ticket Type</label>
                  <select
                    id="ticketType"
                    name="ticketType"
                    value={formData.ticketType}
                    onChange={handleInputChange}
                    className="w-full px-4 py-2 border border-gray-300 focus:border-[#006D77] focus:outline-none"
                  >
                    {exhibitionData.ticketTypes.map((ticket) => (
                      <option key={ticket.id} value={ticket.id}>
                        {ticket.name} - {ticket.price}
                      </option>
                    ))}
                  </select>
                </div>
                
                <div className="mb-6">
                  <label htmlFor="attendees" className="block mb-2 font-medium">Number of Attendees</label>
                  <input
                    type="number"
                    id="attendees"
                    name="attendees"
                    min="1"
                    max="10"
                    value={formData.attendees}
                    onChange={handleInputChange}
                    className="w-full px-4 py-2 border border-gray-300 focus:border-[#006D77] focus:outline-none"
                  />
                </div>
                
                <div className="mb-8">
                  <label htmlFor="specialRequests" className="block mb-2 font-medium">Special Requests (Optional)</label>
                  <textarea
                    id="specialRequests"
                    name="specialRequests"
                    value={formData.specialRequests}
                    onChange={handleInputChange}
                    rows="4"
                    className="w-full px-4 py-2 border border-gray-300 focus:border-[#006D77] focus:outline-none"
                  ></textarea>
                </div>
                
                <button
                  type="submit"
                  className="w-full bg-[#006D77] hover:bg-[#00565E] text-white py-3 px-6 transition duration-300"
                >
                  Complete Registration
                </button>
              </form>
            )}
          </div>
        </div>
      </section>
      
      {/* Footer */}
      <footer className="bg-[#121212] text-white py-12 px-6">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div>
              <h3 className="text-xl font-bold mb-4">SPECTRUM</h3>
              <p className="text-gray-300 mb-6">Contemporary Art Exhibition</p>
              <div className="flex space-x-4">
                <a href="#" className="text-gray-300 hover:text-white">
                  <Instagram size={20} />
                </a>
                <a href="#" className="text-gray-300 hover:text-white">
                  <Facebook size={20} />
                </a>
                <a href="#" className="text-gray-300 hover:text-white">
                  <Twitter size={20} />
                </a>
              </div>
            </div>
            
            <div>
              <h4 className="text-lg font-medium mb-4">Contact</h4>
              <div className="flex items-center mb-3 text-gray-300">
                <MapPin size={18} className="mr-2" />
                <span>123 Creative Avenue, Artsville</span>
              </div>
              <div className="flex items-center mb-3 text-gray-300">
                <Mail size={18} className="mr-2" />
                <span>info@spectrum-exhibition.com</span>
              </div>
              <div className="flex items-center text-gray-300">
                <Phone size={18} className="mr-2" />
                <span>+1 (555) 123-4567</span>
              </div>
            </div>
            
            <div>
              <h4 className="text-lg font-medium mb-4">Hours</h4>
              <p className="text-gray-300 mb-2">Tuesday - Friday: 10am - 6pm</p>
              <p className="text-gray-300 mb-2">Saturday: 11am - 5pm</p>
              <p className="text-gray-300 mb-2">Sunday: 12pm - 4pm</p>
              <p className="text-gray-300">Monday: Closed</p>
            </div>
          </div>
          
          <div className="border-t border-gray-800 mt-10 pt-6 text-center text-gray-400 text-sm">
            <p>&copy; 2024 SPECTRUM Art Exhibition. All rights reserved.</p>
          </div>
        </div>
      </footer>
      
      {/* Artwork Modal */}
      {showModal && selectedArtwork && (
        <div className="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center p-4">
          <div className="bg-white max-w-4xl w-full max-h-[90vh] overflow-auto">
            <div className="p-6">
              <div className="flex justify-between items-start mb-4">
                <div>
                  <h3 className="text-2xl font-semibold">{selectedArtwork.title}</h3>
                  <p className="text-gray-700">{selectedArtwork.artist}</p>
                </div>
                <button 
                  onClick={() => setShowModal(false)}
                  className="text-gray-500 hover:text-gray-700"
                >
                  <X size={24} />
                </button>
              </div>
              
              <div className="mb-6">
                <img 
                  src={selectedArtwork.image} 
                  alt={selectedArtwork.title} 
                  className="w-full h-auto"
                />
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                <div>
                  <p className="font-medium">Medium</p>
                  <p className="text-gray-700">{selectedArtwork.medium}</p>
                </div>
                <div>
                  <p className="font-medium">Year</p>
                  <p className="text-gray-700">{selectedArtwork.year}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default ArtExhibitionWebsite;