"use client";

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

export default function ITSchoolPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="mediumLarge"
      background="noiseGradient"
      cardStyle="gradient-subtle"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <div className="p-8 text-center">
          <h1 className="text-2xl font-bold">Bimbim v pope DUM</h1>
          <nav className="mt-4 space-x-4">
            <a href="#hero" className="text-blue-600 hover:underline">Home</a>
            <a href="#about" className="text-blue-600 hover:underline">About</a>
            <a href="#courses" className="text-blue-600 hover:underline">Courses</a>
            <a href="#testimonials" className="text-blue-600 hover:underline">Testimonials</a>
            <a href="#contact" className="text-blue-600 hover:underline">Contact</a>
          </nav>
        </div>
      </div>
      
      <div id="hero" data-section="hero">
        <div className="p-12 text-center">
          <h1 className="text-4xl font-bold mb-6">BIMBIM</h1>
          <p className="text-lg mb-8 max-w-2xl mx-auto">Master the digital world with industry-leading IT education. Learn programming, web development, data science, and more from experienced professionals.</p>
          <div className="space-x-4">
            <a href="#courses" className="bg-blue-600 text-white px-6 py-3 rounded hover:bg-blue-700">Explore Courses</a>
            <a href="#contact" className="bg-gray-200 text-gray-800 px-6 py-3 rounded hover:bg-gray-300">Contact Us</a>
          </div>
        </div>
      </div>
      
      <div id="about" data-section="about">
        <div className="p-12">
          <h2 className="text-3xl font-bold mb-4">Empowering the Next Generation of IT Professionals</h2>
          <p className="text-lg mb-6">Bimbim v pope DUM is dedicated to providing comprehensive, hands-on IT education. Our expert instructors combine practical experience with innovative teaching methods to help students master cutting-edge technologies and launch successful careers in tech.</p>
          <a href="#courses" className="bg-blue-600 text-white px-6 py-3 rounded hover:bg-blue-700">Learn More</a>
        </div>
      </div>
      
      <div id="courses" data-section="courses">
        <div className="p-12">
          <h2 className="text-3xl font-bold mb-4">Our Core Programs</h2>
          <p className="text-lg mb-8">Choose from our comprehensive selection of IT courses designed to build real-world skills.</p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-white p-6 rounded-lg shadow">
              <h3 className="text-xl font-bold mb-2">Web Development</h3>
              <p>Learn HTML, CSS, JavaScript, React, and modern web frameworks. Build responsive, interactive websites and web applications.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow">
              <h3 className="text-xl font-bold mb-2">Programming Fundamentals</h3>
              <p>Master programming basics with Python, Java, or C++. Understand algorithms, data structures, and software design principles.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow">
              <h3 className="text-xl font-bold mb-2">Data Science & Analytics</h3>
              <p>Explore data analysis, machine learning, and visualization. Learn to extract insights from complex datasets.</p>
            </div>
          </div>
        </div>
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <div className="p-12">
          <h2 className="text-3xl font-bold mb-4">Join thousands of successful graduates building careers in tech</h2>
          <p className="text-lg mb-8">Student Success Stories</p>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
            <div className="text-center">
              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766484714329-4i8nds16.jpg" alt="Ahmed Hassan" className="w-20 h-20 rounded-full mx-auto mb-2" />
              <p className="font-semibold">Ahmed Hassan</p>
            </div>
            <div className="text-center">
              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414401529-6db20epg.jpg" alt="Fatima Al-Rashid" className="w-20 h-20 rounded-full mx-auto mb-2" />
              <p className="font-semibold">Fatima Al-Rashid</p>
            </div>
            <div className="text-center">
              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492697041-9adqfrju.jpg" alt="Mohammed Ibrahim" className="w-20 h-20 rounded-full mx-auto mb-2" />
              <p className="font-semibold">Mohammed Ibrahim</p>
            </div>
            <div className="text-center">
              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492698706-udp5pns4.jpg" alt="Layla Saeed" className="w-20 h-20 rounded-full mx-auto mb-2" />
              <p className="font-semibold">Layla Saeed</p>
            </div>
            <div className="text-center">
              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766743064968-mn7r0vxe.jpg" alt="Omar Khalil" className="w-20 h-20 rounded-full mx-auto mb-2" />
              <p className="font-semibold">Omar Khalil</p>
            </div>
            <div className="text-center">
              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766743065834-k1ycryfc.jpg" alt="Sara Al-Mansouri" className="w-20 h-20 rounded-full mx-auto mb-2" />
              <p className="font-semibold">Sara Al-Mansouri</p>
            </div>
          </div>
        </div>
      </div>
      
      <div id="contact" data-section="contact">
        <div className="p-12 text-center">
          <p className="text-lg mb-8">Ready to advance your IT career? Get in touch with our admissions team today and start your learning journey.</p>
          <div className="space-x-4">
            <a href="mailto:info@bimbim.edu" className="bg-blue-600 text-white px-6 py-3 rounded hover:bg-blue-700">Enroll Now</a>
            <a href="tel:+1234567890" className="bg-gray-200 text-gray-800 px-6 py-3 rounded hover:bg-gray-300">Schedule a Call</a>
          </div>
        </div>
      </div>
      
      <div id="footer" data-section="footer">
        <div className="p-8 text-center bg-gray-100">
          <h3 className="text-xl font-bold">Bimbim v pope DUM</h3>
          <p className="text-gray-600 mt-2">© 2024 Bimbim v pope DUM. All rights reserved.</p>
        </div>
      </div>
    </ThemeProvider>
  );
}