// Shift10 Landingpage — Hero Video section
// Drops a polished, framed video player directly under the hero.
// Replace VIDEO_SRC with the real file when delivered.
function VideoSection() {
  const videoRef = React.useRef(null);
  const [playing, setPlaying] = React.useState(false);
  const [loaded, setLoaded] = React.useState(false);

  // Placeholder source — swap for real Shift10 trailer when ready.
  const VIDEO_SRC = ""; // e.g. "assets/shift10-trailer.mp4"
  const POSTER = ""; // e.g. "assets/shift10-poster.jpg"

  const togglePlay = () => {
    const v = videoRef.current;
    if (!v) {
      // No video file yet — toggle the play indicator anyway for demo.
      setPlaying((p) => !p);
      return;
    }
    if (v.paused) {v.play();setPlaying(true);} else
    {v.pause();setPlaying(false);}
  };

  return (
    <section id="video" className="section section--white" style={{ paddingTop: 24, paddingBottom: 120 }}>
      <div className="container">
        {/* Tiny meta strip — feels editorial, anchors the frame */}
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
          marginBottom: 20, paddingBottom: 14,
          borderBottom: "1px solid var(--color-neutral-200)",
          fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em",
          textTransform: "uppercase", color: "var(--color-neutral-500)"
        }}>
          <span>SHIFT10 · VORSTELLUNG</span>
          <span>06.05.26 · DE / DE-SUB</span>
        </div>

        {/* Video frame */}
        <div
          onClick={togglePlay}
          style={{
            position: "relative",
            width: "100%",
            aspectRatio: "16 / 9",
            background: "var(--color-black)",
            overflow: "hidden",
            cursor: "pointer",
            border: "1px solid var(--color-black)"
          }}>
          
          {VIDEO_SRC ?
          <video
            ref={videoRef}
            src={VIDEO_SRC}
            poster={POSTER || undefined}
            playsInline
            preload="metadata"
            onLoadedData={() => setLoaded(true)}
            onPlay={() => setPlaying(true)}
            onPause={() => setPlaying(false)}
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} /> :


          // Placeholder canvas — animated dot field + faint scan + label,
          // so the slot reads as "video" even before the asset arrives.
          <div style={{ position: "absolute", inset: 0,
            backgroundColor: "#0a0a0a",
            backgroundImage: [
            "radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px)",
            "linear-gradient(180deg, rgba(255,77,0,0.06) 0%, transparent 30%, transparent 70%, rgba(255,77,0,0.04) 100%)"].
            join(", "),
            backgroundSize: "18px 18px, 100% 100%"
          }}>
              {/* corner crosshairs */}
              {[
            { top: 16, left: 16 }, { top: 16, right: 16 },
            { bottom: 16, left: 16 }, { bottom: 16, right: 16 }].
            map((pos, i) =>
            <div key={i} style={{
              position: "absolute", ...pos,
              width: 18, height: 18,
              borderTop: pos.top !== undefined ? "1px solid rgba(255,255,255,0.5)" : "none",
              borderBottom: pos.bottom !== undefined ? "1px solid rgba(255,255,255,0.5)" : "none",
              borderLeft: pos.left !== undefined ? "1px solid rgba(255,255,255,0.5)" : "none",
              borderRight: pos.right !== undefined ? "1px solid rgba(255,255,255,0.5)" : "none"
            }} />
            )}
              {/* HUD label */}
              <div style={{
              position: "absolute", top: 24, left: 50, right: 50,
              display: "flex", justifyContent: "space-between",
              fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em",
              color: "rgba(255,255,255,0.55)", textTransform: "uppercase"
            }}>
                <span>● REC</span>
                <span>SHIFT10 / WORKSHOP-CLIP</span>
              </div>
              {/* center caption */}
              <div style={{
              position: "absolute", left: "50%", bottom: 80,
              transform: "translateX(-50%)",
              fontFamily: "var(--font-display)",
              fontSize: 28, fontWeight: 500, color: "#fff",
              textAlign: "center", letterSpacing: "-0.02em",
              maxWidth: "26ch"
            }}>
                Sieh in 2 Minuten, wie der Workshop aussieht.
              </div>
            </div>
          }

          {/* Play button overlay */}
          <div style={{
            position: "absolute", inset: 0,
            display: "flex", alignItems: "center", justifyContent: "center",
            opacity: playing ? 0 : 1,
            transition: "opacity 200ms var(--ease-out)",
            pointerEvents: "none"
          }}>
            <div style={{
              width: 88, height: 88,
              borderRadius: "50%",
              background: "var(--color-accent)",
              display: "flex", alignItems: "center", justifyContent: "center",
              boxShadow: "0 0 0 1px rgba(255,255,255,0.15), 0 20px 60px rgba(0,0,0,0.5)"
            }}>
              <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff">
                <path d="M7 4l14 8-14 8z" />
              </svg>
            </div>
          </div>

          {/* Bottom progress strip */}
          <div style={{
            position: "absolute", left: 0, right: 0, bottom: 0,
            height: 3, background: "rgba(255,255,255,0.12)"
          }}>
            <div style={{
              height: "100%", width: playing ? "32%" : "0%",
              background: "var(--color-accent)",
              transition: "width 600ms var(--ease-out)"
            }} />
          </div>
        </div>

        {/* Caption row */}
        <div style={{
          marginTop: 16, display: "flex", justifyContent: "space-between",
          fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.10em",
          textTransform: "uppercase", color: "var(--color-neutral-500)"
        }}>
          <span>FIG. 01 — WAS IM RAUM PASSIERT, WENN MIKE DIE TESTMASCHINE AUFKLAPPT.</span>
          <span>↑ {playing ? "PLAYING" : "TAP TO PLAY"}</span>
        </div>
      </div>
    </section>);

}