Pixel Blocks Transition

"use client";
import { useState, useEffect, useMemo } from "react";
import { motion } from "framer-motion";
import styles from "./styles.module.css";

const NUM_COLS = 20;

// Fisher-Yates shuffle — returns a new array
function shuffle(arr) {
  const a = [...arr];
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
}

const blockAnim = {
  initial: { opacity: 0 },
  open: (delay) => ({ opacity: 1, transition: { duration: 0, delay: 0.03 * delay } }),
  closed: (delay) => ({ opacity: 0, transition: { duration: 0, delay: 0.03 * delay } }),
};

const menuAnim = {
  initial:  { opacity: 0 },
  open:   { opacity: 1, transition: { delay: 0.5, duration: 0.3 } },
  closed: { opacity: 0, transition: { duration: 0.15 } },
};

export default function PixelBlocksTransition({ color = "#111111" }) {
  const [isOpen, setIsOpen] = useState(false);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const update = () =>
      setDimensions({ width: window.innerWidth, height: window.innerHeight });
    update();
    window.addEventListener("resize", update);
    return () => window.removeEventListener("resize", update);
  }, []);

  // Pre-compute stable shuffled delay indexes for all 20 columns
  const columnDelays = useMemo(() => {
    if (!dimensions.width) return [];
    const blockSize = dimensions.width * 0.05;
    const numBlocks = Math.ceil(dimensions.height / blockSize);
    return Array.from({ length: NUM_COLS }, () =>
      shuffle(Array.from({ length: numBlocks }, (_, i) => i))
    );
  }, [dimensions.width, dimensions.height]);

  return (
    <div className={styles.demo}>
      {/* Page content */}
      <div className={styles.page}>
        <h2 className={styles.pageTitle}>Component Vault</h2>
        <p className={styles.pageSub}>No-5 Studio</p>
      </div>

      {/* Burger toggle */}
      <button
        className={`${styles.burger} ${isOpen ? styles.burgerOpen : ""}`}
        onClick={() => setIsOpen((v) => !v)}
        aria-label="Toggle menu"
      >
        <span /><span /><span />
      </button>

      {/* Pixel block overlay */}
      {columnDelays.length > 0 && (
        <div className={styles.pixelBg} aria-hidden="true">
          {columnDelays.map((delays, colIdx) => (
            <div key={colIdx} className={styles.column}>
              {delays.map((delay, blockIdx) => (
                <motion.div
                  key={blockIdx}
                  className={styles.block}
                  variants={blockAnim}
                  custom={delay}
                  initial="initial"
                  animate={isOpen ? "open" : "closed"}
                  style={{ backgroundColor: color }}
                />
              ))}
            </div>
          ))}
        </div>
      )}

      {/* Menu — appears after pixels fill in */}
      <motion.nav
        className={styles.menu}
        variants={menuAnim}
        initial="initial"
        animate={isOpen ? "open" : "closed"}
      >
        {["Work", "About", "Lab", "Contact"].map((item) => (
          <p key={item} className={styles.menuItem}>{item}</p>
        ))}
      </motion.nav>
    </div>
  );
}