// ╔══════════════════════════════════════════════════════════════╗
// ║  LEISTUNGEN — 6 Service-Cards, pfad-abhängig                 ║
// ╚══════════════════════════════════════════════════════════════╝

const LEIST_PALETTE = {
  bgDeep: "#071520",
  bgCard: "#0D2030",
  accent: "#3ABDD0",
  soft: "#8DDBEA",
  text: "#ffffff",
  textDim: "rgba(255,255,255,0.55)",
  border: "rgba(141,219,234,0.12)",
  borderHi: "rgba(58,189,208,0.45)",
};

// Hand-drawn line illustrations for each service (instead of icons — more distinctive)
const LeistIllu = {
  // Beleuchtung
  light: (c) => (
    <svg viewBox="0 0 80 80" fill="none">
      <path d="M40 14 a14 14 0 0 1 8 25.5 c-1.2 1-2 2.4-2 4 v3 H34 v-3 c0-1.6-.8-3-2-4 A14 14 0 0 1 40 14 z"
            stroke={c} strokeWidth="1.4" strokeLinejoin="round"/>
      <path d="M34 51 h12 M36 56 h8 M38 61 h4" stroke={c} strokeWidth="1.4" strokeLinecap="round"/>
      <path d="M40 6 v4 M22 14 l3 3 M58 14 l-3 3 M14 32 h4 M62 32 h4"
            stroke={c} strokeWidth="1.2" strokeLinecap="round" opacity="0.5"/>
    </svg>
  ),
  // Heizung / Klima
  heating: (c) => (
    <svg viewBox="0 0 80 80" fill="none">
      <rect x="20" y="20" width="40" height="40" rx="3" stroke={c} strokeWidth="1.4"/>
      <path d="M28 20 v40 M36 20 v40 M44 20 v40 M52 20 v40" stroke={c} strokeWidth="1" opacity="0.6"/>
      <circle cx="40" cy="68" r="3" stroke={c} strokeWidth="1.2"/>
      <path d="M40 12 v6" stroke={c} strokeWidth="1.4" strokeLinecap="round"/>
      <path d="M14 14 q4 4 0 8 q-4 4 0 8" stroke={c} strokeWidth="1.2" strokeLinecap="round" opacity="0.6"/>
      <path d="M62 14 q4 4 0 8 q-4 4 0 8" stroke={c} strokeWidth="1.2" strokeLinecap="round" opacity="0.6"/>
    </svg>
  ),
  // Beschattung
  shade: (c) => (
    <svg viewBox="0 0 80 80" fill="none">
      <rect x="14" y="12" width="52" height="56" stroke={c} strokeWidth="1.4"/>
      <path d="M14 22 h52 M14 30 h52 M14 38 h52 M14 46 h52" stroke={c} strokeWidth="1" opacity="0.5"/>
      <path d="M40 12 v44" stroke={c} strokeWidth="1.4" opacity="0.7"/>
      <circle cx="40" cy="58" r="3" fill={c}/>
      <path d="M30 65 h20" stroke={c} strokeWidth="1.4" strokeLinecap="round"/>
      <path d="M8 16 l4 -4 M68 16 l4 -4" stroke={c} strokeWidth="1.2" strokeLinecap="round" opacity="0.5"/>
    </svg>
  ),
  // Sicherheit
  shield: (c) => (
    <svg viewBox="0 0 80 80" fill="none">
      <path d="M40 12 l22 7 v18 c0 14-10 22-22 26 -12-4-22-12-22-26 V19 z" stroke={c} strokeWidth="1.4" strokeLinejoin="round"/>
      <path d="M30 38 l8 8 14-14" stroke={c} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="60" cy="22" r="3" fill={c}/>
      <path d="M55 19 l8 -4" stroke={c} strokeWidth="1.2" strokeLinecap="round" opacity="0.5"/>
    </svg>
  ),
  // Energie / PV
  energy: (c) => (
    <svg viewBox="0 0 80 80" fill="none">
      <path d="M16 50 l16 -22 l4 8 l8 -14 l4 6 l16 -10" stroke={c} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="64" cy="18" r="3" fill={c}/>
      <path d="M14 60 h52" stroke={c} strokeWidth="1.4"/>
      <path d="M22 60 v8 M34 60 v8 M46 60 v8 M58 60 v8" stroke={c} strokeWidth="1.2" opacity="0.6"/>
      <path d="M16 50 v10 M68 50 v10 M40 50 v10" stroke={c} strokeWidth="1" opacity="0.4"/>
    </svg>
  ),
  // Multimedia / Audio
  audio: (c) => (
    <svg viewBox="0 0 80 80" fill="none">
      <rect x="22" y="14" width="36" height="52" rx="3" stroke={c} strokeWidth="1.4"/>
      <circle cx="40" cy="30" r="6" stroke={c} strokeWidth="1.2"/>
      <circle cx="40" cy="50" r="10" stroke={c} strokeWidth="1.4"/>
      <circle cx="40" cy="50" r="3" fill={c}/>
      <circle cx="40" cy="30" r="1.5" fill={c}/>
    </svg>
  ),
  // Zutritt / Schloss
  access: (c) => (
    <svg viewBox="0 0 80 80" fill="none">
      <rect x="20" y="34" width="40" height="32" rx="2" stroke={c} strokeWidth="1.4"/>
      <path d="M28 34 v-8 a12 12 0 0 1 24 0 v8" stroke={c} strokeWidth="1.4" strokeLinejoin="round"/>
      <circle cx="40" cy="48" r="3" fill={c}/>
      <path d="M40 51 v6" stroke={c} strokeWidth="1.4" strokeLinecap="round"/>
      <path d="M62 22 l8 4 M62 30 l10 0" stroke={c} strokeWidth="1.2" strokeLinecap="round" opacity="0.5"/>
    </svg>
  ),
  // Beratung
  consult: (c) => (
    <svg viewBox="0 0 80 80" fill="none">
      <circle cx="40" cy="32" r="9" stroke={c} strokeWidth="1.4"/>
      <path d="M22 64 a18 18 0 0 1 36 0" stroke={c} strokeWidth="1.4" strokeLinecap="round"/>
      <path d="M55 18 q6 0 6 6 q0 4-4 5 v3" stroke={c} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="57" cy="36" r="1" fill={c}/>
    </svg>
  ),
  // Wartung
  wrench: (c) => (
    <svg viewBox="0 0 80 80" fill="none">
      <path d="M48 16 a12 12 0 0 0 16 16 L66 36 L42 60 a4 4 0 0 1 -6 0 l-4 -4 a4 4 0 0 1 0 -6 l24 -24 z"
            stroke={c} strokeWidth="1.4" strokeLinejoin="round"/>
      <circle cx="38" cy="58" r="2" fill={c}/>
      <path d="M14 14 l8 8 M14 22 l8 -8" stroke={c} strokeWidth="1.2" strokeLinecap="round" opacity="0.5"/>
    </svg>
  ),
  // Fernwartung / Cloud
  remote: (c) => (
    <svg viewBox="0 0 80 80" fill="none">
      <path d="M22 50 a10 10 0 0 1 0-20 a14 14 0 0 1 28 2 a8 8 0 0 1 8 18 z"
            stroke={c} strokeWidth="1.4" strokeLinejoin="round"/>
      <path d="M38 38 v14 M32 46 l6 6 l6 -6" stroke={c} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="62" cy="20" r="2" fill={c}/>
      <path d="M58 16 l8 0 M58 24 l8 0" stroke={c} strokeWidth="1.2" strokeLinecap="round" opacity="0.5"/>
    </svg>
  ),
  // Visualisierung / Dashboard
  dashboard: (c) => (
    <svg viewBox="0 0 80 80" fill="none">
      <rect x="14" y="18" width="52" height="36" rx="2" stroke={c} strokeWidth="1.4"/>
      <path d="M20 46 l8 -10 l6 4 l10 -14 l8 6 l8 -8" stroke={c} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="58" cy="24" r="2" fill={c}/>
      <path d="M30 60 h20 M28 64 h24" stroke={c} strokeWidth="1.4" strokeLinecap="round"/>
    </svg>
  ),
  // KNX / Bus / Verkabelung
  bus: (c) => (
    <svg viewBox="0 0 80 80" fill="none">
      <circle cx="20" cy="20" r="4" stroke={c} strokeWidth="1.4"/>
      <circle cx="60" cy="20" r="4" stroke={c} strokeWidth="1.4"/>
      <circle cx="20" cy="60" r="4" stroke={c} strokeWidth="1.4"/>
      <circle cx="60" cy="60" r="4" stroke={c} strokeWidth="1.4"/>
      <circle cx="40" cy="40" r="5" stroke={c} strokeWidth="1.4" fill={LEIST_PALETTE.bgCard}/>
      <circle cx="40" cy="40" r="2" fill={c}/>
      <path d="M24 20 h32 M24 60 h32 M20 24 v32 M60 24 v32" stroke={c} strokeWidth="1.2" opacity="0.6"/>
      <path d="M23 23 l14 14 M57 23 l-14 14 M23 57 l14 -14 M57 57 l-14 -14" stroke={c} strokeWidth="1" opacity="0.3"/>
    </svg>
  ),
};

