import React from "react";

export function Banner() {
  return (
    <div>
      {/* Early access bar */}
      <div className="border-b border-amber-500/20 bg-amber-500/5">
        <div className="mx-auto flex max-w-6xl flex-col gap-1 px-4 py-2 text-[0.75rem] text-amber-100 md:flex-row md:items-center md:justify-between">
          <div className="flex items-center gap-2">
            <span className="rounded-sm bg-amber-500/20 px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.18em] text-amber-300">
              Early Access Beta
            </span>
            <span className="hidden text-amber-100/90 md:inline">
              You&apos;re using an early-access prototype of the Builder. Data,
              pricing, and available parts are still evolving.
            </span>
          </div>
          <span className="text-amber-100/90 md:hidden">
            Early-access prototype. Data and pricing may change.
          </span>
        </div>
      </div>
    </div>
  );
}

export default Banner;