"use client";

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

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="solid-accent"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="minimal"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <div className="text-center py-8">
          <h1 className="text-4xl font-bold mb-4">Valera Speak English</h1>
          <nav className="flex justify-center space-x-6">
            <a href="#hero" className="hover:text-blue-600">Home</a>
            <a href="#about" className="hover:text-blue-600">About</a>
            <a href="#features" className="hover:text-blue-600">Courses</a>
            <a href="#testimonial" className="hover:text-blue-600">Reviews</a>
            <a href="#contact" className="hover:text-blue-600">Contact</a>
          </nav>
        </div>
      </div>

      <div id="hero" data-section="hero">
        <div className="text-center py-16">
          <h1 className="text-6xl font-bold mb-6">Master English with Valera Speak English</h1>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
            <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484694244-h6z6ypcz.jpg" alt="English classroom with students" className="w-full h-48 object-cover rounded" />
            <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484695254-p59fsyqd.jpg" alt="English language lesson" className="w-full h-48 object-cover rounded" />
            <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484693438-07rkdlqa.jpg" alt="Professional English training" className="w-full h-48 object-cover rounded" />
            <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484689467-d854773z.jpg" alt="English conversation group" className="w-full h-48 object-cover rounded" />
            <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494973168-mwn1lqco.jpg" alt="English speaking practice" className="w-full h-48 object-cover rounded" />
          </div>
          <div className="flex justify-center space-x-4">
            <a href="#contact" className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700">Start Learning</a>
            <a href="#about" className="border border-blue-600 text-blue-600 px-6 py-3 rounded-lg hover:bg-blue-50">Learn More</a>
          </div>
        </div>
      </div>

      <div id="about" data-section="about">
        <div className="py-16">
          <h2 className="text-4xl font-bold mb-6">About Valera Speak English</h2>
          <p className="text-lg mb-8">At Valera Speak English, we believe that language learning should be engaging, practical, and transformative. Our dedicated team of experienced educators is committed to helping students master English through interactive lessons, real-world conversation practice, and personalized learning paths tailored to each student's goals and pace.</p>
          <div className="grid grid-cols-2 gap-8">
            <div className="text-center">
              <div className="text-4xl font-bold text-blue-600">10+</div>
              <div className="text-lg">Years of Excellence</div>
            </div>
            <div className="text-center">
              <div className="text-4xl font-bold text-blue-600">5000+</div>
              <div className="text-lg">Students Enrolled</div>
            </div>
          </div>
        </div>
      </div>

      <div id="features" data-section="features">
        <div className="py-16">
          <div className="text-center mb-12">
            <span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Methods</span>
            <h2 className="text-4xl font-bold mt-4 mb-4">Our Teaching Methods</h2>
            <p className="text-lg">Discover the core features that make Valera the premier choice for English education</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494975050-7ahm4emg.jpg" alt="English conversation practice" className="w-full h-48 object-cover rounded mb-4" />
              <h3 className="text-2xl font-bold mb-2">Conversational English</h3>
              <p>Practice real-world speaking skills through dynamic group discussions and one-on-one interactions</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484690859-dcha1n3w.jpg" alt="English writing and grammar" className="w-full h-48 object-cover rounded mb-4" />
              <h3 className="text-2xl font-bold mb-2">Grammar Mastery</h3>
              <p>Build strong grammatical foundations with structured lessons and practical writing exercises</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494976181-onrupp9y.jpg" alt="Listening comprehension training" className="w-full h-48 object-cover rounded mb-4" />
              <h3 className="text-2xl font-bold mb-2">Listening Skills</h3>
              <p>Develop comprehension abilities through authentic materials, podcasts, and audio exercises</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484691610-pealshm9.jpg" alt="Interactive learning environment" className="w-full h-48 object-cover rounded mb-4" />
              <h3 className="text-2xl font-bold mb-2">Interactive Learning</h3>
              <p>Engage with modern educational technology and interactive classroom activities for better retention</p>
            </div>
          </div>
        </div>
      </div>

      <div id="testimonial" data-section="testimonial">
        <div className="py-16">
          <div className="text-center mb-12">
            <span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Reviews</span>
            <h2 className="text-4xl font-bold mt-4 mb-4">What Our Students Say</h2>
            <p className="text-lg">Hear from students who have transformed their English skills with Valera</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <div className="flex items-center mb-4">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484712325-ocj12p51.jpg" alt="Sarah Johnson" className="w-12 h-12 rounded-full mr-4" />
                <div>
                  <div className="font-bold">Sarah Johnson</div>
                  <div className="text-gray-500">@sarahj_english</div>
                </div>
              </div>
              <div className="flex mb-2">
                <span className="text-yellow-400">★★★★★</span>
              </div>
              <p>"The conversational classes at Valera transformed my confidence. I went from being nervous about speaking to leading meetings at work!"</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <div className="flex items-center mb-4">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484716089-kpbfo3ho.jpg" alt="Michael Chen" className="w-12 h-12 rounded-full mr-4" />
                <div>
                  <div className="font-bold">Michael Chen</div>
                  <div className="text-gray-500">@mchen_learning</div>
                </div>
              </div>
              <div className="flex mb-2">
                <span className="text-yellow-400">★★★★★</span>
              </div>
              <p>"The teachers are incredibly patient and knowledgeable. They tailored the lessons to my specific needs, and I achieved my fluency goals faster than expected."</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <div className="flex items-center mb-4">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484718833-8686x51w.jpg" alt="Emily Rodriguez" className="w-12 h-12 rounded-full mr-4" />
                <div>
                  <div className="font-bold">Emily Rodriguez</div>
                  <div className="text-gray-500">@emily_speaks</div>
                </div>
              </div>
              <div className="flex mb-2">
                <span className="text-yellow-400">★★★★★</span>
              </div>
              <p>"Best investment I made in myself. The interactive methods and supportive environment made learning English enjoyable and effective."</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <div className="flex items-center mb-4">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494979130-y5xz3d1f.jpg" alt="David Kim" className="w-12 h-12 rounded-full mr-4" />
                <div>
                  <div className="font-bold">David Kim</div>
                  <div className="text-gray-500">@david_fluent</div>
                </div>
              </div>
              <div className="flex mb-2">
                <span className="text-yellow-400">★★★★★</span>
              </div>
              <p>"I struggled with grammar for years. Valera's structured approach finally made everything click. Highly recommend to anyone serious about English!"</p>
            </div>
          </div>
        </div>
      </div>

      <div id="contact" data-section="contact">
        <div className="py-16">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
            <div>
              <span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Newsletter</span>
              <h2 className="text-4xl font-bold mt-4 mb-4">Stay Updated</h2>
              <p className="text-lg mb-6">Subscribe to our newsletter for course updates, learning tips, and exclusive offers for our community</p>
              <form className="flex flex-col space-y-4">
                <input type="email" placeholder="Enter your email" className="px-4 py-3 border rounded-lg" />
                <button type="submit" className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700">Subscribe</button>
                <p className="text-sm text-gray-500">We respect your privacy. Unsubscribe anytime.</p>
              </form>
            </div>
            <div>
              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494977068-7yfz149c.jpg" alt="Newsletter subscription" className="w-full h-96 object-cover rounded-lg" />
            </div>
          </div>
        </div>
      </div>

      <div id="metrics" data-section="metrics">
        <div className="py-16">
          <h2 className="text-4xl font-bold mb-6">Our Impact and Reach</h2>
          <p className="text-lg mb-8">Valera Speak English has established itself as a leading language education provider, with thousands of satisfied students achieving their English fluency goals. Our commitment to excellence and personalized instruction continues to drive success across diverse learning backgrounds.</p>
          <div className="grid grid-cols-2 gap-8">
            <div className="text-center">
              <div className="text-4xl font-bold text-blue-600">8500+</div>
              <div className="text-lg">Global Students</div>
            </div>
            <div className="text-center">
              <div className="text-4xl font-bold text-blue-600">94%</div>
              <div className="text-lg">Success Rate</div>
            </div>
          </div>
        </div>
      </div>

      <div id="footer" data-section="footer">
        <div className="py-16">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494978042-wcefq63v.jpg" alt="Library and books" className="w-full h-48 object-cover rounded mb-4" />
              <h3 className="text-2xl font-bold mb-2">Valera Speak English</h3>
              <p className="text-gray-600">© 2025 Valera Speak English. All rights reserved.</p>
            </div>
            <div>
              <h4 className="font-bold mb-4">Courses</h4>
              <ul className="space-y-2">
                <li><a href="#" className="hover:text-blue-600">Beginner</a></li>
                <li><a href="#" className="hover:text-blue-600">Intermediate</a></li>
                <li><a href="#" className="hover:text-blue-600">Advanced</a></li>
                <li><a href="#" className="hover:text-blue-600">Business English</a></li>
              </ul>
            </div>
            <div>
              <h4 className="font-bold mb-4">Company</h4>
              <ul className="space-y-2">
                <li><a href="#about" className="hover:text-blue-600">About Us</a></li>
                <li><a href="#contact" className="hover:text-blue-600">Contact</a></li>
                <li><a href="#" className="hover:text-blue-600">Blog</a></li>
                <li><a href="#" className="hover:text-blue-600">Careers</a></li>
              </ul>
            </div>
            <div>
              <h4 className="font-bold mb-4">Legal</h4>
              <ul className="space-y-2">
                <li><a href="#" className="hover:text-blue-600">Terms of Service</a></li>
                <li><a href="#" className="hover:text-blue-600">Privacy Policy</a></li>
                <li><a href="#" className="hover:text-blue-600">Cookie Policy</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}