// -----------------------------------------------------------------------------
// Rent-Ka — Rental listings aggregator (Canada, outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// pages/Contact.tsx: shared Groupe KA contact page (ecosystem.json data)
// -----------------------------------------------------------------------------
import { useEffect } from "react";
import eco from "../ka/ecosystem.json";

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

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

  return (
    <div className="container contact-page">
      <span className="kicker">Contact</span>
      <h1>
        Write to <span className="hl">Groupe KA</span>
      </h1>
      <p className="lede">
        Rent-Ka — {eco.sites.find((s) => s.id === "rent-ka")?.tagline?.toLowerCase()} —
        is a service of {eco.org.name}. {eco.org.tagline} All requests go
        through the addresses below.
      </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> The listings displayed on Rent-Ka come from
        the public websites of property managers; every listing links back to
        the original ad. For any question about a rental, contact the manager
        shown on the listing directly.
      </p>

      <div className="contact-hub">
        <span className="klabel">The ·Ka ecosystem</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">
            Visit the groupe-ka.com portal →
          </a>
        </p>
      </div>
    </div>
  );
}