"use client";

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

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="large"
      sizing="medium"
      background="radialGradient"
      cardStyle="elevated-accent-light"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="outline"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <div className="text-center py-20">
          <h1 className="text-4xl font-bold mb-4">Rubyroid - Master Ruby Programming</h1>
          <p className="text-xl text-gray-600">Learn Ruby and Rails from industry experts</p>
          <nav className="mt-8">
            <ul className="flex justify-center space-x-6">
              <li><a href="#hero" className="hover:text-blue-600">Home</a></li>
              <li><a href="#pricing" className="hover:text-blue-600">Courses</a></li>
              <li><a href="#about" className="hover:text-blue-600">About</a></li>
              <li><a href="#testimonial" className="hover:text-blue-600">Success</a></li>
              <li><a href="#contact" className="hover:text-blue-600">Contact</a></li>
            </ul>
          </nav>
        </div>
      </div>

      <div id="hero" data-section="hero">
        <div className="text-center py-20">
          <h2 className="text-3xl font-bold mb-6">Master Ruby Programming at Rubyroid</h2>
          <p className="text-lg text-gray-600 mb-8">Learn professional-grade Ruby and Rails development from industry experts. Build real-world applications and launch your tech career with comprehensive hands-on training.</p>
          <div className="flex justify-center space-x-8 mb-8">
            <div className="text-center">
              <div className="text-2xl font-bold">500+</div>
              <div className="text-sm text-gray-600">Successful Graduates</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold">95%</div>
              <div className="text-sm text-gray-600">Job Placement Rate</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold">12 Weeks</div>
              <div className="text-sm text-gray-600">Course Duration</div>
            </div>
          </div>
          <div className="space-x-4">
            <a href="#contact" className="bg-blue-600 text-white px-6 py-3 rounded hover:bg-blue-700">Enroll Now</a>
            <a href="#about" className="bg-gray-200 text-gray-800 px-6 py-3 rounded hover:bg-gray-300">Learn More</a>
          </div>
        </div>
      </div>

      <div id="about" data-section="about">
        <div className="py-20">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-3xl font-bold mb-6 text-center">Why Choose Rubyroid</h2>
            <p className="text-lg text-gray-600 text-center mb-8">Rubyroid is a premier IT school dedicated to transforming aspiring developers into industry-ready professionals. Our comprehensive Ruby and Rails curriculum combines theoretical knowledge with practical project experience.</p>
            <div className="text-center">
              <a href="#pricing" className="bg-blue-600 text-white px-6 py-3 rounded hover:bg-blue-700">View Curriculum</a>
            </div>
          </div>
        </div>
      </div>

      <div id="contact" data-section="contact">
        <div className="py-20">
          <div className="max-w-2xl mx-auto">
            <h2 className="text-3xl font-bold mb-6 text-center">Start Your Journey</h2>
            <p className="text-lg text-gray-600 text-center mb-8">Enroll in Rubyroid today and transform your career. Our admissions team is ready to help you get started.</p>
            <form className="space-y-4">
              <input type="text" placeholder="Full Name" className="w-full p-3 border border-gray-300 rounded" required />
              <input type="email" placeholder="Email Address" className="w-full p-3 border border-gray-300 rounded" required />
              <input type="tel" placeholder="Phone Number" className="w-full p-3 border border-gray-300 rounded" required />
              <input type="text" placeholder="Interested Program (Foundation/Professional/Advanced)" className="w-full p-3 border border-gray-300 rounded" required />
              <textarea placeholder="Tell us about your background and goals" rows={5} className="w-full p-3 border border-gray-300 rounded"></textarea>
              <button type="submit" className="w-full bg-blue-600 text-white py-3 rounded hover:bg-blue-700">Submit</button>
            </form>
          </div>
        </div>
      </div>

      <div id="footer" data-section="footer">
        <div className="bg-gray-800 text-white py-12">
          <div className="max-w-6xl mx-auto">
            <div className="grid grid-cols-4 gap-8">
              <div>
                <h3 className="font-bold mb-4">Programs</h3>
                <ul className="space-y-2">
                  <li><a href="#pricing" className="hover:text-gray-300">Foundation Course</a></li>
                  <li><a href="#pricing" className="hover:text-gray-300">Professional Bootcamp</a></li>
                  <li><a href="#pricing" className="hover:text-gray-300">Advanced Program</a></li>
                </ul>
              </div>
              <div>
                <h3 className="font-bold mb-4">Company</h3>
                <ul className="space-y-2">
                  <li><a href="#about" className="hover:text-gray-300">About Us</a></li>
                  <li><a href="#testimonial" className="hover:text-gray-300">Success Stories</a></li>
                  <li><a href="#faq" className="hover:text-gray-300">FAQ</a></li>
                </ul>
              </div>
              <div>
                <h3 className="font-bold mb-4">Contact</h3>
                <ul className="space-y-2">
                  <li><a href="mailto:hello@rubyroid.io" className="hover:text-gray-300">hello@rubyroid.io</a></li>
                  <li><a href="#contact" className="hover:text-gray-300">Support</a></li>
                  <li><a href="#" className="hover:text-gray-300">Careers</a></li>
                </ul>
              </div>
              <div>
                <h3 className="font-bold mb-4">Legal</h3>
                <ul className="space-y-2">
                  <li><a href="#" className="hover:text-gray-300">Terms of Service</a></li>
                  <li><a href="#" className="hover:text-gray-300">Privacy Policy</a></li>
                </ul>
              </div>
            </div>
            <div className="mt-8 pt-8 border-t border-gray-600 text-center">
              <div className="mb-4">
                <h2 className="text-2xl font-bold">Rubyroid</h2>
              </div>
              <p className="text-gray-400">© 2024 Rubyroid. All rights reserved.</p>
            </div>
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}