// Path-aware service definitions
const LEIST_DATA = {
  altbau: {
    eyebrow: "Was wir machen — für Bestandshäuser",
    headline: "Smart nachrüsten,",
    headlineEm: "Schritt für Schritt.",
    sub: "Du musst nicht alles auf einmal machen. Wir starten mit dem Bereich, der dich am meisten nervt — und bauen weiter aus, wenn du bereit bist.",
    cards: [
      {
        nr: "01", illu: "light", tag: "Funk + Kabel",
        title: "Beleuchtung",
        desc: "Dimmen, Szenen, Tageslicht-Steuerung. Ohne Stemmarbeiten via Funk, oder bei Renovierung sauber verkabelt.",
        bullets: ["Bestehende Schalter ersetzen", "Hue, Shelly, Loxone-kompatibel", "Szenen via App, Sprache, Taster"],
      },
      {
        nr: "02", illu: "heating", tag: "Heizkörper · FBH",
        title: "Heizung & Raumklima",
        desc: "Pro Raum eigene Soll-Temperatur, Anwesenheit erkannt, Fenster-auf-Erkennung. Spart 15–25% Energie.",
        bullets: ["Funk-Thermostatköpfe", "Heizkurven & Wochenpläne", "Anbindung an Wetter-API"],
      },
      {
        nr: "03", illu: "shade", tag: "Rollläden · Jalousien",
        title: "Beschattung",
        desc: "Bestehende Rollladenmotoren smart machen — automatisch nach Sonne, Wind, Tageszeit. Manuelle Bedienung bleibt.",
        bullets: ["Shelly 2.5 Aktoren", "Astro-Zeit-Steuerung", "Wind- & Hitzeschutz automatisch"],
      },
      {
        nr: "04", illu: "shield", tag: "Türen · Fenster · Bewegung",
        title: "Sicherheitsnahe Smart-Home-Funktionen",
        desc: "Statusmeldungen, Tür-/Fensterkontakte, Anwesenheitssimulation und Push bei Auffälligkeiten — keine zertifizierte Alarm- oder Brandmeldeanlage.",
        bullets: ["Aqara, Shelly, Eltako Sensoren", "Anwesenheitssimulation", "Türklingel mit Video"],
      },
      {
        nr: "05", illu: "energy", tag: "PV · Wärmepumpe",
        title: "Energiemanagement",
        desc: "PV-Erträge sichtbar machen, Wärmepumpe & E-Auto im Sonnen-Überschuss laden, Verbräuche transparent. Elektrische Anschlussarbeiten erfolgen durch den jeweiligen Fachbetrieb.",
        bullets: ["openWB, evcc, Home Assistant", "Lastmanagement automatisch", "Energiekosten-Dashboards"],
      },
      {
        nr: "06", illu: "consult", tag: "Beratung · Doku",
        title: "Beratung & Dokumentation",
        desc: "Vor-Ort-Termin, Bestandsaufnahme, Plan mit Prioritäten. Alle Zugänge & Komponenten dokumentiert — du behältst die Kontrolle.",
        bullets: ["Vor-Ort-Audit", "Etappenplan", "Übergabe-Doku & Zugänge"],
      },
    ],
  },
  neubau: {
    eyebrow: "Was wir machen — für Neubauten",
    headline: "Einmal richtig",
    headlineEm: "verkabeln. Für Jahrzehnte.",
    sub: "Im Rohbau einmal sauber planen — KNX als Bus-System, herstellerunabhängig. Spart Geld auf 20 Jahre und ist weltweit servicefähig.",
    cards: [
      {
        nr: "01", illu: "bus", tag: "KNX · Loxone",
        title: "KNX- & Loxone-Planung",
        desc: "Komplette Bus-Topologie und Logikplanung: Linien, Bereiche, Verteilung, ETS- bzw. Loxone-Config, Inbetriebnahme. Herstellerneutral — in Abstimmung mit den ausführenden Gewerken.",
        bullets: ["ETS / Loxone Config", "Planung mit Elektropartner", "Schnittstellen zu HA / Energie", "Erweiterbar ohne neue Kabel"],
      },
      {
        nr: "02", illu: "light", tag: "Offen · Herstellerübergreifend",
        title: "Beleuchtung & Szenen",
        desc: "DALI, KNX, WLED, Hue, IKEA Tradfri, Loxone — bei Licht muss man flexibel sein. Lampen kommen und gehen, das System bleibt.",
        bullets: ["DALI-2 · KNX · WLED · Hue · Tradfri · Loxone", "Constant Light Regelung", "Tunable White nach Tageszeit", "Tausch jederzeit ohne Lock-in"],
      },
      {
        nr: "03", illu: "shade", tag: "KNX · Wetter",
        title: "Beschattung intelligent",
        desc: "Wetterstation auf dem Dach — Wind, Sonne, Niederschlag. Beschattung reagiert pro Fassade automatisch, manuell überschreibbar.",
        bullets: ["Elsner, Theben Wetterstation", "Fassaden-Logik", "Ferienmodus & Lammellenführung"],
      },
      {
        nr: "04", illu: "heating", tag: "FBH · KWL · WP",
        title: "Klima & Lüftung",
        desc: "Fußbodenheizung pro Raum, KWL mit CO₂- und Feuchte-Steuerung, Wärmepumpe lastoptimiert. Eine Visualisierung für alles.",
        bullets: ["Einzelraum-FBH", "KWL CO₂/rH-geführt", "Wärmepumpe + PV-Kopplung"],
      },
      {
        nr: "05", illu: "shield", tag: "Status · Zutritt · Video",
        title: "Sicherheitsnahe Funktionen & Zutritt",
        desc: "Statusmeldungen, Tag-/Nacht-Modi, Video-Türsprechanlage und elektronisches Schloss als Smart-Home-Funktionen. Zertifizierte Alarm- oder Brandmeldeanlagen erfolgen über Partnerbetriebe.",
        bullets: ["Modi: Anwesend, Abwesend, Nacht", "DoorBird, 2N, Nuki", "RFID & App-Schlüssel"],
      },
      {
        nr: "06", illu: "dashboard", tag: "Visualisierung",
        title: "Visualisierung & Dashboards",
        desc: "Tablet im Eingang, Apps für Familie, Sprachsteuerung optional. Alles über offene Standards — kein Hersteller-Lock-in.",
        bullets: ["Home Assistant, openHAB", "Tablets, Apps, Sprache", "Vollständige Übergabe-Doku"],
      },
    ],
  },
  gewerbe: {
    eyebrow: "Was wir machen — für Gewerbe, Büro & Hotel",
    headline: "Betriebsgebäude die",
    headlineEm: "planbar laufen.",
    sub: "Gewerbeobjekte brauchen keine Spielerei, sondern klare Abläufe: Energie im Griff, Räume passend konditioniert, Zutritt nachvollziehbar und Technikzustände sichtbar — vom Büro bis zum kleinen Hotel.",
    cards: [
      {
        nr: "01", illu: "energy", tag: "STROM · PV · TECHNIK",
        title: "Gewerbe & Technikstatus",
        desc: "Stromverbrauch, PV, Wallbox, Kühlung, Tore, Serverraum oder Kompressor: wichtige Zustände landen in einem verständlichen Betriebsdashboard.",
        bullets: ["Energie- und Technikdashboard", "Schwellwerte & Meldungen", "Modbus, MQTT, API, Netzwerk"],
      },
      {
        nr: "02", illu: "dashboard", tag: "LICHT · CO₂ · PRÄSENZ",
        title: "Büroflächen & Meetingräume",
        desc: "Licht, Beschattung, Heizung/Kühlung und Luftqualität reagieren auf Präsenz, Tageslicht und Nutzungszeiten — ohne dass jeder Raum einzeln nachgeregelt werden muss.",
        bullets: ["Präsenzabhängige Szenen", "CO₂- und Temperaturwerte", "Wochen- und Sonderzeiten"],
      },
      {
        nr: "03", illu: "heating", tag: "ZIMMER · KLIMA · SZENEN",
        title: "Hotelzimmer & Gäste-Komfort",
        desc: "Für kleine Hotels, Pensionen und Apartmenthäuser: Zimmerstatus, Klima nach Belegung, Fensterstatus, Grundszenen und Technikmeldungen werden betreiberfreundlich zusammengeführt.",
        bullets: ["Belegung & Reinigungsstatus", "Klima nach Nutzung", "Etappenfähig im laufenden Betrieb"],
      },
      {
        nr: "04", illu: "access", tag: "CODES · RFID · ZEITEN",
        title: "Zutritt & Rollen",
        desc: "Eingänge, Teamzonen, Lager, Technikräume oder Hotelbereiche lassen sich zeit- und rollenbasiert abbilden. Bestehende Zutrittssysteme werden nach Möglichkeit integriert.",
        bullets: ["Rollen und Zeitfenster", "Tür- und Torstatus", "Besucher- und Dienstleisterlogik"],
      },
      {
        nr: "05", illu: "shield", tag: "STATUS · VIDEO · ALARMIERUNG",
        title: "Lagebild & Störungen",
        desc: "Tür-/Fenster-Status, Video-Türsprechanlage, Eskalationsmeldungen und Quittierung als betriebliche Übersicht. Zertifizierte Alarm-, Brand- oder Überwachungstechnik erfolgt mit Fachpartnern.",
        bullets: ["Statusmeldungen & Quittierung", "Kamera-/VMS-Integration", "Fachpartner für zertifizierte Anlagen"],
      },
      {
        nr: "06", illu: "wrench", tag: "SERVICE · REPORTS · ETAPPEN",
        title: "Service, Reports & Etappenplan",
        desc: "Gewerbeumbauten müssen weiterlaufen. Deshalb planen wir in Etappen, dokumentieren Schnittstellen und schaffen eine wartbare Basis für Betrieb, Erweiterung und Fernsupport.",
        bullets: ["VPN-gesicherte Fernwartung", "Monats- und Ereignisreports", "Brownfield-Integration"],
      },
    ],
  },
};

