// ╔══════════════════════════════════════════════════════════════╗
// ║  PAKETE — Kaufbare Einstiegspakete                           ║
// ║  Public offering — keine internen Businessplan-Inhalte.      ║
// ╚══════════════════════════════════════════════════════════════╝

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

// Pakete — id, title, price, useCase, bullets, cta
const PKT_LIST = [
  {
    id: "check",
    nr: "A",
    title: "Smart-Home-Check vor Ort",
    price: "ab 349 €",
    useCase: "Der Einstieg für Bestand, Sanierung und Häuser mit vielen Einzellösungen.",
    bullets: [
      "Vor-Ort-Analyse",
      "Geräte- und App-Bestandsaufnahme",
      "Grober Netzwerk-/WLAN-Check",
      "Schnittstellenprüfung für PV, Wärmepumpe, Speicher oder Wallbox",
      "Quick Wins und Prioritätenliste",
      "Grober Umsetzungsfahrplan",
    ],
    cta: "Check anfragen",
    tag: "Einstieg",
  },
  {
    id: "ha-starter",
    nr: "B",
    title: "Home-Assistant-Starter",
    price: "ab 1.250 €",
    useCase: "Eine zentrale Oberfläche für dein Haus – sauber eingerichtet, dokumentiert und erweiterbar.",
    bullets: [
      "Home Assistant auf Mini-PC, NAS oder Server",
      "Benutzer, App und Fernzugriff",
      "Backup-Konzept",
      "3–5 Integrationen",
      "Basis-Dashboard",
      "Übergabedokumentation",
    ],
    cta: "Starterpaket anfragen",
    tag: "Integration",
  },
  {
    id: "energie",
    nr: "C",
    title: "Energiepaket PV / Wärmepumpe / Wallbox",
    price: "ab 1.900 €",
    useCase: "Energieflüsse verstehen, Eigenverbrauch sichtbar machen und Verbraucher sinnvoll steuern.",
    bullets: [
      "PV, Netzbezug, Speicher und Verbrauch visualisieren",
      "Wärmepumpe und Wallbox einbinden (soweit Schnittstellen vorhanden)",
      "Eigenverbrauch und Autarkie sichtbar machen",
      "Einfache Überschuss- und Zeitfensterlogik",
      "Energie-Dashboard",
      "Optional Modbus, MQTT, evcc oder Hersteller-API je nach System",
    ],
    cta: "Energiepaket anfragen",
    tag: "Energie",
    badge: "Empfohlen für PV-Haushalte",
  },
  {
    id: "loxone",
    nr: "D",
    title: "Loxone Planung & Integration",
    price: "ab 2.900 €",
    useCase: "Robuste lokale Automatisierung für Neubau, Sanierung und strukturierte Smart-Home-Projekte.",
    bullets: [
      "Loxone-Konzept",
      "Logik und Config",
      "Visualisierung",
      "Szenen für Licht, Beschattung und Heizung",
      "Schnittstellen zu PV, Wärmepumpe, Home Assistant oder Netzwerk",
      "Inbetriebnahmebegleitung mit Elektropartner",
    ],
    cta: "Loxone-Projekt besprechen",
    tag: "Automation",
  },
  {
    id: "neubau",
    nr: "E",
    title: "Neubau Smart-Home-Konzept",
    price: "ab 1.500 €",
    useCase: "Vor der Elektroplanung klären, was wirklich vorbereitet werden soll.",
    bullets: [
      "Smart-Home-Lastenheft",
      "Systementscheidung: KNX, Loxone, Home Assistant oder Hybrid",
      "Taster-, Sensor-, Netzwerk- und Verteilerkonzept",
      "Schnittstellenplan für den Elektriker",
      "Vorbereitung für spätere Erweiterungen",
      "Abstimmung von Komfort, Energie und Budget",
    ],
    cta: "Neubau-Konzept anfragen",
    tag: "Planung",
  },
  {
    id: "gewerbe",
    nr: "F",
    title: "Gewerbe-Starter: Energie & Technik",
    price: "ab 2.900 €",
    useCase: "Für Werkstatt, Praxis, Schauraum oder kleines Betriebsgebäude: Verbrauch, Zustände und Störungen sauber im Blick.",
    bullets: [
      "Strom-, PV- und Hauptverbrauch sichtbar machen",
      "Technikstatus für Tore, Türen, Kühlung oder Serverraum",
      "Schwellwerte, Push-Meldungen und Eskalationslogik",
      "Dashboard für Büro, Tablet oder Leitstand",
      "Schnittstellencheck für Modbus, MQTT, API und Netzwerk",
      "Dokumentierte Übergabe für Betrieb und Elektriker",
    ],
    cta: "Gewerbe-Starter anfragen",
    tag: "Gewerbe",
  },
  {
    id: "buero",
    nr: "G",
    title: "Büro-Paket: Komfort & Präsenz",
    price: "ab 4.800 €",
    useCase: "Für Büros, Ordinationen und Kanzleien, die Klima, Licht, Beschattung und Zutritt effizient betreiben wollen.",
    bullets: [
      "Präsenzabhängiges Licht und Szenen",
      "CO₂-, Temperatur- und Luftqualitätswerte",
      "Beschattung nach Sonne, Uhrzeit und Raumbelegung",
      "Zutritts- und Türstatus für Teambereiche",
      "Energie- und Raumklima-Dashboard",
      "Wochenkalender, Feiertage und Sonderzeiten",
    ],
    cta: "Büro-Paket anfragen",
    tag: "Büro",
  },
  {
    id: "hotel",
    nr: "H",
    title: "Hotel-Paket: Zimmer & Betrieb",
    price: "ab 6.500 €",
    useCase: "Für kleine Hotels, Pensionen und Apartmenthäuser: Gäste-Komfort, Energie und Technikstatus ohne Insellösungen.",
    bullets: [
      "Zimmerstatus: belegt, frei, Reinigung, Störung",
      "Heizung/Kühlung nach Belegung und Fensterstatus",
      "Zutrittsschnittstellen für Codes, Karten oder App-Systeme",
      "Flur-, Allgemeinflächen- und Außenlicht-Logik",
      "Technik- und Energie-Dashboard für Betreiber",
      "Etappenplan für laufenden Betrieb ohne große Stillstände",
    ],
    cta: "Hotel-Paket anfragen",
    tag: "Hotel",
  },
  {
    id: "wartung",
    nr: "I",
    title: "Wartung & Fernsupport",
    price: "ab 49 €/Monat",
    useCase: "Damit das System langfristig wartbar, dokumentiert und updatefähig bleibt.",
    bullets: [
      "Backup-Check",
      "Update-Begleitung nach Freigabe",
      "Kleine Änderungen",
      "Health-Check",
      "Remote-Support",
      "Dokumentationspflege",
    ],
    cta: "Wartung anfragen",
    tag: "Service",
  },
];

