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

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

const EVU_STATS = [
  { value: "< 24 h", label: "bis zur Rückmeldung auf Ihren Bedarf" },
];

const EVU_ARGS = [];

const EVU_STEPS = [
  { t: "Bedarf melden", d: "Sie nennen Strecke, Qualifikation und Zeitraum. Ein Anruf genügt." },
  { t: "Passgenaue Auswahl", d: "Wir prüfen Verfügbarkeit und Eignung – und melden uns kurzfristig zurück." },
  { t: "Einsatz & Betreuung", d: "Die Lokführer:in fährt, ein fester Ansprechpartner bleibt an Ihrer Seite." },
];

const EVU_SERVICES = [
  { icon: "user-check", t: "Geprüfte Qualifikation", d: "Triebfahrzeugführerschein, Strecken- und Baureihenkenntnis – dokumentiert." },
  { icon: "clock", t: "Kurzfristige Einsätze", d: "Schnelle Rückmeldung, wenn es im Betrieb eng wird." },
  { icon: "sliders-horizontal", t: "Flexible Modelle", d: "Vom einzelnen Dienst bis zur dauerhaften Verstärkung." },
  { icon: "shield-check", t: "Verlässlichkeit", d: "Klare Zusagen, dokumentierte Eignung, kein Risiko im Betrieb." },
  { icon: "headset", t: "Fester Ansprechpartner", d: "Eine Person, kurze Wege – kein Callcenter." },
  { icon: "map", t: "Bundesweit", d: "Personal für Strecken in allen Regionen." },
];

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

  return (
    <React.Fragment>
      <SubNav active="evu" />
      <PageHero
        eyebrow="Für Eisenbahnverkehrsunternehmen"
        title={["Qualifizierte Lokführer.", "Wenn Sie sie brauchen."]}
        sub="Messbare Risikominimierung bei gleichzeitiger Effizienzsteigerung – für Ihren Betrieb, ohne Kompromisse."
        primary="Erstgespräch vereinbaren"
        secondary="Wieso Railo"
        tone="immersive" />

      <StatRow items={EVU_STATS} />

      {EVU_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={`evu-arg-${i}`} />
      ))}

      <ProcessSteps
        eyebrow="So arbeiten wir zusammen"
        head="Vom Bedarf zum Einsatz – ohne Umwege."
        steps={EVU_STEPS} tinted={!split} />

      <FeatureGrid
        eyebrow="Leistungen"
        head="Alles, was Ihren Betrieb absichert."
        items={EVU_SERVICES} columns={3} tinted={split} />

      <CTABand
        eyebrow="Personal gesucht?"
        head="Sagen Sie uns, was Sie brauchen."
        sub="Wir melden uns kurzfristig zur Bedarfsanalyse und Planung, um den besten Ablauf zu gewährleisten."
        primary="Erstgespräch vereinbaren"
        secondary="Railo kennenlernen"
        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 />);