// Iceberg — the systems-thinking visualization. Tells the reader where Ondion works.
function Iceberg() {
  const { lang } = React.useContext(window.LangContext);
  const { isMobile, isTablet } = window.useBreakpoint();
  const [refH2, visH2] = window.useReveal();
  const [refBody, visBody] = window.useReveal({ threshold: 0.06 });
  const [refLayers, visLayers] = window.useReveal({ threshold: 0.06 });

  const en = {
    eyebrow: "02 · Structural Thinking",
    h2line1: "Most AI problems start",
    h2line2: "long before the tool.",
    body1: "The first signs are often subtle: many keep their distance from AI, some test tools on the side, others have automation ideas — but none of this produces a clear, binding workflow.",
    body2: "I start with the problem, not the tool. The focus is on where AI genuinely helps — and which tasks, responsibilities, and processes need to be clarified first.",
    badge: "Ondion works in the highlighted areas",
    attribution: "after Donella Meadows · adapted",
    layers: [
      { depth: "Tip · visible",    label: "Visible friction",      example: "The new tool that gets tested briefly. The automation that doesn't fit the real workflow. The AI usage with no shared rules.",         worked: false },
      { depth: "Just below",       label: "Operational patterns",  example: "Workflows exist on paper but play out differently in practice. Responsibilities are unclear. Risks are absorbed by individuals.",       worked: false },
      { depth: "Where most fail",  label: "Structures",            example: "Ownership. Governance. Roles. Operational coordination.",                                                                               worked: true  },
      { depth: "Deepest",          label: "Work culture",          example: "How people collaborate, communicate, build trust, and move forward together.",                                                          worked: true  },
    ],
  };

  const de = {
    eyebrow: "02 · Strukturelles Denken",
    h2line1: "Die meisten KI-Probleme entstehen",
    h2line2: "lange vor dem Tool.",
    body1: "Die ersten Anzeichen sind oft unscheinbar: Viele halten Abstand zu KI, einzelne testen Tools nebenbei, andere haben Automatisierungsideen — aber daraus entsteht noch kein klarer, verbindlicher Arbeitsprozess.",
    body2: "Ich beginne beim Problem, nicht beim Tool. Im Mittelpunkt steht die Frage, wo KI wirklich sinnvoll hilft — und welche Aufgaben, Zuständigkeiten und Abläufe dafür geklärt werden müssen.",
    badge: "Ondion arbeitet in den markierten Bereichen",
    attribution: "nach Donella Meadows · adaptiert",
    layers: [
      { depth: "Oberfläche",                 label: "Sichtbare Reibung",  example: "Das neue Tool, das kurz getestet wird. Die Automatisierung, die nicht zum echten Ablauf passt. Die KI-Nutzung, für die es keine gemeinsamen Regeln gibt.",  worked: false },
      { depth: "Knapp darunter",           label: "Operative Muster",   example: "Abläufe existieren auf dem Papier, werden im Alltag aber anders gelebt. Verantwortlichkeiten sind unklar. Risiken werden von Einzelnen abgefangen.",          worked: false },
      { depth: "Wo die meisten scheitern", label: "Strukturen",         example: "Verantwortlichkeiten. Governance. Rollen. Operative Koordination.",                                                                                             worked: true  },
      { depth: "Am tiefsten",              label: "Arbeitskultur",      example: "Wie Menschen zusammenarbeiten, kommunizieren, Vertrauen aufbauen und gemeinsam vorankommen.",                                                                   worked: true  },
    ],
  };

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

  return (
    <section id="iceberg" style={{
      position: "relative",
      padding: isMobile ? "80px 24px 80px" : isTablet ? "80px 40px 80px 40px" : "200px 80px 200px 120px",
      borderBottom: "1px solid #2d2d38",
      background: "#16161b",
      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",
      }}>02</div>

      <div style={{ position: "relative", maxWidth: 1280, margin: "0 auto" }}>
        <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, 88px)",
          lineHeight: 1.04, letterSpacing: "-0.025em",
          color: "#ffffff", margin: 0,
          maxWidth: 1100,
        }}>
          {t.h2line1}<br/>
          <span style={{ color: "#8e8ea8" }}>{t.h2line2}</span>
        </h2>

        <div style={{ display: "grid", gridTemplateColumns: (isMobile || isTablet) ? "1fr" : "1fr 1.1fr", gap: (isMobile || isTablet) ? 48 : 96, marginTop: (isMobile || isTablet) ? 48 : 96, alignItems: "start" }}>
          <div ref={refBody} className={!isMobile ? `reveal${visBody ? " visible" : ""}` : ""}>
            <p style={{ fontFamily: "Montserrat", fontWeight: 300, fontSize: 17, lineHeight: 1.75, color: "#c4c4d0", margin: "0 0 28px" }}>
              {t.body1}
            </p>
            <p style={{ fontFamily: "Montserrat", fontWeight: 300, fontSize: 17, lineHeight: 1.75, color: "#c4c4d0", margin: 0 }}>
              {t.body2}
            </p>

            <div style={{
              display: "inline-flex", gap: 12, alignItems: "center",
              marginTop: 48, padding: "10px 16px", borderRadius: 4,
              background: "rgba(13,184,204,0.07)", border: "1px solid rgba(13,184,204,0.18)",
            }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#0db8cc", flexShrink: 0 }}></span>
              <span className="label label--wide" style={{ color: "#0db8cc" }}>
                {t.badge}
              </span>
            </div>
          </div>

          {/* The iceberg diagram */}
          <div style={{ position: "relative" }}>
            <div ref={refLayers} className={!isMobile ? `reveal-stagger${visLayers ? " visible" : ""}` : ""} style={{ display: "grid", gap: 0 }}>
              {t.layers.map((l, i) => (
                <div key={i} className={!isMobile ? "reveal-item" : ""} style={{
                  display: "grid",
                  gridTemplateColumns: (isMobile || isTablet) ? "28px 1fr" : "96px 1fr",
                  columnGap: isMobile ? 16 : 36,
                  opacity: l.worked ? 1 : 0.7,
                }}>
                  {/* Depth gauge rail */}
                  <div style={{
                    position: "relative",
                    borderRight: `1px solid ${l.worked ? "rgba(92,53,204,0.85)" : "rgba(160,160,180,0.55)"}`,
                    paddingRight: 18,
                    paddingTop: 28,
                    paddingBottom: 28,
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "flex-end",
                    gap: 8,
                  }}>
                    {/* Tick mark */}
                    <div style={{
                      position: "absolute",
                      right: -7, top: 10,
                      width: 6, height: 1,
                      background: l.worked ? "rgba(92,53,204,0.9)" : "rgba(160,160,180,0.55)",
                    }} />
                    {l.worked && (
                      <div style={{
                        width: 7, height: 7, borderRadius: "50%",
                        background: "#5c35cc",
                        boxShadow: "0 0 16px rgba(92,53,204,0.9), 0 0 4px rgba(92,53,204,1)",
                        flexShrink: 0,
                      }} />
                    )}
                    {!isMobile && !isTablet && (
                      <div className="label label--wide" style={{
                        color: l.worked ? "#0db8cc" : "#b0b0c4",
                        textAlign: "right",
                        lineHeight: 1.5,
                        fontSize: 10,
                      }}>{l.depth}</div>
                    )}
                  </div>

                  {/* Content */}
                  <div style={{
                    paddingTop: 28,
                    paddingBottom: 28,
                    paddingLeft: l.worked ? 20 : 0,
                    position: "relative",
                  }}>
                    {/* Dot separator aligned with tick (top: 10) — skipped on first row */}
                    {i > 0 && (
                      <div style={{
                        position: "absolute",
                        top: 10, left: 0, right: 0,
                        height: 2,
                        backgroundImage: "radial-gradient(circle, rgba(90,90,110,0.55) 0.8px, transparent 0.8px)",
                        backgroundSize: "5px 2px",
                        backgroundRepeat: "repeat-x",
                      }} />
                    )}
                    {l.worked && (
                      <span style={{
                        position: "absolute", left: 0, top: 28, bottom: 28,
                        width: 2,
                        background: "#5c35cc",
                        borderRadius: 2,
                      }}></span>
                    )}
                    <h3 style={{
                      fontFamily: "Montserrat", fontWeight: 200,
                      fontSize: l.worked ? (isMobile ? 22 : 34) : (isMobile ? 16 : 19),
                      color: l.worked ? "#ffffff" : "#c4c4d0",
                      margin: "0 0 12px",
                      letterSpacing: "-0.015em",
                      lineHeight: 1.1,
                    }}>{l.label}</h3>
                    <p style={{
                      fontFamily: "Montserrat", fontWeight: 300,
                      fontSize: 13.5,
                      lineHeight: 1.7,
                      color: l.worked ? "#c4c4d0" : "#8080a0",
                      margin: 0, maxWidth: 520,
                    }}>{l.example}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Iceberg = Iceberg;