/**
 * Trouve-KA — page /contact (coordonnées communes Groupe KA)
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 *
 * Les coordonnées viennent de ka/ecosystem.json (source canonique ka-ui) :
 * 3 courriels + rôles, avertissement agrégateur, liens légaux du hub et
 * création de compte KA ID sur groupe-ka.com/connexion.
 */

import type { Metadata } from "next";
import eco from "@/ka/ecosystem.json";

export const metadata: Metadata = {
  title: "Contact",
  description:
    "Joindre Groupe KA — projets et partenariats, médias, légal et vie privée (Loi 25). Trouve-KA est un service Groupe KA.",
};

export default function ContactPage() {
  return (
    <main id="contenu" className="mx-auto w-full max-w-3xl flex-1 px-4 py-12 sm:px-6">
      <p className="kicker">Un service Groupe KA</p>
      <h1 className="mt-3 text-4xl font-bold sm:text-5xl">
        Nous <span className="hl">joindre</span>
      </h1>
      <p className="mt-4 max-w-xl text-[15px] text-ink-2">
        Trouve-KA — le moteur de recherche du Groupe KA — est un service de{" "}
        <a
          href={eco.hub.url}
          target="_blank"
          rel="noopener noreferrer"
          className="font-bold text-ink underline underline-offset-4 hover:decoration-[var(--accent)]"
        >
          {eco.org.name}
        </a>
        . {eco.org.tagline}
      </p>

      <div className="mt-8 grid gap-4 sm:grid-cols-1">
        {eco.contacts.map((c) => (
          <div key={c.email} className="gk-card flex flex-col gap-1 p-5">
            <span className="klabel">{c.role}</span>
            <a
              href={`mailto:${c.email}`}
              className="gk-mono text-[15px] font-bold text-ink underline-offset-4 hover:text-[var(--accent-deep)] hover:underline"
            >
              {c.email}
            </a>
          </div>
        ))}
      </div>

      <p className="mt-8 border-l-2 border-[var(--accent)] pl-4 text-[14px] text-ink-2">
        <b className="text-ink">{eco.org.disclaimer}</b>
      </p>

      <div className="gk-card mt-8 p-5">
        <span className="klabel">Compte KA ID</span>
        <p className="mt-2 text-[14px] text-ink-2">
          Un seul compte pour tout l&apos;écosystème ·Ka. La création de compte se
          fait sur le hub&nbsp;:
        </p>
        <a
          href={`${eco.hub.url}${eco.hub.loginPath}`}
          target="_blank"
          rel="noopener noreferrer"
          className="btn btn-primary mt-4"
        >
          Créer un compte KA
        </a>
      </div>

      <p className="gk-mono mt-10 text-[11px] uppercase tracking-[0.08em] text-ink-3">
        {eco.legal.map((l, i) => (
          <span key={l.href}>
            {i > 0 ? " · " : ""}
            <a
              href={l.href}
              target="_blank"
              rel="noopener noreferrer"
              className="underline-offset-4 hover:text-ink hover:underline"
            >
              {l.label}
            </a>
          </span>
        ))}
      </p>
    </main>
  );
}