import Link from "next/link";
import type { TrainingSession } from "@/lib/store";
import ScrollReveal from "@/components/ui/ScrollReveal";
import BrushStroke from "@/components/ui/BrushStroke";
import TrainingTable from "@/components/ui/TrainingTable";

export default function ScheduleSection({ sessions }: { sessions: TrainingSession[] }) {
  return (
    <section className="overflow-x-hidden bg-secondary py-section">
      <div className="mx-auto grid max-w-content items-start gap-12 px-6 md:grid-cols-2">
        <ScrollReveal className="min-w-0">
          <h2 className="font-display text-section-title leading-tight text-cream">Wann wir trainieren</h2>
          <BrushStroke />
          <p className="text-base leading-relaxed text-gray-200">
            Wir trainieren dreimal wöchentlich in Arbon — für Jugendliche und Erwachsene. Neueinsteiger sind mit
            dem Anfängerkurs jederzeit willkommen.
          </p>
          <Link
            href="/trainingszeiten"
            className="mt-6 inline-block rounded border border-cream/30 px-6 py-3 font-semibold text-cream transition-colors duration-fast hover:border-primary hover:text-primary-light"
          >
            Alle Trainingszeiten &amp; Gruppen
          </Link>
        </ScrollReveal>

        <ScrollReveal delayMs={150} className="min-w-0">
          <TrainingTable sessions={sessions} />
        </ScrollReveal>
      </div>
    </section>
  );
}