function LeistCard({ card, accent, index }) {
  const Illu = LeistIllu[card.illu];
  return (
    <article className="leist-card" style={{
      background: LEIST_PALETTE.bgCard,
      border: `1px solid ${LEIST_PALETTE.border}`,
      borderRadius: 16,
      padding: "28px 28px 26px",
      position: "relative",
      transition: "all 0.25s ease",
      display: "flex",
      flexDirection: "column",
      gap: 16,
      cursor: "default",
      animationDelay: `${index * 60}ms`,
    }}>
      {/* Header row: nr + tag */}
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        fontFamily: "JetBrains Mono, monospace", fontSize: 11,
        letterSpacing: "0.12em", color: LEIST_PALETTE.textDim,
      }}>
        <span style={{ color: accent }}>{card.nr}</span>
        <span style={{ textTransform: "uppercase" }}>{card.tag}</span>
      </div>

      {/* Illustration */}
      <div style={{
        width: 80, height: 80, marginTop: 4,
        color: accent, opacity: 0.95,
      }}>
        {Illu && Illu(accent)}
      </div>

      {/* Title + desc */}
      <div>
        <h3 style={{
          fontFamily: "Outfit, sans-serif", fontSize: 22, fontWeight: 500,
          letterSpacing: "-0.01em", margin: "0 0 10px", color: LEIST_PALETTE.text,
          lineHeight: 1.2,
        }}>{card.title}</h3>
        <p style={{
          fontFamily: "Inter, sans-serif", fontSize: 14, lineHeight: 1.55,
          color: LEIST_PALETTE.soft, opacity: 0.8, margin: 0,
        }}>{card.desc}</p>
      </div>

      {/* Bullets */}
      <ul style={{
        listStyle: "none", padding: 0, margin: "auto 0 0",
        display: "flex", flexDirection: "column", gap: 6,
        borderTop: `1px solid ${LEIST_PALETTE.border}`,
        paddingTop: 16, marginTop: 8,
      }}>
        {card.bullets.map((b, i) => (
          <li key={i} style={{
            fontFamily: "Inter, sans-serif", fontSize: 13,
            color: LEIST_PALETTE.textDim, display: "flex", gap: 10,
            alignItems: "flex-start",
          }}>
            <span style={{ color: accent, marginTop: 1 }}>›</span>
            <span>{b}</span>
          </li>
        ))}
      </ul>
    </article>
  );
}

