import React from "react";
import { Link } from "wouter";
import { ArrowLeft, Shield, Brain, BookOpen, Scale, ExternalLink } from "lucide-react";
import { Button } from "@/components/ui/button";

const TEXTES_SOURCES = [
  {
    sigle: "DUDH",
    titre: "Déclaration universelle des droits de l'homme",
    org: "Organisation des Nations Unies",
    annee: "1948",
    url: "https://www.un.org/fr/about-us/universal-declaration-of-human-rights",
    articles: [
      { num: "Art. 1", texte: "Tous les êtres humains naissent libres et égaux en dignité et en droits. Ils sont doués de raison et de conscience et doivent agir les uns envers les autres dans un esprit de fraternité." },
      { num: "Art. 2", texte: "Chacun peut se prévaloir de tous les droits et de toutes les libertés proclamés dans la présente Déclaration, sans distinction aucune, notamment de race, de couleur, de sexe, de langue, de religion, d'opinion politique ou de toute autre opinion, d'origine nationale ou sociale, de fortune, de naissance ou de toute autre situation." },
      { num: "Art. 19", texte: "Tout individu a droit à la liberté d'opinion et d'expression, ce qui implique le droit de ne pas être inquiété pour ses opinions et celui de chercher, de recevoir et de répandre, sans considérations de frontières, les informations et les idées par quelque moyen d'expression que ce soit." },
      { num: "Art. 20", texte: "Toute propagande en faveur de la guerre est interdite par la loi. Tout appel à la haine nationale, raciale ou religieuse qui constitue une incitation à la discrimination, à l'hostilité ou à la violence est interdit par la loi." },
    ],
  },
  {
    sigle: "PIDCP",
    titre: "Pacte international relatif aux droits civils et politiques",
    org: "Organisation des Nations Unies",
    annee: "1966",
    url: "https://www.ohchr.org/fr/instruments-mechanisms/instruments/international-covenant-civil-and-political-rights",
    articles: [
      { num: "Art. 20", texte: "Tout appel à la haine nationale, raciale ou religieuse qui constitue une incitation à la discrimination, à l'hostilité ou à la violence est interdit par la loi." },
      { num: "Art. 25", texte: "Tout citoyen a le droit et la possibilité, sans restrictions déraisonnables, de prendre part à la direction des affaires publiques, soit directement, soit par l'intermédiaire de représentants librement choisis." },
      { num: "Art. 26", texte: "Toutes les personnes sont égales devant la loi et ont droit sans discrimination à une égale protection de la loi." },
    ],
  },
  {
    sigle: "CEDH",
    titre: "Convention européenne des droits de l'homme",
    org: "Conseil de l'Europe",
    annee: "1950",
    url: "https://www.echr.coe.int/european-convention-on-human-rights",
    articles: [
      { num: "Art. 10", texte: "Toute personne a droit à la liberté d'expression. Ce droit comprend la liberté d'opinion et la liberté de recevoir ou de communiquer des informations ou des idées sans qu'il puisse y avoir ingérence d'autorités publiques et sans considération de frontière." },
      { num: "Art. 17", texte: "Aucune des dispositions de la présente Convention ne peut être interprétée comme impliquant pour un État, un groupement ou un individu, un droit quelconque de se livrer à une activité ou d'accomplir un acte visant à la destruction des droits ou libertés reconnus dans la présente Convention." },
    ],
  },
  {
    sigle: "Charte UE",
    titre: "Charte des droits fondamentaux de l'Union européenne",
    org: "Union européenne",
    annee: "2000 / entrée en vigueur 2009",
    url: "https://www.europarl.europa.eu/charter/pdf/text_fr.pdf",
    articles: [
      { num: "Art. 1", texte: "La dignité humaine est inviolable. Elle doit être respectée et protégée." },
      { num: "Art. 21", texte: "Est interdite toute discrimination fondée notamment sur le sexe, la race, la couleur, les origines ethniques ou sociales, les caractéristiques génétiques, la langue, la religion ou les convictions, les opinions politiques ou toute autre opinion." },
    ],
  },
  {
    sigle: "Convention génocide",
    titre: "Convention pour la prévention et la répression du crime de génocide",
    org: "Organisation des Nations Unies",
    annee: "1948",
    url: "https://www.un.org/fr/genocideprevention/genocide-convention.shtml",
    articles: [
      { num: "Art. III (c)", texte: "L'incitation directe et publique à commettre le génocide est punie." },
    ],
  },
  {
    sigle: "Statut de Rome",
    titre: "Statut de Rome de la Cour pénale internationale",
    org: "Cour pénale internationale",
    annee: "1998",
    url: "https://www.icc-cpi.int/sites/default/files/RS-Fra.pdf",
    articles: [
      { num: "Art. 7", texte: "On entend par « crime contre l'humanité » l'un quelconque des actes ci-après lorsqu'il est commis dans le cadre d'une attaque généralisée ou systématique lancée contre toute population civile et en connaissance de cette attaque : persécution de tout groupe ou de toute collectivité identifiable pour des motifs d'ordre politique, racial, national, ethnique, culturel ou religieux." },
    ],
  },
  {
    sigle: "CERD",
    titre: "Convention internationale sur l'élimination de toutes les formes de discrimination raciale",
    org: "Organisation des Nations Unies",
    annee: "1965",
    url: "https://www.ohchr.org/fr/instruments-mechanisms/instruments/international-convention-elimination-all-forms-racial",
    articles: [
      { num: "Art. 4", texte: "Les États parties condamnent toute propagande et toutes organisations qui s'inspirent d'idées ou de théories fondées sur la supériorité d'une race ou d'un groupe de personnes d'une certaine couleur ou d'une certaine origine ethnique, ou qui prétendent justifier ou encourager toute forme de haine et de discrimination raciales." },
    ],
  },
];

