import { Ledger } from "@/components/ui/Ledger";
import { trainings as trainingsDe, type TrainingsContent } from "@/content/trainings";
import { SectionHeading } from "@/components/services/SectionHeading";

/** Ausgangslage „Vier Bremsen.“ – H2 cols 3–8, situations ledger cols 3–11 (rows stagger in via Reveal). */
export function TrainingsSituations({ content = trainingsDe }: { content?: TrainingsContent }) {
  const { eyebrow, h2, rows } = content.situations;
  return (
    <>
      <SectionHeading eyebrow={eyebrow} h2={h2} className="col-span-12 lg:col-span-6 lg:col-start-3" />
      <div className="col-span-12 mt-12 lg:col-span-8 lg:col-start-3 lg:mt-16">
        <Ledger variant="situations" rows={rows} />
      </div>
    </>
  );
}

export default TrainingsSituations;