Chladni Acoustic Grid

// This is a file with a demo for your component
// That's what users will see in the preview
// Create new files in this directory to add more demos

import ChladniAcousticGrid from "@/components/ui/chladni-acoustic-grid";

// ONLY DEFAULT EXPORT WILL BE TREATED AS A DEMO
export default function DemoOne() {
  return (
    <main className="min-h-screen w-full bg-slate-950 flex items-center justify-center p-4 md:p-8">
      {/* Centered Glass Canvas Container */}
      <div className="relative w-full max-w-4xl h-[480px] rounded-3xl overflow-hidden border border-slate-800 bg-slate-900/50 backdrop-blur-xl shadow-2xl flex items-center justify-center group">

        {/* Interactive Acoustic Wave Canvas */}
        <ChladniAcousticGrid
          gridResolution={50}
          frequencyX={3}
          frequencyY={3}
          nodeColor="#f43f5e"
          waveColor="#38bdf8"
        />

        {/* Minimal Overlay Copy */}
        <div className="absolute z-10 text-center px-6 pointer-events-none mix-blend-difference">
          <span className="font-mono text-xs tracking-widest text-rose-400 uppercase">
            Acoustic Nodal Field
          </span>
          <h1 className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter uppercase mt-1">
            Chladni Matrix
          </h1>
          <p className="font-mono text-xs text-slate-400 max-w-xs mx-auto mt-2 opacity-80">
            Hover across the grid to alter resonance frequency modal nodes.
          </p>
        </div>

      </div>
    </main>
  );
}