// Landing page only. Self-hosted 60s HR demo — plays inline.
// IndustryPage.jsx is not loaded on index.html, so this player stands alone.
// controlsList, disablePictureInPicture and oncontextmenu are deterrents
// only: any browser that can play the file can still capture it.
const LANDING_DEMO_SRC = "uploads/video/promefy-hr-demo.mp4";
const LANDING_DEMO_POSTER = "uploads/video/promefy-hr-demo-poster.jpg";

function LandingDemo() {
  const videoRef = React.useRef(null);
  React.useEffect(() => {
    const el = videoRef.current;
    if (!el) return;
    el.setAttribute("controlslist", "nodownload noplaybackrate");
    el.setAttribute("oncontextmenu", "return false");
    el.setAttribute("playsinline", "");
    el.setAttribute("webkit-playsinline", "");
    el.disablePictureInPicture = true;
  }, []);

  return (
    <section id="demo" className="landing-demo-section" aria-labelledby="landing-demo-heading" style={{
      padding: "96px 0",
      background: "var(--bg-2)",
      color: "var(--fg-1)",
      borderTop: "1px solid var(--border-1)",
      borderBottom: "1px solid var(--border-1)",
      scrollMarginTop: "84px",
    }}>
      <style>{`
        .landing-demo-video {
          width: 100%;
          height: auto;
          display: block;
          aspect-ratio: 16 / 9;
          background: #0A0A0A;
        }
        .landing-demo-video::-webkit-media-controls-download-button,
        .landing-demo-video::-internal-media-controls-download-button {
          display: none !important;
        }
        html:not([data-crosshair="off"]) .landing-demo-video {
          cursor: auto !important;
        }
        .landing-demo-meta {
          display: flex;
          justify-content: space-between;
          gap: 8px 16px;
          flex-wrap: wrap;
        }
        @media (max-width: 720px) {
          .landing-demo-section { padding: 64px 0 !important; }
          .landing-demo-frame { padding: 10px !important; }
          .landing-demo-rule { display: none !important; }
          .landing-demo-chrome { padding: 6px 8px 10px !important; }
        }
      `}</style>

      <div className="container" style={{ display: "flex", flexDirection: "column", gap: 28 }}>
        <Reveal className="reveal-up" style={{ display: "flex", flexDirection: "column", gap: 20 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
            <MonoTag tone="flame">DEMO / 60S</MonoTag>
            <span className="landing-demo-rule" style={{ height: 1, flex: 1, minWidth: 24, background: "var(--border-1)" }} />
            <EyebrowLabel prefix="●">PLAYS ON THIS PAGE</EyebrowLabel>
          </div>
          <h2 id="landing-demo-heading" style={{
            fontFamily: "var(--font-display)",
            fontSize: "clamp(36px, 5vw, 64px)",
            fontWeight: 500, lineHeight: 1.0,
            letterSpacing: "-0.025em", margin: 0,
            color: "var(--fg-1)", textWrap: "balance",
            maxWidth: "16ch",
          }}>
            HR and payroll, in one minute.
          </h2>
        </Reveal>

        <Reveal className="reveal-up" delay={80}>
          <div className="landing-demo-frame" style={{
            position: "relative",
            border: "1px solid var(--border-1)",
            borderRadius: 12,
            background: "var(--bg-1)",
            padding: 14,
            boxShadow: "0 30px 60px -30px rgba(10,10,10,0.18), 0 2px 0 rgba(10,10,10,0.02)",
          }}>
            <div className="landing-demo-chrome" style={{
              display: "flex", alignItems: "center",
              justifyContent: "space-between",
              gap: 12, flexWrap: "wrap",
              padding: "8px 14px 12px",
              borderBottom: "1px solid var(--border-1)",
              marginBottom: 12,
            }}>
              <div style={{ display: "flex", gap: 6 }} aria-hidden="true">
                <span style={{ width: 10, height: 10, borderRadius: "50%", background: "var(--n-200, #E5E5E5)" }}/>
                <span style={{ width: 10, height: 10, borderRadius: "50%", background: "var(--n-200, #E5E5E5)" }}/>
                <span style={{ width: 10, height: 10, borderRadius: "50%", background: "var(--site-accent, var(--flame))" }}/>
              </div>
              <span style={{
                fontFamily: "var(--font-mono)",
                fontSize: 10, letterSpacing: "0.18em",
                color: "var(--fg-3)", textTransform: "uppercase",
              }}>// promefy.hr.demo</span>
              <span style={{
                fontFamily: "var(--font-mono)",
                fontSize: 10, letterSpacing: "0.18em",
                color: "var(--site-accent, var(--flame))",
              }}>● 01:00</span>
            </div>

            <div style={{
              position: "relative",
              borderRadius: 6,
              overflow: "hidden",
              background: "#0A0A0A",
              aspectRatio: "16 / 9",
            }}>
              <video
                ref={videoRef}
                className="landing-demo-video"
                controls
                playsInline
                preload="metadata"
                poster={LANDING_DEMO_POSTER}
                controlsList="nodownload noplaybackrate"
                disablePictureInPicture
                onContextMenu={(e) => { e.preventDefault(); }}
                width={1920}
                height={1080}
                aria-describedby="landing-demo-note"
                style={{
                  position: "absolute", inset: 0,
                  width: "100%", height: "100%",
                }}
              >
                <source src={LANDING_DEMO_SRC} type="video/mp4" />
                <a href={LANDING_DEMO_SRC}>HR and payroll, in one minute (MP4)</a>
              </video>
            </div>

            <div className="landing-demo-meta" style={{
              padding: "12px 4px 4px",
              fontFamily: "var(--font-mono)",
              fontSize: 10, letterSpacing: "0.16em",
              color: "var(--fg-3)", textTransform: "uppercase",
            }}>
              <span>1920×1080 · 60s</span>
              <span>HR_PAYROLL · v1</span>
              <span>H.264 · AAC</span>
            </div>
          </div>
        </Reveal>

        <p id="landing-demo-note" style={{
          fontFamily: "var(--font-mono)",
          fontSize: 12, letterSpacing: "0.06em",
          lineHeight: 1.5,
          color: "var(--fg-3)",
          margin: 0, maxWidth: "62ch",
          textTransform: "uppercase",
        }}>
          The demo uses fictional sample documents and data.
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { LandingDemo });