// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// pages/Contact.tsx — page /contact commune Groupe KA : les 3 courriels de
// l'écosystème (source : ka/ecosystem.json), l'avertissement d'agrégateur,
// le lien vers le hub et la liste des sites du groupe.
import { useEffect } from 'react'
import eco from '../ka/ecosystem.json'

export default function Contact() {
  useEffect(() => {
    document.title = 'Contact — Fabri-Ka — Un service Groupe KA'
  }, [])

  return (
    <div className="page contact-page">
      <span className="kicker">Nous joindre</span>
      <h1>Contact</h1>
      <p className="contact-lede">
        Fabri-Ka est un service du <b>Groupe KA</b> — {eco.org.tagline} Les
        coordonnées ci-dessous sont communes à toutes les plateformes de
        l&rsquo;écosystème.
      </p>

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

      <p className="contact-note">
        <b>{eco.org.disclaimer}</b>
      </p>

      <a
        className="contact-hub"
        href={eco.hub.url}
        target="_blank"
        rel="noopener noreferrer"
      >
        Visiter le portail Groupe KA ↗
      </a>

      <h2>Les sites de l&rsquo;écosystème</h2>
      <ul className="contact-sites">
        {eco.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>
    </div>
  )
}