"use client";

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

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="mediumSmall"
      sizing="medium"
      background="dotGrid"
      cardStyle="layered-gradient"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-indigo-50">
          <div className="text-center space-y-8 max-w-2xl px-6">
            <div className="space-y-4">
              <h1 className="text-4xl md:text-6xl font-bold text-gray-900">
                Capital Great
              </h1>
              <p className="text-lg md:text-xl text-gray-600">
                English Language School
              </p>
            </div>
            <div className="space-y-6">
              <p className="text-gray-700 leading-relaxed">
                Master English with expert instructors at Capital Great. Professional courses for all levels. Start your learning journey today.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <button className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors">
                  Start Learning
                </button>
                <button className="border border-blue-600 text-blue-600 px-8 py-3 rounded-lg hover:bg-blue-50 transition-colors">
                  Learn More
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="hero" data-section="hero">
        <div className="min-h-96 flex items-center justify-center bg-gradient-to-br from-green-50 to-emerald-50">
          <div className="text-center space-y-4 max-w-xl px-6">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900">
              Transform Your English Skills
            </h2>
            <p className="text-gray-700">
              Build confidence, fluency, and success with our comprehensive English programs.
            </p>
          </div>
        </div>
      </div>

      <div id="about" data-section="about">
        <div className="min-h-96 flex items-center justify-center bg-gradient-to-br from-purple-50 to-pink-50">
          <div className="text-center space-y-4 max-w-xl px-6">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900">
              About Capital Great
            </h2>
            <p className="text-gray-700">
              Dedicated to helping students achieve fluency and confidence in English with experienced instructors and proven methodologies.
            </p>
          </div>
        </div>
      </div>

      <div id="feature" data-section="feature">
        <div className="min-h-96 flex items-center justify-center bg-gradient-to-br from-yellow-50 to-orange-50">
          <div className="text-center space-y-4 max-w-xl px-6">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900">
              Our Programs
            </h2>
            <p className="text-gray-700">
              Speaking & Conversation, Grammar & Writing, Reading & Comprehension - comprehensive courses for all proficiency levels.
            </p>
          </div>
        </div>
      </div>

      <div id="team" data-section="team">
        <div className="min-h-96 flex items-center justify-center bg-gradient-to-br from-teal-50 to-cyan-50">
          <div className="text-center space-y-4 max-w-xl px-6">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900">
              Expert Instructors
            </h2>
            <p className="text-gray-700">
              Meet our experienced educators passionate about English language excellence.
            </p>
          </div>
        </div>
      </div>

      <div id="testimonial" data-section="testimonial">
        <div className="min-h-96 flex items-center justify-center bg-gradient-to-br from-rose-50 to-red-50">
          <div className="text-center space-y-4 max-w-xl px-6">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900">
              Success Stories
            </h2>
            <p className="text-gray-700">
              Hear from our students about their transformative English learning journey with Capital Great.
            </p>
          </div>
        </div>
      </div>

      <div id="pricing" data-section="pricing">
        <div className="min-h-96 flex items-center justify-center bg-gradient-to-br from-indigo-50 to-blue-50">
          <div className="text-center space-y-4 max-w-xl px-6">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900">
              Choose Your Plan
            </h2>
            <p className="text-gray-700">
              Flexible pricing options for every learning goal and budget. From starter to intensive programs.
            </p>
          </div>
        </div>
      </div>

      <div id="contact" data-section="contact">
        <div className="min-h-96 flex items-center justify-center bg-gradient-to-br from-gray-50 to-slate-50">
          <div className="text-center space-y-4 max-w-xl px-6">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900">
              Start Your Journey
            </h2>
            <p className="text-gray-700">
              Get in touch with our team to discuss your learning goals and find the perfect program.
            </p>
          </div>
        </div>
      </div>

      <div id="footer" data-section="footer">
        <div className="bg-gray-900 text-white py-12">
          <div className="text-center space-y-4">
            <h3 className="text-2xl font-bold">Capital Great</h3>
            <p className="text-gray-300">English Language School</p>
            <p className="text-gray-400 text-sm">
              © 2024 Capital Great. All rights reserved.
            </p>
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}