/* eslint-disable */
/* Screens 0–3. Scene area is 1380 × 900. */

/* ============================================================
   SCREEN 0 — Call to action / idle loop
   ============================================================ */
function Screen0({ onStart }) {
  return (
    <React.Fragment>
      {/* Centered hero */}
      <div style={{
        position: "absolute",
        left: "50%", top: "50%",
        transform: "translate(-50%, -50%)",
        width: 760, textAlign: "center",
        display: "flex", flexDirection: "column", alignItems: "center", gap: 22,
      }}>
        <div className="wf-eyebrow" style={{ color: "var(--ink)" }}>Software-defined Train</div>
        <div className="wf-title" style={{ fontSize: 56, lineHeight: 1.05 }}>
          The future of the train.
        </div>
        <div className="wf-subtitle" style={{ fontSize: 18, maxWidth: 560 }}>
          A short tagline introducing the SDT concept.
        </div>
        <div style={{ height: 10 }}></div>
        <WfBtn primary lg onClick={onStart}>Discover the SDT concept</WfBtn>
      </div>
    </React.Fragment>
  );
}

/* ============================================================
   SCREEN 1 — The Evolution
   ============================================================ */
function Screen1({ onNext, onBack, sliderValue, setSliderValue }) {
  // sliderValue = position of the split (0 = far left, 1 = far right)
  // LEFT of split = Train today.  RIGHT of split = Train tomorrow.
  // → divider all the way right (1) → Train today fully revealed
  // → divider all the way left  (0) → Train tomorrow fully revealed
  const showToday = sliderValue >= 0.95;
  const showTomorrow = sliderValue <= 0.05;

  // Drag the split anywhere on the compare area
  const compareRef = useRef(null);
  const draggingRef = useRef(false);
  const setFromEvent = (e) => {
    const el = compareRef.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
    const v = Math.max(0, Math.min(1, (clientX - r.left) / r.width));
    setSliderValue(v);
  };
  const onCompareDown = (e) => {
    draggingRef.current = true;
    setFromEvent(e);
    e.preventDefault();
  };
  useEffect(() => {
    const move = (e) => { if (draggingRef.current) setFromEvent(e); };
    const up = () => { draggingRef.current = false; };
    window.addEventListener("mousemove", move);
    window.addEventListener("mouseup", up);
    window.addEventListener("touchmove", move, { passive: false });
    window.addEventListener("touchend", up);
    return () => {
      window.removeEventListener("mousemove", move);
      window.removeEventListener("mouseup", up);
      window.removeEventListener("touchmove", move);
      window.removeEventListener("touchend", up);
    };
  });

  const linePct = `${sliderValue * 100}%`;

  return (
    <React.Fragment>
      {/* Title */}
      <div style={{ position: "absolute", left: 60, top: 60, width: 700 }}>
        <div className="wf-title" style={{ fontSize: 44 }}>The Evolution</div>
        <div className="wf-subtitle" style={{ marginTop: 8 }}>
          Drag the split to reveal today's train or tomorrow's SDT.
        </div>
      </div>

      {/* Split-screen compare area */}
      <div
        ref={compareRef}
        onMouseDown={onCompareDown}
        onTouchStart={onCompareDown}
        style={{
          position: "absolute", left: 60, top: 190, width: 1180, height: 470,
          border: "1px solid var(--ink)",
          background: "var(--paper)",
          overflow: "hidden",
          cursor: "ew-resize",
          userSelect: "none",
        }}
      >
        {/* Train today fills the LEFT of the split */}
        <div style={{
          position: "absolute", inset: 0,
          clipPath: `inset(0 ${(1 - sliderValue) * 100}% 0 0)`,
        }}>
          <Placeholder
            x={0} y={0} w={"100%"} h={"100%"}
            label="Today's train · current architecture"
          />
        </div>
        {/* Train tomorrow fills the RIGHT of the split */}
        <div style={{
          position: "absolute", inset: 0,
          clipPath: `inset(0 0 0 ${sliderValue * 100}%)`,
        }}>
          <Placeholder
            x={0} y={0} w={"100%"} h={"100%"}
            label="SDT train · new architecture"
          />
        </div>

        {/* Vertical split line */}
        <div style={{
          position: "absolute", top: 0, bottom: 0,
          left: linePct,
          width: 2,
          background: "#1a1a1a",
          transform: "translateX(-50%)",
          pointerEvents: "none",
        }}></div>

        {/* Split handle (visual; drag works on the whole area) */}
        <div style={{
          position: "absolute", top: "50%", left: linePct,
          transform: "translate(-50%, -50%)",
          width: 54, height: 54,
          borderRadius: "50%",
          background: "var(--paper)",
          border: "1.5px solid var(--ink)",
          display: "flex", alignItems: "center", justifyContent: "center",
          color: "var(--ink)",
          fontSize: 16,
          pointerEvents: "none",
          boxShadow: "0 2px 6px rgba(0,0,0,0.12)",
        }}>⇆</div>

        {/* Corner labels */}
        <div style={{
          position: "absolute", left: 16, top: 16,
          fontSize: 11, letterSpacing: 1.5, textTransform: "uppercase",
          background: "rgba(255,255,255,0.92)", color: "var(--ink-2)",
          padding: "4px 10px", border: "1px solid var(--ink-2)",
          pointerEvents: "none", fontWeight: 500,
        }}>Train today</div>
        <div style={{
          position: "absolute", right: 16, top: 16,
          fontSize: 11, letterSpacing: 1.5, textTransform: "uppercase",
          background: "rgba(255,255,255,0.92)", color: "var(--ink-2)",
          padding: "4px 10px", border: "1px solid var(--ink-2)",
          pointerEvents: "none", fontWeight: 500,
        }}>Train tomorrow</div>
      </div>

      {/* Shortcut row */}
      <div style={{
        position: "absolute", left: 60, top: 700, width: 1180,
        background: "var(--paper)", border: "1px solid var(--ink)",
        padding: "14px 22px",
        display: "flex", justifyContent: "space-between", alignItems: "center",
      }}>
        <button
          className="wf-btn ghost"
          onClick={() => setSliderValue(1)}
          style={{ padding: "8px 14px", fontSize: 12 }}
        >← See Train today</button>
        <div className="wf-eyebrow">Drag the split — or use these shortcuts</div>
        <button
          className="wf-btn ghost"
          onClick={() => setSliderValue(0)}
          style={{ padding: "8px 14px", fontSize: 12 }}
        >See Train tomorrow →</button>
      </div>

      <SceneNav />

      {/* Popups appear once the split fully reveals one of the two trains */}
      {showToday && (
        <Popup
          x={160} y={290} w={460}
          eyebrow="Pop-up"
          title="Train today"
          onClose={() => setSliderValue(0.5)}
        >
          <div className="wf-body" style={{ marginBottom: 12 }}>
            Short explanation of today's train architecture.
          </div>
          <TxtBars x={0} y={0} w={"100%"} lines={4} style={{ position: "relative" }} />
        </Popup>
      )}
      {showTomorrow && (
        <Popup
          x={680} y={290} w={460}
          eyebrow="Pop-up"
          title="Train tomorrow"
          onClose={() => setSliderValue(0.5)}
        >
          <div className="wf-body" style={{ marginBottom: 12 }}>
            Short explanation of the SDT and how it changes the train.
          </div>
          <TxtBars x={0} y={0} w={"100%"} lines={4} style={{ position: "relative" }} />
        </Popup>
      )}
    </React.Fragment>
  );
}

