import React from 'react';
import { useStore } from '../stores/store';

const NAV_CONTEXTS = [
  { id: 'accueil', label: 'Accueil', icon: '⌂' },
  { id: 'reunion', label: 'Réunion', icon: '□' },
  { id: 'affaires', label: 'Affaires', icon: '◇' },
  { id: 'gestion', label: 'Gestion', icon: '○' },
];

export default function BottomNav() {
  const { navContext, setNavContext, setPage } = useStore();

  const ouvrirContexte = (id) => {
    setNavContext(id);
    setPage('accueil');
  };

  return (
    <nav className="fixed bottom-0 inset-x-0 z-40 bg-white/95 border-t border-gray-200 pb-safe shadow-[0_-8px_24px_rgba(15,23,42,0.08)]">
      <div className="grid grid-cols-4 gap-1 px-2 pt-2">
        {NAV_CONTEXTS.map((item) => {
          const actif = navContext === item.id;
          return (
            <button
              key={item.id}
              type="button"
              onClick={() => ouvrirContexte(item.id)}
              className={`min-h-[56px] rounded-xl text-xs font-bold flex flex-col items-center justify-center gap-0.5 transition ${
                actif ? 'bg-aa-blue text-white' : 'text-gray-500 active:bg-gray-100'
              }`}
            >
              <span className="text-xl leading-none">{item.icon}</span>
              <span>{item.label}</span>
            </button>
          );
        })}
      </div>
    </nav>
  );
}