// CapabilitiesCards — three engagement cards. Official capabilities section.
function CapabilitiesCards() {
  const { lang } = React.useContext(window.LangContext);
  const { isMobile, isTablet } = window.useBreakpoint();
  const [refH2, visH2] = window.useReveal();
  const [refCards, visCards] = window.useReveal({ threshold: 0.06 });

  const en = {
    eyebrow: "04 · Services",
    h2: "Assess. Build. Run.",
    footer: "",
    items: [
      {
        n: "01", pill: "Foundational", title: "AI Potential Analysis",
        duration: "1 week",
        lede: "Where AI makes sense in your operations — and where it doesn't (yet).",
        body: "Prioritised by benefit, effort, and operational feasibility.",
        outcomes: ["Prioritised use case overview", "Effort & governance assessment", "Recommended next steps"],
      },
      {
        n: "02", pill: "Build", title: "System Design",
        duration: "2–4 weeks",
        lede: "Develop the blueprint, build the first pilot — structure, roles and system architecture that work.",
        body: "So that technology, governance, and existing workflows work together cleanly.",
        outcomes: ["System architecture & workflow overview", "Governance & responsibility structure", "Implementation plan for the first pilot"],
      },
      {
        n: "03", pill: "Ongoing", title: "Pilot to Production",
        duration: "Quarterly retainer",
        lede: "A pilot only becomes valuable when it turns into a reliable workflow within the organisation.",
        body: "With clear ownership, approvals, quality control, and defined processes for incidents.",
        outcomes: ["Operational plan for production AI use", "Quality & monitoring system", "Emergency and escalation plan"],
      },
    ],
  };

  const de = {
    eyebrow: "04 · Leistungen",
    h2: "Analyse. Aufbau. Betrieb.",
    footer: "",
    items: [
      {
        n: "01", pill: "Einstieg", title: "KI-Potenzialanalyse",
        duration: "1 Woche",
        lede: "Wo lässt sich KI im Betrieb sinnvoll einsetzen — und wo (noch) nicht.",
        body: "Priorisiert nach Nutzen, Aufwand und betrieblicher Umsetzbarkeit.",
        outcomes: ["Übersicht relevanter KI-Einsatzmöglichkeiten", "Aufwand- und Governance-Einschätzung", "Konkrete nächste Schritte"],
      },
      {
        n: "02", pill: "Aufbau", title: "Pilot-Systemdesign",
        duration: "2–4 Wochen",
        lede: "Blueprint entwickeln, ersten Piloten aufbauen — Struktur, Rollen und Systemarchitektur, die funktionieren.",
        body: "Damit Technologie, Governance und bestehende Abläufe von Anfang an zusammenpassen.",
        outcomes: ["Aufbau des Systems und der Workflows", "Zuständigkeiten und Entscheidungswege", "Umsetzungsplan für den ersten Piloten"],
      },
      {
        n: "03", pill: "Laufend", title: "Vom Pilot zur Produktion",
        duration: "Quartal-Retainer",
        lede: "Ein Pilot ist erst dann wertvoll, wenn daraus ein verlässlicher Ablauf im Unternehmen wird.",
        body: "Mit klaren Zuständigkeiten, Freigaben, Qualitätskontrolle und geregeltem Vorgehen bei Zwischenfällen.",
        outcomes: ["Betriebsplan für den produktiven KI-Einsatz", "Laufende Qualitätssicherung", "Notfall- und Eskalationsplan"],
      },
    ],
  };

  const t = lang === 'de' ? de : en;
  const [hoveredIdx, setHoveredIdx] = React.useState(null);
  const [expandedCards, setExpandedCards] = React.useState(new Set());
  const toggleCard = (i) => setExpandedCards(prev => {
    const next = new Set(prev);
    next.has(i) ? next.delete(i) : next.add(i);
    return next;
  });

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

      <div style={{ position: "relative", maxWidth: 1280, margin: "0 auto", zIndex: 1 }}>

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

        {/* Heading */}
        <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 72px",
        }}>{t.h2}</h2>

        {/* Three cards */}
        {(() => {
          const pillColors = ['#0db8cc', '#8b5cf6', '#f97316'];
          return (
        <div ref={refCards} className={!isMobile ? `reveal-stagger${visCards ? " visible" : ""}` : ""} style={{ display: "grid", gridTemplateColumns: (isMobile || isTablet) ? "1fr" : "1fr 1fr 1fr", gap: (isMobile || isTablet) ? 24 : 20, alignItems: "start" }}>
          {t.items.map((it, idx) => (
            <div key={it.n} className={!isMobile ? "reveal-item" : ""}
              onMouseEnter={() => !isMobile && setHoveredIdx(idx)}
              onMouseLeave={() => !isMobile && setHoveredIdx(null)}
              style={{
                background: "transparent",
                border: `1px solid ${hoveredIdx === idx ? pillColors[idx] + "55" : "#3a3a4a"}`,
                borderRadius: 14,
                display: "flex", flexDirection: "column",
                overflow: "hidden",
                minHeight: 460,
                boxShadow: hoveredIdx === idx ? `0 8px 40px ${pillColors[idx]}18` : "none",
                transform: hoveredIdx === idx ? "translateY(-4px)" : "none",
                transition: "border-color 300ms ease, box-shadow 300ms ease, transform 400ms cubic-bezier(0.22, 1, 0.36, 1)",
              }}>

              {/* Top zone */}
              <div style={{ background: "rgba(255,255,255,0.025)", padding: "32px 36px 28px" }}>
                {/* Number + pill */}
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 24 }}>
                  <div style={{
                    fontFamily: "Montserrat", fontWeight: 200,
                    fontSize: 72, lineHeight: 1, letterSpacing: "-0.04em",
                    color: "#3a3a4c",
                  }}>{it.n}</div>
                  <span style={{
                    fontFamily: "Montserrat", fontWeight: 400, fontSize: 9,
                    letterSpacing: "0.26em", textTransform: "uppercase",
                    color: pillColors[idx],
                    border: `1px solid ${pillColors[idx]}55`,
                    background: `${pillColors[idx]}14`,
                    borderRadius: 3, padding: "6px 10px",
                    alignSelf: "center",
                  }}>{it.pill}</span>
                </div>

                {/* Title */}
                <h3 style={{
                  fontFamily: "Montserrat", fontWeight: 300,
                  fontSize: "clamp(20px, 1.8vw, 26px)",
                  color: "#ffffff", margin: "0 0 10px",
                  letterSpacing: "-0.01em", lineHeight: 1.15,
                }}>{it.title}</h3>

                {/* Duration */}
                <div className="label label--wide" style={{ color: "#0db8cc", marginBottom: 0 }}>
                  {it.duration}
                </div>
              </div>

              {/* Separator */}
              <div style={{ height: 1, background: "#2d2d38" }}></div>

              {/* Bottom zone — outcomes always visible; description expands on toggle */}
              <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>

                {/* Toggle row */}
                <div onClick={() => toggleCard(idx)} style={{
                  padding: "14px 36px",
                  display: "flex", justifyContent: "space-between", alignItems: "center",
                  cursor: "pointer",
                  borderBottom: "1px solid #2d2d38",
                }}>
                  <span className="label label--wide" style={{ color: "#8080a0" }}>
                    {lang === 'de' ? 'Details' : 'Details'}
                  </span>
                  <span style={{
                    color: "#0db8cc", fontSize: 18, lineHeight: 1,
                    display: "inline-block",
                    transform: expandedCards.has(idx) ? "rotate(45deg)" : "none",
                    transition: "transform 0.3s ease",
                    userSelect: "none",
                  }}>+</span>
                </div>

                {/* Expandable lede + body */}
                <div style={{
                  overflow: "hidden",
                  maxHeight: expandedCards.has(idx) ? "320px" : "0px",
                  transition: "max-height 0.35s ease",
                }}>
                  <div style={{ padding: "20px 36px 24px" }}>
                    <p style={{
                      fontFamily: "Montserrat", fontWeight: 300,
                      fontSize: 15, lineHeight: 1.55, color: "#d4d4dc",
                      margin: "0 0 14px",
                    }}>{it.lede}</p>
                    <p style={{
                      fontFamily: "Montserrat", fontWeight: 300,
                      fontSize: 15, lineHeight: 1.75, color: "#8080a0",
                      margin: 0,
                    }}>{it.body}</p>
                  </div>
                  <div style={{ height: 1, background: "#2d2d38", margin: "0 36px" }}></div>
                </div>

                {/* Outcomes — always visible */}
                <div style={{ padding: "20px 36px 36px", flex: 1 }}>
                  <div className="label label--wide" style={{ color: "#0db8cc", marginBottom: 16 }}>
                    {lang === 'de' ? 'Ergebnis' : 'Includes'}
                  </div>
                  <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                    {it.outcomes.map((o, i) => (
                      <li key={i} style={{
                        fontFamily: "Montserrat", fontWeight: 300,
                        fontSize: 15, color: "#c4c4d0", lineHeight: 1.4,
                        display: "flex", gap: 12, alignItems: "center",
                      }}>
                        <span style={{ width: 5, height: 5, minWidth: 5, minHeight: 5, borderRadius: "50%", background: "#0db8cc", opacity: 0.7, flexShrink: 0 }}></span>
                        {o}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          ))}
        </div>
          );
        })()}

        <p style={{
          fontFamily: "Montserrat", fontWeight: 300, fontSize: 13,
          color: "#8080a0", lineHeight: 1.7, margin: "56px 0 0",
          maxWidth: 720,
        }}>
          {t.footer}
        </p>
      </div>
    </section>
  );
}

window.CapabilitiesCards = CapabilitiesCards;