/* global React, window */
/**
 * sections-general.jsx, sections used on the "Über uns" homepage and shared
 * with the Handwerker page (SectionCaseKWM, SectionFooterGeneral).
 *
 * Tone: corporate-facing, discreet on financials, leans on visualizations.
 *
 * Hierarchy contract:
 * - Each <section> here belongs underneath the page <h1> (in *.html).
 * - Section title = <h2>, card titles inside cards = <h3>, sub-titles inside
 *   <h3>-led blocks = <h4>. The footer "Lass uns sprechen" is the section <h2>.
 *
 * SectionFooterGeneral: the brand block + "Impressum · Datenschutz · AGB" line
 * is intentionally untouched, owned by another agent.
 */

(() => {
const T = window.TOKENS;

// Shared eyebrow style used at the top of every section title block.
const eyebrowStyle = {
  fontFamily: T.font.mono, fontSize: 11, letterSpacing: "0.22em",
  textTransform: "uppercase", color: T.color.blue,
};

// 2x2 header grid: eyebrow over <h2> on the left, lede on the right.
window.SectionHeader = function SectionHeader({ eyebrow, title, lede, ink, sub, blue = T.color.blue, marginBottom = 64 }) {
  const v = window.useViewport();
  const isMobile = v === "mobile";
  return (
    <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.6fr 1fr", gap: isMobile ? "16px" : "32px 64px", marginBottom: isMobile ? Math.min(marginBottom, 40) : marginBottom }}>
      <div style={{ ...eyebrowStyle, color: blue }}>{eyebrow}</div>
      {!isMobile && <div></div>}
      <h2 style={{ fontFamily: T.font.display, fontSize: "clamp(36px, 3.8vw, 60px)", fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 1, textTransform: "uppercase", margin: 0, color: ink }}>
        {title}
      </h2>
      <p style={{ fontFamily: T.font.sans, fontSize: 16, color: sub, lineHeight: 1.5, margin: 0 }}>
        {lede}
      </p>
    </div>
  );
};

// SectionIntro, "Was wir machen" overview row of 4 pillars.
window.SectionIntro = function SectionIntro({ dark }) {
  const v = window.useViewport();
  const isMobile = v === "mobile";
  const lang = window.useLang ? window.useLang() : "de";
  const isEn = lang === "en";
  const ink = dark ? "#fff" : T.color.ink;
  const sub = dark ? T.color.mutedDark : "#444";
  const line = dark ? T.color.lineDark : T.color.line;
  const items = isEn ? [
    ["We co-found",          "We start new businesses together with craftsmen, as co-founders, not just as investors."],
    ["We bring capital",     "Start-up financing, tools, vehicles, software. You launch without putting up any of your own money."],
    ["We build the system",  "Marketing, CRM, accounting and recruiting all run on our platform, so you can focus on your craft."],
    ["We scale with you",    "We grow alongside you, from the first enquiry to your own team."],
  ] : [
    ["Wir gründen mit",   "Wir starten neue Betriebe gemeinsam mit Handwerkern, als Mitgründer, nicht nur als Investor."],
    ["Wir bringen Kapital","Anschubfinanzierung, Werkzeug, Fahrzeuge, Software. Du startest, ohne eigenes Geld in die Hand nehmen zu müssen."],
    ["Wir bauen das System","Marketing, CRM, Buchhaltung, Recruiting laufen über unsere Plattform, Du konzentrierst Dich aufs Handwerk."],
    ["Wir skalieren mit",  "Wir wachsen mit Dir mit, von der ersten Anfrage bis zum eigenen Team."],
  ];
  return (
    <section id="s02-intro" data-screen-label={isEn ? "02 What we do" : "02 Was wir machen"} style={{ isolation: "isolate", background: dark ? T.color.surfaceDark : "#fff", padding: `${isMobile ? T.space[10] : T.space[12]}px ${isMobile ? T.space[5] : T.space[8]}px`, borderTop: `1px solid ${line}` }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <window.SectionHeader
          eyebrow={isEn ? "01 · What we do" : "01 · Was wir machen"}
          title={isEn
            ? <>We co-found businesses <span style={{ color: T.color.blue }}>with craftsmen.</span></>
            : <>Wir gründen Betriebe <span style={{ color: T.color.blue }}>mit Handwerkern.</span></>}
          lede={isEn
            ? "We start new craft businesses with craftsmen as co-founders. We finance the launch, run the back-office and build out marketing and operations. You do your craft, we handle everything else."
            : "Wir starten neue Handwerksbetriebe mit Handwerkern als Mitgründern. Wir finanzieren den Start, führen das Backoffice und bauen Marketing & Operations auf. Du machst Dein Handwerk, wir alles andere."}
          ink={ink} sub={sub} blue={T.color.blue}
        />
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(4, 1fr)", borderTop: `1px solid ${line}`, borderBottom: `1px solid ${line}` }}>
          {items.map(([t, d], i) => (
            <div key={t} style={{ padding: `${T.space[7]}px ${T.space[6]}px`, borderRight: !isMobile && i < 3 ? `1px solid ${line}` : "none", borderBottom: isMobile && i < 3 ? `1px solid ${line}` : "none", position: "relative" }}>
              <div style={{ position: "absolute", top: -1, left: 0, width: 56, height: 2, background: T.color.blue }} />
              <div style={{ fontFamily: T.font.mono, fontSize: 10, letterSpacing: "0.22em", color: T.color.blue, marginBottom: T.space[4] }}>0{i + 1}</div>
              <h3 style={{ fontFamily: T.font.display, fontSize: 24, fontWeight: 700, letterSpacing: "-0.025em", textTransform: "uppercase", color: ink, margin: `0 0 14px`, lineHeight: 1.05 }}>{t}</h3>
              <div style={{ fontFamily: T.font.sans, fontSize: 15, color: sub, lineHeight: 1.55 }}>{d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// SectionWhat, "Aufgabenteilung": split-stage WIR vs. DU.
// Currently not wired into the homepage flow but kept for future use.
window.SectionWhat = function SectionWhat({ dark }) {
  const v = window.useViewport();
  const isMobile = v === "mobile";
  const lang = window.useLang ? window.useLang() : "de";
  const isEn = lang === "en";
  const SID = "s02", SLABEL = isEn ? "02 Division of roles" : "02 Aufgabenteilung";
  const ink = dark ? "#fff" : T.color.ink;
  const sub = dark ? T.color.mutedDark : T.color.muted;
  const KO_INK = T.color.ink;
  const KO_SOFT = T.color.blueWash;
  const KO_DEEP = T.color.blueDeep;
  const BLUE = T.color.blue;
  const BLUE_SOFT = T.color.blueSoft;
  const koTasks = isEn ? [
    ["CAPITAL",    "Start-up financing, tools, vehicles, warehouse"],
    ["MARKETING",  "Google, Meta, SEO, landing pages, in your name"],
    ["ADMIN",      "DATEV, invoicing, dunning, funding programmes"],
    ["SOFTWARE",   "CRM, quoting engine, calendar, reporting"],
    ["RECRUITING", "Job adverts, pre-screening, onboarding"],
    ["SUPPORT",    "A dedicated contact for every question"],
  ] : [
    ["KAPITAL", "Anschubfinanzierung, Werkzeug, Fahrzeuge, Lager"],
    ["MARKETING", "Google, Meta, SEO, Landingpages, auf Deinen Namen"],
    ["VERWALTUNG", "DATEV, Rechnungen, Mahnwesen, Förderungen"],
    ["SOFTWARE", "CRM, Angebots-Engine, Kalender, Reporting"],
    ["RECRUITING", "Stellenanzeigen, Vorauswahl, Onboarding"],
    ["SUPPORT", "Persönlicher Ansprechpartner für jede Frage"],
  ];
  const youTasks = isEn ? [
    ["INSTALLATION", "You install what you do best"],
    ["QUALITY",      "Your name stands behind the work"],
    ["TEAM LEAD",    "You lead your people on site"],
    ["ON SITE",      "You are the face the customer meets"],
  ] : [
    ["INSTALLATION", "Du baust ein, was Du am besten kannst"],
    ["QUALITÄT", "Du stehst mit Deinem Namen für die Arbeit"],
    ["TEAM FÜHREN", "Du leitest Deine Leute auf der Baustelle"],
    ["KUNDE VOR ORT", "Du bist das Gesicht beim Kunden"],
  ];
  return (
    <section id={SID} data-screen-label={SLABEL} style={{ isolation: "isolate", background: dark ? T.color.surfaceDarkAlt : "#fff", padding: `${isMobile ? T.space[10] : T.space[13]}px ${isMobile ? T.space[5] : T.space[8]}px` }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <window.SectionHeader
          eyebrow={isEn ? "02 · Division of roles" : "02 · Aufgabenteilung"}
          title={isEn
            ? <>We bring everything. <span style={{ color: BLUE }}>Except the craft.</span></>
            : <>Wir bringen alles mit. <span style={{ color: BLUE }}>Außer das Handwerk.</span></>}
          lede={isEn
            ? "We invest the capital, build operations and run the back-office. You co-found with us and do what you do best, your craft."
            : "Wir investieren das Kapital, bauen Operations und führen das Backoffice. Du gründest mit uns und machst, was Du am besten kannst, Dein Handwerk."}
          ink={ink} sub={sub} blue={BLUE} marginBottom={56}
        />

        {/* Geteilte Bühne (split stage) */}
        <div style={{ position: "relative", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", border: `1px solid ${KO_INK}`, minHeight: isMobile ? "auto" : 720 }}>
          {/* LEFT, KlimaOne side (black) */}
          <div style={{ background: KO_INK, color: "#fff", padding: isMobile ? "40px 24px" : "56px 48px", paddingBottom: isMobile ? 40 : 100, display: "flex", flexDirection: "column" }}>
            <div style={{ fontFamily: T.font.mono, fontSize: 10, letterSpacing: "0.3em", color: BLUE_SOFT, marginBottom: 20 }}>{isEn ? "US · KLIMAONE" : "WIR · KLIMAONE"}</div>
            <h3 style={{ fontFamily: T.font.display, fontSize: "clamp(40px, 4.4vw, 64px)", fontWeight: 700, lineHeight: 0.86, letterSpacing: "-0.05em", textTransform: "uppercase", margin: "0 0 36px" }}>
              {isEn ? <>What we<br/>bring.</> : <>Was wir<br/>einbringen.</>}
            </h3>
            <div style={{ display: "grid", gap: 0, borderTop: "1px solid rgba(255,255,255,0.15)" }}>
              {koTasks.map(([t, d], i) => (
                <div key={t} style={{ padding: "20px 0", borderBottom: "1px solid rgba(255,255,255,0.15)", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "140px 1fr", gap: isMobile ? 8 : 20, alignItems: "baseline" }}>
                  <h4 style={{ fontFamily: T.font.mono, fontSize: 11, letterSpacing: "0.22em", color: BLUE_SOFT, margin: 0, fontWeight: 400 }}>{String(i + 1).padStart(2, "0")} · {t}</h4>
                  <div style={{ fontFamily: T.font.sans, fontSize: 15, color: "rgba(255,255,255,0.92)", lineHeight: 1.45 }}>{d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* RIGHT, Du side (light blue) */}
          <div style={{ background: KO_SOFT, color: KO_INK, padding: isMobile ? "40px 24px" : "56px 48px", paddingBottom: isMobile ? 40 : 100, position: "relative", borderLeft: isMobile ? "none" : `1px solid ${KO_INK}`, borderTop: isMobile ? `1px solid ${KO_INK}` : "none", overflow: "hidden", display: "flex", flexDirection: "column" }}>
            {/* huge background type */}
            {!isMobile && <div style={{ position: "absolute", bottom: 80, right: -30, fontFamily: T.font.display, fontSize: 320, fontWeight: 700, letterSpacing: "-0.07em", color: KO_DEEP, lineHeight: 0.78, zIndex: 1, textTransform: "uppercase", pointerEvents: "none" }}>{isEn ? "YOU" : "DU"}</div>}
            <div style={{ position: "relative", zIndex: 2 }}>
              <div style={{ fontFamily: T.font.mono, fontSize: 10, letterSpacing: "0.3em", color: BLUE, marginBottom: 20 }}>{isEn ? "YOU · MEISTER CO-FOUNDER" : "DU · MEISTER-MITGRÜNDER"}</div>
              <h3 style={{ fontFamily: T.font.display, fontSize: "clamp(40px, 4.4vw, 64px)", fontWeight: 700, lineHeight: 0.86, letterSpacing: "-0.05em", textTransform: "uppercase", margin: "0 0 36px", color: KO_INK }}>
                {isEn ? <>What you<br/>bring.</> : <>Was Du<br/>einbringst.</>}
              </h3>
              <div style={{ display: "grid", gap: 0, borderTop: `1px solid ${KO_INK}` }}>
                {youTasks.map(([t, d], i) => (
                  <div key={t} style={{ padding: "20px 0", borderBottom: `1px solid ${KO_INK}`, display: "grid", gridTemplateColumns: isMobile ? "1fr" : "140px 1fr", gap: isMobile ? 8 : 20, alignItems: "baseline" }}>
                    <h4 style={{ fontFamily: T.font.mono, fontSize: 11, letterSpacing: "0.22em", color: BLUE, margin: 0, fontWeight: 400 }}>{String(i + 1).padStart(2, "0")} · {t}</h4>
                    <div style={{ fontFamily: T.font.sans, fontSize: 15, color: KO_INK, lineHeight: 1.45 }}>{d}</div>
                  </div>
                ))}
              </div>
              {/* Capital callout */}
              <div style={{ marginTop: 28, padding: "16px 20px", background: "#fff", border: `1px solid ${KO_INK}`, boxShadow: `6px 6px 0 ${KO_DEEP}`, display: "inline-block" }}>
                <div style={{ fontFamily: T.font.mono, fontSize: 9, letterSpacing: "0.22em", color: BLUE, marginBottom: 4 }}>{isEn ? "EQUITY FROM YOU" : "EIGENKAPITAL VON DIR"}</div>
                <div style={{ fontFamily: T.font.display, fontSize: 36, fontWeight: 700, letterSpacing: "-0.04em", color: KO_INK, lineHeight: 1 }}>0 €</div>
              </div>
            </div>
          </div>

          {/* Bottom blue connector strip */}
          <div style={{ position: isMobile ? "relative" : "absolute", bottom: isMobile ? "auto" : 0, left: 0, right: 0, height: isMobile ? "auto" : 56, background: BLUE, color: "#fff", display: "flex", flexDirection: isMobile ? "column" : "row", alignItems: isMobile ? "flex-start" : "center", justifyContent: "space-between", gap: isMobile ? 8 : 0, padding: isMobile ? "16px 24px" : "0 48px", fontFamily: T.font.mono, fontSize: 11, letterSpacing: "0.3em", gridColumn: isMobile ? "1 / -1" : "auto" }}>
            <span>{isEn ? "US · CAPITAL + SYSTEM" : "WIR · KAPITAL + SYSTEM"}</span>
            <span style={{ fontFamily: T.font.display, fontSize: 15, fontWeight: 700, letterSpacing: "0.18em" }}>{isEn ? "= JOINT BUSINESS" : "= GEMEINSAMER BETRIEB"}</span>
            <span>{isEn ? "YOU · CRAFT" : "DU · HANDWERK"}</span>
          </div>
        </div>
      </div>
    </section>
  );
};

// SectionFlow, animated process pipeline (currently unused on homepage).
window.SectionFlow = function SectionFlow({ dark }) {
  const v = window.useViewport();
  const isMobile = v === "mobile";
  const lang = window.useLang ? window.useLang() : "de";
  const isEn = lang === "en";
  const SID = "s03", SLABEL = isEn ? "03 Operations flow" : "03 Operativer Flow";
  return (
    <section id={SID} data-screen-label={SLABEL} style={{ isolation: "isolate", background: dark ? T.color.surfaceDarkAlt : T.color.surfaceAlt, padding: `${isMobile ? T.space[10] : T.space[13]}px ${isMobile ? T.space[5] : T.space[8]}px`, borderTop: `1px solid ${dark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"}` }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <window.SectionHeader
          eyebrow={isEn ? "02 · Operations flow" : "02 · Operativer Flow"}
          title={isEn
            ? <>From lead to <span style={{ color: T.color.blue }}>invoice.</span></>
            : <>Vom Lead bis zur <span style={{ color: T.color.blue }}>Rechnung.</span></>}
          lede={isEn
            ? "Enquiries are filtered, quotes go out within 24 hours, invoices are sent in line with GoBD requirements. Every step runs on a system, with a dedicated point of contact for oversight."
            : "Anfragen werden gefiltert, Angebote innerhalb 24h erstellt, Rechnungen GoBD-konform versendet. Jeder Schritt mit System, und einem persönlichen Ansprechpartner als Kontrollinstanz."}
          ink={dark ? "#fff" : T.color.ink} sub={dark ? "rgba(255,255,255,0.7)" : T.color.muted} blue={T.color.blue}
        />
        <window.VizFlow dark={dark} />
      </div>
    </section>
  );
};

// SectionCoverage, DACH map + KPIs (currently unused on homepage).
window.SectionCoverage = function SectionCoverage({ dark }) {
  const v = window.useViewport();
  const isMobile = v === "mobile";
  const lang = window.useLang ? window.useLang() : "de";
  const isEn = lang === "en";
  const SID = "s04", SLABEL = isEn ? "04 Reach" : "04 Reichweite";
  const kpis = isEn
    ? [["avg. 35%", "REVENUE GROWTH"],["8 TRADES", "COVERED"],["24h", "RESPONSE TIME"],["3 COUNTRIES", "ACTIVE"]]
    : [["Ø 35%", "UMSATZWACHSTUM"],["8 GEWERKE", "ABGEDECKT"],["24h", "REAKTIONSZEIT"],["3 LÄNDER", "AKTIV"]];
  return (
    <section id={SID} data-screen-label={SLABEL} style={{ isolation: "isolate", background: dark ? T.color.surfaceDarkAlt : T.color.surfaceAlt, padding: `${isMobile ? T.space[10] : T.space[13]}px ${isMobile ? T.space[5] : T.space[8]}px` }}>
      <div style={{ maxWidth: 1600, margin: "0 auto", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 40 : 80, alignItems: "center" }}>
        <div><window.VizCoverageMap dark={dark} /></div>
        <div>
          <div style={{ ...eyebrowStyle, marginBottom: T.space[5] }}>{isEn ? "04 · Reach" : "04 · Reichweite"}</div>
          <h2 style={{ fontFamily: T.font.display, fontSize: "clamp(36px, 4vw, 56px)", fontWeight: 700, letterSpacing: "-0.035em", lineHeight: 1, textTransform: "uppercase", margin: "0 0 24px", color: dark ? "#fff" : T.color.ink }}>
            {isEn
              ? <>30+ partner businesses. <span style={{ color: T.color.blue }}>Across DACH.</span></>
              : <>30+ Partnerbetriebe. <span style={{ color: T.color.blue }}>DACH-weit.</span></>}
          </h2>
          <div style={{ fontFamily: T.font.sans, fontSize: 16, color: dark ? "rgba(255,255,255,0.7)" : T.color.muted, lineHeight: 1.55, marginBottom: 32 }}>
            {isEn
              ? "We work with air-conditioning, heating, plumbing, electrical and construction businesses in Germany, Austria and Switzerland."
              : "Wir arbeiten mit Klimatechnik-, Heizungs-, Sanitär-, Elektro- und Bau-Betrieben in Deutschland, Österreich und der Schweiz."}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            {kpis.map(([n, l]) => (
              <div key={l} style={{ borderTop: `1px solid ${dark ? "rgba(255,255,255,0.18)" : "rgba(0,0,0,0.15)"}`, paddingTop: 16 }}>
                <div style={{ fontFamily: T.font.display, fontSize: 28, fontWeight: 700, letterSpacing: "-0.03em", color: dark ? "#fff" : T.color.ink }}>{n}</div>
                <div style={{ fontFamily: T.font.mono, fontSize: 9, letterSpacing: "0.2em", color: T.color.blue, marginTop: 6 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// SectionCaseKWM, founding-case study, used on both pages. The header h2 leads,
// then the split-stage card uses h3 sub-titles ("Wir bringen…" / "Onur Karasu").
window.SectionCaseKWM = function SectionCaseKWM({ dark, bg, num = "02" }) {
  const v = window.useViewport();
  const isMobile = v === "mobile";
  const lang = window.useLang ? window.useLang() : "de";
  const isEn = lang === "en";
  const SID = "s05", SLABEL = isEn ? "05 KWM case" : "05 KWM Case";
  const ink = dark ? "#fff" : T.color.ink;
  const sub = dark ? T.color.mutedDark : T.color.muted;
  const line = dark ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.12)";
  const KW_INK = T.color.ink;
  const KW_CREAM = T.color.blueWash;
  const KW_PAPER_DEEP = T.color.blueDeep;
  const KW_BLUE = T.color.blue;
  const KW_BLUE_SOFT = T.color.blueSoft;
  const stats = isEn ? [
    ["€0",      "EQUITY",  "put up by Onur"],
    ["750k+ €", "REVENUE", "in 12 months"],
    ["2.5×",    "MARGIN",  "vs. industry average"],
    ["5.0★",    "GOOGLE",  "650+ enquiries"],
  ] : [
    ["€0", "EIGENKAPITAL", "von Onur eingebracht"],
    ["750k+ €", "UMSATZ", "in 12 Monaten"],
    ["2,5×", "MARGE", "vs. Branchenschnitt"],
    ["5,0★", "GOOGLE", "650+ Anfragen"],
  ];
  return (
    <section id={SID} data-screen-label={SLABEL} style={{ isolation: "isolate", background: bg || (dark ? T.color.surfaceDark : "#fff"), padding: `${isMobile ? T.space[10] : T.space[13]}px ${isMobile ? T.space[5] : T.space[8]}px`, borderTop: `1px solid ${line}`, overflow: "hidden" }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        {/* Header, 2x2 grid: eyebrow / empty / h2 / lede */}
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.6fr 1fr", gap: isMobile ? "16px" : "32px 64px", marginBottom: isMobile ? T.space[6] : T.space[8] }}>
          <div style={{ ...eyebrowStyle, color: KW_BLUE }}>
            {num} · {isEn ? "KWM case" : "KWM Case"}
          </div>
          {!isMobile && <div></div>}
          <h2 style={{ fontFamily: T.font.display, fontSize: "clamp(36px, 3.8vw, 60px)", fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 1, textTransform: "uppercase", margin: 0, color: ink }}>
            {isEn
              ? <>We know it works. <span style={{ color: KW_BLUE }}>Because we co-founded it ourselves.</span></>
              : <>Wir wissen, dass es läuft. <span style={{ color: KW_BLUE }}>Weil wir es selbst gegründet haben.</span></>}
          </h2>
          <p style={{ fontFamily: T.font.sans, fontSize: 16, color: sub, lineHeight: 1.5, margin: 0 }}>
            {isEn
              ? "KWM Technik was built together with KlimaOne, with clear structures, a professional back-office and a focus on quality. The result: a growing business with satisfied customers and motivated staff. The founder focuses on what he does best: technical excellence and customer service. KlimaOne handles the rest, from accounting through to winning and planning jobs."
              : "KWM Technik wurde gemeinsam mit KlimaOne aufgebaut, mit klaren Strukturen, professionellem Backoffice und einem Fokus auf Qualität. Das Ergebnis: Ein wachsender Betrieb mit zufriedenen Kunden und motivierten Mitarbeitern. Der Gründer konzentriert sich auf das, was er am besten kann: fachliche Exzellenz und Kundenbetreuung. Um den Rest, von der Buchhaltung bis zur Auftragsgewinnung und -planung, kümmert sich KlimaOne."}
          </p>
        </div>

        {/* Main case card */}
        <div style={{ position: "relative", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", border: `1px solid ${KW_INK}`, minHeight: isMobile ? "auto" : 760 }}>
          {/* LEFT, black KO side */}
          <div style={{ background: KW_INK, color: "#fff", padding: isMobile ? "40px 24px" : "64px 56px", paddingBottom: isMobile ? 40 : 100, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
            <div>
              <div style={{ fontFamily: T.font.mono, fontSize: 10, letterSpacing: "0.3em", color: KW_BLUE_SOFT, marginBottom: T.space[5] }}>{isEn ? "OUR CONTRIBUTION" : "UNSER EINSATZ"}</div>
              <h3 style={{ fontFamily: T.font.display, fontSize: "clamp(48px, 5vw, 76px)", fontWeight: 700, lineHeight: 0.86, letterSpacing: "-0.05em", textTransform: "uppercase", margin: `0 0 ${T.space[6]}px` }}>
                {isEn
                  ? <>We bring<br/>capital,<br/>systems &<br/><span style={{ color: KW_BLUE }}>back-office.</span></>
                  : <>Wir bringen<br/>Kapital,<br/>System &<br/><span style={{ color: KW_BLUE }}>Backoffice.</span></>}
              </h3>

              <blockquote style={{ margin: 0, paddingLeft: 22, borderLeft: `3px solid ${KW_BLUE}`, fontFamily: T.font.display, fontSize: 19, fontWeight: 500, letterSpacing: "-0.015em", lineHeight: 1.35, color: "rgba(255,255,255,0.92)", maxWidth: 480, marginBottom: 14 }}>
                {isEn
                  ? "“With KlimaOne I could focus fully on my craft. Financing, jobs and admin all ran professionally in the background from day one, so I could build my business quickly and on a healthy footing.”"
                  : "„Mit KlimaOne konnte ich mich voll auf mein Handwerk konzentrieren. Finanzierung, Aufträge und Organisation liefen von Anfang an professionell im Hintergrund, so konnte ich meinen Betrieb schnell und gesund aufbauen.\""}
              </blockquote>
              <div style={{ fontFamily: T.font.mono, fontSize: 10, letterSpacing: "0.2em", color: "rgba(255,255,255,0.5)" }}>- ONUR KARASU · {isEn ? "KWM TECHNIK CO-FOUNDER" : "KWM TECHNIK-MITGRÜNDER"}</div>
            </div>

            {/* Stats grid 2x2, clean uniform cells on mobile, original 2x2 with internal dividers on desktop */}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", marginTop: isMobile ? T.space[7] : T.space[8], borderTop: "1px solid rgba(255,255,255,0.15)" }}>
              {stats.map(([n, l, sub2], i) => (
                <div key={l} style={isMobile ? {
                  padding: "20px 16px",
                  borderRight: i % 2 === 0 ? "1px solid rgba(255,255,255,0.15)" : "none",
                  borderBottom: i < 2 ? "1px solid rgba(255,255,255,0.15)" : "none",
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "flex-start",
                  minHeight: 120,
                } : {
                  padding: "24px 24px 24px 0",
                  paddingLeft: i % 2 === 1 ? 24 : 0,
                  borderRight: i % 2 === 0 ? "1px solid rgba(255,255,255,0.15)" : "none",
                  borderBottom: i < 2 ? "1px solid rgba(255,255,255,0.15)" : "none",
                }}>
                  <div style={{ fontFamily: T.font.display, fontSize: isMobile ? 32 : 40, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.92, color: i === 0 ? KW_BLUE : "#fff" }}>{n}</div>
                  <h4 style={{ fontFamily: T.font.mono, fontSize: 9, letterSpacing: "0.22em", color: KW_BLUE_SOFT, margin: "12px 0 0", fontWeight: 400 }}>{l}</h4>
                  <div style={{ fontFamily: T.font.sans, fontSize: 12, color: "rgba(255,255,255,0.6)", marginTop: 4, lineHeight: 1.35 }}>{sub2}</div>
                </div>
              ))}
            </div>
          </div>

          {/* RIGHT, Onur on cream. On mobile: flex column, image bottom-aligned in its own wrapper.
              `isolation: isolate` (mobile) creates a fresh stacking context so inner z-indexes
              never escape above the page nav. */}
          <div style={{ background: KW_CREAM, position: "relative", borderLeft: isMobile ? "none" : `1px solid ${KW_INK}`, borderTop: isMobile ? `1px solid ${KW_INK}` : "none", overflow: "hidden", paddingBottom: isMobile ? 0 : 56, minHeight: isMobile ? "auto" : "auto", display: isMobile ? "flex" : "block", flexDirection: isMobile ? "column" : undefined, padding: isMobile ? "24px 24px 0 24px" : undefined, gap: isMobile ? 16 : undefined, isolation: isMobile ? "isolate" : undefined }}>
            {/* dot pattern */}
            <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.4, zIndex: 0 }}>
              <defs><pattern id="kwmDotsA1" width="22" height="22" patternUnits="userSpaceOnUse"><circle cx="11" cy="11" r="1" fill="#0A0A0A"/></pattern></defs>
              <rect width="100%" height="100%" fill="url(#kwmDotsA1)"/>
            </svg>

            {/* huge background type */}
            {!isMobile && <div style={{ position: "absolute", top: 36, left: 0, right: 0, textAlign: "center", fontFamily: T.font.display, fontSize: 280, fontWeight: 700, letterSpacing: "-0.07em", color: KW_PAPER_DEEP, lineHeight: 0.8, zIndex: 1, textTransform: "uppercase", pointerEvents: "none" }}>KWM</div>}

            {/* Corner monogram. Desktop: absolute top-left.
                Mobile: smaller scale + centered (so the right-hand label column
                doesn't get cropped at narrow widths). */}
            <div style={isMobile
              ? { position: "relative", zIndex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: 12 }
              : { position: "absolute", top: 32, left: 32, zIndex: 4, display: "flex", alignItems: "center", gap: 16 }}>
              <img src="assets/kwm-logo.svg" alt="KWM Technik" style={{ height: isMobile ? 40 : 56, width: "auto", display: "block" }} />
              <div style={{ paddingLeft: isMobile ? 12 : 16, borderLeft: `1px solid ${KW_INK}`, opacity: 0.7 }}>
                <div style={{ fontFamily: T.font.mono, fontSize: isMobile ? 8 : 9, letterSpacing: "0.16em", color: KW_BLUE }}>{isEn ? "REFRIGERATION & AIR-CONDITIONING" : "KÄLTE- & KLIMATECHNIK"}</div>
                <div style={{ fontFamily: T.font.mono, fontSize: isMobile ? 8 : 9, letterSpacing: "0.16em", color: KW_INK, marginTop: 3 }}>MAINZ · 2025</div>
              </div>
            </div>

            {/* live callout, desktop: top right (absolute) / mobile: inline above photo */}
            <div style={isMobile
              ? { position: "relative", zIndex: 1, background: KW_BLUE, color: "#fff", padding: "16px 20px", boxShadow: "6px 6px 0 rgba(0,0,0,0.12)", alignSelf: "flex-start" }
              : { position: "absolute", top: 110, right: 32, zIndex: 5, background: KW_BLUE, color: "#fff", padding: "16px 20px", boxShadow: "8px 10px 0 rgba(0,0,0,0.12)" }}>
              <div style={{ fontFamily: T.font.mono, fontSize: 9, letterSpacing: "0.22em", marginBottom: 6, opacity: 0.85 }}>// LIVE</div>
              <div style={{ fontFamily: T.font.display, fontSize: 32, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1 }}>750k+ €</div>
              <div style={{ fontFamily: T.font.sans, fontSize: 11, opacity: 0.9, marginTop: 4 }}>{isEn ? "Revenue · 12 months" : "Umsatz · 12 Monate"}</div>
            </div>

            {/* Name card, desktop: bottom-right absolute / mobile: inline above photo */}
            <div style={isMobile
              ? { position: "relative", zIndex: 1, background: "#fff", padding: "14px 18px", maxWidth: 260, border: `1px solid ${KW_INK}`, boxShadow: "6px 6px 0 rgba(0,0,0,0.08)", alignSelf: "flex-start" }
              : { position: "absolute", bottom: 80, right: 32, zIndex: 5, background: "#fff", padding: "14px 18px", maxWidth: 240, border: `1px solid ${KW_INK}`, boxShadow: "6px 6px 0 rgba(0,0,0,0.08)" }}>
              <div style={{ fontFamily: T.font.mono, fontSize: 9, letterSpacing: "0.22em", color: KW_BLUE, marginBottom: 6 }}>{isEn ? "KWM TECHNIK CO-FOUNDER" : "KWM TECHNIK-MITGRÜNDER"}</div>
              <h3 style={{ fontFamily: T.font.display, fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em", color: KW_INK, lineHeight: 1.05, margin: 0 }}>Onur Karasu</h3>
              <div style={{ fontFamily: T.font.sans, fontSize: 11, color: "#666", marginTop: 6, lineHeight: 1.4 }}>{isEn ? <>Brings the craft,<br/>not the money.</> : <>Bringt das Handwerk ein,<br/>nicht das Geld.</>}</div>
            </div>

            {/* Onur photo, desktop: absolute bottom-center / mobile: full-width LAST flex child,
                bottom edge of image == bottom edge of cream pane (no padding-bottom on the pane). */}
            {isMobile ? (
              <img src="assets/onur.png" alt={isEn ? "Onur Karasu, KWM Technik co-founder" : "Onur Karasu, KWM Technik-Mitgründer"}
                   style={{ position: "relative", zIndex: 1, width: "100%", height: "auto", display: "block", marginTop: "auto" }} />
            ) : (
              <img src="assets/onur.png" alt={isEn ? "Onur Karasu, KWM Technik co-founder" : "Onur Karasu, KWM Technik-Mitgründer"}
                   style={{ position: "absolute", bottom: 56, left: "50%", transform: "translateX(-50%)", height: "88%", width: "auto", maxWidth: "100%", objectFit: "contain", objectPosition: "bottom center", zIndex: 3 }} />
            )}
          </div>

          {/* Bottom blue connector strip, desktop: 3-segment row; mobile: stacked
              equation with explicit + and = operators on each line for readability. */}
          {isMobile ? (
            <div style={{ position: "relative", left: 0, right: 0, background: KW_BLUE, color: "#fff", padding: "20px 24px", fontFamily: T.font.mono, fontSize: 11, letterSpacing: "0.22em", gridColumn: "1 / -1", display: "grid", gap: 6 }}>
              <div>{isEn ? "US · CAPITAL + SYSTEM" : "WIR · KAPITAL + SYSTEM"}</div>
              <div>{isEn ? "+ YOU · CRAFT" : "+ DU · HANDWERK"}</div>
              <div style={{ marginTop: 8, paddingTop: 12, borderTop: "1px solid rgba(255,255,255,0.25)", fontFamily: T.font.display, fontSize: 15, fontWeight: 700, letterSpacing: "0.12em", lineHeight: 1.3 }}>{isEn ? "= 750k+ € · 2.5× margin · 5.0★ Google" : "= 750k+ € · 2,5× Marge · 5,0★ Google"}</div>
            </div>
          ) : (
            <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 56, background: KW_BLUE, color: "#fff", display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 56px", fontFamily: T.font.mono, fontSize: 11, letterSpacing: "0.3em" }}>
              <span>{isEn ? "US · CAPITAL + SYSTEM" : "WIR · KAPITAL + SYSTEM"}</span>
              <span style={{ fontFamily: T.font.display, fontSize: 15, fontWeight: 700, letterSpacing: "0.18em" }}>{isEn ? "= 750k+ € · 2.5× MARGIN · 5.0★ GOOGLE" : "= 750k+ € · 2,5× MARGE · 5,0★ GOOGLE"}</span>
              <span>{isEn ? "YOU · CRAFT" : "DU · HANDWERK"}</span>
            </div>
          )}
        </div>

        {/* Bottom strip, what we did */}
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(4, 1fr)", marginTop: 0, border: `1px solid ${line}`, borderTop: "none" }}>
          {(isEn ? [
            ["CAPITAL",   "Full start-up financing, €0 from Onur"],
            ["MARKETING", "Google, Meta, local SEO, in KWM's name"],
            ["ADMIN",     "DATEV, invoicing, dunning, funding programmes"],
            ["PIPELINE",  "650+ customer enquiries in 12 months"],
          ] : [
            ["KAPITAL", "Komplette Anschubfinanzierung, Onur 0€"],
            ["MARKETING", "Google, Meta, lokale SEO, auf KWM-Namen"],
            ["VERWALTUNG", "DATEV, Rechnungen, Mahnwesen, Förderungen"],
            ["PIPELINE", "650+ Kundenanfragen in 12 Monaten"],
          ]).map(([t, d], i) => (
            <div key={t} style={{ padding: "32px 28px", borderRight: !isMobile && i < 3 ? `1px solid ${line}` : "none", borderBottom: isMobile && i < 3 ? `1px solid ${line}` : "none", background: dark ? T.color.surfaceDark : "#fff" }}>
              <h3 style={{ fontFamily: T.font.mono, fontSize: 10, letterSpacing: "0.22em", color: KW_BLUE, margin: "0 0 12px", fontWeight: 400 }}>{t}</h3>
              <div style={{ fontFamily: T.font.sans, fontSize: 14, color: ink, lineHeight: 1.5 }}>{d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// SectionPartners, list of partner businesses (currently unused).
window.SectionPartners = function SectionPartners({ dark }) {
  const v = window.useViewport();
  const isMobile = v === "mobile";
  const lang = window.useLang ? window.useLang() : "de";
  const isEn = lang === "en";
  const cases = isEn ? [
    { name: "Römhild Elektro", region: "Eisenach",     trade: "Electrical", quote: "HWG sorted out tools and a vehicle for me right at the start. That let me hit the ground running from day one.", who: "Pierre Römhild" },
    { name: "Eco-Heat",        region: "Geilenkirchen", trade: "Plumbing & heating", quote: "Within 4 months we had a steady stream of jobs and could take on 4 staff.", who: "Timo · founder" },
    { name: "AS Haustechnik",  region: "Bielefeld",     trade: "Plumbing & heating", quote: "Whether it is marketing, jobs or admin, I know there is always someone thinking with me.", who: "Alexander Smolencev" },
  ] : [
    { name: "Römhild Elektro", region: "Eisenach", trade: "Elektro", quote: "HWG hat mir gleich zum Start Werkzeug und Fahrzeug organisiert. So konnte ich von Anfang an durchstarten.", who: "Pierre Römhild" },
    { name: "Eco-Heat",        region: "Geilenkirchen", trade: "SHK",     quote: "Innerhalb von 4 Monaten hatten wir eine stabile Auftragslage und konnten 4 Mitarbeiter einstellen.", who: "Timo · Gründer" },
    { name: "AS Haustechnik",  region: "Bielefeld",     trade: "SHK",     quote: "Ob Marketing, Aufträge oder Organisation, ich weiß jederzeit, dass jemand mitdenkt.", who: "Alexander Smolencev" },
  ];
  return (
    <section id="s-partner" data-screen-label={isEn ? "Partner businesses" : "Partnerbetriebe"} style={{ isolation: "isolate", background: dark ? T.color.surfaceDark : "#fff", padding: `${isMobile ? T.space[10] : T.space[13]}px ${isMobile ? T.space[5] : T.space[8]}px`, borderTop: `1px solid ${dark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"}` }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <div style={{ ...eyebrowStyle, marginBottom: T.space[5] }}>{isEn ? "03 · Partner businesses" : "03 · Partnerbetriebe"}</div>
        <h2 style={{ fontFamily: T.font.display, fontSize: "clamp(40px, 4.6vw, 72px)", fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.96, textTransform: "uppercase", margin: isMobile ? "0 0 40px" : "0 0 80px", color: dark ? "#fff" : T.color.ink, maxWidth: 1100 }}>
          {isEn
            ? <>Real businesses. <span style={{ color: T.color.blue }}>Real results.</span></>
            : <>Echte Betriebe. <span style={{ color: T.color.blue }}>Echte Ergebnisse.</span></>}
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: 16 }}>
          {cases.map(c => (
            <div key={c.name} style={{ background: dark ? "#0F1422" : "#fff", border: `1px solid ${dark ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.12)"}`, padding: 32, color: dark ? "#fff" : T.color.ink }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: T.space[5], fontFamily: T.font.mono, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase" }}>
                <span style={{ color: T.color.blue }}>{c.trade}</span>
                <span style={{ color: dark ? "rgba(255,255,255,0.45)" : "#888" }}>{c.region}</span>
              </div>
              <h3 style={{ fontFamily: T.font.display, fontSize: 26, fontWeight: 700, letterSpacing: "-0.03em", textTransform: "uppercase", margin: "0 0 24px" }}>{c.name}</h3>
              <div style={{ fontFamily: T.font.sans, fontSize: 15, fontStyle: "normal", lineHeight: 1.55, color: dark ? "rgba(255,255,255,0.78)" : "#444", borderLeft: `2px solid ${T.color.blue}`, paddingLeft: 16, marginBottom: 16 }}>"{c.quote}"</div>
              <div style={{ fontFamily: T.font.mono, fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: dark ? "rgba(255,255,255,0.5)" : "#888" }}>- {c.who}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// SectionBrandStrip, "Hersteller & Großhandel" logo wall.
// h2-level section in document order; visually downsized via the clamp()
// font-size to keep it quieter than the larger feature headlines around it.
window.SectionBrandStrip = function SectionBrandStrip({ dark }) {
  const v = window.useViewport();
  const isMobile = v === "mobile";
  const lang = window.useLang ? window.useLang() : "de";
  const isEn = lang === "en";
  const SID = "s06", SLABEL = isEn ? "06 Manufacturers" : "06 Hersteller";
  const brands = [
    { name: "Daikin",                src: "assets/partners/daikin.png" },
    { name: "Mitsubishi Electric",   src: "assets/partners/mitsubishi-electric.png" },
    { name: "Mitsubishi Heavy",      src: "assets/partners/mitsubishi-heavy.png" },
    { name: "MTF Samsung",           src: "assets/partners/mtf-samsung.png" },
    { name: "Frigotechnik",          src: "assets/partners/frigotechnik.png" },
    { name: "GC Gruppe",             src: "assets/partners/gc-gruppe.png" },
    { name: "Würth",                 src: "assets/partners/wuerth.png" },
  ];
  const ink = dark ? "#fff" : T.color.ink;
  const line = dark ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.12)";
  return (
    <section id={SID} data-screen-label={SLABEL} style={{ isolation: "isolate", background: dark ? T.color.surfaceDark : "#fff", padding: `${isMobile ? T.space[9] : T.space[11]}px ${isMobile ? T.space[5] : T.space[8]}px`, borderTop: `1px solid ${line}` }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <div style={{ ...eyebrowStyle, marginBottom: 18, textAlign: "center" }}>{isEn ? "03 · Manufacturers & wholesalers" : "03 · Hersteller & Großhandel"}</div>
        <h2 style={{ fontFamily: T.font.display, fontSize: "clamp(28px, 3vw, 44px)", fontWeight: 700, letterSpacing: "-0.035em", lineHeight: 1, textTransform: "uppercase", margin: isMobile ? "0 0 32px" : "0 0 56px", color: ink, textAlign: "center" }}>
          {isEn
            ? <>Strong partners for <span style={{ color: T.color.blue }}>our businesses.</span></>
            : <>Starke Partner für <span style={{ color: T.color.blue }}>unsere Betriebe.</span></>}
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : "repeat(7, 1fr)", border: `1px solid ${line}`, background: dark ? T.color.blueWash : T.color.surfaceAlt }}>
          {brands.map((b, i) => (
            <div key={b.name} style={{ borderRight: isMobile ? (i % 2 === 0 ? `1px solid ${line}` : "none") : (i < brands.length - 1 ? `1px solid ${line}` : "none"), borderBottom: isMobile && i < brands.length - (brands.length % 2 === 0 ? 2 : 1) ? `1px solid ${line}` : "none", padding: "36px 24px", display: "grid", placeItems: "center", minHeight: 120 }}>
              <img src={b.src} alt={b.name} style={{ maxWidth: "100%", maxHeight: 48, width: "auto", height: "auto", objectFit: "contain", opacity: 0.92 }} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// SectionAudiences, "Mit wem wir arbeiten" two-card pivot.
window.SectionAudiences = function SectionAudiences({ dark }) {
  const v = window.useViewport();
  const isMobile = v === "mobile";
  const lang = window.useLang ? window.useLang() : "de";
  const isEn = lang === "en";
  const withLang = window.withLang || ((h) => h);
  const SID = "s07", SLABEL = isEn ? "07 Who for" : "07 Für Wen";
  return (
    <section id={SID} data-screen-label={SLABEL} style={{ isolation: "isolate", background: dark ? T.color.surfaceDarkAlt : T.color.surfaceAlt, padding: `${isMobile ? T.space[10] : T.space[13]}px ${isMobile ? T.space[5] : T.space[8]}px`, borderTop: `1px solid ${dark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"}` }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <div style={{ ...eyebrowStyle, marginBottom: T.space[5] }}>{isEn ? "04 · Who for" : "04 · Für Wen"}</div>
        <h2 style={{ fontFamily: T.font.display, fontSize: "clamp(40px, 4.6vw, 72px)", fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 0.96, textTransform: "uppercase", margin: isMobile ? "0 0 32px" : "0 0 64px", color: dark ? "#fff" : T.color.ink, maxWidth: 1100 }}>
          {isEn
            ? <>Who we <span style={{ color: T.color.blue }}>work with.</span></>
            : <>Mit wem wir <span style={{ color: T.color.blue }}>arbeiten.</span></>}
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: 16 }}>
          <a href={withLang("/Fuer%20Handwerker", lang)} style={{ background: T.color.blue, color: "#fff", padding: isMobile ? "28px 24px" : 48, display: "block", textDecoration: "none", position: "relative", overflow: "hidden" }}>
            <div style={{ fontFamily: T.font.mono, fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", opacity: 0.7, marginBottom: T.space[5] }}>{isEn ? "01 / Craftsmen" : "01 / Handwerker"}</div>
            <h3 style={{ fontFamily: T.font.display, fontSize: isMobile ? 28 : 40, fontWeight: 700, letterSpacing: "-0.035em", textTransform: "uppercase", lineHeight: 0.98, margin: "0 0 16px" }}>{isEn ? <>You do the craft -<br />we do the rest.</> : <>Du machst Handwerk -<br />wir den Rest.</>}</h3>
            <div style={{ fontFamily: T.font.sans, fontSize: 15, opacity: 0.85, lineHeight: 1.55, maxWidth: 460, marginBottom: isMobile ? 20 : 32 }}>
              {isEn
                ? "Whether you are starting fresh or running an existing business, we take on admin, marketing and HR. You focus on the job site."
                : "Ob Neugründung oder Bestandsbetrieb: Wir übernehmen Verwaltung, Marketing und Personal. Du konzentrierst Dich auf die Baustelle."}
            </div>
            <span style={{ fontFamily: T.font.sans, fontSize: 14, fontWeight: 600 }}>{isEn ? "To the craftsmen page →" : "Zur Handwerker-Seite →"}</span>
          </a>
          <div style={{ background: dark ? "#0F1422" : T.color.ink, color: "#fff", padding: isMobile ? "28px 24px" : 48 }}>
            <div style={{ fontFamily: T.font.mono, fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "#5B7CFF", marginBottom: T.space[5] }}>{isEn ? "02 / Industry & partners" : "02 / Industrie & Partner"}</div>
            <h3 style={{ fontFamily: T.font.display, fontSize: isMobile ? 28 : 40, fontWeight: 700, letterSpacing: "-0.035em", textTransform: "uppercase", lineHeight: 0.98, margin: "0 0 16px" }}>{isEn ? "Scaled reach into the trade." : "Skalierte Reichweite ins Handwerk."}</h3>
            <div style={{ fontFamily: T.font.sans, fontSize: 15, opacity: 0.78, lineHeight: 1.55, maxWidth: 460, marginBottom: isMobile ? 20 : 32 }}>
              {isEn
                ? "Manufacturers, wholesalers, insurers: reach a growing network of professionally run businesses across DACH."
                : "Hersteller, Großhandel, Versicherer: Erreicht ein wachsendes Netzwerk professionell geführter Betriebe in DACH."}
            </div>
            <span style={{ fontFamily: T.font.sans, fontSize: 14, fontWeight: 600, color: "#5B7CFF" }}>{isEn ? "Get in touch →" : "Kontakt aufnehmen →"}</span>
          </div>
        </div>
      </div>
    </section>
  );
};

// SectionJobs, Operations vs. Mitgründer split. Inner h3 lead each side,
// individual job titles use h4 to keep hierarchy unbroken.
window.SectionJobs = function SectionJobs({ dark }) {
  const v = window.useViewport();
  const isMobile = v === "mobile";
  const lang = window.useLang ? window.useLang() : "de";
  const isEn = lang === "en";
  const withLang = window.withLang || ((h) => h);
  const SID = "s08", SLABEL = isEn ? "08 Careers" : "08 Karriere";
  const ink = dark ? "#fff" : T.color.ink;
  const sub = dark ? T.color.mutedDark : T.color.muted;
  const KO_INK = T.color.ink;
  const KO_SOFT = T.color.blueWash;
  const KO_DEEP = T.color.blueDeep;
  const BLUE = T.color.blue;
  const BLUE_SOFT = T.color.blueSoft;

  const opsJobs = isEn ? [
    { title: "Founders Associate (m/f/d)",        href: withLang("founders-associate.html", lang),       mode: "Full-time · Mainz / Remote",          desc: "You work directly with the management team on new brands: setup, operations, strategy. A generalist with a hands-on mindset." },
    { title: "Sales Manager (m/f/d)",             href: withLang("sales-manager.html", lang),            mode: "Full-time · Mainz / Remote",          desc: "You build the sales function, qualify inbound leads, design sales processes and close B2B deals. Experience with CRM and pipeline management." },
    { title: "Founders Associate Intern (m/f/d)", href: withLang("/founders-associate-intern", lang),    mode: "Internship · Mainz · Hybrid · 4–6 months", desc: "4–6 month internship working directly with the founders. Strong performance leads to a permanent offer." },
  ] : [
    { title: "Founders Associate (m/w/d)",        href: withLang("founders-associate.html", lang),       mode: "Vollzeit · Mainz / Remote",           desc: "Du arbeitest direkt mit der Geschäftsführung an neuen Marken: Setup, Operations, Strategie. Generalist mit Hands-on-Mentalität." },
    { title: "Sales Manager (m/w/d)",             href: withLang("sales-manager.html", lang),            mode: "Vollzeit · Mainz / Remote",           desc: "Du baust den Vertrieb auf, qualifizierst eingehende Leads, baust Sales-Prozesse und schließt B2B-Deals. Erfahrung mit CRM und Pipeline-Management." },
    { title: "Founders Associate Intern (m/w/d)", href: withLang("/founders-associate-intern", lang),    mode: "Praktikum · Mainz · Hybrid · 4–6 Monate",  desc: "4–6 Monate Praktikum direkt mit den Gründern. Bei starker Performance Übernahme als feste:r Mitarbeiter:in." },
  ];
  const cofounderJobs = isEn ? [
    { title: "Master craftsman (refrigeration / air-conditioning)",         href: "mailto:hello@klima-one.com?subject=Partner%20-%20Meister",  mode: "Co-founder · location flexible", desc: "You bring the Meister qualification and customer-facing experience. We co-found a business with you under the KlimaOne brand, with €0 of your own equity." },
    { title: "Journeyman with §8 exemption (refrigeration / air-conditioning)", href: "mailto:hello@klima-one.com?subject=Partner%20-%20Geselle", mode: "Co-founder · location flexible", desc: "You hold the §8 exemption to operate independently and want your own business. We bring capital, systems and back-office." },
  ] : [
    { title: "Meister Kälte/Klima",                          href: "mailto:hello@klima-one.com?subject=Partner%20-%20Meister", mode: "Mitgründer · Standort flexibel", desc: "Du bringst den Meisterbrief und Erfahrung am Kunden mit. Wir gründen mit Dir gemeinsam einen Betrieb unter der Marke KlimaOne, 0 € Eigenkapital." },
    { title: "Geselle mit Ausnahmebewilligung Kälte/Klima",  href: "mailto:hello@klima-one.com?subject=Partner%20-%20Geselle", mode: "Mitgründer · Standort flexibel", desc: "Du hast die Ausnahmebewilligung zur selbstständigen Ausführung und willst deinen eigenen Betrieb. Wir bringen Kapital, System und Backoffice." },
  ];

  return (
    <section id={SID} data-screen-label={SLABEL} style={{ isolation: "isolate", background: dark ? T.color.surfaceDark : "#fff", padding: `${isMobile ? T.space[10] : T.space[13]}px ${isMobile ? T.space[5] : T.space[8]}px` }}>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <window.SectionHeader
          eyebrow={isEn ? "05 · Careers" : "05 · Karriere"}
          title={isEn
            ? <>Join the team. <span style={{ color: BLUE }}>In the office or on site.</span></>
            : <>Komm ins Team. <span style={{ color: BLUE }}>Im Büro oder auf der Baustelle.</span></>}
          lede={isEn
            ? "We are hiring operators for our Mainz office and master craftsmen or journeymen with the §8 exemption as co-founders for new locations."
            : "Wir suchen Operatoren für unser Office in Mainz und Meister bzw. Gesellen mit Ausnahmebewilligung als Mitgründer für neue Standorte."}
          ink={ink} sub={sub} blue={BLUE} marginBottom={56}
        />

        {/* Geteilte Bühne, Office vs Mitgründer */}
        <div style={{ position: "relative", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", border: `1px solid ${KO_INK}`, minHeight: isMobile ? "auto" : 640 }}>
          {/* LEFT, Office (black) */}
          <div style={{ background: KO_INK, color: "#fff", padding: isMobile ? "40px 24px" : "56px 48px", paddingBottom: isMobile ? 40 : 100, display: "flex", flexDirection: "column" }}>
            <div style={{ fontFamily: T.font.mono, fontSize: 10, letterSpacing: "0.3em", color: BLUE_SOFT, marginBottom: 20 }}>{isEn ? "OPERATIONS · OFFICE" : "OPERATIONS · BÜRO"}</div>
            <h3 style={{ fontFamily: T.font.display, fontSize: "clamp(36px, 4vw, 56px)", fontWeight: 700, lineHeight: 0.86, letterSpacing: "-0.05em", textTransform: "uppercase", margin: "0 0 36px" }}>
              {isEn ? <>With us<br/>in the office.</> : <>Bei uns<br/>im Office.</>}
            </h3>
            <div style={{ display: "grid", gap: 0, borderTop: "1px solid rgba(255,255,255,0.15)" }}>
              {opsJobs.map((j) => (
                <a key={j.title} href={j.href} style={{ padding: "24px 20px", margin: "0 -20px", borderBottom: "1px solid rgba(255,255,255,0.15)", display: "block", color: "inherit", textDecoration: "none", transition: "background 0.15s", cursor: "pointer" }}
                   onMouseOver={(e) => e.currentTarget.style.background = "rgba(255,255,255,0.04)"}
                   onMouseOut={(e) => e.currentTarget.style.background = "transparent"}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16, marginBottom: 8 }}>
                    <h4 style={{ fontFamily: T.font.display, fontSize: 26, fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.1, margin: 0 }}>{j.title}</h4>
                    <div style={{ fontFamily: T.font.mono, fontSize: 18, color: BLUE_SOFT }}>→</div>
                  </div>
                  <div style={{ fontFamily: T.font.mono, fontSize: 10, letterSpacing: "0.22em", color: BLUE_SOFT, marginBottom: 10 }}>{j.mode}</div>
                  <div style={{ fontFamily: T.font.sans, fontSize: 14, color: "rgba(255,255,255,0.78)", lineHeight: 1.55, maxWidth: 480 }}>{j.desc}</div>
                </a>
              ))}
            </div>
          </div>

          {/* RIGHT, Mitgründer (light blue) */}
          <div style={{ background: KO_SOFT, color: KO_INK, padding: isMobile ? "40px 24px" : "56px 48px", paddingBottom: isMobile ? 40 : 100, position: "relative", borderLeft: isMobile ? "none" : `1px solid ${KO_INK}`, borderTop: isMobile ? `1px solid ${KO_INK}` : "none", overflow: "hidden", display: "flex", flexDirection: "column" }}>
            {!isMobile && <div style={{ position: "absolute", bottom: 80, right: -30, fontFamily: T.font.display, fontSize: 280, fontWeight: 700, letterSpacing: "-0.07em", color: KO_DEEP, lineHeight: 0.78, zIndex: 1, textTransform: "uppercase", pointerEvents: "none" }}></div>}
            <div style={{ position: "relative", zIndex: 2 }}>
              <div style={{ fontFamily: T.font.mono, fontSize: 10, letterSpacing: "0.3em", color: BLUE, marginBottom: 20 }}>{isEn ? "CO-FOUNDERS · ON SITE" : "MITGRÜNDER · DRAUSSEN"}</div>
              <h3 style={{ fontFamily: T.font.display, fontSize: "clamp(36px, 4vw, 56px)", fontWeight: 700, lineHeight: 0.86, letterSpacing: "-0.05em", textTransform: "uppercase", margin: "0 0 36px", color: KO_INK }}>
                {isEn ? <>Tools in hand,<br/>on the job site.</> : <>Mit Werkzeug<br/>auf der Baustelle.</>}
              </h3>
              <div style={{ display: "grid", gap: 0, borderTop: `1px solid ${KO_INK}` }}>
                {cofounderJobs.map((j) => (
                  <a key={j.title} href={j.href} style={{ padding: "24px 20px", margin: "0 -20px", borderBottom: `1px solid ${KO_INK}`, display: "block", color: "inherit", textDecoration: "none", transition: "background 0.15s", cursor: "pointer" }}
                     onMouseOver={(e) => e.currentTarget.style.background = "rgba(255,255,255,0.4)"}
                     onMouseOut={(e) => e.currentTarget.style.background = "transparent"}>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16, marginBottom: 8 }}>
                      <h4 style={{ fontFamily: T.font.display, fontSize: 26, fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.1, color: KO_INK, margin: 0 }}>{j.title}</h4>
                      <div style={{ fontFamily: T.font.mono, fontSize: 18, color: BLUE }}>→</div>
                    </div>
                    <div style={{ fontFamily: T.font.mono, fontSize: 10, letterSpacing: "0.22em", color: BLUE, marginBottom: 10 }}>{j.mode}</div>
                    <div style={{ fontFamily: T.font.sans, fontSize: 14, color: KO_INK, opacity: 0.78, lineHeight: 1.55, maxWidth: 480 }}>{j.desc}</div>
                  </a>
                ))}
              </div>
            </div>
          </div>

          {/* Bottom blue connector strip, mobile: stacked, with CTA last */}
          {isMobile ? (
            <div style={{ position: "relative", left: 0, right: 0, background: BLUE, color: "#fff", padding: "20px 24px", fontFamily: T.font.mono, fontSize: 11, letterSpacing: "0.22em", gridColumn: "1 / -1", display: "grid", gap: 6 }}>
              <div>{isEn ? "OFFICE ROLES" : "OFFICE-ROLLEN"}</div>
              <div>{isEn ? "+ CO-FOUNDER ROLES" : "+ MITGRÜNDER-ROLLEN"}</div>
              <div style={{ marginTop: 8, paddingTop: 12, borderTop: "1px solid rgba(255,255,255,0.25)", fontFamily: T.font.display, fontSize: 15, fontWeight: 700, letterSpacing: "0.12em" }}>{isEn ? "Apply now →" : "Jetzt bewerben →"}</div>
            </div>
          ) : (
            <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 56, background: BLUE, color: "#fff", display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 48px", fontFamily: T.font.mono, fontSize: 11, letterSpacing: "0.3em" }}>
              <span>{isEn ? "OFFICE ROLES" : "OFFICE-ROLLEN"}</span>
              <span style={{ fontFamily: T.font.display, fontSize: 15, fontWeight: 700, letterSpacing: "0.18em" }}>{isEn ? "APPLY NOW →" : "JETZT BEWERBEN →"}</span>
              <span>{isEn ? "CO-FOUNDER ROLES" : "MITGRÜNDER-ROLLEN"}</span>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

// SectionFooterGeneral, kontakt CTA + footer brand block.
// NOTE: brand block + "Impressum · Datenschutz · AGB" line are owned by another agent.
// Do not change them here; they will be wired up later.
window.SectionFooterGeneral = function SectionFooterGeneral({ dark }) {
  const v = window.useViewport();
  const isMobile = v === "mobile";
  const lang = window.useLang ? window.useLang() : "de";
  const isEn = lang === "en";
  return (
    <React.Fragment>
      <section id="kontakt" style={{ isolation: "isolate", background: T.color.blue, color: "#fff", padding: `${isMobile ? T.space[10] : T.space[13]}px ${isMobile ? T.space[5] : T.space[8]}px` }}>
        <div style={{ maxWidth: 1600, margin: "0 auto" }}>
          <div style={{ marginBottom: isMobile ? 40 : 64, maxWidth: 900 }}>
            <div style={{ fontFamily: T.font.mono, fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "rgba(255,255,255,0.7)", marginBottom: T.space[5] }}>{isEn ? "06 · Contact" : "06 · Kontakt"}</div>
            <h2 style={{ fontFamily: T.font.display, fontSize: "clamp(48px, 6vw, 96px)", fontWeight: 700, letterSpacing: "-0.045em", lineHeight: 0.92, textTransform: "uppercase", margin: 0 }}>
              {isEn ? "Let's talk." : "Lass uns sprechen."}
            </h2>
            <div style={{ fontFamily: T.font.sans, fontSize: 18, color: "rgba(255,255,255,0.85)", lineHeight: 1.55, marginTop: 24, maxWidth: 640 }}>
              {isEn
                ? "15 minutes. No pitch. We listen, and tell you whether and how we can help."
                : "15 Minuten. Kein Pitch. Wir hören zu, ob und wie wir helfen können."}
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 32 : 64 }}>
            {/* Left column: direct contact */}
            <div style={{ display: "flex", flexDirection: "column", gap: 36 }}>
              <div>
                <div style={{ fontFamily: T.font.mono, fontSize: 10, letterSpacing: "0.22em", color: "rgba(255,255,255,0.7)", marginBottom: 12 }}>{isEn ? "EMAIL" : "E-MAIL"}</div>
                <a href="mailto:hello@klima-one.com" style={{ fontFamily: T.font.display, fontSize: 32, fontWeight: 600, letterSpacing: "-0.02em", color: "#fff", textDecoration: "none", lineHeight: 1, display: "block" }}>hello@klima-one.com</a>
                <div style={{ fontFamily: T.font.sans, fontSize: 14, color: "rgba(255,255,255,0.65)", marginTop: 8 }}>{isEn ? "Reply within 24 hours" : "Antwort innerhalb 24h"}</div>
              </div>
              <div style={{ paddingTop: 28, borderTop: "1px solid rgba(255,255,255,0.2)" }}>
                <div style={{ fontFamily: T.font.mono, fontSize: 10, letterSpacing: "0.22em", color: "rgba(255,255,255,0.7)", marginBottom: 12 }}>{isEn ? "OFFICE" : "BÜRO"}</div>
                <div style={{ fontFamily: T.font.sans, fontSize: 16, color: "#fff", lineHeight: 1.5 }}>KlimaOne<br/>{isEn ? "Mainz · Germany" : "Mainz · Deutschland"}</div>
              </div>
            </div>

            {/* Right column: form — wired to formsubmit.co. Native POST,
                no preventDefault, redirects to thanks.html via _next. */}
            <form
              action="https://formsubmit.co/hello@klima-one.com"
              method="POST"
              style={{ background: "#fff", color: T.color.ink, padding: 36, display: "flex", flexDirection: "column", gap: 20 }}
            >
              <input type="hidden" name="_subject" value={isEn ? "Website contact enquiry" : "Kontaktanfrage von Website"} />
              <input type="hidden" name="_template" value="table" />
              <input type="hidden" name="_captcha" value="false" />
              <input type="hidden" name="_next" value="https://klima-one.com/thanks.html" />
              <input type="text" name="_honey" tabIndex={-1} autoComplete="off" style={{ display: "none" }} />
              <div style={{ fontFamily: T.font.mono, fontSize: 10, letterSpacing: "0.22em", color: T.color.blue, marginBottom: 4 }}>{isEn ? "// FORM" : "// FORMULAR"}</div>
              <div style={{ fontFamily: T.font.display, fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em", marginBottom: 8 }}>{isEn ? "Drop us a quick line." : "Schreib uns kurz."}</div>
              <input required name="name" placeholder={isEn ? "Name" : "Name"} style={{ border: "none", borderBottom: `1.5px solid ${T.color.ink}`, padding: "14px 0", fontFamily: T.font.sans, fontSize: 16, outline: "none", background: "transparent" }} />
              <input required type="email" name="email" placeholder={isEn ? "Email" : "E-Mail"} style={{ border: "none", borderBottom: `1.5px solid ${T.color.ink}`, padding: "14px 0", fontFamily: T.font.sans, fontSize: 16, outline: "none", background: "transparent" }} />
              <input name="phone" placeholder={isEn ? "Phone (optional)" : "Telefon (optional)"} style={{ border: "none", borderBottom: "1.5px solid #0A0A0A", padding: "14px 0", fontFamily: T.font.sans, fontSize: 16, outline: "none", background: "transparent" }} />
              <textarea required name="message" placeholder={isEn ? "What's it about?" : "Worum geht's?"} rows={4} style={{ border: "none", borderBottom: `1.5px solid ${T.color.ink}`, padding: "14px 0", fontFamily: T.font.sans, fontSize: 16, outline: "none", background: "transparent", resize: "vertical" }} />
              <button type="submit" style={{ background: T.color.blue, color: "#fff", border: "none", borderRadius: T.radius.sm, padding: "18px 28px", fontFamily: T.font.sans, fontSize: 16, fontWeight: 600, cursor: "pointer", marginTop: 12, alignSelf: "flex-start" }}>{isEn ? "Send enquiry →" : "Anfrage senden →"}</button>
            </form>
          </div>
        </div>
      </section>
      {/* Footer brand block, owned by another agent. Do not modify. */}
      <footer style={{ background: dark ? T.color.surfaceDark : T.color.ink, color: "#fff", padding: isMobile ? "64px 24px 32px" : "80px 48px 40px" }}>
        <div style={{ maxWidth: 1600, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "2fr 1fr 1fr", gap: isMobile ? 32 : 48, marginBottom: isMobile ? 40 : 64 }}>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
                <div style={{ width: 12, height: 12, borderRadius: 6, background: "#0F4FFF" }} />
                <span style={{ fontFamily: "Inter", fontSize: 22, fontWeight: 500, letterSpacing: "-0.04em" }}>klimaone</span>
              </div>
              <div style={{ fontFamily: "Inter", fontSize: 14, color: "rgba(255,255,255,0.55)", lineHeight: 1.6, maxWidth: 360 }}>
                Wir gründen Betriebe gemeinsam mit Handwerkern. Spezialisiert auf Kälte- und Klimatechnik.
              </div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.45)", marginTop: 18 }}>
                KlimaOne, eine Marke der 0-1 Group GmbH
              </div>
            </div>
            {[
              ["Navigation", [["Über uns", "/#top"], ["Jetzt Partner werden", "/Fuer%20Handwerker#top"], ["Kontakt", "#kontakt"]]],
              ["Kontakt",    [["hello@klima-one.com", "mailto:hello@klima-one.com"], ["Mainz · Deutschland", "#"]]],
            ].map(([title, links]) => (
              <div key={title}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "#0F4FFF", marginBottom: 16 }}>{title}</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  {links.map(([l, h]) => <a key={l} href={h} style={{ fontFamily: "Inter", fontSize: 14, color: "rgba(255,255,255,0.78)", textDecoration: "none" }}>{l}</a>)}
                </div>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", flexDirection: isMobile ? "column" : "row", gap: isMobile ? 12 : 0, alignItems: isMobile ? "flex-start" : "center", justifyContent: "space-between", paddingTop: 28, borderTop: "1px solid rgba(255,255,255,0.10)", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.4)" }}>
            <span>© 2026 KlimaOne, eine Marke der 0-1 Group GmbH</span>
            <span style={{ display: "flex", gap: 16 }}>
              <a href="/Impressum" style={{ color: "rgba(255,255,255,0.55)", textDecoration: "none" }}>Impressum</a>
              <a href="/Datenschutz" style={{ color: "rgba(255,255,255,0.55)", textDecoration: "none" }}>Datenschutz</a>
              <a href="/AGB" style={{ color: "rgba(255,255,255,0.55)", textDecoration: "none" }}>AGB</a>
            </span>
          </div>
        </div>
      </footer>
    </React.Fragment>
  );
};
})();