// ╔══════════════════════════════════════════════════════════════╗
// ║  FAQ — Häufige Fragen zu Architektur, Loxone, HA & Gewerke   ║
// ║  Komplementär zur produktorientierten FAQ in leistungen.jsx. ║
// ╚══════════════════════════════════════════════════════════════╝

const FAQ_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)",
};

const FAQ_DATA = [
  {
    q: "Warum Home Assistant als obere Ebene?",
    a: "Weil viele Gebäude nicht aus einem einzigen System bestehen. Home Assistant verbindet PV, Wärmepumpe, Wallbox, Speicher, Sensoren, Netzwerk, Loxone, KNX und viele weitere Systeme zu einer gemeinsamen Oberfläche. Grundfunktionen können trotzdem lokal und robust über geeignete Basissysteme bleiben.",
  },
  {
    q: "Ist Home Assistant zuverlässig genug?",
    a: "Ja, wenn es sauber geplant, dokumentiert und gewartet wird. Wichtig ist die richtige Architektur: Grundfunktionen wie Licht oder Beschattung sollen je nach Projekt weiterhin lokal funktionieren. Home Assistant übernimmt vor allem Visualisierung, übergreifende Logik, Energieauswertung und Integration.",
  },
  {
    q: "Warum nicht nur Loxone oder nur KNX?",
    a: "Für manche Projekte reicht ein System völlig aus. In vielen Bestands- und Hybridprojekten sind aber bereits PV, Wärmepumpe, Wallbox, Hue, Shelly, UniFi, Viessmann, Fronius, Nuki oder andere Systeme vorhanden. Dann ist eine offene Integrationsschicht sinnvoll.",
  },
  {
    q: "Kann ich bestehende Geräte weiterverwenden?",
    a: "In vielen Fällen ja. Deshalb beginnt ein Projekt idealerweise mit einem Smart-Home-Check: Welche Geräte sind vorhanden, welche Schnittstellen gibt es, was ist sinnvoll integrierbar und was sollte ersetzt werden?",
  },
  {
    q: "Machst du auch Elektroinstallation?",
    a: "Smartmacherei übernimmt Planung, Integration, Visualisierung, Automationen, Netzwerk, Dokumentation und Systemkonfiguration. Elektroinstallationsarbeiten, Verteilerarbeiten, Schutzmaßnahmen und Abnahmen erfolgen über konzessionierte Elektrotechnik-Partnerbetriebe.",
  },
  {
    q: "Ist das auch für Gewerbe geeignet?",
    a: "Ja, besonders für Gewerbeobjekte, Büros, Ordinationen, Werkstätten und kleinere Hotels, die Energieflüsse, Raumklima, Zutritt, Tore, Türen oder technische Zustände sichtbar machen wollen. Datenschutz, Video, Zutritt und zertifizierte Alarmfunktionen werden sauber abgegrenzt und bei Bedarf mit Partnern umgesetzt.",
  },
];

function FaqItem({ item, open, onToggle, accent }) {
  return (
    <div style={{
      borderBottom: `1px solid ${FAQ_PALETTE.border}`,
      padding: "22px 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: 19, fontWeight: 500,
          letterSpacing: "-0.005em", margin: 0,
          color: open ? accent : FAQ_PALETTE.text, lineHeight: 1.35,
          transition: "color 0.2s",
        }}>{item.q}</h4>
        <div style={{
          width: 34, height: 34, borderRadius: "50%",
          border: `1px solid ${open ? accent : FAQ_PALETTE.border}`,
          display: "grid", placeItems: "center",
          color: open ? accent : FAQ_PALETTE.soft,
          fontSize: 16, transition: "all 0.2s",
          transform: open ? "rotate(45deg)" : "rotate(0)",
          flexShrink: 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 ? 14 : 0,
      }}>
        <p style={{
          fontFamily: "Inter, sans-serif", fontSize: 14.5, lineHeight: 1.65,
          color: FAQ_PALETTE.soft, opacity: 0.88, margin: 0, paddingRight: 56,
          maxWidth: "72ch",
        }}>{item.a}</p>
      </div>
    </div>
  );
}

function FaqSection({ pathKey }) {
  const accent = FAQ_PALETTE.accent;
  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq-architektur" style={{
      padding: "120px 40px 120px",
      borderTop: `1px solid ${FAQ_PALETTE.border}`,
      background: FAQ_PALETTE.bgDeep,
      scrollMarginTop: "80px",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64,
          alignItems: "start",
        }} className="faq-arch-grid">
          <div style={{ position: "sticky", top: 100 }}>
            <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" }}/>
              Häufige Fragen
            </div>
            <h2 style={{
              fontFamily: "Outfit, sans-serif", fontSize: "clamp(30px, 3.6vw, 44px)",
              fontWeight: 500, letterSpacing: "-0.02em", lineHeight: 1.1,
              margin: "0 0 18px", color: FAQ_PALETTE.text,
            }}>
              Wie das Ganze{" "}
              <em style={{ fontStyle: "normal", color: accent }}>zusammenpasst.</em>
            </h2>
            <p style={{
              fontFamily: "Inter, sans-serif", fontSize: 15, lineHeight: 1.6,
              color: FAQ_PALETTE.soft, opacity: 0.85, margin: 0, maxWidth: "44ch",
            }}>
              Antworten zu Architektur, System-Kombinationen und der Abgrenzung
              zu Elektroinstallationsarbeiten.
            </p>

            <div style={{
              marginTop: 32, padding: "20px 22px",
              border: `1px solid ${FAQ_PALETTE.border}`,
              background: "rgba(58,189,208,0.04)",
              borderRadius: 10,
            }}>
              <div style={{
                fontFamily: "JetBrains Mono, monospace", fontSize: 10,
                letterSpacing: "0.18em", color: accent,
                textTransform: "uppercase", marginBottom: 8,
              }}>
                Frage offen geblieben?
              </div>
              <div style={{
                fontFamily: "Outfit, sans-serif", fontSize: 16, fontWeight: 500,
                color: FAQ_PALETTE.text, marginBottom: 12,
              }}>
                Smart-Home-Check buchen
              </div>
              <a href="#kontakt" style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                padding: "10px 16px", borderRadius: 100,
                background: accent, color: FAQ_PALETTE.bgDeep,
                fontFamily: "Inter, sans-serif", fontSize: 13, fontWeight: 500,
                textDecoration: "none",
              }}>
                Anfrage stellen
                <span>→</span>
              </a>
            </div>
          </div>

          <div>
            {FAQ_DATA.map((item, i) => (
              <FaqItem
                key={i}
                item={item}
                accent={accent}
                open={open === i}
                onToggle={() => setOpen(open === i ? -1 : i)}
              />
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .faq-arch-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .faq-arch-grid > div:first-child { position: static !important; }
        }
      `}</style>
    </section>
  );
}

window.FaqSection = FaqSection;