src/components/course/CourseLanding.tsx

import {translate} from '@docusaurus/Translate';
import React, { JSX, useRef } from 'react';
import Link from '@docusaurus/Link';
import { LayoutNext } from '@site/src/components/home-next/LayoutNext';
import { COURSE_101_MODULES } from './courseModules';
import { HACKATHON_COURSE_TRACK_ENABLED } from './hackathon/hackathonEvent';
import {
    CourseTrackSwitch,
    HackathonTrackPanel,
    useCourseTrack,
    useRevealTrackCard,
} from './hackathon/HackathonCourseTrack';
import './CourseLanding.scss';

function CoursePath(): JSX.Element {
    const cardRef = useRef<HTMLElement>(null);
    const [track, setTrack] = useCourseTrack();
    useRevealTrackCard(cardRef);
    const hackathonOn = HACKATHON_COURSE_TRACK_ENABLED && track === 'hackathon';

    const courseList = (
        <ol className="course-landing__path-list">
            {COURSE_101_MODULES.map((module, index) => (
                <li key={module.number}>
                    <Link
                        className={`course-landing__path-step${index === 0 ? ' course-landing__path-step--current' : ''}`}
                        to={module.href}
                    >
                        <span className="course-landing__path-number">{module.number}</span>
                        <span className="course-landing__path-name">{module.shortTitle}</span>
                        <span className="course-landing__path-arrow" aria-hidden="true">→</span>
                    </Link>
                </li>
            ))}
            <li>
                <div
                    className="course-landing__path-coming"
                    aria-label={translate({id: "landing.CourseLanding.002", message: "More Doris 101 courses coming soon"})}
                >
                    <span className="course-landing__path-number" aria-hidden="true">+</span>
                    <span className="course-landing__path-name">
                        {translate({id: "landing.CourseLanding.003", message: "More courses"})}
                        <small>{translate({id: "landing.CourseLanding.004", message: "Coming soon"})}</small>
                    </span>
                    <span className="course-landing__path-more-mark" aria-hidden="true">···</span>
                </div>
            </li>
        </ol>
    );

    return (
        <aside
            className="course-landing__path-card"
            aria-labelledby="course-path-title"
            data-track={hackathonOn ? 'hackathon' : 'course'}
            ref={cardRef}
        >
            <div className="course-landing__path-header">
                <h2 id="course-path-title">{translate({id: "landing.CourseLanding.006", message: "Your Doris path"})}</h2>
                <span>{hackathonOn ? translate({id: "landing.CourseLanding.007", message: "Self-paced · open to everyone"}) : translate({id: "landing.CourseLanding.008", message: "6 available · more to come"})}</span>
            </div>
            {HACKATHON_COURSE_TRACK_ENABLED ? (
                <>
                    <CourseTrackSwitch track={track} onSelect={setTrack} />
                    <div id="hk-panel-course" role="tabpanel" aria-labelledby="hk-tab-course" hidden={hackathonOn}>
                        {courseList}
                    </div>
                    <HackathonTrackPanel hidden={!hackathonOn} />
                </>
            ) : (
                courseList
            )}
        </aside>
    );
}

export function CourseLanding(): JSX.Element {
    return (
        <LayoutNext
            title={translate({id: "landing.CourseLanding.009", message: "Apache Doris 101 Course"})}
            description={translate({id: "landing.CourseLanding.010", message: "Free Apache Doris 101 course covering architecture, deployment, table design, data operations, analytical queries, and lakehouse connectivity."})}
        >
            <div className="course-landing">
                <section className="course-landing__hero" aria-labelledby="course-title">
                    <div className="course-landing__hero-ring" aria-hidden="true" />
                    <div className="course-landing__container course-landing__hero-grid">
                        <div className="course-landing__hero-copy">
                            <p className="course-landing__eyebrow">{translate({id: "landing.CourseLanding.011", message: "Free course · Beginner friendly"})}</p>
                            <h1 id="course-title">
                                {translate({id: "landing.CourseLanding.012", message: "Learn Doris."})}
                                <span>{translate({id: "landing.CourseLanding.013", message: "Build for real."})}</span>
                            </h1>
                            <p className="course-landing__lead">
                                {translate({id: "landing.CourseLanding.014", message: "Start with the fundamentals of OLAP databases, then move on to advanced topics and practical use of Apache Doris. The course connects general database concepts with Doris's core capabilities, so you can understand and use Doris more effectively. The database knowledge you gain will also apply to other systems."})}
                            </p>
                            <div className="course-landing__actions">
                                <Link className="course-landing__button course-landing__button--primary" to={COURSE_101_MODULES[0].href}>
                                    {translate({id: "landing.CourseLanding.015", message: "Start with the overview →"})}
                                </Link>
                            </div>
                        </div>
                        <CoursePath />
                    </div>
                </section>
            </div>
        </LayoutNext>
    );
}