import usePageMeta from '../hooks/usePageMeta'

export default function Accessibilite() {
  usePageMeta({
    title: 'Déclaration d’accessibilité | Thé Tip Top',
    description: "État de conformité RGAA du site Thé Tip Top et procédure pour signaler un problème d'accessibilité rencontré sur le site.",
  })

  return (
    <main className="bg-gray-50 min-h-screen px-4 sm:px-6 py-10 sm:py-16">
      <div className="max-w-5xl mx-auto bg-white rounded-2xl shadow p-5 sm:p-8 md:p-10">

        <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#006B6B] mb-4 sm:mb-6">
          Déclaration d'accessibilité
        </h1>

        <p className="text-gray-600 mb-8 sm:mb-10 leading-relaxed text-sm sm:text-base">
          La société Thé Tip Top s'engage à rendre le site de son jeu-concours « 100% Gagnant »
          accessible conformément à l'article 47 de la loi n° 2005-102 du 11 février 2005.
        </p>

        <section className="mb-6 sm:mb-8">
          <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-[#006B6B] mb-2 sm:mb-3">
            État de conformité
          </h2>
          <p className="text-gray-700 leading-relaxed text-sm sm:text-base">
            Le site a été développé en conformité avec les normes d'accessibilité internationales
            WCAG 2.1 niveau AA et le Référentiel Général d'Amélioration de l'Accessibilité
            (RGAA 4.1) afin de garantir une accessibilité maximale aux utilisateurs en situation
            de handicap.
          </p>
        </section>

        <section>
          <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-[#006B6B] mb-2 sm:mb-3">
            Signaler un problème d'accessibilité
          </h2>
          <p className="text-gray-700 leading-relaxed text-sm sm:text-base">
            Si vous rencontrez un obstacle à l'accessibilité sur le site, vous pouvez nous en faire
            part afin que nous puissions y remédier :<br />
            <strong>Email :</strong> thetiptop.gp4@gmail.com
          </p>
        </section>

      </div>
    </main>
  )
}