export default function About() {
  return (
    <div className="min-h-[calc(100vh-4rem)] bg-background flex justify-center py-12 px-4 md:px-8">
      <div className="max-w-3xl w-full">
        <Link href="/">
          <Button variant="ghost" size="sm" className="mb-8 font-mono tracking-widest uppercase text-xs">
            <ArrowLeft className="mr-2 h-4 w-4" /> Retour à l'agora
          </Button>
        </Link>

        <header className="mb-12 space-y-4">
          <h1 className="text-4xl md:text-5xl font-serif font-bold text-primary">
            À propos
          </h1>
          <p className="text-xl font-serif text-muted-foreground leading-relaxed">
            Un outil simple pour recueillir les propositions citoyennes, les synthétiser et les rendre lisibles par les élus qui nous représentent.
          </p>
        </header>

        <div className="space-y-12">
          <section className="space-y-4">
            <div className="flex items-center gap-3 text-xl font-bold font-serif border-b border-border/50 pb-2">
              <BookOpen className="h-6 w-6 text-primary" />
              <h2>Le concept</h2>
            </div>
            <p className="leading-relaxed text-foreground/90 font-serif text-lg">
              Cette plateforme permet à tout citoyen de soumettre une proposition, une demande ou une préoccupation. Ces contributions sont agrégées et synthétisées automatiquement pour produire un résumé clair, directement utilisable par des représentants politiques, des associations ou des collectivités.
            </p>
          </section>

          <section className="space-y-4">
            <div className="flex items-center gap-3 text-xl font-bold font-serif border-b border-border/50 pb-2">
              <Shield className="h-6 w-6 text-primary" />
              <h2>Le filtre démocratique</h2>
            </div>
            <p className="leading-relaxed text-foreground/90 font-serif text-lg">
              Pour maintenir un espace de dialogue constructif, chaque contribution est évaluée automatiquement par un agent d'intelligence artificielle. Les contenus contraires aux droits fondamentaux reconnus par le droit international ne sont pas intégrés à la synthèse.
            </p>
            <div className="bg-muted/30 p-6 rounded-none border-l-4 border-primary">
              <h3 className="font-bold font-mono uppercase tracking-widest text-sm mb-3">
                Valeurs protégées
              </h3>
              <ul className="space-y-2 font-serif list-disc pl-5">
                <li>La dignité humaine universelle et inviolable</li>
                <li>L'égalité et la non-discrimination</li>
                <li>La liberté d'expression dans le respect des droits d'autrui</li>
                <li>Le refus de la haine, de la violence et des appels à la persécution</li>
                <li>L'attachement aux processus démocratiques et pacifiques</li>
              </ul>
            </div>
            <p className="leading-relaxed text-foreground/90 font-serif text-lg">
              Lorsqu'une contribution n'est pas retenue, l'auteur en est informé sans que sa contribution ne soit rendue publique.
            </p>
          </section>

          <section className="space-y-4">
            <div className="flex items-center gap-3 text-xl font-bold font-serif border-b border-border/50 pb-2">
              <Brain className="h-6 w-6 text-primary" />
              <h2>La synthèse</h2>
            </div>
            <p className="leading-relaxed text-foreground/90 font-serif text-lg">
              Dès qu'une contribution est intégrée, un second agent relit l'ensemble des propositions reçues et produit un résumé structuré par thèmes. Ce document, mis à jour en temps réel, est conçu pour être directement transmis à des élus, des services publics ou toute instance décisionnelle.
            </p>
          </section>

          <section className="space-y-6">
            <div className="flex items-center gap-3 text-xl font-bold font-serif border-b border-border/50 pb-2">
              <Scale className="h-6 w-6 text-primary" />
              <h2>Fondements juridiques</h2>
            </div>
            <p className="leading-relaxed text-foreground/90 font-serif text-lg">
              La modération s'appuie sur les textes internationaux suivants. Les articles cités fondent les critères d'acceptation et de refus des contributions.
            </p>

            <div className="space-y-8">
              {TEXTES_SOURCES.map((source) => (
                <div key={source.sigle} className="border border-border/40 p-6 space-y-4">
                  <div className="flex items-start justify-between gap-4">
                    <div>
                      <span className="font-mono text-xs font-bold text-primary bg-primary/10 px-2 py-0.5 rounded-sm">
                        {source.sigle}
                      </span>
                      <h3 className="font-serif font-bold text-lg mt-2">{source.titre}</h3>
                      <p className="text-xs font-mono text-muted-foreground mt-0.5">
                        {source.org} · {source.annee}
                      </p>
                    </div>
                    <a
                      href={source.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex-shrink-0 text-muted-foreground hover:text-primary transition-colors"
                      title="Consulter le texte officiel"
                    >
                      <ExternalLink className="h-4 w-4" />
                    </a>
                  </div>

                  <div className="space-y-3">
                    {source.articles.map((art) => (
                      <div key={art.num} className="border-l-2 border-primary/30 pl-4">
                        <p className="text-xs font-mono font-bold text-primary/80 mb-1">{art.num}</p>
                        <p className="font-serif text-sm text-foreground/80 leading-relaxed italic">
                          «&nbsp;{art.texte}&nbsp;»
                        </p>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </section>
        </div>
      </div>
    </div>
  );
}