/* App — top-level composition.
 *
 * Tweaks panel removed per Alex (it's a designer iteration tool, not a
 * production surface). Defaults now come straight from window.SS_TWEAK_DEFAULTS
 * in Skipstone Site.html, so the values stay editable from one place without
 * the floating UI.
 */

function App() {
  const t = window.SS_TWEAK_DEFAULTS || {};

  // Konami code — kept per Alex. Invisible until triggered.
  const [secret, setSecret] = React.useState(false);
  React.useEffect(() => {
    const seq = ["ArrowUp","ArrowUp","ArrowDown","ArrowDown","ArrowLeft","ArrowRight","ArrowLeft","ArrowRight","b","a"];
    let i = 0;
    const onKey = (e) => {
      const k = e.key.length === 1 ? e.key.toLowerCase() : e.key;
      if (k === seq[i]) {
        i += 1;
        if (i === seq.length) {
          setSecret(true);
          setTimeout(() => setSecret(false), 2200);
          i = 0;
        }
      } else {
        i = 0;
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  return (
    <>
      {/* Viewport-fixed CRT bezel — rounded screen with a dark casing around
          it that doesn't scroll with the page. Sits above scanlines/grain
          so those don't bleed into the bezel area. */}
      <div className="crt-casing" aria-hidden="true"/>

      {t.grain && <div className="grain-overlay"/>}
      {t.crt &&   <div className="crt-overlay"/>}
      <Trail enabled={t.trail !== false}/>

      <div className="page">
        <Hero tweaks={t}/>
      </div>

      <Marquee speed={t.marquee_speed}/>

      <div className="page">
        <Featured/>
        <GameGrid/>
        <DevLog speed={t.intro_speed}/>
        <Footer/>
      </div>

      {secret && <SecretShower/>}
    </>
  );
}

function SecretShower() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const cv = ref.current;
    cv.width = window.innerWidth; cv.height = window.innerHeight;
    const ctx = cv.getContext("2d");
    ctx.imageSmoothingEnabled = false;
    const stones = [];
    for (let i = 0; i < 80; i++) {
      stones.push({
        x: Math.random() * cv.width,
        y: -Math.random() * cv.height,
        vy: 2 + Math.random() * 4,
        vx: (Math.random() - 0.5) * 1.2,
        size: Math.random() < 0.3 ? 6 : 4,
        color: ["#A2DCC7","#EDC8C4","#F2F0E5"][Math.floor(Math.random()*3)],
      });
    }
    let raf;
    const draw = () => {
      raf = requestAnimationFrame(draw);
      ctx.clearRect(0, 0, cv.width, cv.height);
      for (const s of stones) {
        s.x += s.vx;
        s.y += s.vy;
        if (s.y > cv.height + 10) s.y = -10;
        ctx.fillStyle = s.color;
        ctx.fillRect(Math.floor(s.x), Math.floor(s.y), s.size, Math.floor(s.size * 0.6));
        ctx.fillStyle = "#352B42";
        ctx.fillRect(Math.floor(s.x), Math.floor(s.y) + Math.floor(s.size * 0.6), s.size, 1);
      }
    };
    raf = requestAnimationFrame(draw);
    return () => cancelAnimationFrame(raf);
  }, []);

  return (
    <>
      <canvas ref={ref} style={{
        position: "fixed", inset: 0, zIndex: 9500, pointerEvents: "none",
      }}/>
      <div style={{
        position: "fixed",
        top: "40%", left: "50%",
        transform: "translate(-50%, -50%) rotate(-4deg)",
        zIndex: 9501,
        padding: "16px 24px 12px",
        background: "var(--ss-mint)",
        border: "3px solid var(--ss-mulberry)",
        boxShadow: "6px 6px 0 var(--ss-mulberry)",
        fontFamily: "Filepile, VT323, monospace",
        fontSize: 64,
        color: "var(--ss-navy)",
        pointerEvents: "none",
      }}>
        ★ secret stones ★
      </div>
    </>
  );
}

window.App = App;