function LeistungenSection({ pathKey }) {
  const data = LEIST_DATA[pathKey] || LEIST_DATA.altbau;
  const accent = LEIST_PALETTE.accent;

  return (
    <section id="leistungen" style={{
      padding: "120px 40px 120px",
      borderTop: `1px solid ${LEIST_PALETTE.border}`,
      background: `radial-gradient(ellipse at 80% 20%, rgba(58,189,208,0.04), transparent 60%)`,
      scrollMarginTop: "80px",
      position: "relative",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        {/* Header */}
        <div style={{
          display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 60,
          alignItems: "end", marginBottom: 64,
        }} className="leist-header">
          <div>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              padding: "7px 14px", background: "rgba(58,189,208,0.08)",
              border: "1px solid rgba(58,189,208,0.25)", borderRadius: 100,
              fontFamily: "JetBrains Mono, monospace", fontSize: 11,
              color: accent, letterSpacing: "0.15em", marginBottom: 24,
              textTransform: "uppercase",
            }}>
              <span style={{ width: 6, height: 6, borderRadius: 50, background: accent,
                             boxShadow: `0 0 0 4px ${accent}33`, display: "block" }}/>
              Leistungen
            </div>
            <h2 style={{
              fontFamily: "Outfit, sans-serif", fontSize: "clamp(36px, 4.5vw, 60px)",
              fontWeight: 500, letterSpacing: "-0.025em", lineHeight: 1.05,
              margin: 0, color: LEIST_PALETTE.text,
            }}>
              {data.headline} <em style={{ fontStyle: "normal", color: accent }}>{data.headlineEm}</em>
            </h2>
          </div>
          <p style={{
            fontFamily: "Inter, sans-serif", fontSize: 17, lineHeight: 1.55,
            color: LEIST_PALETTE.soft, opacity: 0.85, margin: 0, paddingBottom: 8,
          }}>
            {data.sub}
          </p>
        </div>

        {/* Cards Grid */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
          gap: 16,
        }} className="leist-grid">
          {data.cards.map((c, i) => <LeistCard key={c.nr} card={c} accent={accent} index={i}/>)}
        </div>

        {/* Referenzen */}
        <LeistReferences pathKey={pathKey} />

        {/* FAQ */}
        <LeistFaq />

        {/* CTA strip */}
        <div style={{
          marginTop: 64, padding: "36px 40px",
          background: LEIST_PALETTE.bgCard,
          border: `1px solid ${LEIST_PALETTE.border}`,
          borderRadius: 20,
          display: "grid", gridTemplateColumns: "1fr auto", gap: 32,
          alignItems: "center",
        }} className="leist-cta">
          <div>
            <h3 style={{
              fontFamily: "Outfit, sans-serif", fontSize: 24, fontWeight: 500,
              letterSpacing: "-0.01em", margin: "0 0 6px", color: LEIST_PALETTE.text,
            }}>
              Nicht sicher, was du brauchst?
            </h3>
            <p style={{
              fontFamily: "Inter, sans-serif", fontSize: 15,
              color: LEIST_PALETTE.soft, opacity: 0.8, margin: 0,
            }}>
              Der Konfigurator schlägt dir in 3 Schritten ein passendes Setup mit grobem Preisrahmen vor.
            </p>
          </div>
          <a href="#konfigurator" style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            padding: "14px 26px", borderRadius: 100,
            background: accent, color: LEIST_PALETTE.bgDeep,
            fontFamily: "Inter, sans-serif", fontSize: 14, fontWeight: 500,
            textDecoration: "none", whiteSpace: "nowrap",
            transition: "all 0.2s",
          }}>
            Zum Konfigurator
            <span>→</span>
          </a>
        </div>
      </div>

      <style>{`
        .leist-card { animation: leistFadeIn 0.7s ease both; }
        @keyframes leistFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
        .leist-card:hover { border-color: rgba(58,189,208,0.45); transform: translateY(-3px);
                            box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(58,189,208,0.1); }
        @media (max-width: 800px) {
          .leist-header { grid-template-columns: 1fr !important; gap: 24px !important; }
          .leist-cta { grid-template-columns: 1fr !important; }
          .leist-faq-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
        .leist-ref-card { transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
        .leist-ref-card:hover { border-color: rgba(58,189,208,0.45); transform: translateY(-3px);
                                box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
      `}</style>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────
   Referenzen — kuratierte Auswahl realisierter Projekte
   ────────────────────────────────────────────────────────── */
