"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="mediumLarge"
      background="radialGradient"
      cardStyle="neon-glow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <div className="text-center p-8">
          <h1 className="text-2xl font-bold">Red Room English School</h1>
          <p className="text-gray-600 mt-2">Navigation will be restored once components are available</p>
        </div>
      </div>
      
      <div id="hero" data-section="hero">
        <div className="text-center p-16">
          <h1 className="text-4xl font-bold mb-4">Red Room</h1>
          <p className="text-lg text-gray-700 max-w-2xl mx-auto">Master English with expert instructors. Immersive learning experiences for every level, from beginner to advanced proficiency.</p>
          <img 
            src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766490824093-4zvastqq.jpg" 
            alt="Dynamic English classroom with engaged students"
            className="w-full max-w-md mx-auto mt-8 rounded-lg"
          />
        </div>
      </div>
      
      <div id="about" data-section="about">
        <div className="p-16">
          <h2 className="text-3xl font-bold mb-4">Learn English Your Way</h2>
          <p className="text-gray-700 mb-8">Red Room is dedicated to transforming how you experience English language learning. Through innovative teaching methods, personalized attention, and a supportive community, we help every student achieve their language goals with confidence and fluency.</p>
          <img 
            src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766490825100-qr8p9dkh.jpg" 
            alt="English learning materials and resources"
            className="w-full max-w-md mx-auto rounded-lg"
          />
          <div className="grid grid-cols-3 gap-4 mt-8">
            <div className="text-center">
              <div className="text-2xl font-bold">500+</div>
              <div className="text-gray-600">Students Trained</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold">95%</div>
              <div className="text-gray-600">Success Rate</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold">10+</div>
              <div className="text-gray-600">Years Experience</div>
            </div>
          </div>
        </div>
      </div>
      
      <div id="feature" data-section="feature">
        <div className="p-16">
          <h2 className="text-3xl font-bold mb-4">Our Learning Approach</h2>
          <p className="text-gray-700 mb-8">A structured yet flexible methodology designed for real-world communication mastery</p>
          <div className="grid grid-cols-2 gap-8">
            <div>
              <h3 className="text-xl font-semibold mb-2">01. Assessment</h3>
              <p className="text-gray-700">Comprehensive evaluation of your current English level, goals, and learning preferences to create a personalized learning path.</p>
            </div>
            <div>
              <h3 className="text-xl font-semibold mb-2">02. Immersion</h3>
              <p className="text-gray-700">Interactive classes focused on speaking, listening, reading, and writing through real-life scenarios and authentic materials.</p>
            </div>
            <div>
              <h3 className="text-xl font-semibold mb-2">03. Practice</h3>
              <p className="text-gray-700">Regular assignments, group discussions, and one-on-one feedback sessions to reinforce learning and build confidence.</p>
            </div>
            <div>
              <h3 className="text-xl font-semibold mb-2">04. Mastery</h3>
              <p className="text-gray-700">Milestone testing and certification paths to track progress and validate your English proficiency achievements.</p>
            </div>
          </div>
        </div>
      </div>
      
      <div id="team" data-section="team">
        <div className="p-16">
          <h2 className="text-3xl font-bold mb-4">Meet Our Instructors</h2>
          <p className="text-gray-700 mb-8">Experienced English educators passionate about student success</p>
          <div className="grid grid-cols-2 gap-8">
            <div className="text-center">
              <img 
                src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766161716897-3ct4uqsh.jpg" 
                alt="Sarah Mitchell, Senior English Instructor"
                className="w-32 h-32 rounded-full mx-auto mb-4 object-cover"
              />
              <h3 className="font-semibold">Sarah Mitchell</h3>
              <p className="text-gray-600">Senior English Instructor</p>
            </div>
            <div className="text-center">
              <img 
                src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766490826035-lrazclrt.jpg" 
                alt="Michael Chen, Business English Specialist"
                className="w-32 h-32 rounded-full mx-auto mb-4 object-cover"
              />
              <h3 className="font-semibold">Michael Chen</h3>
              <p className="text-gray-600">Business English Specialist</p>
            </div>
            <div className="text-center">
              <img 
                src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766490826727-dlrt5e1i.jpg" 
                alt="Emma Rodriguez, Conversation Coach"
                className="w-32 h-32 rounded-full mx-auto mb-4 object-cover"
              />
              <h3 className="font-semibold">Emma Rodriguez</h3>
              <p className="text-gray-600">Conversation Coach</p>
            </div>
            <div className="text-center">
              <img 
                src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766490827294-y1y03u05.jpg" 
                alt="James Patterson, Grammar & Writing Expert"
                className="w-32 h-32 rounded-full mx-auto mb-4 object-cover"
              />
              <h3 className="font-semibold">James Patterson</h3>
              <p className="text-gray-600">Grammar & Writing Expert</p>
            </div>
          </div>
        </div>
      </div>
      
      <div id="testimonial" data-section="testimonial">
        <div className="p-16">
          <h2 className="text-3xl font-bold mb-4">Student Success Stories</h2>
          <p className="text-gray-700 mb-8">Real testimonials from students who transformed their English proficiency at Red Room</p>
          <div className="grid grid-cols-2 gap-8">
            <div className="border rounded-lg p-6">
              <div className="flex items-center mb-4">
                <img 
                  src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766490827835-wes34icg.jpg" 
                  alt="Lisa Johnson"
                  className="w-12 h-12 rounded-full mr-4 object-cover"
                />
                <div>
                  <h4 className="font-semibold">Lisa Johnson</h4>
                  <p className="text-gray-600 text-sm">Marketing Manager</p>
                </div>
              </div>
              <p className="text-gray-700">"Red Room completely changed my confidence in speaking English. Within six months, I was presenting to international clients without hesitation."</p>
            </div>
            <div className="border rounded-lg p-6">
              <div className="flex items-center mb-4">
                <img 
                  src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766490828433-taahfmi4.jpg" 
                  alt="David Park"
                  className="w-12 h-12 rounded-full mr-4 object-cover"
                />
                <div>
                  <h4 className="font-semibold">David Park</h4>
                  <p className="text-gray-600 text-sm">Software Engineer</p>
                </div>
              </div>
              <p className="text-gray-700">"The conversational classes helped me understand movies, podcasts, and casual conversations without subtitles."</p>
            </div>
          </div>
        </div>
      </div>
      
      <div id="faq" data-section="faq">
        <div className="p-16">
          <h2 className="text-3xl font-bold mb-4">Frequently Asked Questions</h2>
          <p className="text-gray-700 mb-8">Everything you need to know about Red Room English School</p>
          <div className="space-y-6">
            <div>
              <h3 className="text-lg font-semibold mb-2">What English levels do you offer?</h3>
              <p className="text-gray-700">We offer classes for all levels: Beginner (A1), Elementary (A2), Intermediate (B1), Upper-Intermediate (B2), Advanced (C1), and Mastery (C2).</p>
            </div>
            <div>
              <h3 className="text-lg font-semibold mb-2">How are classes structured?</h3>
              <p className="text-gray-700">Classes combine interactive group sessions with personalized one-on-one feedback. We use a mix of conversation practice and grammar lessons.</p>
            </div>
            <div>
              <h3 className="text-lg font-semibold mb-2">Do you offer flexible scheduling?</h3>
              <p className="text-gray-700">Yes! We offer morning, afternoon, and evening classes throughout the week. We also provide weekend intensives.</p>
            </div>
          </div>
        </div>
      </div>
      
      <div id="contact" data-section="contact">
        <div className="p-16">
          <h2 className="text-3xl font-bold mb-4">Get in Touch</h2>
          <p className="text-gray-700 mb-8">We'd love to hear from you. Send us a message and we'll respond as soon as possible.</p>
          <div className="grid grid-cols-2 gap-8">
            <div>
              <form className="space-y-4">
                <input 
                  type="text" 
                  placeholder="Your Name" 
                  className="w-full p-3 border rounded-lg"
                  required 
                />
                <input 
                  type="email" 
                  placeholder="Your Email" 
                  className="w-full p-3 border rounded-lg"
                  required 
                />
                <textarea 
                  placeholder="Type your message..." 
                  rows={5} 
                  className="w-full p-3 border rounded-lg"
                  required
                ></textarea>
                <button type="submit" className="w-full bg-blue-600 text-white p-3 rounded-lg hover:bg-blue-700">Send Message</button>
              </form>
            </div>
            <div>
              <img 
                src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766490824093-4zvastqq.jpg" 
                alt="Red Room contact section"
                className="w-full rounded-lg"
              />
            </div>
          </div>
        </div>
      </div>
      
      <div id="footer" data-section="footer">
        <div className="p-16 bg-gray-100">
          <div className="grid grid-cols-4 gap-8 mb-8">
            <div>
              <h3 className="text-xl font-bold mb-4">Red Room</h3>
            </div>
            <div>
              <h4 className="font-semibold mb-2">Classes</h4>
              <div className="space-y-1">
                <div><a href="#feature" className="text-gray-600 hover:text-gray-900">All Levels</a></div>
                <div><a href="#feature" className="text-gray-600 hover:text-gray-900">Business English</a></div>
                <div><a href="#faq" className="text-gray-600 hover:text-gray-900">Exam Preparation</a></div>
              </div>
            </div>
            <div>
              <h4 className="font-semibold mb-2">School</h4>
              <div className="space-y-1">
                <div><a href="#about" className="text-gray-600 hover:text-gray-900">About Us</a></div>
                <div><a href="#team" className="text-gray-600 hover:text-gray-900">Meet Our Team</a></div>
                <div><a href="#testimonial" className="text-gray-600 hover:text-gray-900">Student Reviews</a></div>
              </div>
            </div>
            <div>
              <h4 className="font-semibold mb-2">Contact</h4>
              <div className="space-y-1">
                <div><a href="#contact" className="text-gray-600 hover:text-gray-900">Get in Touch</a></div>
                <div><a href="#contact" className="text-gray-600 hover:text-gray-900">Schedule Demo</a></div>
                <div><a href="mailto:info@redroom.com" className="text-gray-600 hover:text-gray-900">Email Support</a></div>
              </div>
            </div>
          </div>
          <div className="border-t pt-4 text-center text-gray-600">
            <p>© 2025 Red Room English School. All rights reserved.</p>
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}