import { ORIGIN_KEYS, ORIGIN_LABELS } from '../api'
import OriginBadge from '../components/OriginBadge'

const ORIGIN_DESCRIPTIONS: Record<string, string> = {
  A: 'Produits fabriqués au Québec, par des artisans ou des entreprises d’ici.',
  B: 'Produits conçus au Québec, dont la fabrication peut se faire ailleurs.',
  C: 'Boutique québécoise qui vend des produits d’origines diverses.',
  D: 'Catalogue mixte : une partie des produits est fabriquée ou conçue au Québec.',
  E: 'Origine en cours de vérification par notre équipe.',
}

export default function About() {
  return (
    <div className="page about">
      <h1>À propos de Fabri-Ka</h1>

      <div className="about-content">
        <p>
          <strong>Fabri-Ka</strong> agrège les catalogues publics des boutiques
          en ligne québécoises pour offrir un seul point d'entrée vers les
          produits d'ici. Pensez-y comme un moteur de recherche dédié aux
          produits québécois : on rassemble, on classe, on met en valeur.
        </p>
        <p>
          Chaque produit affiché sur Fabri-Ka <strong>renvoie directement vers
          la boutique d'origine</strong>. Aucune vente n'est effectuée sur
          Fabri-Ka : les prix, les stocks et les transactions appartiennent
          entièrement aux boutiques sources. Nous ne prélevons aucune
          commission et nous ne modifions aucune donnée commerciale.
        </p>

        <h2>La classification A–E</h2>
        <p>
          Pour vous aider à magasiner selon vos valeurs, chaque boutique est
          classée selon l'origine de ses produits :
        </p>
        <ul className="about-origins">
          {ORIGIN_KEYS.map((key) => (
            <li key={key}>
              <OriginBadge origin={key} />
              <div>
                <strong>{ORIGIN_LABELS[key]}</strong>
                <p>{ORIGIN_DESCRIPTIONS[key]}</p>
              </div>
            </li>
          ))}
        </ul>

        <h2>Contact</h2>
        <p>
          Vous êtes une boutique québécoise et souhaitez être ajoutée (ou
          retirée) ? Une erreur de classification ? Écrivez-nous :{' '}
          <a href="mailto:contact@spboucher.ai">contact@spboucher.ai</a>
        </p>
      </div>
    </div>
  )
}