// ╔══════════════════════════════════════════════════════════════╗
// ║  ARCHITECTURE — Home Assistant als obere Ebene + Subsysteme  ║
// ║  Erklärt warum eine Hybrid-Architektur sinnvoll ist.         ║
// ╚══════════════════════════════════════════════════════════════╝

const ARCH_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)",
  green:  "#5DD3B0",
};

const ARCH_LAYERS = [
  {
    key: "loxone", name: "Loxone",
    desc: "Lokale Automatisierungs- und Steuerungsebene",
    tags: ["Licht", "Beschattung", "Heizung", "Logik"],
  },
  {
    key: "knx", name: "KNX",
    desc: "Etablierter Gebäudebus für Neubau & Sanierung",
    tags: ["Bus", "Aktoren", "Taster", "ISO 14543"],
  },
  {
    key: "matter", name: "Matter / Thread",
    desc: "Herstellerübergreifender Smart-Home-Standard",
    tags: ["Standard", "Lokal", "Multi-Vendor"],
  },
  {
    key: "zigbee", name: "Zigbee / WLAN",
    desc: "Funkstandards für Nachrüstung & Gerätevielfalt",
    tags: ["Funk", "Sensoren", "Aktoren"],
  },
  {
    key: "modbus", name: "Modbus / MQTT / APIs",
    desc: "Schnittstellen zu PV, Wärmepumpe, Speicher, Wallbox, Zählern",
    tags: ["Energie", "PV", "WP", "EVCC"],
  },
];

const ARCH_GLOBAL_TAGS = [
  "Licht", "Beschattung", "Heizung", "PV", "Wärmepumpe",
  "Wallbox", "Speicher", "Sensoren", "Netzwerk", "Zutritt", "Verbraucher",
];

const ARCH_BENEFITS = [
  {
    nr: "01",
    title: "Weniger App-Chaos",
    body: "PV, Wärmepumpe, Wallbox, Speicher, Licht, Beschattung und Sensoren werden in einer gemeinsamen Oberfläche verständlich sichtbar.",
  },
  {
    nr: "02",
    title: "Kein unnötiger Hersteller-Lock-in",
    body: "Bestehende Systeme können weiterverwendet und neue Komponenten herstellerübergreifend ergänzt werden.",
  },
  {
    nr: "03",
    title: "Bestand und Neubau kombinierbar",
    body: "Kabelgebundene Systeme, Funklösungen und bestehende Geräte können je nach Gebäude sinnvoll kombiniert werden.",
  },
  {
    nr: "04",
    title: "Energie im Mittelpunkt",
    body: "PV, Netzbezug, Speicher, Wärmepumpe, Wallbox und Verbraucher werden gemeinsam betrachtet statt isoliert in einzelnen Apps.",
  },
  {
    nr: "05",
    title: "Lokal und robust",
    body: "Grundfunktionen bleiben je nach Projekt lokal beherrschbar. Home Assistant ergänzt um Visualisierung, Logik, Auswertung und Schnittstellen.",
  },
  {
    nr: "06",
    title: "Zukunftsfähiger",
    body: "Neue Standards und Geräte lassen sich leichter integrieren, ohne das gesamte System neu aufzubauen.",
  },
];

// Pfad-spezifische Beispiele (subtil) — die Section selbst bleibt gleich
const ARCH_PATH_HINT = {
  altbau:  "Im Bestand spielen Funkstandards (Zigbee, Matter) und Schnittstellen zu PV/Wärmepumpe oft die größte Rolle.",
  neubau:  "Im Neubau liegt der Fokus typischerweise auf KNX oder Loxone als robuster Basis – Home Assistant ergänzt Visualisierung und Energie.",
  gewerbe: "Im Gewerbe stehen Betriebsdaten, Energie, Raumklima, Zutritt und Technikstatus im Vordergrund — vom Büro bis zum kleinen Hotel.",
};