const REFERENCES = [
  {
    title: "EFH Neubau · Kärnten",
    type: "Neubau",
    scope: "KNX-Vollausbau · 14 Räume · PV + Speicher",
    note: "Loxone Miniserver als Zentrale, Home Assistant als Visu. Nutzer betreut Updates selbst.",
    year: "2025",
    rooms: 14,
    accentBg: "linear-gradient(135deg, rgba(58,189,208,0.18), rgba(58,189,208,0.03))",
  },
  {
    title: "Sanierung Reihenhaus · Graz Umgebung",
    type: "Altbau",
    scope: "Funk-Mix Shelly + Zigbee · 8 Räume · Bestand-Heizung",
    note: "Ohne Stemmarbeiten. Heimautomatisierung über vorhandenes WLAN, Home Assistant on-prem auf NUC.",
    year: "2025",
    rooms: 8,
    accentBg: "linear-gradient(135deg, rgba(141,219,234,0.14), rgba(141,219,234,0.02))",
  },
  {
    title: "Praxis · Klagenfurt",
    type: "Gewerbe",
    scope: "Zutritt + Beleuchtung + Energiemonitoring",
    note: "Rollenbasierter Zutritt, PV-Eigenverbrauchs-Reporting für die Energiebuchhaltung.",
    year: "2024",
    rooms: 6,
    accentBg: "linear-gradient(135deg, rgba(58,189,208,0.12), rgba(58,189,208,0.02))",
  },
  {
    title: "EFH Bestand · Villach",
    type: "Altbau",
    scope: "Beschattung + Heizung + Multimedia",
    note: "Bestehende KNX-Verkabelung reaktiviert, Home Assistant ergänzt Sonos- und Hue-Integration.",
    year: "2024",
    rooms: 11,
    accentBg: "linear-gradient(135deg, rgba(93,211,176,0.12), rgba(93,211,176,0.02))",
  },
];

