// -----------------------------------------------------------------------------
// House-Ka — Homes-for-sale aggregator (Canada outside Québec, Ontario first)
// A Groupe-Ka application — contact@groupe-ka.com
// pages/Contact.tsx : shared Groupe KA contact page (English).
// -----------------------------------------------------------------------------

const CONTACTS = [
  { role: "Projects and data", email: "contact@groupe-ka.com" },
  { role: "Media", email: "info@groupe-ka.com" },
  { role: "Legal and privacy", email: "admin@groupe-ka.com" },
];

const SITES = [
  { wordmark: "Groupe·Ka", domain: "www.groupe-ka.com", tagline: "the Groupe KA portal" },
  { wordmark: "Immo·Ka", domain: "www.immo-ka.com", tagline: "homes for sale in Québec" },
  { wordmark: "Lou·Ka", domain: "www.lou-ka.com", tagline: "rentals in Québec" },
  { wordmark: "Vrai·Prix", domain: "www.vrai-prix.com", tagline: "Québec market-value estimates" },
  { wordmark: "Auto·Ka", domain: "www.auto-ka.com", tagline: "used cars" },
  { wordmark: "Job·Ka", domain: "www.job-ka.com", tagline: "job listings" },
];

export default function ContactPage() {
  return (
    <div className="container contact">
      <span className="kicker">Contact</span>
      <h1>
        Write to <span className="hl">Groupe KA</span>
      </h1>
      <p className="lede">
        House-Ka is a service of <b>Groupe-Ka</b> — an ecosystem of data
        aggregators. All the platforms share the same contact channels.
      </p>

      <div className="contact-cards">
        {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>House-Ka is an independent aggregator — it is not a brokerage and is
        not affiliated with the sources it indexes.</b> Every listing links back
        to the original page of the brokerage: for a specific property, contact
        the listing agent shown on the page directly.
      </p>

      <div className="contact-hub">
        <a
          className="btn btn-primary"
          href="https://www.groupe-ka.com"
          target="_blank"
          rel="noopener noreferrer"
        >
          Visit the groupe-ka.com portal ↗
        </a>
      </div>

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