export default function Home() {
  const hazardStripe = {
    backgroundImage:
      "repeating-linear-gradient(45deg, #facc15 0 24px, #18181b 24px 48px)",
  };

  return (
    <main className="min-h-screen bg-white font-mono text-black">
      {/* Top hazard stripe */}
      <div className="h-6 w-full" style={hazardStripe} aria-hidden="true" />

      <div className="mx-auto max-w-3xl px-6 py-16 sm:py-24">
        {/* Status pill */}
        <div className="mb-10 inline-flex items-center gap-2 border-2 border-black bg-yellow-300 px-3 py-1.5 text-[11px] font-black uppercase tracking-[0.2em] text-black">
          <span className="h-1.5 w-1.5 bg-black" aria-hidden="true" />
          Status: Scaffold
        </div>

        {/* Headline */}
        <h1 className="text-5xl font-black uppercase tracking-tight text-black sm:text-7xl">
          CM Bot V2
        </h1>

        {/* Subhead */}
        <div className="mt-4 flex items-baseline gap-3">
          <span className="text-xs font-bold uppercase tracking-[0.2em] text-zinc-400">
            //
          </span>
          <p className="text-sm font-bold uppercase tracking-[0.2em] text-zinc-700 sm:text-base">
            cm-web-next scaffold
          </p>
        </div>

        {/* Notice */}
        <div className="mt-14 border-2 border-black bg-white p-6 sm:p-8">
          <div className="mb-3 text-[10px] font-black uppercase tracking-[0.25em] text-zinc-400">
            Notice
          </div>
          <p className="text-base sm:text-xl">
            This is a placeholder. The real dashboard lands in{" "}
            <span className="bg-yellow-300 px-1.5 font-black">B2</span>.
          </p>
        </div>

        {/* Smoke test */}
        <div className="mt-6 border-2 border-dashed border-black/50 bg-zinc-50 p-6 sm:p-8">
          <div className="mb-4 text-[10px] font-black uppercase tracking-[0.25em] text-zinc-400">
            Smoke Test
          </div>
          <p className="text-sm text-zinc-800 sm:text-base">
            Verify the API proxy reaches{" "}
            <code className="bg-black px-1.5 py-0.5 font-mono text-xs text-yellow-300">
              api-server:3000
            </code>
            :
          </p>
          <a
            href="/api/414322309db5c06d/"
            className="mt-5 inline-block border-2 border-black bg-yellow-300 px-5 py-2.5 text-xs font-black uppercase tracking-[0.2em] text-black hover:bg-black hover:text-yellow-300"
          >
            GET /api/414322309db5c06d/ →
          </a>
        </div>

        {/* Footer marker */}
        <div className="mt-20 flex items-center gap-4 text-[10px] font-black uppercase tracking-[0.25em] text-zinc-500">
          <span>B1</span>
          <span className="h-px flex-1 bg-zinc-300" aria-hidden="true" />
          <span>not for production</span>
        </div>
      </div>

      {/* Bottom hazard stripe */}
      <div className="h-6 w-full" style={hazardStripe} aria-hidden="true" />
    </main>
  );
}