// Pfad-spezifische Hervorhebung (IDs)
const PKT_HIGHLIGHTS = {
  altbau:  ["check", "ha-starter", "energie"],
  neubau:  ["neubau", "loxone", "energie"],
  gewerbe: ["gewerbe", "buero", "hotel", "wartung"],
};

function PaketCard({ pkt, accent, highlighted }) {
  const buildSubject = () => {
    return encodeURIComponent(`Paket-Anfrage: ${pkt.title}`);
  };
  const buildBody = () => {
    return encodeURIComponent(
      `Hallo Thomas,\n\nich interessiere mich für das Paket "${pkt.title}" (${pkt.price}).\n\n` +
      `Kurz zur Ausgangssituation:\n\n\n` +
      `Bitte um Rückmeldung — danke!`
    );
  };
  const handleCta = (e) => {
    // Vorab: Subject in localStorage für ContactForm prefilling +
    // Event feuern, damit das bereits gemountete ContactForm prefillen kann.
    try {
      window.localStorage.setItem("sm-paket-subject", `Paket-Anfrage: ${pkt.title}`);
      window.dispatchEvent(new CustomEvent("sm-paket-cta", { detail: { id: pkt.id, title: pkt.title } }));
    } catch (err) { /* private mode */ }
  };

  return (
    <article className={`pkt-card ${highlighted ? "pkt-card-hi" : ""}`} style={{
      position: "relative",
      background: PKT_PALETTE.bgCard,
      border: `1px solid ${highlighted ? PKT_PALETTE.borderHi : PKT_PALETTE.border}`,
      borderRadius: 16,
      padding: "28px 26px 24px",
      display: "flex", flexDirection: "column", gap: 14,
      transition: "all 0.25s ease",
      minHeight: 460,
      boxShadow: highlighted ? `0 0 40px rgba(58,189,208,0.08)` : "none",
    }}>
      {/* Badge */}
      {pkt.badge && (
        <div style={{
          position: "absolute", top: -10, right: 18,
          padding: "5px 12px",
          background: PKT_PALETTE.accent, color: PKT_PALETTE.bgDeep,
          fontFamily: "JetBrains Mono, monospace", fontSize: 10,
          letterSpacing: "0.1em", textTransform: "uppercase", fontWeight: 600,
          borderRadius: 100,
        }}>{pkt.badge}</div>
      )}

      {/* Header: nr · tag */}
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        fontFamily: "JetBrains Mono, monospace", fontSize: 11,
        letterSpacing: "0.12em", color: PKT_PALETTE.textDim,
      }}>
        <span style={{ color: accent }}>{pkt.nr}</span>
        <span style={{ textTransform: "uppercase" }}>{pkt.tag}</span>
      </div>

      {/* Title */}
      <h3 style={{
        fontFamily: "Outfit, sans-serif", fontSize: 22, fontWeight: 500,
        letterSpacing: "-0.01em", margin: "4px 0 0",
        color: PKT_PALETTE.text, lineHeight: 1.2,
      }}>{pkt.title}</h3>

      {/* Price */}
      <div style={{
        fontFamily: "Outfit, sans-serif", fontSize: 26, fontWeight: 400,
        color: accent, letterSpacing: "-0.01em",
      }}>{pkt.price}</div>

      {/* Use case */}
      <p style={{
        fontFamily: "Inter, sans-serif", fontSize: 13.5, lineHeight: 1.55,
        color: PKT_PALETTE.soft, opacity: 0.85, margin: 0,
      }}>{pkt.useCase}</p>

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

      {/* CTA */}
      <a href="#kontakt" onClick={handleCta} style={{
        marginTop: 14,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        gap: 10, padding: "12px 20px", borderRadius: 100,
        background: highlighted ? PKT_PALETTE.accent : "transparent",
        border: `1px solid ${highlighted ? PKT_PALETTE.accent : PKT_PALETTE.borderHi}`,
        color: highlighted ? PKT_PALETTE.bgDeep : PKT_PALETTE.text,
        fontFamily: "Inter, sans-serif", fontSize: 13.5, fontWeight: 500,
        textDecoration: "none", transition: "all 0.2s",
      }}>
        {pkt.cta}
        <span>→</span>
      </a>
    </article>
  );
}

