// Bausteine — section 06, modular add-ons. Individual expanding cards in a grid.
function AddOnsPreview() {
  const { lang } = React.useContext(window.LangContext);
  const { isMobile, isTablet } = window.useBreakpoint();
  const [refH2, visH2] = window.useReveal();
  const [refGrid, visGrid] = window.useReveal({ threshold: 0.06 });
  const [expanded, setExpanded] = React.useState(new Set());

  const toggle = (i) => setExpanded(prev => {
    const next = new Set(prev);
    next.has(i) ? next.delete(i) : next.add(i);
    return next;
  });

  const de = {
    eyebrow: "06 · Ergänzende Bausteine",
    h2line1: "Ergänzende",
    h2line2: "Bausteine.",
    intro: "Ergänzend zu den drei Leistungen — einzelne Themen als Workshop, Einzelmodul oder begleitende Unterstützung.",
    items: [
      { title: "Fachbereichs-Workshops",          body: "Auf die tatsächlichen Aufgaben, Rollen und Bedürfnisse eines bestimmten Teams zugeschnitten — mit Ergebnissen, die direkt umsetzbar sind." },
      { title: "Governance & Qualitätssicherung", body: "Aufbau kontinuierlicher Prüf-, Freigabe- und Verantwortungsstrukturen, damit KI-Systeme dauerhaft kontrolliert und verbessert werden." },
      { title: "Workflow- & Prozessdesign",        body: "Entwicklung konkreter KI-gestützter Abläufe mit klaren Übergaben, Rollen, Prüfpunkten und Verantwortlichkeiten." },
      { title: "System- & Schnittstellenlogik",    body: "Strukturierung von Datenflüssen, eingesetzten Tools, Schnittstellen und technischen Anforderungen, damit Umsetzung planbar wird." },
      { title: "Enablement & Übergabe",            body: "Befähigung der beteiligten Teams, neue KI-Workflows sicher zu nutzen, Feedback zu geben und Verantwortung im laufenden Betrieb zu übernehmen." },
    ],
  };

  const en = {
    eyebrow: "06 · Modular Add-ons",
    h2line1: "Modular",
    h2line2: "Add-ons.",
    intro: "Supplementary to the three services — individual topics as a workshop, standalone module, or ongoing support.",
    items: [
      { title: "Department Workshops",           body: "Built around the actual tasks, roles, and needs of a specific team — with outcomes that translate directly into practice." },
      { title: "Governance & Quality Assurance", body: "Building continuous review, approval, and accountability structures so AI systems are controlled and improved over time." },
      { title: "Workflow & Process Design",       body: "Developing concrete AI-supported workflows with clear handoffs, roles, checkpoints, and responsibilities." },
      { title: "System & Interface Logic",        body: "Structuring data flows, the tools in use, interfaces, and technical requirements so implementation becomes plannable." },
      { title: "Enablement & Handover",           body: "Equipping teams to use new AI workflows confidently, provide feedback, and own operations going forward." },
    ],
  };

  const t = lang === 'de' ? de : en;

  return (
    <section id="addons" style={{
      position: "relative",
      padding: isMobile ? "80px 24px 80px" : isTablet ? "80px 40px 80px 40px" : "200px 80px 200px 120px",
      borderBottom: "1px solid #2d2d38",
      background: "#0f0f12",
      overflow: "hidden",
    }}>
      <div style={{
        position: "absolute",
        top: isMobile ? 0 : 80,
        right: isMobile ? 16 : 80,
        fontFamily: "Montserrat", fontWeight: 200,
        fontSize: (isMobile || isTablet) ? 80 : 200, lineHeight: 1, color: "#1a1a22",
        letterSpacing: "-0.04em", pointerEvents: "none",
      }}>06</div>

      <div style={{ position: "relative", maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: (isMobile || isTablet) ? "1fr" : "1fr 1.4fr", gap: (isMobile || isTablet) ? 48 : 96, alignItems: "start" }}>

          {/* Left: eyebrow + heading + intro */}
          <div>
            <div style={{ display: "flex", gap: 24, alignItems: "center", marginBottom: 64 }}>
              <div style={{ width: 40, height: 1, background: "#4a4a5a" }}></div>
              <span className="label label--wide" style={{ color: "#a8a8b8" }}>{t.eyebrow}</span>
            </div>

            <h2 ref={refH2} className={!isMobile ? `reveal${visH2 ? " visible" : ""}` : ""} style={{
              fontFamily: "Montserrat", fontWeight: 200,
              fontSize: "clamp(36px, 4.8vw, 72px)",
              lineHeight: 1.04, letterSpacing: "-0.025em",
              color: "#ffffff", margin: "0 0 40px",
            }}>
              {t.h2line1}<br/>
              <span style={{ color: "#8e8ea8" }}>{t.h2line2}</span>
            </h2>

            <p style={{
              fontFamily: "Montserrat", fontWeight: 300, fontSize: 15,
              lineHeight: 1.7, color: "#a8a8b8", margin: 0, maxWidth: 340,
            }}>{t.intro}</p>
          </div>

          {/* Right: 2-column card grid */}
          <div ref={refGrid} className={!isMobile ? `reveal-stagger${visGrid ? " visible" : ""}` : ""} style={{
            display: "grid",
            gridTemplateColumns: (isMobile || isTablet) ? "1fr" : "1fr 1fr",
            alignItems: "start",
            gap: 10,
            margin: (isMobile || isTablet) ? 0 : "108px 0 0",
          }}>
            {t.items.map((item, i) => {
              const isOpen = expanded.has(i);
              return (
                <div key={i} className={!isMobile ? "reveal-item" : ""} onClick={() => toggle(i)} style={{
                  background: "rgba(255,255,255,0.05)",
                  border: "1px solid #2d2d38",
                  borderRadius: 10,
                  cursor: "pointer",
                  overflow: "hidden",
                }}>
                  {/* Card title row — fixed minHeight so all cards collapse to the same size */}
                  <div style={{
                    padding: "0 22px",
                    minHeight: 76,
                    display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12,
                  }}>
                    <span style={{
                      fontFamily: "Montserrat", fontWeight: 300,
                      fontSize: 17, lineHeight: 1.3, color: "#e4e4ec",
                      letterSpacing: "-0.01em",
                    }}>{item.title}</span>
                    <span style={{
                      color: "#0db8cc", fontSize: 18, lineHeight: 1, flexShrink: 0,
                      display: "inline-block",
                      transform: isOpen ? "rotate(45deg)" : "none",
                      transition: "transform 0.3s ease",
                      userSelect: "none",
                      marginTop: 1,
                    }}>+</span>
                  </div>

                  {/* Separator + body — expands on click */}
                  <div style={{
                    overflow: "hidden",
                    maxHeight: isOpen ? "160px" : "0px",
                    transition: "max-height 0.35s ease",
                  }}>
                    <div style={{ height: 1, background: "#2d2d38" }}></div>
                    <p style={{
                      fontFamily: "Montserrat", fontWeight: 300,
                      fontSize: 13.5, lineHeight: 1.65, color: "#a8a8b8",
                      margin: 0, padding: "16px 22px 20px",
                      background: "rgba(0,0,0,0.18)",
                    }}>{item.body}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

window.AddOnsPreview = AddOnsPreview;