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

/**
 * Page-level corrections to <ModuleTable/> (shared component – see report).
* Scoped to xl and above, where the ledger has room; between lg and xl the shared
 * table has a separate, pre-existing problem (the Bodoni titles overrun the
 * „Ziel“ column) that needs the component itself to move its five-column
 * layout from `lg:` to `xl:`.
 *
 * 1. The „+“ carries `self-start`, so it floated above the right-aligned mono
 *    meta. The row is already `items-baseline`, so the glyph goes back on
 *    that baseline and lines up with the meta’s first line.
 * 2. From 1360 px – the first width at which the mono meta has real slack –
 *    the trailing glyph column drops from 2 rem to 1 rem (the free space goes
 *    to the fr columns), so the „+“ no longer sits ~55 px clear of the meta
 *    and the right edge of the table resolves.
 * Written out in full – Tailwind only ever sees literal class strings.
 */
const MODULE_TABLE_FIX = [
  "xl:[&_.self-start]:self-baseline",
  "min-[1360px]:[&>div]:grid-cols-[minmax(0,3.5fr)_minmax(0,3fr)_minmax(0,2fr)_minmax(0,2.2fr)_1rem]",
  "min-[1360px]:[&_summary]:grid-cols-[minmax(0,3.5fr)_minmax(0,3fr)_minmax(0,2fr)_minmax(0,2.2fr)_1rem]",
].join(" ");

/**
 * Leistungsbausteine („Vier Module.“) – ledger table cols 3–12: header row
 * „Modul | Ziel | Für wen“, one native `<details>` per module (+ → ×),
 * opening to the hairline-separated „Inhalte“ list.
 */
export function TrainingsModules({ content = trainingsDe }: { content?: TrainingsContent }) {
  const { eyebrow, h2, items, labels } = content.modules;
  return (
    <>
      <SectionHeading eyebrow={eyebrow} h2={h2} className="col-span-12 lg:col-span-6 lg:col-start-3" />
      <Reveal className="col-span-12 mt-12 lg:col-span-8 lg:col-start-3 lg:mt-16">
        <ModuleTable modules={items} labels={labels} className={MODULE_TABLE_FIX} />
      </Reveal>
    </>
  );
}

export default TrainingsModules;