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

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSizeMediumTitles"
      background="fluid"
      cardStyle="solid-accent"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <div className="bg-white text-black p-6">
          <h1 className="text-2xl font-bold">English Dom</h1>
          <nav>
            <ul className="flex space-x-4">
              <li><a href="#hero">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#features">Courses</a></li>
              <li><a href="#testimonials">Testimonials</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </nav>
        </div>
      </div>

      <div id="hero" data-section="hero">
        <section className="min-h-screen bg-gradient-to-r from-blue-600 to-purple-600 text-white flex items-center justify-center">
          <div className="text-center">
            <h1 className="text-5xl font-bold mb-4">English Dom</h1>
            <p className="text-xl mb-8">Master English fluency with expert instructors. Interactive lessons designed for all levels.</p>
            <div className="space-x-4">
              <button className="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold">Start Trial</button>
              <button className="border border-white px-6 py-3 rounded-lg font-semibold">All Courses</button>
            </div>
          </div>
        </section>
      </div>

      <div id="about" data-section="about">
        <section className="py-20 bg-gray-50">
          <div className="max-w-6xl mx-auto px-4">
            <span className="text-blue-600 font-semibold">Our Story</span>
            <h2 className="text-4xl font-bold mb-6">Transforming English Education Since 2015</h2>
            <p className="text-gray-600 mb-8">We believe learning English should be engaging, accessible, and effective for everyone.</p>
            <div className="grid md:grid-cols-2 gap-8">
              <div>
                <span className="text-blue-600 font-semibold">MISSION</span>
                <h3 className="text-2xl font-bold mb-4">Expert instruction meets modern methodology</h3>
                <p className="text-gray-600">English Dom combines traditional teaching excellence with cutting-edge technology. Our certified instructors create personalized learning experiences that help students achieve fluency in speaking, listening, reading, and writing.</p>
                <button className="mt-6 bg-blue-600 text-white px-6 py-3 rounded-lg">Learn More</button>
              </div>
              <div>
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484692441-ky6zbpw9.jpg" alt="English Dom learning center" className="rounded-lg" />
              </div>
            </div>
          </div>
        </section>
      </div>

      <div id="features" data-section="features">
        <section className="py-20 bg-white">
          <div className="max-w-6xl mx-auto px-4">
            <span className="text-blue-600 font-semibold">Courses</span>
            <h2 className="text-4xl font-bold mb-6">Comprehensive Course Levels</h2>
            <p className="text-gray-600 mb-12">From complete beginner to advanced proficiency, our structured programs ensure steady progress.</p>
            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
              <div className="bg-gray-50 p-6 rounded-lg">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484693438-07rkdlqa.jpg" alt="Beginner English course" className="rounded-lg mb-4" />
                <h3 className="text-xl font-bold mb-2">Beginner English</h3>
                <p className="text-gray-600">Master pronunciation, basic vocabulary, and essential grammar. Perfect for absolute beginners starting their English journey.</p>
              </div>
              <div className="bg-gray-50 p-6 rounded-lg">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484694244-h6z6ypcz.jpg" alt="Intermediate English course" className="rounded-lg mb-4" />
                <h3 className="text-xl font-bold mb-2">Intermediate English</h3>
                <p className="text-gray-600">Build conversational fluency with real-world scenarios. Expand vocabulary and master complex grammar structures.</p>
              </div>
              <div className="bg-gray-50 p-6 rounded-lg">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484695254-p59fsyqd.jpg" alt="Advanced English course" className="rounded-lg mb-4" />
                <h3 className="text-xl font-bold mb-2">Advanced English</h3>
                <p className="text-gray-600">Achieve native-like fluency and professionalism. Specialized content for business, academic, and cultural contexts.</p>
              </div>
              <div className="bg-gray-50 p-6 rounded-lg">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484696101-v2pl2f1j.jpg" alt="Certification programs" className="rounded-lg mb-4" />
                <h3 className="text-xl font-bold mb-2">Certification Programs</h3>
                <p className="text-gray-600">Prepare for international exams including TOEFL, IELTS, and Cambridge certificates with expert guidance.</p>
              </div>
            </div>
          </div>
        </section>
      </div>

      <div id="contact" data-section="contact">
        <section className="py-20 bg-blue-600 text-white">
          <div className="max-w-4xl mx-auto px-4 text-center">
            <span className="font-semibold">Newsletter</span>
            <h2 className="text-4xl font-bold mb-6">Start Your English Journey Today</h2>
            <p className="text-lg mb-8">Join thousands of students who are achieving fluency with English Dom. Get expert guidance, personalized lessons, and proven results.</p>
            <div className="max-w-md mx-auto flex">
              <input type="email" placeholder="Enter your email address" className="flex-1 px-4 py-3 rounded-l-lg text-black" />
              <button className="bg-white text-blue-600 px-6 py-3 rounded-r-lg font-semibold">Join Now US</button>
            </div>
            <p className="text-sm mt-4 opacity-80">We respect your privacy. Unsubscribe at any time. By signing up, you agree to our Terms of Service.</p>
          </div>
        </section>
      </div>

      <div id="footer" data-section="footer">
        <footer className="bg-gray-900 text-white py-16">
          <div className="max-w-6xl mx-auto px-4">
            <div className="text-center mb-8">
              <h3 className="text-2xl font-bold">English Dom</h3>
            </div>
            <div className="grid md:grid-cols-4 gap-8">
              <div>
                <ul className="space-y-2">
                  <li><a href="#hero" className="text-gray-400 hover:text-white">Home</a></li>
                  <li><a href="#about" className="text-gray-400 hover:text-white">About Us</a></li>
                  <li><a href="#features" className="text-gray-400 hover:text-white">Courses</a></li>
                </ul>
              </div>
              <div>
                <ul className="space-y-2">
                  <li><a href="#pricing" className="text-gray-400 hover:text-white">Pricing</a></li>
                  <li><a href="#testimonials" className="text-gray-400 hover:text-white">Testimonials</a></li>
                  <li><a href="#contact" className="text-gray-400 hover:text-white">Contact</a></li>
                </ul>
              </div>
              <div>
                <ul className="space-y-2">
                  <li><a href="#" className="text-gray-400 hover:text-white">Privacy Policy</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-white">Terms of Service</a></li>
                  <li><a href="#" className="text-gray-400 hover:text-white">Sitemap</a></li>
                </ul>
              </div>
              <div>
                <ul className="space-y-2">
                  <li><a href="https://facebook.com" className="text-gray-400 hover:text-white">Facebook</a></li>
                  <li><a href="https://twitter.com" className="text-gray-400 hover:text-white">Twitter</a></li>
                  <li><a href="https://linkedin.com" className="text-gray-400 hover:text-white">LinkedIn</a></li>
                </ul>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </ThemeProvider>
  );
}
