import type { Metadata } from "next";
import TempoAnalyzer from "@/components/TempoAnalyzer";

export const metadata: Metadata = {
  title: "Analyze Audio",
  description:
    "Upload an audio file, detect the tempo, and generate a CTP tempo map with AI assistance.",
};

export default function AnalyzePage() {
  return (
    <div>
      <div className="mb-8">
        <p className="text-sm text-zinc-500 uppercase tracking-widest mb-2">
          Tempo Analysis
        </p>
        <h1 className="text-3xl font-bold">Generate a Tempo Map</h1>
        <p className="mt-2 text-zinc-400 max-w-xl">
          Upload your audio file. The app detects the BPM in your browser, then
          uses AI to generate a complete{" "}
          <abbr title="Click Track Protocol">CTP</abbr> tempo map — including
          sections, time signatures, and any tempo changes.
        </p>
      </div>

      <div className="mb-6 rounded-lg border border-zinc-800 bg-zinc-900/40 px-5 py-4 text-sm text-zinc-500 space-y-1">
        <p>
          <span className="text-zinc-300 font-medium">How it works:</span>
        </p>
        <ol className="list-decimal pl-5 space-y-1">
          <li>Drop or select any audio file — MP3, WAV, AAC, OGG, FLAC, M4A.</li>
          <li>
            BPM is detected locally in your browser using the Web Audio API.
            Your audio is <strong className="text-zinc-400">never uploaded</strong>.
          </li>
          <li>
            Only the detected BPM, duration, and any metadata you provide are
            sent to the server for AI generation.
          </li>
          <li>
            Claude analyses the song structure and returns a draft CTP document.
            Always verify it against the recording.
          </li>
        </ol>
      </div>

      <TempoAnalyzer />
    </div>
  );
}