// -----------------------------------------------------------------------------
// Immo-Ka — Agrégateur de propriétés à vendre (province de Québec)
// Une application du Groupe-Ka — contact@groupe-ka.com
// pages/Contact.tsx : page contact commune Groupe KA — consomme ka/ecosystem.json
//   (courriels + rôles, avertissement agrégateur, hub, liste des sites).
// -----------------------------------------------------------------------------
import eco from "../ka/ecosystem.json";

export default function ContactPage() {
  const sites = eco.sites.filter((s) => s.id !== "immo-ka");
  return (
    <div className="container contact">
      <span className="kicker">Contact</span>
      <h1>
        Écrire au <span className="hl">Groupe KA</span>
      </h1>
      <p className="lede">
        Immo-Ka est un service du <b>{eco.org.name}</b> — {eco.org.tagline.toLowerCase()}{" "}
        Toutes les plateformes partagent les mêmes canaux de contact.
      </p>

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

      <p className="contact-disclaimer">
        <b>{eco.org.disclaimer}</b> Chaque fiche renvoie vers l'annonce originale
        de l'agence ou de la plateforme source : pour une propriété précise,
        contactez directement le courtier indiqué sur la fiche.
      </p>

      <div className="contact-hub">
        <a
          className="btn btn-primary"
          href={eco.hub.url}
          target="_blank"
          rel="noopener noreferrer"
        >
          Visiter le portail groupe-ka.com ↗
        </a>
        <a
          className="btn btn-ghost"
          href={`${eco.hub.url}${eco.hub.loginPath}`}
          target="_blank"
          rel="noopener noreferrer"
        >
          Créer un compte KA ID
        </a>
      </div>

      <section className="contact-sites">
        <h2>L'écosystème ·Ka</h2>
        <ul>
          {sites.map((s) => (
            <li key={s.id}>
              <a href={`https://${s.domain}`} target="_blank" rel="noopener noreferrer">
                <b>{s.wordmark}</b>
                <span>{s.tagline}</span>
              </a>
            </li>
          ))}
        </ul>
      </section>
    </div>
  );
}