/* Sosh Insider — Bali :: boot / "developing film" sequence (every load) */
function BootSequence({ onDone }) {
  const [pct, setPct] = useState(0);
  const [lineIdx, setLineIdx] = useState(0);
  const [done, setDone] = useState(false);

  const lines = [
    "SOSH INSIDER SYSTEM 7.0.1",
    "© 1997 SOSH PHOTOGRAPHIC CO.",
    "",
    "mounting volume “BALI”…........ ok",
    "checking 4 rolls / 350 frames… ok",
    "warming enlarger lamp…......... ok",
    "developing film…",
  ];

  useEffect(() => {
    window.SFX && SFX.boot();
    let p = 0;
    const t = setInterval(() => {
      p += Math.random() * 9 + 4;
      if (p >= 100) {
        p = 100;
        clearInterval(t);
        setTimeout(() => setDone(true), 480);
        setTimeout(() => onDone && onDone(), 1180);
      }
      setPct(Math.min(100, Math.round(p)));
    }, 150);
    return () => clearInterval(t);
  }, []);

  useEffect(() => {
    const t = setInterval(() => {
      setLineIdx((i) => (i < lines.length ? i + 1 : i));
      window.SFX && SFX.click();
    }, 230);
    return () => clearInterval(t);
  }, []);

  // film-strip wipe: how many frames are "developed"
  const developed = Math.floor((pct / 100) * 4);

  return (
    <div
      style={{
        position: "fixed",
        inset: 0,
        zIndex: 8000,
        background: "#171310",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: 26,
        color: "#e7c98a",
        transition: "opacity 0.7s ease",
        opacity: done ? 0 : 1,
        padding: 24,
      }}
    >
      {/* developing tray of frames */}
      <div
        style={{
          display: "flex",
          gap: 6,
          padding: 10,
          background: "#0d0a08",
          border: "2px solid #3a342e",
          boxShadow: "inset 0 0 24px rgba(0,0,0,0.8)",
        }}
      >
        {Array.from({ length: 4 }).map((_, i) => (
          <div
            key={i}
            style={{
              width: "min(13vw, 80px)",
              height: "min(17vw, 108px)",
              background:
                i < developed
                  ? "repeating-linear-gradient(135deg,#2c2620 0 6px,#221d18 6px 12px)"
                  : "#0a0806",
              border: "1px solid #3a342e",
              position: "relative",
              transition: "background 0.4s",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              color: i < developed ? "#7a6a4a" : "#2a241d",
              fontFamily: "var(--mono)",
              fontSize: 13,
            }}
          >
            {String(i + 1).padStart(2, "0")}
            <span
              style={{
                position: "absolute",
                top: 2,
                bottom: 2,
                left: 2,
                width: 4,
                background:
                  "repeating-linear-gradient(to bottom,transparent 0 4px,#3a342e 4px 7px)",
              }}
            />
          </div>
        ))}
      </div>

      {/* terminal log */}
      <div
        className="mono"
        style={{
          width: "min(92vw, 460px)",
          fontSize: 17,
          lineHeight: 1.35,
          color: "#e7c98a",
          minHeight: 150,
          textShadow: "0 0 6px rgba(231,201,138,0.35)",
        }}
      >
        {lines.slice(0, lineIdx).map((l, i) => (
          <div key={i}>{l || "\u00a0"}</div>
        ))}
        {lineIdx >= lines.length && (
          <div style={{ marginTop: 2 }}>
            {"["}
            {"█".repeat(Math.round(pct / 5)).padEnd(20, "░")}
            {"] "}
            {pct}%
          </div>
        )}
        <span
          style={{
            display: "inline-block",
            width: 9,
            height: 18,
            background: "#e7c98a",
            verticalAlign: "-3px",
            animation: "bootblink 0.7s steps(1) infinite",
          }}
        />
      </div>

      <div
        className="pixel"
        style={{ fontSize: 8, color: "#6a5c3e", letterSpacing: 1 }}
      >
        SOSH INSIDER — BALI
      </div>

      <style>{`
        @keyframes bootblink { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }
      `}</style>
    </div>
  );
}

window.BootSequence = BootSequence;