import { useState, useEffect } from 'react';
import { 
  Calendar, MapPin, Users, ChevronLeft, ChevronRight, 
  ArrowRight, Star, Award, Building, Rocket, 
  CheckCircle, Clock, Share2, Download, ArrowDown 
} from 'lucide-react';

export default function TechEventLanding() {
  const [currentSlide, setCurrentSlide] = useState(0);
  const [isScrolled, setIsScrolled] = useState(false);
  const [activeTrack, setActiveTrack] = useState(null);
  const [selectedTrack, setSelectedTrack] = useState(null);
  const [showModal, setShowModal] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const eventDetails = {
    date: "February 13-15, 2025",
    venue: "Sobus Center of Excellence, NMIMS Campus, Shirpur",
    registration: "Open until August 30, 2024"
  };

  const eventHighlights = [
    { number: "500+", label: "Participants", icon: Users },
    { number: "50+", label: "Mentors", icon: Star },
    { number: "$100K", label: "Prize Pool", icon: Award },
    { number: "25+", label: "Partners", icon: Building }
  ];

  const tracks = [
    {
      title: "Agriculture",
      description: "Revolutionize farming with sustainable technology solutions",
      color: "from-green-500 to-green-600",
      icon: "🌾"
    },
    {
      title: "Health",
      description: "Transform healthcare delivery and patient care",
      color: "from-red-500 to-red-600",
      icon: "🏥"
    },
    {
      title: "Skilling",
      description: "Innovative solutions for workforce development",
      color: "from-blue-500 to-blue-600",
      icon: "💡"
    },
    {
      title: "Energy",
      description: "Clean and sustainable energy solutions",
      color: "from-yellow-500 to-yellow-600",
      icon: "⚡"
    },
    {
      title: "Education",
      description: "Reimagine learning for the digital age",
      color: "from-purple-500 to-purple-600",
      icon: "📚"
    },
    {
      title: "Sustainability",
      description: "Build solutions for a sustainable future",
      color: "from-emerald-500 to-emerald-600",
      icon: "🌱"
    }
  ];

  const trackDetails = {
    "Agriculture": {
      expectations: [
        "Solutions for sustainable farming practices",
        "Smart irrigation systems",
        "Crop disease detection",
        "Supply chain optimization",
        "Farm management solutions"
      ],
      requirements: [
        "Focus on local farming challenges",
        "Cost-effective implementation",
        "Environmental sustainability",
        "Scalability to different farm sizes"
      ],
      impact: "Projects should demonstrate clear benefits for local farmers and agricultural sustainability."
    },
    "Health": {
      expectations: [
        "Telemedicine solutions",
        "Health monitoring systems",
        "Medical record management",
        "Healthcare accessibility tools",
        "Preventive healthcare innovations"
      ],
      requirements: [
        "Data privacy compliance",
        "User-friendly interface",
        "Offline functionality",
        "Regional language support"
      ],
      impact: "Solutions should improve healthcare accessibility and affordability in rural areas."
    },
    "Skilling": {
      expectations: [
        "Vocational training platforms",
        "Skill assessment tools",
        "Job matching systems",
        "Remote learning solutions",
        "Practical skill development"
      ],
      requirements: [
        "Mobile-first approach",
        "Interactive learning features",
        "Progress tracking",
        "Industry relevance"
      ],
      impact: "Projects should enhance employability and practical skills development."
    },
    "Energy": {
      expectations: [
        "Renewable energy solutions",
        "Energy efficiency tools",
        "Power management systems",
        "Sustainable lighting",
        "Waste-to-energy concepts"
      ],
      requirements: [
        "Cost-effectiveness",
        "Easy maintenance",
        "Local resource utilization",
        "Environmental impact"
      ],
      impact: "Solutions should promote sustainable energy usage and accessibility."
    },
    "Education": {
      expectations: [
        "Interactive learning platforms",
        "Educational assessment tools",
        "Personalized learning systems",
        "Educational resource management",
        "Parent-teacher communication"
      ],
      requirements: [
        "Offline accessibility",
        "Multi-language support",
        "Engaging content delivery",
        "Progress monitoring"
      ],
      impact: "Projects should enhance learning outcomes and educational accessibility."
    },
    "Sustainability": {
      expectations: [
        "Waste management solutions",
        "Resource conservation tools",
        "Environmental monitoring",
        "Green technology innovations",
        "Eco-friendly alternatives"
      ],
      requirements: [
        "Environmental impact",
        "Community engagement",
        "Long-term viability",
        "Resource efficiency"
      ],
      impact: "Solutions should contribute to environmental conservation and sustainable practices."
    }
  };

  const timeline = [
    {
      phase: "Application",
      date: "Aug 1-30",
      description: "Submit your innovative idea"
    },
    {
      phase: "Selection",
      date: "Sept 1-5",
      description: "Top teams will be shortlisted"
    },
    {
      phase: "Event",
      date: "Sept 15-17",
      description: "Build, learn, and pitch"
    },
    {
      phase: "Demo Day",
      date: "Sept 17",
      description: "Present to investors"
    }
  ];

  const partners = [
    "https://placeholder.com/150x50",
    "https://placeholder.com/150x50",
    "https://placeholder.com/150x50",
    "https://placeholder.com/150x50",
    "https://placeholder.com/150x50",
    "https://placeholder.com/150x50"
  ];

  const Modal = ({ isOpen, onClose, track }) => {
    if (!isOpen || !track) return null;
  
    return (
      <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
        <div className="bg-white rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
          <div className="p-6 space-y-6">
            <div className="flex justify-between items-start">
              <h3 className="text-2xl font-bold text-gray-900">{track.title}</h3>
              <button 
                onClick={onClose}
                className="text-gray-400 hover:text-gray-500 transition-colors"
              >
                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
            
            <div className="space-y-6">
              <div>
                <h4 className="text-lg font-semibold text-blue-600 mb-3">Expected Solutions</h4>
                <ul className="list-disc list-inside space-y-2 text-gray-600">
                  {trackDetails[track.title].expectations.map((exp, index) => (
                    <li key={index}>{exp}</li>
                  ))}
                </ul>
              </div>
  
              <div>
                <h4 className="text-lg font-semibold text-blue-600 mb-3">Requirements</h4>
                <ul className="list-disc list-inside space-y-2 text-gray-600">
                  {trackDetails[track.title].requirements.map((req, index) => (
                    <li key={index}>{req}</li>
                  ))}
                </ul>
              </div>
  
              <div>
                <h4 className="text-lg font-semibold text-blue-600 mb-3">Expected Impact</h4>
                <p className="text-gray-600">{trackDetails[track.title].impact}</p>
              </div>
            </div>
  
            <div className="mt-8">
              <button
                onClick={onClose}
                className="w-full py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl hover:shadow-lg transform hover:-translate-y-1 transition duration-300"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white">
      <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200 shadow-sm">
        <div className="container mx-auto px-4">
          <div className="flex justify-between items-center h-16">
            <div className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 text-transparent bg-clip-text">
              Innovent 2025
            </div>
            <div className="hidden md:flex items-center space-x-8">
              <a href="#about" className="text-gray-600 hover:text-blue-600 transition">About</a>
              <a href="#why-innovent" className="text-gray-600 hover:text-blue-600 transition">Why Innovent</a>
              <a href="#tracks" className="text-gray-600 hover:text-blue-600 transition">Tracks</a>
              <a href="#timeline" className="text-gray-600 hover:text-blue-600 transition">Timeline</a>
              <a href="#register" className="text-gray-600 hover:text-blue-600 transition">Register</a>
            </div>
            <div className="flex items-center space-x-4">
              <button className="px-4 py-2 text-blue-600 hover:text-blue-700 transition">
                Login
              </button>
              <button className="px-4 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-full hover:shadow-lg transition duration-300">
                Register Your Idea
              </button>
            </div>
          </div>
        </div>
      </nav>

      <section className="relative min-h-screen flex items-center pt-20">
        <div className="absolute inset-0 bg-gradient-to-r from-blue-900 to-purple-900 opacity-10"></div>
        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-4xl mx-auto text-center">
            <h1 className="text-6xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-blue-600 to-purple-600 text-transparent bg-clip-text">
              Where Innovation Meets Opportunity
            </h1>
            <p className="text-xl md:text-2xl text-gray-600 mb-12 leading-relaxed">
              Join the biggest Idea Hackathon event of 2024. One month of tinkering with ideas, 
              creating plans for new technologies, solving problems at the grassroot level. 
              Three final days of innovation, networking, and breakthrough technologies.
            </p>
            <div className="flex flex-col md:flex-row gap-4 justify-center">
              <button className="px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-full hover:shadow-lg transform hover:-translate-y-1 transition duration-300">
                Register Your Idea
              </button>
              <button className="px-8 py-4 bg-white text-gray-800 rounded-full hover:shadow-lg transform hover:-translate-y-1 transition duration-300">
                Download Brochure
              </button>
            </div>
            <div className="mt-12 flex flex-col md:flex-row gap-8 justify-center text-gray-600">
              <div className="flex items-center gap-2">
                <Calendar className="w-5 h-5 text-blue-600" />
                {eventDetails.date}
              </div>
              <div className="flex items-center gap-2">
                <MapPin className="w-5 h-5 text-blue-600" />
                {eventDetails.venue}
              </div>
            </div>
          </div>
        </div>
        <div className="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
          <ArrowDown className="w-6 h-6 text-gray-400" />
        </div>
      </section>

      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            {eventHighlights.map((highlight, index) => (
              <div key={index} 
                className="group p-8 rounded-2xl bg-white hover:bg-gradient-to-r from-blue-600 to-purple-600 shadow-lg hover:shadow-xl transition-all duration-300"
              >
                <highlight.icon className="w-8 h-8 mb-4 text-blue-600 group-hover:text-white transition-colors duration-300" />
                <div className="text-3xl font-bold mb-2 group-hover:text-white transition-colors duration-300">
                  {highlight.number}
                </div>
                <div className="text-gray-600 group-hover:text-white/90 transition-colors duration-300">
                  {highlight.label}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-20 bg-white" id="about">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center mb-16">
            <h2 className="text-4xl font-bold mb-6">What is Innovent?</h2>
            <p className="text-lg text-gray-600 leading-relaxed">
              Innovent is India's premier startup competition and mentorship program, designed to transform 
              groundbreaking ideas into successful businesses. We bring together entrepreneurs, mentors, 
              and investors to create a thriving startup ecosystem that drives innovation across multiple sectors.
            </p>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8">
            <div className="p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow">
              <div className="text-3xl font-bold text-blue-600 mb-2">500+</div>
              <div className="text-gray-600">Entries</div>
            </div>
            <div className="p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow">
              <div className="text-3xl font-bold text-blue-600 mb-2">50+</div>
              <div className="text-gray-600">Mentors</div>
            </div>
            <div className="p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow">
              <div className="text-3xl font-bold text-blue-600 mb-2">₹10L+</div>
              <div className="text-gray-600">Prizes</div>
            </div>
            <div className="p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow">
              <div className="text-3xl font-bold text-blue-600 mb-2">6</div>
              <div className="text-gray-600">Domains</div>
            </div>
            <div className="p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow">
              <div className="text-3xl font-bold text-blue-600 mb-2">25+</div>
              <div className="text-gray-600">Investors</div>
            </div>
            <div className="p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow">
              <div className="text-3xl font-bold text-blue-600 mb-2">15+</div>
              <div className="text-gray-600">Partners</div>
            </div>
          </div>
        </div>
      </section>

      <section className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="text-4xl font-bold text-center mb-16">Previous Events</h2>
          <div className="max-w-4xl mx-auto">
            <div className="relative pt-[56.25%] rounded-2xl overflow-hidden shadow-2xl">
              <iframe
                className="absolute inset-0 w-full h-full"
                src="https://www.youtube.com/embed/your-video-id"
                title="Innovent 2023 Highlights"
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
              ></iframe>
            </div>
            <div className="mt-8 text-center">
              <h3 className="text-2xl font-bold mb-4">Innovent 2023 Highlights</h3>
              <p className="text-gray-600">
                Watch the amazing journey of our previous participants and their innovative solutions
                that made a difference.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section id="tracks" className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-4xl font-bold text-center mb-16">Innovation Tracks</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {tracks.map((track, index) => (
              <div 
                key={index}
                onClick={() => {
                  setSelectedTrack(track);
                  setShowModal(true);
                }}
                onMouseEnter={() => setActiveTrack(index)}
                onMouseLeave={() => setActiveTrack(null)}
                className={`relative overflow-hidden rounded-2xl p-8 transition-all duration-300 cursor-pointer ${
                  activeTrack === index ? 'bg-gradient-to-r ' + track.color + ' text-white transform scale-105' : 'bg-white hover:shadow-xl'
                }`}
              >
                <div className="flex items-start gap-4">
                  <span className="text-4xl">{track.icon}</span>
                  <div>
                    <h3 className={`text-2xl font-bold mb-3 ${
                      activeTrack === index ? 'text-white' : 'text-gray-800'
                    }`}>{track.title}</h3>
                    <p className={activeTrack === index ? 'text-white/90' : 'text-gray-600'}>
                      {track.description}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <Modal 
          isOpen={showModal} 
          onClose={() => setShowModal(false)} 
          track={selectedTrack}
        />
      </section>

      <section className="py-20">
        <div className="container mx-auto px-4">
          <h2 className="text-4xl font-bold text-center mb-16">Event Timeline</h2>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            {timeline.map((phase, index) => (
              <div key={index} className="relative">
                <div className="bg-blue-50 rounded-xl p-6 text-center">
                  <div className="text-blue-600 font-bold mb-2">{phase.date}</div>
                  <h3 className="text-xl font-bold mb-3">{phase.phase}</h3>
                  <p className="text-gray-600">{phase.description}</p>
                </div>
                {index < timeline.length - 1 && (
                  <ArrowRight className="hidden md:block absolute top-1/2 -right-4 transform -translate-y-1/2 text-blue-300" />
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="register" className="py-20">
        <div className="container mx-auto px-4 max-w-4xl">
          <h2 className="text-4xl font-bold text-center mb-16">Register Your Idea</h2>
          <form className="bg-white rounded-2xl p-8 shadow-xl">
            <div className="space-y-8">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                  <label className="block text-sm font-medium mb-2 text-gray-700">Idea Name</label>
                  <input 
                    type="text" 
                    className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-200 outline-none transition"
                    placeholder="Enter your idea name"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-2 text-gray-700">Team Name</label>
                  <input 
                    type="text" 
                    className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-200 outline-none transition"
                    placeholder="Enter your team name"
                    required
                  />
                </div>
              </div>
              
              <div>
                <label className="block text-sm font-medium mb-2 text-gray-700">Select Track</label>
                <select 
                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-200 outline-none transition"
                  required
                >
                  <option value="">Select your track</option>
                  {tracks.map((track, index) => (
                    <option key={index} value={track.title}>{track.title}</option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium mb-2 text-gray-700">Technology Types</label>
                <div className="grid grid-cols-2 md:grid-cols-3 gap-4 p-4 bg-gray-50 rounded-xl">
                  {[
                    "AI/ML", "Software", "Website", "App", "UI/UX Design",
                    "Data Analytics", "IoT", "Robotics", "Blockchain",
                    "Cyber Security", "Online Portal/Dashboard"
                  ].map((tech, index) => (
                    <label key={index} className="flex items-center space-x-2 cursor-pointer">
                      <input
                        type="checkbox"
                        className="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                        value={tech}
                      />
                      <span className="text-sm text-gray-700">{tech}</span>
                    </label>
                  ))}
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium mb-2 text-gray-700">Team Size</label>
                <input 
                  type="number"
                  min="1"
                  max="10"
                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-200 outline-none transition"
                  placeholder="Enter team size"
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-medium mb-2 text-gray-700">Team Members</label>
                <div className="space-y-4">
                  <div className="p-4 bg-gray-50 rounded-xl">
                    <div className="font-medium text-sm text-gray-700 mb-3">Team Lead</div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <input 
                        type="text"
                        placeholder="Full Name"
                        className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-200 outline-none transition"
                        required
                      />
                      <input 
                        type="email"
                        placeholder="Email Address"
                        className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-200 outline-none transition"
                        required
                      />
                    </div>
                  </div>

                  <div className="p-4 bg-gray-50 rounded-xl">
                    <div className="font-medium text-sm text-gray-700 mb-3">Team Member 2</div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <input 
                        type="text"
                        placeholder="Full Name"
                        className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-200 outline-none transition"
                      />
                      <input 
                        type="email"
                        placeholder="Email Address"
                        className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-200 outline-none transition"
                      />
                    </div>
                  </div>

                  <button 
                    type="button"
                    className="text-blue-600 hover:text-blue-700 text-sm font-medium flex items-center gap-2"
                  >
                    + Add Another Team Member
                  </button>
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium mb-2 text-gray-700">Project Description</label>
                <textarea 
                  rows="4"
                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-4 focus:ring-blue-200 outline-none transition"
                  placeholder="Tell us about your project idea..."
                  required
                ></textarea>
              </div>

              <div>
                <label className="block text-sm font-medium mb-2 text-gray-700">Upload Pitch Deck</label>
                <div className="border-2 border-dashed border-gray-200 rounded-xl p-8 text-center hover:border-blue-500 transition-colors duration-300 cursor-pointer">
                  <Download className="mx-auto w-8 h-8 text-gray-400 mb-2" />
                  <p className="text-sm text-gray-500">Drag and drop your pitch deck here, or click to browse</p>
                  <input 
                    type="file" 
                    className="hidden" 
                    accept=".pdf,.ppt,.pptx,.doc,.docx"
                    required
                  />
                </div>
                <p className="mt-2 text-xs text-gray-500">Accepted formats: PDF, PPT, PPTX, DOC, DOCX (Max size: 10MB)</p>
              </div>

              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <input
                    type="checkbox"
                    id="terms"
                    className="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                    required
                  />
                  <label htmlFor="terms" className="text-sm text-gray-700">
                    I agree to the <a href="#" className="text-blue-600 hover:underline">Terms and Conditions</a> and 
                    <a href="#" className="text-blue-600 hover:underline"> Privacy Policy</a>
                  </label>
                </div>
                
                <div className="flex items-center gap-3">
                  <input
                    type="checkbox"
                    id="updates"
                    className="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                  />
                  <label htmlFor="updates" className="text-sm text-gray-700">
                    I would like to receive updates about future events and opportunities
                  </label>
                </div>
              </div>

              <button 
                type="submit"
                className="w-full py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl hover:shadow-lg transform hover:-translate-y-1 transition duration-300"
              >
                Submit Application
              </button>
            </div>
          </form>
        </div>
      </section>

      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-4xl font-bold text-center mb-16">Our Partners</h2>
          <div className="grid grid-cols-2 md:grid-cols-6 gap-8 items-center">
            {partners.map((partner, index) => (
              <img 
                key={index}
                src={partner}
                alt={`Partner ${index + 1}`}
                className="mx-auto filter grayscale hover:grayscale-0 transition"
              />
            ))}
          </div>
        </div>
      </section>

      <footer className="bg-gray-900 text-white py-20">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <h3 className="text-xl font-bold mb-4">TechStart Summit</h3>
              <p className="text-gray-400">Empowering the next generation of tech innovators</p>
            </div>
            <div>
              <h4 className="font-bold mb-4">Quick Links</h4>
              <ul className="space-y-2 text-gray-400">
                <li><a href="#" className="hover:text-white transition">About</a></li>
                <li><a href="#" className="hover:text-white transition">Schedule</a></li>
                <li><a href="#" className="hover:text-white transition">Speakers</a></li>
                <li><a href="#" className="hover:text-white transition">Register</a></li>
              </ul>
            </div>
            <div>
              <h4 className="font-bold mb-4">Contact</h4>
              <ul className="space-y-2 text-gray-400">
                <li>hello@techstart.com</li>
                <li>+1 (555) 123-4567</li>
                <li>Silicon Valley, CA</li>
              </ul>
            </div>
            <div>
              <h4 className="font-bold mb-4">Follow Us</h4>
              <div className="flex space-x-4">
                <a href="#" className="hover:text-blue-400 transition">Twitter</a>
                <a href="#" className="hover:text-blue-400 transition">LinkedIn</a>
                <a href="#" className="hover:text-blue-400 transition">Instagram</a>
              </div>
            </div>
          </div>
          <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
            <p>© 2024 TechStart Summit. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}