/* ============================================================
   <BuildMode /> — Konami-code Easter egg.

   Type the sequence ↑ ↑ ↓ ↓ ← → ← → B A and a celebration modal
   appears: "You found us — we hire people who look for things
   like this." With an invitation to apply at careers.
   Closing the modal also flips on a subtle build-mode overlay
   (grid + outlines) so curious folk can keep poking around.
   ============================================================ */

const KONAMI = [
  "ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown",
  "ArrowLeft", "ArrowRight", "ArrowLeft", "ArrowRight",
  "b", "a",
];

function BuildMode() {
  const [modal, setModal]   = React.useState(false);
  const [active, setActive] = React.useState(false);
  const bufferRef = React.useRef([]);

  React.useEffect(() => {
    const onKey = (e) => {
      const tag = e.target?.tagName;
      if (tag === "INPUT" || tag === "TEXTAREA" || e.target?.isContentEditable) return;

      if (e.key === "Escape") {
        if (modal) { setModal(false); return; }
        if (active) { setActive(false); return; }
      }

      const key = e.key.length === 1 ? e.key.toLowerCase() : e.key;
      bufferRef.current = [...bufferRef.current, key].slice(-KONAMI.length);
      const match =
        bufferRef.current.length === KONAMI.length &&
        bufferRef.current.every((k, i) => k === KONAMI[i]);
      if (match) {
        bufferRef.current = [];
        setModal(true);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [active, modal]);

  React.useEffect(() => {
    document.documentElement.classList.toggle("build-mode", active);
    return () => document.documentElement.classList.remove("build-mode");
  }, [active]);

  // Lock scroll when modal is open
  React.useEffect(() => {
    if (!modal) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = prev; };
  }, [modal]);

  const closeAndReveal = () => {
    setModal(false);
    setActive(true);
  };

  return (
    <>
      {modal && (
        <div className="konami-modal" role="dialog" aria-modal="true" aria-labelledby="konami-title">
          <div className="konami-modal__backdrop" onClick={() => setModal(false)} aria-hidden="true"></div>

          {/* Confetti — pure CSS confetti petals */}
          <div className="konami-confetti" aria-hidden="true">
            {Array.from({ length: 30 }).map((_, i) => (
              <span
                key={i}
                className="konami-confetti__bit"
                style={{
                  "--x": `${(Math.random() * 100).toFixed(1)}%`,
                  "--delay": `${(Math.random() * 0.6).toFixed(2)}s`,
                  "--dur": `${(2.2 + Math.random() * 1.6).toFixed(2)}s`,
                  "--rot": `${Math.floor(Math.random() * 720)}deg`,
                  "--hue": Math.floor(Math.random() * 360),
                }}
              ></span>
            ))}
          </div>

          <div className="konami-modal__card">
            <button
              type="button"
              className="konami-modal__close"
              onClick={() => setModal(false)}
              aria-label="Close"
              data-cursor="Close"
            >
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
              </svg>
            </button>

            <span className="konami-modal__eyebrow">
              <span className="konami-modal__pulse"></span>
              Hidden code · Unlocked
            </span>

            <h2 id="konami-title" className="konami-modal__title">
              You found us. <em>Now come build with us.</em>
            </h2>

            <p className="konami-modal__lede">
              ↑ ↑ ↓ ↓ ← → ← → B A — somebody curious enough to type that into a studio
              homepage is exactly the kind of person we want in the team. The engineers
              we love are the ones who poke at things.
            </p>

            <div className="konami-modal__actions">
              <a
                href="careers.html"
                className="btn btn--primary"
                data-cursor="Apply"
              >
                See open roles <Arrow />
              </a>
              <a
                href="mailto:careers@innoveev.com?subject=Found the konami code"
                className="btn btn--secondary"
              >
                Email careers@innoveev.com
              </a>
            </div>

            <button
              type="button"
              className="konami-modal__hint"
              onClick={closeAndReveal}
              data-cursor="Inspect"
            >
              <svg width="13" height="13" viewBox="0 0 16 16" fill="none">
                <path d="M2 3h12v10H2z M2 6h12 M5 9.5h6 M5 11.5h4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
              While you're here — flip build-mode on to inspect the page guts
            </button>
          </div>
        </div>
      )}

      {active && (
        <div className="build-hud" aria-hidden="true">
          <div className="build-hud__row">
            <span className="build-hud__dot"></span>
            <span>BUILD MODE</span>
          </div>
          <div className="build-hud__row build-hud__row--meta">
            <span>{window.innerWidth}×{window.innerHeight}</span>
            <span>·</span>
            <span>Esc to exit</span>
          </div>
        </div>
      )}
    </>
  );
}

window.BuildMode = BuildMode;