function LeistReferences({ pathKey }) {
  const accent = LEIST_PALETTE.accent;
  const filtered = pathKey === "altbau"
    ? REFERENCES.filter(r => r.type === "Altbau" || r.type === "Gewerbe")
    : pathKey === "neubau"
    ? REFERENCES.filter(r => r.type === "Neubau" || r.type === "Altbau")
    : REFERENCES;
  return (
    <div style={{ marginTop: 96, scrollMarginTop: 80 }} id="referenzen">
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "baseline",
        flexWrap: "wrap", gap: 24, marginBottom: 32,
        paddingBottom: 18, borderBottom: `1px solid ${LEIST_PALETTE.border}`,
      }}>
        <div>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
            letterSpacing: "0.18em", color: accent, marginBottom: 10,
            textTransform: "uppercase",
          }}>
            <span style={{ display: "inline-block", width: 24, height: 1,
                           background: accent, verticalAlign: "middle",
                           marginRight: 10, opacity: 0.6 }}/>
            Referenzen
          </div>
          <h3 style={{
            fontFamily: "Outfit, sans-serif", fontSize: "clamp(28px, 3.4vw, 40px)",
            fontWeight: 500, letterSpacing: "-0.02em", margin: 0,
            color: LEIST_PALETTE.text, lineHeight: 1.1,
          }}>
            Realisiert für <em style={{ fontStyle: "normal", color: accent }}>echte Bauherren.</em>
          </h3>
        </div>
        <p style={{
          fontFamily: "Inter, sans-serif", fontSize: 14, lineHeight: 1.6,
          color: LEIST_PALETTE.soft, opacity: 0.75, margin: 0, maxWidth: 360,
        }}>
          Auszug aus aktuellen Projekten. Auf Wunsch stelle ich gerne Kontakt zu Referenzkunden her.
        </p>
      </div>

      <div style={{
        display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
        gap: 16,
      }} className="leist-ref-grid">
        {filtered.map((r, i) => (
          <article key={i} className="leist-ref-card" style={{
            background: LEIST_PALETTE.bgCard,
            border: `1px solid ${LEIST_PALETTE.border}`,
            borderRadius: 14, padding: 22,
            display: "flex", flexDirection: "column", gap: 14,
            position: "relative", overflow: "hidden", minHeight: 220,
          }}>
            <div style={{ position: "absolute", inset: 0, background: r.accentBg, pointerEvents: "none" }}/>
            <div style={{ position: "relative", zIndex: 1, display: "flex", flexDirection: "column", gap: 14, flex: 1 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div style={{
                  fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
                  letterSpacing: "0.14em", color: accent, textTransform: "uppercase",
                  padding: "4px 9px", border: `1px solid ${accent}55`, borderRadius: 3,
                }}>{r.type}</div>
                <div style={{
                  fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
                  color: LEIST_PALETTE.textDim, letterSpacing: "0.06em",
                }}>{r.year}</div>
              </div>
              <div style={{
                fontFamily: "Outfit, sans-serif", fontSize: 19, fontWeight: 500,
                letterSpacing: "-0.01em", color: LEIST_PALETTE.text, lineHeight: 1.25,
              }}>{r.title}</div>
              <div style={{
                fontFamily: "Inter, sans-serif", fontSize: 13,
                color: LEIST_PALETTE.soft, opacity: 0.8, lineHeight: 1.5,
              }}>{r.scope}</div>
              <div style={{
                fontFamily: "Inter, sans-serif", fontSize: 12.5,
                color: LEIST_PALETTE.textDim, lineHeight: 1.55,
                paddingTop: 12, borderTop: `1px dashed ${LEIST_PALETTE.border}`,
                marginTop: "auto",
              }}>{r.note}</div>
            </div>
          </article>
        ))}
      </div>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────
   FAQ — Fokus auf Hersteller-unabhängigkeit + Home Assistant
   ────────────────────────────────────────────────────────── */
const FAQS = [
  {
    q: "Warum Home Assistant als zentrale Visualisierung?",
    a: "Home Assistant ist Open-Source und herstellerunabhängig. Während proprietäre Systeme (z. B. Loxone-App, KNX-Visu eines bestimmten Herstellers, Apple Home) dich auf eine Welt festnageln, spricht Home Assistant über 3000+ Integrationen — KNX, Zigbee, Modbus, Sonos, Shelly, Hue, Tesla-Wallbox, Wechselrichter, Heizungssteuerung. Du bekommst eine einzige App für alles, ohne dich an einen Anbieter zu binden.",
  },
  {
    q: "Heißt herstellerunabhängig nicht so viel wie zusammen-gefrickelt?",
    a: "Im Gegenteil. Im Hintergrund arbeitet pro Gewerk die jeweils sauberste Technik: KNX für Licht/Beschattung/Heizung, Modbus für Wechselrichter, Zigbee/Shelly für Nachrüstung. Home Assistant ist die saubere Integrationsschicht darüber. Das Engineering passiert einmal richtig — danach ist es für dich nur eine App.",
  },
  {
    q: "Was passiert, wenn Home Assistant ausfällt?",
    a: "Genau hier ist der entscheidende Vorteil meiner Architektur: KNX, Modbus, DALI funktionieren ohne Home Assistant weiter. Lichtschalter schalten Licht. Thermostate regeln Heizung. Home Assistant ist nur die komfortable Visu-Schicht obendrauf — keine Single Point of Failure. Bei Loxone, Apple Home oder Cloud-only-Lösungen ist das anders.",
  },
  {
    q: "Bin ich abhängig von dir, wenn etwas geändert werden soll?",
    a: "Nein — und das ist mir wichtig. Home Assistant läuft auf deiner Hardware (Mini-PC oder NAS), die Konfiguration gehört dir, ist im Klartext lesbar und versionierbar. Du kannst kleine Änderungen selbst machen, oder ich übernehme das. Du bist nicht an meine Firma, eine Cloud oder einen Anbieter gebunden.",
  },
  {
    q: "Was ist mit Datenschutz und Cloud?",
    a: "Standardmäßig läuft alles lokal, ohne Cloud. Sprachsteuerung, Automationen, Visualisierung — alles auf deinem Gerät. Cloud-Anbindungen (z. B. Sprachassistent, externe APIs) aktivierst du nur, wo du sie wirklich willst. DSGVO-konform und ohne Telemetrie.",
  },
  {
    q: "Wie sieht das langfristig aus — bekomme ich noch Updates in 10 Jahren?",
    a: "Home Assistant erscheint monatlich, ist eines der größten Open-Source-Projekte weltweit (>15.000 Contributors). Der Code ist offen, die Community riesig. Selbst wenn das Projekt morgen verschwände, läuft deine Installation weiter und kann von jedem Entwickler übernommen werden. Bei Cloud-Lösungen kommerzieller Anbieter ist das ein echtes Risiko (siehe Insteon, Wink, Revolv).",
  },
  {
    q: "Loxone, KNX, Home Assistant — was denn nun?",
    a: "Das sind unterschiedliche Schichten, keine Konkurrenten. KNX ist die verkabelte Bus-Infrastruktur (Hardware-Standard). Loxone kann optional als Logik-/Steuerzentrale dazukommen. Home Assistant ist die Visu- und Integrations-Schicht darüber. Pro Projekt entscheide ich gewerkweise, was Sinn macht — und gebe dir am Ende eine konsolidierte App.",
  },
];

function LeistFaqItem({ faq, open, onToggle, accent }) {
  return (
    <div style={{
      borderBottom: `1px solid ${LEIST_PALETTE.border}`,
      padding: "20px 0",
    }}>
      <button
        onClick={onToggle}
        style={{
          all: "unset", cursor: "pointer", width: "100%",
          display: "grid", gridTemplateColumns: "1fr auto", gap: 24,
          alignItems: "center",
        }}>
        <h4 style={{
          fontFamily: "Outfit, sans-serif", fontSize: 18, fontWeight: 500,
          letterSpacing: "-0.005em", margin: 0,
          color: open ? accent : LEIST_PALETTE.text, lineHeight: 1.35,
          transition: "color 0.2s",
        }}>{faq.q}</h4>
        <div style={{
          width: 32, height: 32, borderRadius: "50%",
          border: `1px solid ${open ? accent : LEIST_PALETTE.border}`,
          display: "grid", placeItems: "center",
          color: open ? accent : LEIST_PALETTE.soft,
          fontSize: 16, transition: "all 0.2s",
          transform: open ? "rotate(45deg)" : "rotate(0)",
        }}>+</div>
      </button>
      <div style={{
        overflow: "hidden",
        maxHeight: open ? 600 : 0,
        opacity: open ? 1 : 0,
        transition: "max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s",
        marginTop: open ? 12 : 0,
      }}>
        <p style={{
          fontFamily: "Inter, sans-serif", fontSize: 14.5, lineHeight: 1.65,
          color: LEIST_PALETTE.soft, opacity: 0.88, margin: 0, paddingRight: 56,
        }}>{faq.a}</p>
      </div>
    </div>
  );
}

function LeistHaIntegrationCheck({ accent }) {
  const [q, setQ] = React.useState("");
  const [focus, setFocus] = React.useState(false);
  const SUGGESTIONS = [
    "Philips Hue", "IKEA Tradfri", "Sonos", "Bosch Smart Home",
    "Shelly", "Homematic IP", "Loxone", "KNX", "Fronius",
    "Tesla Wall Connector", "Nuki", "Tado", "Daikin",
    "Eufy", "Reolink", "Roborock", "Miele",
  ];
  const url = q.trim()
    ? `https://www.home-assistant.io/integrations/#search/${encodeURIComponent(q.trim())}`
    : "https://www.home-assistant.io/integrations/";
  const filtered = q.trim()
    ? SUGGESTIONS.filter(s => s.toLowerCase().includes(q.trim().toLowerCase())).slice(0, 5)
    : [];
  return (
    <div style={{
      marginTop: 28, padding: 22,
      border: `1px solid ${accent}33`,
      background: `linear-gradient(135deg, ${accent}0d, transparent)`,
      position: "relative",
    }}>
      <div style={{
        fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
        letterSpacing: "0.18em", color: accent, marginBottom: 8,
        textTransform: "uppercase",
      }}>
        ▶ Selbst checken
      </div>
      <div style={{
        fontFamily: "Outfit, sans-serif", fontSize: 18, fontWeight: 500,
        color: LEIST_PALETTE.text, marginBottom: 6, lineHeight: 1.25,
      }}>
        Wird dein Gerät unterstützt?
      </div>
      <div style={{
        fontFamily: "Inter, sans-serif", fontSize: 13, lineHeight: 1.55,
        color: LEIST_PALETTE.soft, opacity: 0.75, marginBottom: 14,
      }}>
        Über 3.000 Integrationen sind im Home-Assistant-Katalog gelistet. Tipp deine Marke ein und prüf direkt, ob's eine Integration gibt.
      </div>
      <div style={{ position: "relative" }}>
        <div style={{
          display: "flex", alignItems: "center", gap: 0,
          border: `1px solid ${focus ? accent : LEIST_PALETTE.line}`,
          background: LEIST_PALETTE.card,
          transition: "border-color 0.15s",
        }}>
          <div style={{ paddingLeft: 14, color: accent, fontSize: 14, opacity: 0.7 }}>⌕</div>
          <input
            type="text"
            value={q}
            onChange={e => setQ(e.target.value)}
            onFocus={() => setFocus(true)}
            onBlur={() => setTimeout(() => setFocus(false), 150)}
            placeholder="z. B. Sonos, Shelly, Hue, KNX …"
            style={{
              flex: 1, padding: "12px 12px", background: "transparent",
              border: "none", outline: "none",
              fontFamily: "Inter, sans-serif", fontSize: 14,
              color: LEIST_PALETTE.text,
            }}
          />
          <a
            href={url}
            target="_blank"
            rel="noopener noreferrer"
            style={{
              padding: "12px 16px", background: accent, color: "#0b1014",
              fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
              fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase",
              textDecoration: "none", whiteSpace: "nowrap",
            }}
          >
            Prüfen ↗
          </a>
        </div>
        {focus && filtered.length > 0 && (
          <div style={{
            position: "absolute", top: "100%", left: 0, right: 0, marginTop: 4,
            background: LEIST_PALETTE.card,
            border: `1px solid ${LEIST_PALETTE.line}`,
            zIndex: 5, maxHeight: 200, overflowY: "auto",
          }}>
            {filtered.map(s => (
              <div
                key={s}
                onMouseDown={() => { setQ(s); }}
                style={{
                  padding: "9px 14px", cursor: "pointer",
                  fontFamily: "Inter, sans-serif", fontSize: 13,
                  color: LEIST_PALETTE.text,
                  borderBottom: `1px solid ${LEIST_PALETTE.line}`,
                }}
                onMouseEnter={e => e.currentTarget.style.background = `${accent}10`}
                onMouseLeave={e => e.currentTarget.style.background = "transparent"}
              >
                {s}
              </div>
            ))}
          </div>
        )}
      </div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 12 }}>
        {["Hue", "Sonos", "Shelly", "KNX", "Fronius", "Nuki"].map(t => (
          <button
            key={t}
            onClick={() => setQ(t)}
            style={{
              padding: "5px 10px", fontSize: 11,
              fontFamily: "'JetBrains Mono', monospace",
              background: q === t ? `${accent}22` : "transparent",
              border: `1px solid ${q === t ? accent : LEIST_PALETTE.line}`,
              color: q === t ? accent : LEIST_PALETTE.soft,
              cursor: "pointer", letterSpacing: "0.05em",
            }}
          >{t}</button>
        ))}
      </div>
      <div style={{
        fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
        color: LEIST_PALETTE.soft, opacity: 0.5, marginTop: 12,
        letterSpacing: "0.05em",
      }}>
        Quelle: home-assistant.io/integrations · 3.000+ Geräte
      </div>
    </div>
  );
}