function ArchitectureSection({ pathKey }) {
  const accent = ARCH_PALETTE.accent;
  const hint = ARCH_PATH_HINT[pathKey] || ARCH_PATH_HINT.altbau;

  return (
    <section id="architektur" style={{
      padding: "120px 40px 120px",
      borderTop: `1px solid ${ARCH_PALETTE.border}`,
      background: `radial-gradient(ellipse at 20% 30%, rgba(58,189,208,0.05), transparent 55%), ${ARCH_PALETTE.bgDeep}`,
      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: 56,
        }} className="arch-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" }}/>
              Architektur
            </div>
            <h2 style={{
              fontFamily: "Outfit, sans-serif", fontSize: "clamp(36px, 4.5vw, 60px)",
              fontWeight: 500, letterSpacing: "-0.025em", lineHeight: 1.05,
              margin: 0, color: ARCH_PALETTE.text,
            }}>
              Eine Oberfläche.{" "}
              <em style={{ fontStyle: "normal", color: accent }}>Viele starke Systeme darunter.</em>
            </h2>
          </div>
          <div>
            <p style={{
              fontFamily: "Inter, sans-serif", fontSize: 17, lineHeight: 1.55,
              color: ARCH_PALETTE.soft, opacity: 0.85, margin: "0 0 14px",
            }}>
              Die beste Smart-Home-Lösung ist selten ein einzelnes System für alles.
              Langlebig wird sie, wenn robuste Basistechnik und offene Integration sauber zusammenspielen.
            </p>
            <p style={{
              fontFamily: "Inter, sans-serif", fontSize: 14, lineHeight: 1.6,
              color: ARCH_PALETTE.textDim, margin: 0,
            }}>
              {hint}
            </p>
          </div>
        </div>

        {/* Intro paragraph */}
        <div style={{
          maxWidth: 860, marginBottom: 48,
          fontFamily: "Inter, sans-serif", fontSize: 16.5, lineHeight: 1.65,
          color: ARCH_PALETTE.soft, opacity: 0.88,
        }}>
          Smartmacherei setzt <strong style={{ color: ARCH_PALETTE.text, fontWeight: 600 }}>Home Assistant</strong> als
          obere Ebene für Visualisierung, Automationen, Energieflüsse, Dashboards und herstellerübergreifende Logik ein.
          Darunter arbeiten bewährte Systeme wie <strong style={{ color: ARCH_PALETTE.text, fontWeight: 600 }}>Loxone, KNX, Matter/Thread, Zigbee, Modbus, MQTT</strong>{" "}
          oder direkte Hersteller-APIs dort, wo sie ihre Stärke haben.
        </div>

        {/* Architektur-Formel */}
        <div className="arch-formula" style={{
          marginBottom: 56,
          padding: "32px 36px",
          border: `1px solid ${ARCH_PALETTE.border}`,
          background: `linear-gradient(135deg, rgba(58,189,208,0.06), transparent 70%)`,
          borderRadius: 14,
          display: "flex", justifyContent: "space-between", alignItems: "center",
          gap: 32, flexWrap: "wrap",
        }}>
          <div style={{
            fontFamily: "Outfit, sans-serif", fontSize: "clamp(20px, 2.4vw, 28px)",
            fontWeight: 400, letterSpacing: "-0.01em", color: ARCH_PALETTE.text,
            lineHeight: 1.3,
          }}>
            <em style={{ fontStyle: "normal", color: accent }}>Robuste Basistechnik</em> unten.{" "}
            <em style={{ fontStyle: "normal", color: accent }}>Offene Integration</em> oben.
          </div>
          <div style={{
            fontFamily: "JetBrains Mono, monospace", fontSize: 11,
            letterSpacing: "0.16em", color: ARCH_PALETTE.textDim,
            textTransform: "uppercase",
          }}>
            Architekturprinzip
          </div>
        </div>

        {/* Stack-Visualisierung */}
        <div className="arch-stack" style={{
          display: "flex", flexDirection: "column", gap: 14, marginBottom: 64,
        }}>
          {/* Top: Home Assistant */}
          <div className="arch-top-card" style={{
            position: "relative",
            padding: "32px 36px",
            background: `linear-gradient(135deg, ${ARCH_PALETTE.bgCard}, rgba(58,189,208,0.10))`,
            border: `1px solid ${ARCH_PALETTE.borderHi}`,
            borderRadius: 16,
            boxShadow: `0 0 60px rgba(58,189,208,0.08)`,
            overflow: "hidden",
          }}>
            <div style={{
              position: "absolute", inset: 0, opacity: 0.4,
              background: `radial-gradient(ellipse at 80% 50%, rgba(58,189,208,0.25), transparent 60%)`,
              pointerEvents: "none",
            }}/>
            <div style={{ position: "relative", display: "grid",
                          gridTemplateColumns: "auto 1fr auto", gap: 24, alignItems: "center" }}
                 className="arch-top-grid">
              <div style={{
                width: 56, height: 56, borderRadius: 14,
                background: ARCH_PALETTE.accent, color: ARCH_PALETTE.bgDeep,
                display: "grid", placeItems: "center",
                fontFamily: "Outfit, sans-serif", fontSize: 28, fontWeight: 600,
              }}>HA</div>
              <div>
                <div style={{
                  fontFamily: "JetBrains Mono, monospace", fontSize: 10,
                  letterSpacing: "0.18em", color: accent, textTransform: "uppercase",
                  marginBottom: 6,
                }}>
                  Obere Ebene · Integration & Visualisierung
                </div>
                <div style={{
                  fontFamily: "Outfit, sans-serif", fontSize: 26, fontWeight: 500,
                  letterSpacing: "-0.01em", color: ARCH_PALETTE.text, lineHeight: 1.15,
                  marginBottom: 6,
                }}>
                  Home Assistant
                </div>
                <div style={{
                  fontFamily: "Inter, sans-serif", fontSize: 14,
                  color: ARCH_PALETTE.soft, opacity: 0.85, lineHeight: 1.5,
                }}>
                  Dashboard · Logik · Energie · Visualisierung · Auswertung · Fernzugriff
                </div>
              </div>
            </div>
          </div>

          {/* Verbindungslinie */}
          <div style={{
            position: "relative", height: 24,
            display: "flex", justifyContent: "center",
          }} aria-hidden="true">
            <div style={{
              width: 1, height: "100%",
              background: `linear-gradient(180deg, ${ARCH_PALETTE.borderHi}, transparent)`,
            }}/>
          </div>

          {/* Mitte: Subsystem-Karten */}
          <div className="arch-layer-grid" style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
            gap: 12,
          }}>
            {ARCH_LAYERS.map((l) => (
              <div key={l.key} className="arch-layer-card" style={{
                padding: "20px 18px",
                background: ARCH_PALETTE.bgCard,
                border: `1px solid ${ARCH_PALETTE.border}`,
                borderRadius: 12,
                display: "flex", flexDirection: "column", gap: 10,
                minHeight: 150,
                transition: "all 0.2s ease",
              }}>
                <div style={{
                  fontFamily: "Outfit, sans-serif", fontSize: 18, fontWeight: 500,
                  color: ARCH_PALETTE.text, letterSpacing: "-0.005em",
                }}>{l.name}</div>
                <div style={{
                  fontFamily: "Inter, sans-serif", fontSize: 12.5, lineHeight: 1.5,
                  color: ARCH_PALETTE.soft, opacity: 0.75, flex: 1,
                }}>{l.desc}</div>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 5, marginTop: 4 }}>
                  {l.tags.map((t) => (
                    <span key={t} style={{
                      fontFamily: "JetBrains Mono, monospace", fontSize: 9.5,
                      padding: "3px 7px", border: `1px solid ${ARCH_PALETTE.border}`,
                      color: ARCH_PALETTE.textDim, letterSpacing: "0.05em",
                      borderRadius: 3, textTransform: "uppercase",
                    }}>{t}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>

          {/* Bottom: globale Tags */}
          <div style={{
            marginTop: 10, padding: "20px 24px",
            border: `1px dashed ${ARCH_PALETTE.border}`, borderRadius: 12,
            background: "rgba(13,32,48,0.4)",
          }}>
            <div style={{
              fontFamily: "JetBrains Mono, monospace", fontSize: 10,
              letterSpacing: "0.18em", color: ARCH_PALETTE.textDim,
              textTransform: "uppercase", marginBottom: 12,
            }}>
              Gewerke & Datenpunkte, die zusammengeführt werden
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {ARCH_GLOBAL_TAGS.map((t) => (
                <span key={t} style={{
                  fontFamily: "Inter, sans-serif", fontSize: 13,
                  padding: "6px 12px",
                  background: "rgba(58,189,208,0.06)",
                  border: `1px solid ${ARCH_PALETTE.border}`,
                  color: ARCH_PALETTE.soft, borderRadius: 100,
                }}>{t}</span>
              ))}
            </div>
          </div>
        </div>

        {/* Benefits */}
        <div style={{
          marginBottom: 56,
          paddingBottom: 18, borderBottom: `1px solid ${ARCH_PALETTE.border}`,
        }}>
          <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 }}/>
            Was dieser Aufbau bringt
          </div>
          <h3 style={{
            fontFamily: "Outfit, sans-serif", fontSize: "clamp(26px, 3vw, 36px)",
            fontWeight: 500, letterSpacing: "-0.02em", margin: 0,
            color: ARCH_PALETTE.text, lineHeight: 1.15,
          }}>
            Sechs Gründe für die Hybrid-Architektur.
          </h3>
        </div>

        <div className="arch-benefits-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
          gap: 14, marginBottom: 56,
        }}>
          {ARCH_BENEFITS.map((b) => (
            <div key={b.nr} className="arch-benefit-card" style={{
              background: ARCH_PALETTE.bgCard,
              border: `1px solid ${ARCH_PALETTE.border}`,
              borderRadius: 14, padding: "24px 24px 22px",
              display: "flex", flexDirection: "column", gap: 10,
              transition: "all 0.2s ease",
            }}>
              <div style={{
                fontFamily: "JetBrains Mono, monospace", fontSize: 11,
                letterSpacing: "0.14em", color: accent,
              }}>{b.nr}</div>
              <div style={{
                fontFamily: "Outfit, sans-serif", fontSize: 18, fontWeight: 500,
                color: ARCH_PALETTE.text, letterSpacing: "-0.005em",
                lineHeight: 1.25,
              }}>{b.title}</div>
              <div style={{
                fontFamily: "Inter, sans-serif", fontSize: 13.5, lineHeight: 1.55,
                color: ARCH_PALETTE.soft, opacity: 0.8,
              }}>{b.body}</div>
            </div>
          ))}
        </div>

        {/* Hinweisbox: Abgrenzung Elektroarbeiten */}
        <div style={{
          padding: "22px 26px",
          border: `1px solid ${ARCH_PALETTE.border}`,
          borderLeft: `3px solid ${accent}`,
          background: "rgba(58,189,208,0.04)",
          borderRadius: 8,
          display: "grid", gridTemplateColumns: "auto 1fr", gap: 18,
          alignItems: "start",
        }}>
          <div style={{
            width: 32, height: 32, borderRadius: "50%",
            border: `1px solid ${ARCH_PALETTE.borderHi}`,
            display: "grid", placeItems: "center",
            color: accent, fontFamily: "JetBrains Mono, monospace",
            fontSize: 14, fontWeight: 600,
          }}>i</div>
          <div>
            <div style={{
              fontFamily: "Outfit, sans-serif", fontSize: 15, fontWeight: 500,
              color: ARCH_PALETTE.text, marginBottom: 6,
            }}>Abgrenzung Elektroarbeiten</div>
            <div style={{
              fontFamily: "Inter, sans-serif", fontSize: 13.5, lineHeight: 1.6,
              color: ARCH_PALETTE.soft, opacity: 0.82,
            }}>
              Home Assistant ist nicht als Ersatz für fachgerecht installierte Elektro-,
              Alarm- oder Brandmeldetechnik zu verstehen. Elektroinstallationen, Verteilerarbeiten,
              Schutzmaßnahmen und Abnahmen erfolgen über konzessionierte Partnerbetriebe.
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .arch-layer-card:hover { border-color: ${ARCH_PALETTE.borderHi};
                                  transform: translateY(-2px);
                                  box-shadow: 0 12px 28px rgba(0,0,0,0.3); }
        .arch-benefit-card:hover { border-color: ${ARCH_PALETTE.borderHi};
                                    transform: translateY(-2px);
                                    box-shadow: 0 12px 28px rgba(0,0,0,0.3); }
        @media (max-width: 900px) {
          .arch-header { grid-template-columns: 1fr !important; gap: 24px !important; }
          .arch-top-grid { grid-template-columns: auto 1fr !important; }
          .arch-formula { flex-direction: column; align-items: flex-start !important; }
        }
      `}</style>
    </section>
  );
}

window.ArchitectureSection = ArchitectureSection;