/* ============================================================
   SCREEN 2 — SDT Levels (always 3 layers; compact stacks them,
   exploded separates them and makes them clickable)
   ============================================================ */
function Screen2({ onNext, onBack, vSliderValue, setVSliderValue, activeLayer, setActiveLayer }) {
  // vSliderValue: 0 = exploded (slider at top), 1 = compact (slider at bottom)
  const isExploded = vSliderValue < 0.5;

  // Order shown top → bottom on screen
  const layers = [
    { id: "application", label: "Application layer", num: "03", desc: "Apps and services running on the SDT" },
    { id: "abstraction", label: "Abstraction layer", num: "02", desc: "API / orchestration / digital continuity" },
    { id: "physical",    label: "Physical layer",    num: "01", desc: "Hardware and on-board sub-systems" },
  ];

  // smooth gap between 0 and ~28px depending on slider position
  const expandFactor = Math.max(0, Math.min(1, 1 - vSliderValue * 2)); // 0 at slider≥0.5, 1 at slider=0
  const gap = expandFactor * 28;
  const cardOpacity = isExploded ? 1 : 0.85;

  return (
    <React.Fragment>
      {/* Title */}
      <div style={{ position: "absolute", left: 60, top: 60, width: 600 }}>
        <div className="wf-title" style={{ fontSize: 44 }}>SDT Levels</div>
        <div className="wf-subtitle" style={{ marginTop: 8 }}>
          From the compact view to the three separable layers.
        </div>
      </div>

      {/* Global text zone — sits above the stack to introduce the SDT Layer (compact only) */}
      {!isExploded && (
        <div style={{
          position: "absolute", left: 60, top: 180, width: 1100,
          background: "var(--paper)", border: "1px solid var(--ink)",
          padding: "16px 22px",
        }}>
          <div className="wf-body">
            Short global text introducing what the SDT Layer is — to read before exploding the three layers.
          </div>
        </div>
      )}

      {/* Layered stack — always 3 layers */}
      <div style={{
        position: "absolute", left: 60, top: 300, width: 1100, height: 470,
        display: "flex", flexDirection: "column",
        justifyContent: "center",
        gap,
        transition: "gap 0.35s ease",
      }}>
        {layers.map((L) => {
          const isActive = isExploded && activeLayer === L.id;
          return (
            <div
              key={L.id}
              onClick={isExploded ? () => setActiveLayer(L.id) : undefined}
              style={{
                border: "1px solid var(--ink)",
                background: isActive ? "var(--accent-soft)" : "var(--paper)",
                borderColor: isActive ? "var(--accent)" : "var(--ink)",
                padding: "18px 24px",
                cursor: isExploded ? "pointer" : "default",
                opacity: cardOpacity,
                transition: "background 0.2s, border-color 0.2s, opacity 0.3s",
                display: "flex",
                flexDirection: "column",
                gap: 6,
                position: "relative",
              }}
            >
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div style={{ fontSize: 22, fontWeight: 600 }}>{L.label}</div>
                {isExploded && <span className="chip">Click to inspect</span>}
              </div>
              {isExploded && <div className="wf-body">{L.desc}</div>}
            </div>
          );
        })}
      </div>

      {/* Vertical slider */}
      <div style={{
        position: "absolute", right: 60, top: 300, width: 130, height: 470,
        background: "var(--paper)", border: "1px solid var(--ink)",
        padding: "20px 0",
        display: "flex", flexDirection: "column", alignItems: "center",
      }}>
        <button
          className="wf-btn ghost"
          onClick={() => setVSliderValue(0)}
          style={{ padding: "6px 10px", fontSize: 11 }}
        >Exploded</button>
        <div style={{ position: "relative", flex: 1, width: 44, margin: "16px 0" }}>
          <VSlider x={0} y={0} h={"100%"} value={vSliderValue} onChange={setVSliderValue} />
        </div>
        <button
          className="wf-btn ghost"
          onClick={() => { setVSliderValue(1); setActiveLayer(null); }}
          style={{ padding: "6px 10px", fontSize: 11 }}
        >Compact</button>
      </div>

      <SceneNav />

      {/* Layer info popup */}
      {activeLayer && isExploded && (
        <Popup
          x={80} y={260} w={460} h={340}
          eyebrow="Pop-up · Layer"
          title={
            activeLayer === "physical" ? "Physical layer" :
            activeLayer === "abstraction" ? "Abstraction layer" :
            "Application layer"
          }
          onClose={() => setActiveLayer(null)}
        >
          <div className="wf-body" style={{ marginBottom: 10 }}>
            Short description of the selected layer.
          </div>
          <TxtBars x={0} y={0} w={"100%"} lines={5} style={{ position: "relative" }} />
        </Popup>
      )}
    </React.Fragment>
  );
}

