import { Link } from 'react-router-dom'
import { useAuth} from '../context/AuthContext'

const sections = [
  {
    title: 'Navigation principale',
    links: [
      { label: 'Accueil', to: '/accueil', desc: "Page d'accueil du jeu-concours" },
      { label: 'Règles du jeu', to: '/regles-jeu', desc: 'Comment participer et que gagner' },
      { label: 'Contact', to: '/contact', desc: 'Nous contacter' },
    ],
  },
  {
    title: 'Compte utilisateur',
    links: [
      { label: 'Connexion', to: '/connexion', desc: 'Se connecter à son espace' },
      { label: 'Inscription', to: '/inscription', desc: 'Créer un compte participant' },
      { label: 'Mon profil', to: '/profile', desc: 'Voir et modifier ses informations' },
    ],
  },
  {
    title: 'Jeu-concours',
    links: [
      { label: 'Saisir mon code', to: '/saisir-code-unique', desc: 'Entrer son code ticket' },
      { label: 'Mes gains', to: '/mes-gains', desc: 'Historique de ses participations et lots' },
    ],
  },
  {
    title: 'Espaces professionnels',
    links: [
      { label: 'Espace employé', to: '/employe', desc: 'Vérifier et remettre un lot' },
      { label: 'Tableau de bord admin', to: '/admin', desc: 'Statistiques et gestion du jeu' },
    ],
  },
  {
    title: 'Informations légales',
    links: [
      { label: 'Mentions légales', to: '/mentions-legales', desc: 'Informations légales du site' },
      { label: 'Politique de confidentialité', to: '/confidentialite', desc: 'Gestion des données personnelles' },
    ],
  },
]

export default function Sitemap() {
  const { user } = useAuth()
  const isAdmin = user?.role === 'ADMIN'
  const visibleSections = sections.filter(
    (section) => section.title !== 'Espaces professionnels' || isAdmin
  )
  return (
    <main className="bg-gray-50 min-h-screen px-4 sm:px-6 py-10 sm:py-16">
      <div className="max-w-4xl mx-auto">

        <div className="mb-8 sm:mb-10">
          <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#006B6B] mb-2">
            Plan du site
          </h1>
          <p className="text-gray-500 text-sm sm:text-base">
            Retrouvez ici l'ensemble des pages disponibles sur le site Thé Tip Top.
          </p>
        </div>

        <div className="grid sm:grid-cols-2 gap-6">
          {visibleSections.map((section) => (
            <div key={section.title} className="bg-white rounded-2xl shadow p-5 sm:p-6">
              <h2 className="text-base sm:text-lg font-bold text-[#006B6B] mb-4 pb-2 border-b border-gray-100">
                {section.title}
              </h2>
              <ul className="space-y-3">
                {section.links.map((link) => (
                  <li key={link.to}>
                    <Link
                      to={link.to}
                      className="group flex items-start gap-3"
                    >
                      <svg
                        className="w-4 h-4 mt-0.5 text-[#006B6B] flex-shrink-0"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth={2}
                        viewBox="0 0 24 24"
                      >
                        <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
                      </svg>
                      <div>
                        <p className="text-sm font-medium text-gray-800 group-hover:text-[#006B6B] transition-colors">
                          {link.label}
                        </p>
                        <p className="text-xs text-gray-400 mt-0.5">{link.desc}</p>
                      </div>
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

      </div>
    </main>
  )
}