/**
 * =============================================================================
 * Job·Ka — Groupe KA
 * Auteur  : Simon-Pierre Boucher
 * Contact : contact@spboucher.ai
 * Fichier : frontend/src/pages/Contact.tsx
 * Rôle    : Page Contact commune Groupe KA (données ka/ecosystem.json)
 * Créé    : 2026-08-17   Modifié : 2026-08-17
 * =============================================================================
 */
import { useEffect } from "react";
import eco from "../ka/ecosystem.json";

export default function ContactPage() {
  useEffect(() => {
    document.title = "Contact | Job-Ka — Un service Groupe KA";
    window.scrollTo(0, 0);
  }, []);

  const others = eco.sites.filter((s) => s.id !== "job-ka");

  return (
    <div className="container contact-page">
      <span className="kicker">Contact</span>
      <h1>
        Écrire au <span className="hl">Groupe KA</span>
      </h1>
      <p className="lede">
        Job-Ka — {eco.sites.find((s) => s.id === "job-ka")?.tagline?.toLowerCase()} —
        est un service du {eco.org.name}. {eco.org.tagline} Toutes les demandes
        passent par les adresses ci-dessous.
      </p>

      <div className="contact-grid">
        {eco.contacts.map((c) => (
          <div className="card contact-card" key={c.email}>
            <span className="klabel">{c.role}</span>
            <a className="mail" href={`mailto:${c.email}`}>{c.email}</a>
          </div>
        ))}
      </div>

      <p className="contact-note">
        <b>{eco.org.disclaimer}</b> Les offres affichées sur Job-Ka proviennent
        des pages carrières publiques des employeurs québécois ; chaque fiche
        renvoie vers l'offre originale. Pour postuler ou poser une question sur
        un poste, adressez-vous directement à l'employeur indiqué sur la fiche.
      </p>

      <div className="contact-hub">
        <span className="klabel">L'écosystème ·Ka</span>
        <ul className="contact-sites">
          {others.map((s) => (
            <li key={s.id}>
              <a href={`https://${s.domain}`} target="_blank" rel="noopener noreferrer">
                {s.wordmark}
              </a>
            </li>
          ))}
        </ul>
        <p style={{ marginTop: 18, display: "flex", flexWrap: "wrap", gap: 10 }}>
          <a className="btn btn-primary" href={eco.hub.url} target="_blank" rel="noopener noreferrer">
            Visiter le portail groupe-ka.com →
          </a>
          <a className="btn" href={`${eco.hub.url}${eco.hub.loginPath}`} target="_blank" rel="noopener noreferrer">
            Créer un compte KA ID
          </a>
        </p>
      </div>
    </div>
  );
}