// ==============================================================================
// Author: Simon-Pierre Boucher <contact@spboucher.ai>
// File:   pages/Contact.tsx
// Desc:   Page Contact — infos officielles du Groupe KA tirées de
//         ka-ui/ecosystem.json (courriels + rôles, avertissement, hub,
//         écosystème des sites), composants du design system éditorial sharp.
// ==============================================================================
import { useEffect } from "react";
import eco from "../ka/ecosystem.json";

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

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

  return (
    <div className="contact-page container">
      <span className="kicker">Contact</span>
      <h1>
        Écrire au <span className="hl">Groupe KA</span>
      </h1>
      <p className="sub">
        Resto-Ka est un service du Groupe KA. Toutes les demandes — projets,
        médias, données, légal — passent par les adresses officielles du groupe.
      </p>

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

      <p className="contact-note">
        <b>{eco.org.disclaimer}</b> Chaque fiche de Resto-Ka renvoie au
        restaurant original et affiche le contexte de chaque prix.
      </p>

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

      <h2>L'écosystème ·Ka</h2>
      <p className="sub" style={{ marginBottom: 0 }}>{eco.org.tagline}</p>
      <ul className="contact-sites">
        {sites.map((s) => (
          <li key={s.id}>
            <a href={`https://${s.domain}`} target="_blank" rel="noopener noreferrer"
              title={s.tagline}>
              <span className="dot" style={{ background: s.accent }} aria-hidden="true" />
              {s.wordmark}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}