import logoSvg from '../../imports/logo.svg';

export default function AboutMeatloafPage() {
  return (
    <div className="max-w-lg mx-auto py-12 px-4 flex flex-col items-center gap-6">
      <img src={logoSvg} alt="Meatloaf" className="w-24 h-24" />

      <div className="text-center">
        <h1 className="text-2xl font-bold">Meatloaf</h1>
        <p className="text-neutral-500 text-sm mt-1">Multi-device Commodore 64 Emulator</p>
      </div>

      <div className="w-full rounded-xl overflow-hidden border border-neutral-200 divide-y divide-neutral-200 text-sm">
        {[
          ['Project',  'Meatloaf Manipulator'],
          ['Platform', 'Commodore 64 / C128'],
          ['Website',  'meatloaf.cc'],
          ['GitHub',   'github.com/idolpx/meatloaf'],
        ].map(([label, value]) => (
          <div key={label} className="flex items-center px-4 py-3 bg-white gap-3">
            <span className="text-neutral-500 w-24 flex-shrink-0">{label}</span>
            <span className="font-medium text-neutral-900">{value}</span>
          </div>
        ))}
      </div>

      <p className="text-xs text-neutral-400 text-center">
        Meatloaf is open-source firmware for retro computing enthusiasts.<br />
        Released under the GPL3 License.
      </p>
    </div>
  );
}