import Link from 'next/link'

/**
 * Every pilot car screen in Phase 1 is a design replica on demo data.
 * Nash, 2026-09-12: "we don't use a real email, and we don't use the real
 * credentials to log in… everything that's test is for admin only to view."
 * Same amber style as the company page's design-preview strip.
 */
export function PilotPreviewBanner({ screen }: { screen: string }) {
  const links = [
    ['/signup/pilot', 'Signup'],
    ['/pd-dashboard', 'Pilot Dispatch'],
    ['/pc-dashboard', 'Pilot Driver'],
    ['/pc-dashboard?onboarding=new', 'Pilot Driver · just signed up'],
    ['/pd-dashboard?onboarding=new', 'Pilot Dispatch · just signed up'],
    ['/pd-trip-workspace/HH-2041', 'Trip workspace · dispatch'],
    ['/pd-trip-workspace/HH-2061', 'Trip workspace · nothing shared'],
    ['/admin/pilot-preview/HH-2041?as=carrier', 'My Pilot tab · carrier view'],
    ['/admin/pilot-preview/HH-2057?as=broker', 'My Pilot tab · broker view'],
  ] as const
  return (
    <div className="rounded-xl border border-amber-300 bg-amber-50 px-4 py-2.5 text-xs text-amber-900">
      <span className="font-semibold">Design preview — {screen}.</span>{' '}
      Demo data; nothing you do here is saved, no email is sent, no account is created. Admin only.
      <span className="ml-3 inline-flex flex-wrap gap-1.5">
        {links.map(([href, label]) => (
          <Link key={href} href={href} className="rounded-full bg-white/70 px-2.5 py-0.5 font-semibold hover:bg-white">
            {label}
          </Link>
        ))}
      </span>
    </div>
  )
}