/* global React */
const { useEffect, useRef, useState } = React;

/* ============================================================
   PIXEL STARFIELD — animated canvas, frame-stepped
   ============================================================ */
function HeroStars({ variant = 'starfield' }) {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf;
    let stars = [];
    let lastFrame = 0;
    const FRAME_MS = 80; // frame-stepped, ~12fps
    let prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    const resize = () => {
      const dpr = 1; // keep pixelated, no DPR
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
      seed();
    };

    const seed = () => {
      stars = [];
      const W = canvas.width, H = canvas.height;
      const count = variant === 'cityscape' ? 60 : variant === 'wordmark' ? 40 : 120;
      for (let i = 0; i < count; i++) {
        stars.push({
          x: Math.random() * W,
          y: Math.random() * H,
          z: Math.random() * 3 + 1, // depth: 1=far, 4=near
          c: Math.random() < 0.7 ? '#5be7ff' : (Math.random() < 0.5 ? '#ffb627' : '#ffffff'),
        });
      }
    };

    const drawStarfield = () => {
      const W = canvas.width, H = canvas.height;
      ctx.fillStyle = 'rgba(7, 9, 26, 0.35)';
      ctx.fillRect(0, 0, W, H);
      for (const s of stars) {
        const size = Math.floor(s.z); // 1-3 px
        ctx.fillStyle = s.c;
        ctx.fillRect(Math.floor(s.x), Math.floor(s.y), size, size);
        if (!prefersReduced) {
          s.x += s.z * 0.8;
          if (s.x > W) { s.x = -2; s.y = Math.random() * H; }
        }
      }
    };

    const drawCityscape = () => {
      const W = canvas.width, H = canvas.height;
      ctx.fillStyle = '#07091a';
      ctx.fillRect(0, 0, W, H);
      // moon
      ctx.fillStyle = '#5be7ff';
      ctx.fillRect(W - 100, 40, 40, 40);
      ctx.fillStyle = '#07091a';
      ctx.fillRect(W - 90, 50, 10, 10);
      ctx.fillRect(W - 70, 60, 8, 8);
      // stars (slow blink)
      const blink = Math.floor(Date.now() / 300) % 2;
      for (const s of stars) {
        ctx.fillStyle = ((Math.floor(s.x) + blink) % 7 === 0) ? '#000' : s.c;
        ctx.fillRect(Math.floor(s.x), Math.floor(s.y), 2, 2);
      }
      // skyline
      const baseY = H - 120;
      ctx.fillStyle = '#0d1330';
      for (let x = 0; x < W; x += 24) {
        const h = 30 + ((x * 7) % 80);
        ctx.fillRect(x, baseY - h, 22, h + 120);
        // windows
        ctx.fillStyle = (Math.floor(Date.now() / 800) + x) % 3 === 0 ? '#ffb627' : '#1d2a6b';
        for (let wy = baseY - h + 10; wy < baseY; wy += 10) {
          ctx.fillRect(x + 4, wy, 4, 4);
          ctx.fillRect(x + 12, wy, 4, 4);
        }
        ctx.fillStyle = '#0d1330';
      }
    };

    const drawWordmark = () => {
      const W = canvas.width, H = canvas.height;
      ctx.fillStyle = 'rgba(7, 9, 26, 0.5)';
      ctx.fillRect(0, 0, W, H);
      // far stars only
      for (const s of stars) {
        ctx.fillStyle = s.c;
        ctx.fillRect(Math.floor(s.x), Math.floor(s.y), 2, 2);
        if (!prefersReduced) {
          s.y += 0.4;
          if (s.y > H) { s.y = 0; s.x = Math.random() * W; }
        }
      }
    };

    const tick = (t) => {
      if (t - lastFrame >= FRAME_MS) {
        lastFrame = t;
        if (variant === 'cityscape') drawCityscape();
        else if (variant === 'wordmark') drawWordmark();
        else drawStarfield();
      }
      raf = requestAnimationFrame(tick);
    };

    resize();
    window.addEventListener('resize', resize);
    raf = requestAnimationFrame(tick);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('resize', resize);
    };
  }, [variant]);

  return <canvas ref={canvasRef} className="hero-stars" aria-hidden="true" />;
}

/* ============================================================
   PIXEL ICON — generated 8x8 grid
   ============================================================ */
function PixelIcon({ pattern, color = 'var(--bb-cyan)' }) {
  // pattern is array of 8 strings, 8 chars each — '#' = on
  const cells = [];
  for (let y = 0; y < 8; y++) {
    for (let x = 0; x < 8; x++) {
      const on = pattern[y][x] === '#';
      cells.push(
        <span
          key={`${x}-${y}`}
          style={{
            background: on ? color : 'transparent',
            width: 8, height: 8,
          }}
        />
      );
    }
  }
  return <div className="value-icon" style={{ '--accent': color }}>{cells}</div>;
}

const ICON_BUDGET = [
  '..####..',
  '.######.',
  '##.##.##',
  '###..###',
  '########',
  '##.##.##',
  '.######.',
  '..####..',
];
const ICON_TEACH = [
  '########',
  '#......#',
  '#.####.#',
  '#......#',
  '#.####.#',
  '#......#',
  '########',
  '..####..',
];
const ICON_CHECK = [
  '......##',
  '.....##.',
  '##..##..',
  '.####...',
  '..##....',
  '........',
  '........',
  '........',
];

Object.assign(window, { HeroStars, PixelIcon, ICON_BUDGET, ICON_TEACH, ICON_CHECK });