import logoUrl from './assets/botsu6.png';

type ServiceLink = {
  label: string;
  href: string;
};

const serviceLinks: ServiceLink[] = [
  {
    label: 'Administration Proxmox',
    href: 'https://admin.botsu.cloud',
  },
  {
    label: 'Monitoring',
    href: 'https://monitoring.botsu.cloud',
  },
  {
    label: 'Uptime',
    href: 'https://uptime.botsu.cloud',
  },
  {
    label: 'Git',
    href: 'https://git.botsu.cloud',
  },
  {
    label: 'Wiki Perso',
    href: 'https://wiki.botsu.cloud',
  },
  {
    label: "Génération d'image",
    href: 'https://comfyui.botsu.cloud',
  },
  {
    label: 'Génération de texte',
    href: 'https://codex.botsu.cloud',
  },
];

function ArrowIcon() {
  return (
    <svg className="arrow" viewBox="0 0 28 18" aria-hidden="true" focusable="false">
      <path
        d="M1.5 9H25M18 2L25 9L18 16"
        fill="none"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="3"
      />
    </svg>
  );
}

export default function App() {
  return (
    <main className="page-shell">
      <header className="site-header" aria-label="Botsu Cloud">
        <img className="site-logo" src={logoUrl} alt="Botsu Cloud" />
      </header>

      <section className="intro" aria-labelledby="page-title">
        <h1 id="page-title">botsu.cloud</h1>
      </section>

      <section aria-label="Services Botsu Cloud">
        <ul className="service-list">
          {serviceLinks.map((link) => (
            <li key={link.href}>
              <a href={link.href}>
                <span>{link.label}</span>
                <ArrowIcon />
              </a>
            </li>
          ))}
        </ul>
      </section>
    </main>
  );
}
