/* Railo — Unterseite „Für Lokführer:innen" (Bewerber-Bereich).
   Stimme: Du. Zwei Layout-Varianten per Tweak (Zentriert / Bild-Split). */
const {
  SubNav, PageHero, StatRow, ArgumentBand, ProcessSteps, FeatureGrid,
  CTABand, RailoFooter, useRailoTheme, RailoBaseTweaks
} = window;

const LOK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "layout": "Bild-Split",
  "akzent": ["#0a5cff", "#0048d6", "#0036a3"],
  "raster": "Dezent"
} /*EDITMODE-END*/;

const LOK_STATS = [
  { label: "mehr Netto als bei deinem jetzigen Arbeitgeber", hint: "Zahl folgt" },
  { label: "Wochen Dienstplan im Voraus", hint: "Zahl folgt" },
  { label: "feste Ansprechpartnerin – kein Callcenter", hint: "Zahl folgt" },
];

const LOK_ARGS = [
  {
    eyebrow: "Vergütung",
    head: "Wir bezahlen besser als dein Arbeitgeber.",
    sub: "Tariflohn plus Zulagen – transparent, pünktlich, ohne Kleingedrucktes. Dazu einzigartige Zusatzverdienste, die woanders nicht möglich sind.",
    image: "Foto: Lokführer:in im Führerstand",
  },
  {
    eyebrow: "Planung",
    head: "Schichten, die zu deinem Leben passen.",
    sub: "Dein Dienstplan steht Wochen im Voraus. Verlässliche Ruhezeiten inklusive – damit Beruf und Privatleben zusammenpassen.",
    image: "Foto: Bahnsteig am frühen Morgen",
  },
  {
    eyebrow: "Rückhalt",
    head: "Du fährst. Wir kümmern uns um den Rest.",
    sub: "Eine feste Ansprechpartnerin, Weiterbildung auf Railo-Kosten, echte Wertschätzung. Ein Leben lang im Führerstand.",
    image: "Foto: Übergabe am Triebfahrzeug",
  },
];

const LOK_STEPS = [
  { t: "Erstgespräch", d: "Unverbindlich, ehrlich. Wir hören zu, was dir wichtig ist." },
  { t: "Kennenlernen", d: "Wir prüfen gemeinsam, welche Strecke und Schicht zu dir passt." },
  { t: "Erster Einsatz", d: "Vertrag, Einweisung, los geht's – mit Rückhalt vom ersten Tag an." },
];

const LOK_BENEFITS = [
  { icon: "calendar-check", t: "Planbare Schichten", d: "Dienstplan Wochen im Voraus, verlässliche Ruhezeiten." },
  { icon: "euro", t: "Faire Vergütung", d: "Tarif plus Zulagen, pünktlich und transparent." },
  { icon: "trending-up", t: "Zusatzverdienste", d: "Einzigartige Verdienstmöglichkeiten, die es woanders nicht gibt." },
  { icon: "graduation-cap", t: "Weiterbildung", d: "Qualifikationen und Strecken auf Railo-Kosten." },
  { icon: "heart-handshake", t: "Persönliche Betreuung", d: "Eine feste Ansprechpartnerin statt Hotline." },
  { icon: "train-front", t: "Moderne Fahrzeuge", d: "Du steuerst aktuelle Triebfahrzeuge sicher ans Ziel." },
];

function App() {
  const [t, setTweak] = useTweaks(LOK_DEFAULTS);
  useRailoTheme(t);
  const split = t.layout === "Bild-Split";

  return (
    <React.Fragment>
      <SubNav active="lok" />
      <PageHero
        eyebrow="Für Lokführer:innen"
        title={["Dein Platz im", "Führerstand."]}
        sub="Railo bringt dich dorthin, wo du hingehörst – fair bezahlt, planbar, mit echtem Rückhalt."
        primary="Hier zum Erstgespräch"
        secondary="Stellen ansehen"
        tone="immersive" />

      <StatRow items={LOK_STATS} />

      {LOK_ARGS.map((a, i) => (
        <ArgumentBand key={i}
          eyebrow={a.eyebrow} head={a.head} sub={a.sub}
          mode={split ? "split" : "center"}
          tinted={split ? false : i % 2 === 0}
          flip={i % 2 === 1}
          image={a.image} imageId={`lok-arg-${i}`} />
      ))}

      <ProcessSteps
        eyebrow="So läuft's"
        head="In drei Schritten in den Führerstand."
        steps={LOK_STEPS} tinted={!split} />

      <FeatureGrid
        eyebrow="Warum Railo"
        head="Alles, was den Beruf besser macht."
        items={LOK_BENEFITS} columns={3} tinted={split} />

      <CTABand
        eyebrow="Bereit?"
        head="Komm in den Führerstand, wo du hingehörst."
        sub="Ein Anruf genügt. Unverbindlich, ehrlich, auf Augenhöhe."
        primary="Hier zum Erstgespräch"
        secondary="Offene Stellen ansehen"
        primaryHref="#" />

      <RailoFooter />

      <RailoBaseTweaks t={t} setTweak={setTweak}>
        <TweakSection label="Layout" />
        <TweakRadio label="Argumente" value={t.layout} options={["Zentriert", "Bild-Split"]} onChange={(v) => setTweak("layout", v)} />
      </RailoBaseTweaks>
    </React.Fragment>);
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);