// Strategic Focus Areas — six engagement fields, using the original "No factor" list layout.
function NoFactor() {
  const { lang } = React.useContext(window.LangContext);
  const { isMobile, isTablet } = window.useBreakpoint();
  const [refH2, visH2] = window.useReveal();
  const [refList, visList] = window.useReveal({ threshold: 0.06 });

  const en = {
    eyebrow: "05 · Strategic Deliverables",
    h2: ["What gets", <span style={{ color: "#8e8ea8" }}>built.</span>],
    intro: "Five core deliverables that emerge from the three services. Depth depends on where you are.",
    areas: [
      { title: "AI Readiness Assessment", body: "A structured assessment of organisational maturity: processes, data landscape, responsibilities, and realistic AI opportunities." },
      { title: "AI Strategy Roadmap", body: "A clear direction for AI adoption: vision & mission, priorities, sequence of steps, dependencies, risks, and decision paths." },
      { title: "Use Case Map", body: "A prioritised overview of relevant AI use cases, evaluated by value, effort, risk, and feasibility." },
      { title: "Pilot Blueprint", body: "A concrete plan for the first AI pilot: workflows, roles, interfaces, responsibilities, and implementation steps." },
      { title: "Governance & Quality Model", body: "Clear responsibilities, approvals, review processes, and escalation paths for reliable AI operations." },
    ],
  };

  const de = {
    eyebrow: "05 · Strategische Einsatzfelder",
    h2: ["Was dabei", <span style={{ color: "#8e8ea8" }}>entsteht.</span>],
    intro: "Fünf konkrete Ergebnisse aus den drei Leistungen, je nach Ausgangslage in unterschiedlicher Tiefe.",
    areas: [
      { title: "AI Readiness Assessment", body: "Strukturierte Einschätzung der organisatorischen Reife: Prozesse, Datenlage, Zuständigkeiten und realistische KI-Möglichkeiten." },
      { title: "KI-Strategie-Roadmap", body: "Ein klares Zielbild für den Einsatz von KI: Vision & Mission, Prioritäten, Umsetzungsreihenfolge, Abhängigkeiten, Risiken und Entscheidungswege." },
      { title: "Use-Case-Landkarte", body: "Eine priorisierte Übersicht relevanter KI-Anwendungsfälle, bewertet nach Nutzen, Aufwand, Risiko und Umsetzbarkeit." },
      { title: "Pilot-Blueprint", body: "Ein konkreter Bauplan für den ersten KI-Piloten: Abläufe, Rollen, Schnittstellen, Governance und Umsetzungsschritte." },
      { title: "Governance- & Qualitätsmodell", body: "Klare Verantwortung, Freigaben, Prüfprozesse und Eskalationswege für einen geregelten KI-Betrieb." },
    ],
  };

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

  const [expandedItems, setExpandedItems] = React.useState(new Set());
  const toggleItem = (i) => setExpandedItems(prev => {
    const next = new Set(prev);
    next.has(i) ? next.delete(i) : next.add(i);
    return next;
  });

  return (
    <section id="notfor" style={{
      position: "relative",
      padding: isMobile ? "80px 24px 80px" : isTablet ? "80px 40px 80px 40px" : "220px 80px 220px 120px",
      borderBottom: "1px solid #2d2d38",
      background: "#0f0f12",
      overflow: "hidden",
    }}>
      {/* Ring blob — hidden on mobile only */}
      {!isMobile && (
        <img src={(window.__resources && window.__resources.ring) || "assets/ring.png"} alt="" aria-hidden="true" style={{
          position: "absolute",
          left: "-220px", bottom: "-160px",
          width: "880px", height: "880px",
          objectFit: "contain",
          pointerEvents: "none",
          opacity: isTablet ? 0.22 : 0.95,
          filter: "drop-shadow(0 30px 80px rgba(92,53,204,0.35))",
          zIndex: 0,
        }} />
      )}

      <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",
      }}>05</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" }}>
          <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(40px, 5.4vw, 80px)",
              lineHeight: 1.04, letterSpacing: "-0.025em",
              color: "#ffffff", margin: 0,
            }}>
              {t.h2[0]}<br/>
              {t.h2[1]}
            </h2>

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

          <ol ref={refList} className={!isMobile ? `reveal-stagger${visList ? " visible" : ""}` : ""} style={{
            listStyle: "none", padding: 0, margin: 0,
            display: "flex", flexDirection: "column",
          }}>
            {t.areas.map((a, i) => (
              <li key={i} className={!isMobile ? "reveal-item" : ""}
                onClick={() => isMobile && toggleItem(i)}
                style={{
                  padding: "32px 0",
                  borderTop: i === 0 ? "1px solid #2d2d38" : "none",
                  borderBottom: "1px solid #2d2d38",
                  display: "grid", gridTemplateColumns: "44px 1fr", gap: 24,
                  alignItems: "baseline",
                  cursor: isMobile ? "pointer" : "default",
                }}>
                <span style={{
                  fontFamily: "Montserrat", fontWeight: 200, fontSize: 24,
                  color: "#0db8cc", letterSpacing: "-0.02em", lineHeight: 1,
                }}>
                  &mdash;
                </span>
                <span style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                  <span style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <span style={{
                      fontFamily: "Montserrat", fontWeight: 300,
                      fontSize: "clamp(18px, 1.6vw, 22px)",
                      lineHeight: 1.3, color: "#e4e4ec",
                      letterSpacing: "-0.01em",
                    }}>{a.title}</span>
                    {isMobile && (
                      <span style={{
                        color: "#0db8cc", fontSize: 18, lineHeight: 1, flexShrink: 0, marginLeft: 12,
                        display: "inline-block",
                        transform: expandedItems.has(i) ? "rotate(45deg)" : "none",
                        transition: "transform 0.3s ease",
                      }}>+</span>
                    )}
                  </span>
                  {(!isMobile || expandedItems.has(i)) && (
                    <span style={{
                      fontFamily: "Montserrat", fontWeight: 300,
                      fontSize: 15, lineHeight: 1.65, color: "#8080a0",
                    }}>{a.body}</span>
                  )}
                </span>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}

window.NoFactor = NoFactor;