landing_page/refer_landing_page/app/lectures/page.tsx

"use client";

import React, { useEffect, useState } from "react";
import Reveal from "@/components/Reveal";
import { getSemesters } from "../../lib/api";
import type { Semester } from "../../content/types";

export default function LecturesPage() {
  const [semesters, setSemesters] = useState<Semester[]>([]);

  useEffect(() => {
    getSemesters().then((s) => {
      if (s) setSemesters(s);
    });
  }, []);

  const recentSemesters = semesters.slice(0, 3);
  const olderSemesters = semesters.slice(3);

  const oldestSem = olderSemesters[olderSemesters.length - 1];
  const newestOlderSem = olderSemesters[0];

  return (
    <div className="container-content py-8 sm:py-12 space-y-10 sm:space-y-14">
      {/* Page Header */}
      <section>
        <Reveal variant="up">
          <h1 className="font-serif text-4xl sm:text-5xl font-normal text-ink tracking-tight">
            LECTURES
          </h1>
        </Reveal>
      </section>

      {/* Recent 3 Semesters */}
      <section className="space-y-6 pt-6 md:pt-8 border-t border-line">
        <Reveal variant="up">
          <div className="flex justify-between items-center">
            <h2 className="font-serif text-2xl sm:text-3xl font-normal text-cobalt-dark">
              Recent Courses
            </h2>
            <span className="font-mono text-xs text-ink-mute hidden sm:inline">
              Latest 3 Semesters
            </span>
          </div>
        </Reveal>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-5 sm:gap-6">
          {recentSemesters.map((sem, idx) => (
            <Reveal
              key={idx}
              variant="up"
              delay={idx * 80}
              className="h-full"
            >
              <div
                className="bg-paper p-5 sm:p-6 rounded-lg border border-line space-y-4 flex flex-col justify-between shadow-sm h-full"
              >
                <div className="space-y-3">
                  <div className="flex justify-between items-center border-b border-line pb-2.5">
                    <span className="font-serif text-lg sm:text-xl font-normal text-ink">
                      {sem.term} {sem.year}
                    </span>
                    <span className="font-mono text-[0.7rem] uppercase tracking-wider text-vermillion-dark font-bold px-2 py-0.5 rounded bg-vermillion-dark/10">
                      Latest
                    </span>
                  </div>

                  <ul className="space-y-2.5 pt-1">
                    {sem.courses.map((c, cIdx) => (
                      <li key={cIdx} className="space-y-0.5">
                        <div className="font-serif text-sm sm:text-base text-ink leading-snug">
                          {c.en}
                        </div>
                        <div className="font-mono text-xs text-ink-mute">
                          Code: {c.code} {c.note && `(${c.note})`}
                        </div>
                      </li>
                    ))}
                  </ul>
                </div>

                <div className="pt-3 border-t border-line/60 font-mono text-xs text-ink-mute flex justify-between items-center">
                  <span>Total Offerings</span>
                  <span className="font-semibold text-ink">{sem.courses.length} Courses</span>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* Older Semesters (Native <details>/<summary> progressive disclosure) */}
      <section className="space-y-6 pt-6 md:pt-8 border-t border-line">
        <Reveal variant="up">
          <div className="border border-line rounded-lg bg-paper p-5 sm:p-6 transition-all duration-200">
            <details className="group">
              <summary className="flex justify-between items-center cursor-pointer list-none select-none">
                <div className="space-y-1">
                  <span className="font-serif text-lg sm:text-xl font-normal text-ink">
                    Browse all semesters
                  </span>
                  <p className="text-xs text-ink-mute font-mono">
                    Course history from {oldestSem ? `${oldestSem.year} ${oldestSem.term}` : "2004 Spring"} to {newestOlderSem ? `${newestOlderSem.year} ${newestOlderSem.term}` : "2024 Fall"} ({olderSemesters.length} Semesters)
                  </p>
                </div>
                <span className="font-mono text-xs text-vermillion-dark font-bold border border-vermillion-dark px-3.5 py-1.5 rounded group-open:bg-vermillion-dark group-open:text-white dark:group-open:text-ivory transition-colors">
                  <span className="group-open:hidden">Open ▾</span>
                  <span className="hidden group-open:inline">Close ▴</span>
                </span>
              </summary>

              <div className="mt-6 pt-6 border-t border-line grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6">
                {olderSemesters.map((sem, idx) => (
                  <div
                    key={idx}
                    className="bg-ivory p-5 rounded-lg border border-line space-y-3 shadow-sm hover:border-cobalt-dark/40 transition-colors"
                  >
                    <div className="font-serif text-base sm:text-lg font-normal text-ink border-b border-line pb-2 flex justify-between items-center">
                      <span>
                        {sem.term} {sem.year}
                      </span>
                      <span className="font-mono text-xs text-ink-mute">
                        {sem.courses.length} Courses
                      </span>
                    </div>

                    <ul className="space-y-2">
                      {sem.courses.map((c, cIdx) => (
                        <li key={cIdx} className="space-y-0.5">
                          <div className="font-serif text-sm text-ink leading-snug">
                            {c.en}
                          </div>
                          <div className="font-mono text-[0.7rem] text-ink-mute">
                            Code: {c.code} {c.note && `(${c.note})`}
                          </div>
                        </li>
                      ))}
                    </ul>
                  </div>
                ))}
              </div>
            </details>
          </div>
        </Reveal>
      </section>
    </div>
  );
}