// -----------------------------------------------------------------------------
// Lou-Ka — Agrégateur de logements à louer (province de Québec)
// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// pages/Contact.tsx : page Contact commune Groupe KA (données ecosystem.json)
// -----------------------------------------------------------------------------
import { useEffect } from "react";
import eco from "../ka/ecosystem.json";

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

  const others = eco.sites.filter((s) => s.id !== "lou-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">
        Lou-Ka — {eco.sites.find((s) => s.id === "lou-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 annonces affichées sur Lou-Ka proviennent
        des sites publics des gestionnaires immobiliers ; chaque fiche renvoie
        vers l'annonce originale. Pour toute question sur un logement, contactez
        directement le gestionnaire 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 }}>
          <a className="btn btn-primary" href={eco.hub.url} target="_blank" rel="noopener noreferrer">
            Visiter le portail groupe-ka.com →
          </a>
        </p>
      </div>
    </div>
  );
}