/* ============================================================
   SCREEN 3 — Key Characteristics
   (3 buttons stay at the bottom so the bg loop is fully visible;
    info reveals top-right, no inline visual.)
   ============================================================ */
function Screen3({ onNext, onBack, activeChar, setActiveChar }) {
  const characteristics = [
    { id: "data",         label: "Data-driven design", num: "01", x: 290,  y: 720 },
    { id: "connectivity", label: "Connectivity",       num: "02", x: 690,  y: 720 },
    { id: "evolvability", label: "Evolvability",       num: "03", x: 1090, y: 720 },
  ];
  const info = {
    data:         { title: "Data-driven design", text: "The SDT relies on continuous data collection and exploitation across the train." },
    connectivity: { title: "Connectivity",       text: "Digital continuity between on-board systems, ground and cloud." },
    evolvability: { title: "Evolvability",       text: "The train evolves over time through software updates." },
  };

  return (
    <React.Fragment>
      {/* Title */}
      <div style={{ position: "absolute", left: 60, top: 60, width: 700 }}>
        <div className="wf-title" style={{ fontSize: 44 }}>Key characteristics</div>
        <div className="wf-subtitle" style={{ marginTop: 8 }}>
          Three connected pillars defining the SDT — pick one to highlight it on the background loop.
        </div>
      </div>

      {/* Dashed connecting line between the 3 buttons */}
      <svg className="connect-svg" viewBox="0 0 1380 900" preserveAspectRatio="none">
        <line x1="290" y1="720" x2="1090" y2="720" stroke="#1a1a1a" strokeWidth="1" strokeDasharray="5 6" />
      </svg>

      {/* 3 buttons at the bottom */}
      {characteristics.map((c) => {
        const isActive = activeChar === c.id;
        return (
          <button
            key={c.id}
            onClick={() => setActiveChar(isActive ? null : c.id)}
            style={{
              position: "absolute",
              left: c.x, top: c.y,
              transform: "translate(-50%, -50%)",
              width: 180, height: 180,
              borderRadius: "50%",
              border: isActive ? "2px solid var(--accent)" : "1.5px solid var(--ink)",
              background: isActive ? "var(--accent)" : "var(--paper)",
              color: isActive ? "#fff" : "var(--ink)",
              cursor: "pointer",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              justifyContent: "center",
              gap: 8,
              padding: 16,
              textAlign: "center",
              fontFamily: "inherit",
              fontSize: 16,
              fontWeight: 600,
              lineHeight: 1.15,
              zIndex: 3,
              transition: "all 0.2s",
            }}
          >
            <div className={"numdot" + (isActive ? " active" : "")}
                 style={isActive ? { background: "#fff", color: "var(--accent)", borderColor: "#fff" } : {}}>
              {c.num}
            </div>
            {c.label}
          </button>
        );
      })}

      {/* Info reveal — top-right, no inline visual (the bg loop already plays it) */}
      {activeChar && (
        <Popup
          x={900} y={180} w={420}
          eyebrow="Reveal"
          title={info[activeChar].title}
          onClose={() => setActiveChar(null)}
        >
          <div className="wf-body" style={{ marginBottom: 12 }}>
            {info[activeChar].text}
          </div>
          <div className="wf-eyebrow">Strong benefit</div>
          <TxtBars x={0} y={0} w={"100%"} lines={3} style={{ position: "relative", marginTop: 8 }} />
        </Popup>
      )}

      <SceneNav />
    </React.Fragment>
  );
}

Object.assign(window, { Screen0, Screen1, Screen2, Screen3 });