// components/AboutPage.jsx

/**
 * About Page Component
 *
 * Displays information about the Naalam platform and its purpose.
 */

// React and hooks are globally available

function AboutPage() {
    // No dynamic data fetching needed for this version of the About page

    return (
        <div className="about-page">
            <section className="about-content">
                {/* Page Title */}
                <h2 className="page-title">About Naalam</h2>

                {/* Introduction */}
                <p>
                    Welcome to Naalam, a modern online learning platform designed
                    to demonstrate key web technologies. This project serves as a
                    practical application developed for the CSC457: Internet Technologies
                    course.
                </p>

                {/* Purpose & Technology */}
                <h3>Project Purpose</h3>
                <p>
                    Naalam showcases the integration of front-end development using
                    React (via CDN and Babel for in-browser JSX transformation)
                    with a PHP backend handling API requests and database interactions
                    (MySQL). It demonstrates concepts like:
                </p>
                <ul>
                    <li>Client-side routing using URL hash fragments.</li>
                    <li>Component-based UI development with React.</li>
                    <li>Fetching and displaying data from a RESTful PHP API.</li>
                    <li>User authentication (sign-up, sign-in, session management).</li>
                    <li>Basic form handling and validation (client and server-side).</li>
                    <li>Dynamic content loading and error handling.</li>
                </ul>

                {/* Vision (Fictional) */}
                <h3>Our Vision (for this Demo)</h3>
                <p>
                    While primarily a technical demonstration, Naalam aims to provide
                    a clean, intuitive, and accessible interface for browsing and
                    accessing educational content. We believe learning should be
                    engaging and readily available.
                </p>
                <p>
                    Explore the courses, interact with the features, and see how
                    these web technologies come together to create a functional
                    (though simplified) e-learning experience.
                </p>

                {/* Call to Action (Optional) */}
                {/*
                <div className="about-cta">
                    <a href="#/" className="button-primary">Explore Courses</a>
                </div>
                */}

            </section>

            {/* Removed the "Featured Courses" section as it duplicates CoursesPage */}

        </div>
    );
}

// Make AboutPage available globally
window.AboutPage = AboutPage;