AuroraHero

import React, { useState, useEffect } from "react";
import AuroraHero from "@/components/ui/aurora-hero";

function DemoOne() {
  const [panelOpen, setPanelOpen] = useState(false);
  const [theme, setTheme] = useState<"dark" | "light">("dark");
  const [cfg, setCfg] = useState({
    ribbonCount: 4,
    speed: 0.006,
    complexity: 0.012,
    amplitude: 250,
    mouseIntensity: 0.8,
    pulseEffect: true,
    palette: "Arctic Frost",
  });

  // Toggle panel (H) and randomize (R)
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (/input|select|textarea/i.test((e.target as HTMLElement).tagName)) return;
      if (e.key.toLowerCase() === "h") setPanelOpen((o) => !o);
      if (e.key.toLowerCase() === "r") {
        const rand = (min: number, max: number) => Math.random() * (max - min) + min;
        setCfg((c) => ({
          ...c,
          ribbonCount: Math.floor(rand(3, 6)),
          speed: rand(0.004, 0.01),
          complexity: rand(0.008, 0.02),
          amplitude: rand(150, 350),
          mouseIntensity: rand(0.5, 1.5),
          palette: Object.keys(palettes)[Math.floor(Math.random() * Object.keys(palettes).length)],
        }));
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  return (
    <AuroraHero
      cfg={cfg}
      setCfg={setCfg}
      panelOpen={panelOpen}
      setPanelOpen={setPanelOpen}
      theme={theme}
      setTheme={setTheme}
    />
  );
}

// Shared palettes for randomization in App
const palettes = {
  "Arctic Frost": [],
  "Solar Flare": [],
  Nebula: [],
  "Forest Spirit": [],
  Classic: [],
};

export default DemoOne;