import React, { useState, useEffect } from 'react';

export default function StressClassifier() {
  const [currentSlide, setCurrentSlide] = useState(0);

  const slides = [
    {
      url: "https://example.com/image1.jpg", // Replace with your actual Myanmar university student images
      caption: "Students in Computer Lab"
    },
    {
      url: "https://example.com/image2.jpg", // Replace with your actual Myanmar university student images
      caption: "Group Project Discussion"
    },
    {
      url: "https://example.com/image3.jpg", // Replace with your actual Myanmar university student images
      caption: "Campus Life"
    }
  ];

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % slides.length);
    }, 3000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div className="min-h-screen bg-[#FFEFF6]">
      {/* Header */}
      <header className="bg-[#FFB6C1] p-4">
        <h1 className="text-2xl font-bold text-center">
          University Students' Stress Level Classification
        </h1>
      </header>

      {/* Navigation */}
      <nav className="bg-gradient-to-r from-[#FF69B4] to-[#ADD8E6] p-4">
        <ul className="flex gap-8 justify-center text-white">
          <li><a href="#home">Home</a></li>
          <li><a href="#system">System</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>

      <main className="container mx-auto px-4 py-8">
        {/* Slideshow */}
        <div className="relative w-full h-[400px] mb-8 rounded-xl overflow-hidden">
          {slides.map((slide, index) => (
            <div
              key={index}
              className={`absolute top-0 left-0 w-full h-full transition-opacity duration-500 
                ${index === currentSlide ? 'opacity-100' : 'opacity-0'}`}
            >
              <img
                src={slide.url}
                alt={slide.caption}
                className="w-full h-full object-cover"
              />
              <div className="absolute bottom-0 w-full bg-black/50 p-4">
                <p className="text-white text-center">{slide.caption}</p>
              </div>
            </div>
          ))}
          
          {/* Slide indicators */}
          <div className="absolute bottom-16 left-1/2 transform -translate-x-1/2 flex gap-2">
            {slides.map((_, index) => (
              <button
                key={index}
                onClick={() => setCurrentSlide(index)}
                className={`w-2 h-2 rounded-full ${
                  index === currentSlide ? 'bg-white' : 'bg-white/50'
                }`}
              />
            ))}
          </div>
        </div>

        {/* What is Stress Section */}
        <div className="bg-white rounded-xl shadow-lg p-8 mb-8">
          <h2 className="text-2xl font-bold text-[#FF69B4] mb-4 pb-2 border-b-2 border-[#FFB6C1]">
            What is Stress?
          </h2>
          <div className="space-y-4 text-gray-700">
            <p>
              Stress can be defined as a state of worry or mental tension caused by a difficult situation. 
              Stress is a natural human response that prompts us to address challenges and threats in our lives.
            </p>
            <p>
              Everyone experiences stress to some degree. The way we respond to stress, however, 
              makes a big difference to our overall well-being.
            </p>
          </div>
        </div>

        {/* Start Button */}
        <div className="text-center">
          <button className="bg-gradient-to-r from-[#FF69B4] to-[#ADD8E6] text-white 
                           px-8 py-3 rounded-full shadow-lg hover:shadow-xl 
                           transition-all duration-300 hover:-translate-y-1">
            Start Assessment
          </button>
        </div>
      </main>

      <footer className="bg-[#ADD8E6] text-center p-4 mt-8">
        <p>&copy; 2024 Stress Level Classifier. All rights reserved.</p>
      </footer>
    </div>
  );
}