function LeistFaq() {
  const accent = LEIST_PALETTE.accent;
  const [open, setOpen] = React.useState(0);
  return (
    <div style={{ marginTop: 96, scrollMarginTop: 80 }} id="faq">
      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 64,
        alignItems: "start",
      }} className="leist-faq-grid">
        <div style={{ position: "sticky", top: 100 }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
            letterSpacing: "0.18em", color: accent, marginBottom: 10,
            textTransform: "uppercase",
          }}>
            <span style={{ display: "inline-block", width: 24, height: 1,
                           background: accent, verticalAlign: "middle",
                           marginRight: 10, opacity: 0.6 }}/>
            FAQ
          </div>
          <h3 style={{
            fontFamily: "Outfit, sans-serif", fontSize: "clamp(28px, 3.4vw, 40px)",
            fontWeight: 500, letterSpacing: "-0.02em", margin: "0 0 18px",
            color: LEIST_PALETTE.text, lineHeight: 1.1,
          }}>
            Warum <em style={{ fontStyle: "normal", color: accent }}>herstellerunabhängig</em> der einzig vernünftige Weg ist.
          </h3>
          <p style={{
            fontFamily: "Inter, sans-serif", fontSize: 15, lineHeight: 1.6,
            color: LEIST_PALETTE.soft, opacity: 0.8, margin: 0,
          }}>
            Smart Home darf keine Wette auf einen Hersteller sein. Mein Konzept setzt auf offene Standards (KNX, Modbus, Zigbee) und Home Assistant als zentrale Visu-Schicht — damit dein System auch in 10 Jahren noch deins ist.
          </p>

          <LeistHaIntegrationCheck accent={accent} />
        </div>
        <div>
          {FAQS.map((faq, i) => (
            <LeistFaqItem
              key={i}
              faq={faq}
              accent={accent}
              open={open === i}
              onToggle={() => setOpen(open === i ? -1 : i)}
            />
          ))}
        </div>
      </div>
    </div>
  );
}

window.LeistungenSection = LeistungenSection;