function PaketeSection({ pathKey }) {
  const accent = PKT_PALETTE.accent;
  const highlights = PKT_HIGHLIGHTS[pathKey] || [];

  // Pakete sortieren: hervorgehobene zuerst
  const sortedPakete = [...PKT_LIST].sort((a, b) => {
    const aHi = highlights.includes(a.id) ? 0 : 1;
    const bHi = highlights.includes(b.id) ? 0 : 1;
    return aHi - bHi;
  });

  const pathLabel = {
    altbau: "Bestand & Sanierung",
    neubau: "Neubau",
    gewerbe: "Gewerbe · Büro · Hotel",
  }[pathKey] || "Alle Pakete";

  const copy = pathKey === "gewerbe"
    ? {
        headline: (
          <>
            Pakete für Gewerbe.{" "}
            <em style={{ fontStyle: "normal", color: accent }}>Büro und Hotel mitgedacht.</em>
          </>
        ),
        body: "Für Gewerbeobjekte stehen Betrieb, Energie, Komfort und Ausfallsicherheit im Vordergrund. Die ersten Karten zeigen typische Einstiege für Betriebsgebäude, Büroflächen und kleinere Hotels — danach folgen ergänzende Integrations- und Servicepakete.",
        hint: "Für Gewerbeobjekte besonders relevant:",
      }
    : {
        headline: (
          <>
            Klare Einstiege.{" "}
            <em style={{ fontStyle: "normal", color: accent }}>Vom Check bis zur Vollintegration.</em>
          </>
        ),
        body: "Die Pakete decken die häufigsten Ausgangssituationen ab. Welches Paket passt, entscheidet sich nach kurzer Abstimmung — oft startet ein Projekt mit einem Smart-Home-Check vor Ort und entwickelt sich dann gezielt weiter.",
        hint: "Für deinen Pfad besonders relevant:",
      };

  return (
    <section id="pakete" style={{
      padding: "120px 40px 120px",
      borderTop: `1px solid ${PKT_PALETTE.border}`,
      background: `radial-gradient(ellipse at 80% 80%, rgba(58,189,208,0.04), transparent 55%), ${PKT_PALETTE.bgDeep}`,
      scrollMarginTop: "80px",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        {/* Header */}
        <div style={{
          display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 60,
          alignItems: "end", marginBottom: 56,
        }} className="pkt-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" }}/>
              Pakete · {pathLabel}
            </div>
            <h2 style={{
              fontFamily: "Outfit, sans-serif", fontSize: "clamp(36px, 4.5vw, 60px)",
              fontWeight: 500, letterSpacing: "-0.025em", lineHeight: 1.05,
              margin: 0, color: PKT_PALETTE.text,
            }}>
              {copy.headline}
            </h2>
          </div>
          <p style={{
            fontFamily: "Inter, sans-serif", fontSize: 16.5, lineHeight: 1.6,
            color: PKT_PALETTE.soft, opacity: 0.85, margin: 0, paddingBottom: 8,
          }}>
            {copy.body}
          </p>
        </div>

        {/* Path hint */}
        {highlights.length > 0 && (
          <div style={{
            marginBottom: 32,
            display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap",
            fontFamily: "JetBrains Mono, monospace", fontSize: 11,
            letterSpacing: "0.12em", color: PKT_PALETTE.textDim,
            textTransform: "uppercase",
          }}>
            <span>{copy.hint}</span>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              {highlights.map((id) => {
                const p = PKT_LIST.find(x => x.id === id);
                return p ? (
                  <span key={id} style={{
                    padding: "4px 10px", border: `1px solid ${PKT_PALETTE.borderHi}`,
                    color: accent, borderRadius: 4, fontSize: 10,
                  }}>{p.title}</span>
                ) : null;
              })}
            </div>
          </div>
        )}

        {/* Grid */}
        <div className="pkt-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
          gap: 16, marginBottom: 32,
        }}>
          {sortedPakete.map(p => (
            <PaketCard key={p.id} pkt={p} accent={accent}
                       highlighted={highlights.includes(p.id)} />
          ))}
        </div>

        {/* Hinweis */}
        <div style={{
          padding: "22px 26px",
          border: `1px solid ${PKT_PALETTE.border}`,
          borderLeft: `3px solid ${accent}`,
          background: "rgba(58,189,208,0.04)",
          borderRadius: 8,
          fontFamily: "Inter, sans-serif", fontSize: 13.5, lineHeight: 1.6,
          color: PKT_PALETTE.soft, opacity: 0.88,
        }}>
          <strong style={{ color: PKT_PALETTE.text, fontWeight: 600, display: "block",
                            marginBottom: 6, fontFamily: "Outfit, sans-serif", fontSize: 15 }}>
            Hinweis zu Preisen und Leistungsabgrenzung
          </strong>
          Alle Preise sind erste Richtwerte. Das finale Angebot entsteht nach Bestandsaufnahme,
          Schnittstellenprüfung und Abstimmung der benötigten Hardware.
          Elektroinstallationsarbeiten erfolgen über konzessionierte Partnerbetriebe.
        </div>
      </div>

      <style>{`
        .pkt-card:hover { border-color: ${PKT_PALETTE.borderHi};
                          transform: translateY(-3px);
                          box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
        .pkt-card-hi { background: linear-gradient(135deg, ${PKT_PALETTE.bgCard}, rgba(58,189,208,0.06)); }
        @media (max-width: 800px) {
          .pkt-header { grid-template-columns: 1fr !important; gap: 24px !important; }
        }
      `}</style>
    </section>
  );
}

window.PaketeSection = PaketeSection;