export default function CommunauteGracePartage() {
  // ============================================================
  // ÉTAT GLOBAL & BASE DE DONNÉES SIMULÉE (STRUCTURE PRÊTE)
  // ============================================================
  const [page, setPage] = React.useState('home');
  const [currentUser, setCurrentUser] = React.useState(null);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [preselectedPackage, setPreselectedPackage] = React.useState(null);

  // Structure tableaux : 3 packs × 3 tableaux × 7 positions
  const initialTables = {
    goal: [
      { id: 'Goal Tableau 1', members: [] },
      { id: 'Goal Tableau 2', members: [] },
      { id: 'Goal Tableau 3', members: [] }
    ],
    bronze: [
      { id: 'Bronze Tableau 1', members: [] },
      { id: 'Bronze Tableau 2', members: [] },
      { id: 'Bronze Tableau 3', members: [] }
    ],
    platinium: [
      { id: 'Platinium Tableau 1', members: [] },
      { id: 'Platinium Tableau 2', members: [] },
      { id: 'Platinium Tableau 3', members: [] }
    ]
  };
  const [tables, setTables] = React.useState(initialTables);

  // Utilisateurs (admin pré-saisi pour démo)
  const [users, setUsers] = React.useState([
    {
      id: 'u-admin',
      nom: 'System',
      prenom: 'Admin',
      username: 'admin',
      emailOrPhone: 'admin@cgap.ht',
      password: 'admin',
      package: 'platinium',
      referralCode: 'ADMIN-001',
      sponsorId: null,
      tableId: 'Admin',
      position: '-',
      isAdmin: true,
      date: new Date().toLocaleDateString('fr-FR')
    }
  ]);

  // ============================================================
  // UTILITAIRES
  // ============================================================
  const generateId = () => Math.random().toString(36).substring(2, 9);
  const generateRefCode = () => `REF-${Math.random().toString(36).substring(2, 6).toUpperCase()}`;
  const navigate = (p) => {
    setPage(p);
    setMenuOpen(false);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const getUserById = (id) => users.find((u) => u.id === id);
  const getSponsor = (u) => users.find((x) => x.id === u.sponsorId);
  const getFilleuls = (u) => users.filter((x) => x.sponsorId === u.id);
  const getPackageColor = (pkg) => {
    if (pkg === 'goal') return 'emerald';
    if (pkg === 'bronze') return 'amber';
    return 'indigo';
  };

  // ============================================================
  // AUTHENTIFICATION & INSCRIPTION
  // ============================================================
  const handleRegister = (form) => {
    if (users.some((u) => u.username === form.username)) {
      alert("Ce nom d'utilisateur est déjà pris.");
      return;
    }
    if (users.some((u) => u.emailOrPhone === form.emailOrPhone)) {
      alert('Cet email ou numéro est déjà utilisé.');
      return;
    }
    if (form.password !== form.confirmPassword) {
      alert('Les mots de passe ne correspondent pas.');
      return;
    }

    // Placement automatique dans le premier tableau disponible
    const pkgTables = tables[form.package];
    const nextTables = pkgTables.map((t) => ({ ...t, members: [...t.members] }));
    let assignedTable = null;
    let assignedPos = null;

    for (const t of nextTables) {
      if (!assignedTable && t.members.length < 7) {
        t.members.push(form.username + '-' + generateId()); // placeholder temp, remplacé par id ensuite
        assignedTable = t.id;
        assignedPos = t.members.length;
      }
    }

    // Création utilisateur
    const newUser = {
      id: generateId(),
      nom: form.nom,
      prenom: form.prenom,
      username: form.username,
      emailOrPhone: form.emailOrPhone,
      password: form.password,
      package: form.package,
      referralCode: generateRefCode(),
      sponsorId: null,
      tableId: assignedTable || 'En attente',
      position: assignedPos || '-',
      date: new Date().toLocaleDateString('fr-FR')
    };

    // Lien de parrainage
    if (form.sponsorCode) {
      const parrain = users.find(
        (u) => u.referralCode === form.sponsorCode || u.username === form.sponsorCode
      );
      if (parrain) newUser.sponsorId = parrain.id;
    }

    // Remplace le placeholder username par le vrai id
    nextTables.forEach((t) => {
      const idx = t.members.indexOf(form.username + '-' + newUser.id);
      if (idx >= 0) t.members[idx] = newUser.id;
    });

    // Oups, la logique ci-dessus est bancale : refaisons proprement
    // On recalcule proprement
    const finalTables = tables[form.package].map((t) => ({ ...t, members: [...t.members] }));
    let tableId = null;
    let position = null;
    for (const t of finalTables) {
      if (!tableId && t.members.length < 7) {
        t.members.push(newUser.id);
        tableId = t.id;
        position = t.members.length;
        break;
      }
    }

    setTables({ ...tables, [form.package]: finalTables });
    newUser.tableId = tableId || 'En attente';
    newUser.position = position || '-';

    setUsers([...users, newUser]);
    setCurrentUser(newUser);
    navigate('dashboard');
  };

  const handleLogin = (username, password) => {
    const found = users.find(
      (u) => (u.username === username || u.emailOrPhone === username) && u.password === password
    );
    if (found) {
      setCurrentUser(found);
      navigate(found.isAdmin ? 'admin' : 'dashboard');
    } else {
      alert("Nom d'utilisateur / mot de passe incorrect.");
    }
  };

  const handleLogout = () => {
    setCurrentUser(null);
    navigate('home');
  };

  // ============================================================
  // COMPOSANTS RÉUTILISABLES
  // ============================================================
  const Btn = ({ children, onClick, variant = 'primary', className = '' }) => {
    const base =
      'inline-flex items-center justify-center px-6 py-3 rounded-xl font-semibold transition transform hover:scale-105 active:scale-95 shadow-md ';
    const colors = {
      primary: 'bg-emerald-600 text-white hover:bg-emerald-700 ',
      secondary: 'bg-white text-slate-700 border border-slate-200 hover:bg-slate-50 ',
      goal: 'bg-emerald-600 text-white hover:bg-emerald-700 ',
      bronze: 'bg-amber-600 text-white hover:bg-amber-700 ',
      platinium: 'bg-indigo-600 text-white hover:bg-indigo-700 '
    };
    return (
      <button onClick={onClick} className={base + (colors[variant] || colors.primary) + className}>
        {children}
      </button>
    );
  };

  const Card = ({ children, className = '' }) => (
    <div className={'bg-white rounded-2xl shadow-lg border border-slate-100 p-6 ' + className}>
      {children}
    </div>
  );

  const SectionTitle = ({ children, subtitle }) => (
    <div className="text-center mb-10">
      <h2 className="text-3xl md:text-4xl font-bold text-slate-800 mb-3">{children}</h2>
      {subtitle && <p className="text-slate-500 max-w-2xl mx-auto">{subtitle}</p>}
    </div>
  );

  const ContactBlock = ({ compact }) => (
    <div className={'bg-white rounded-2xl shadow border border-slate-100 ' + (compact ? 'p-5' : 'p-8')}>
      <h3 className={'font-bold text-slate-800 ' + (compact ? 'text-lg mb-3' : 'text-2xl mb-6')}>
        Contact & Informations
      </h3>
      <div className="space-y-3 text-slate-600">
        <p>
          <span className="font-semibold text-slate-800">Nom :</span> St Fort Joseph Charly
        </p>
        <p>
          <span className="font-semibold text-slate-800">Adresse :</span> Delmas, Haiti
        </p>
        <p>
          <span className="font-semibold text-slate-800">Email :</span>{' '}
          communautegracepartage@gmail.com
        </p>
        <p>
          <span className="font-semibold text-slate-800">WhatsApp / Téléphone :</span> +509 40928148
        </p>
        <p>
          <span className="font-semibold text-slate-800">Natcash :</span> +509 40928148
        </p>
        <p>
          <span className="font-semibold text-slate-800">MonCash :</span> +509 31966582
        </p>
      </div>
      <div className={'flex gap-3 ' + (compact ? 'mt-4' : 'mt-6')}>
        <a
          href="https://wa.me/50940928148?text=Bonjour%20Communaut%C3%A9%20Grace%20%26%20Partage"
          target="_blank"
          rel="noreferrer"
          className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-emerald-600 text-white text-sm font-medium hover:bg-emerald-700 transition"
        >
          Contact WhatsApp
        </a>
        <a
          href="mailto:communautegracepartage@gmail.com"
          className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-800 text-white text-sm font-medium hover:bg-slate-900 transition"
        >
          Envoyer un Email
        </a>
      </div>
    </div>
  );

  // ============================================================
  // NAVBAR
  // ============================================================
  const Navbar = () => {
    const navLink = (label, target) => (
      <button
        onClick={() => navigate(target)}
        className="text-slate-600 hover:text-emerald-600 font-medium transition"
      >
        {label}
      </button>
    );

    return (
      <nav className="fixed top-0 inset-x-0 z-50 bg-white/90 backdrop-blur border-b border-slate-200">
        <div className="max-w-7xl mx-auto px-4 md:px-6 h-16 flex items-center justify-between">
          <div
            className="flex items-center gap-2 cursor-pointer"
            onClick={() => navigate('home')}
          >
            <div className="w-8 h-8 rounded-lg bg-emerald-600 flex items-center justify-center text-white font-bold">
              G
            </div>
            <span className="font-bold text-slate-800 text-lg tracking-tight hidden sm:inline">
              Grace & Partage
            </span>
          </div>

          <div className="hidden md:flex items-center gap-6">
            {navLink('Accueil', 'home')}
            {navLink('Inscription', 'register')}
            {currentUser && !currentUser.isAdmin && navLink('Mon Tableau', 'dashboard')}
            {currentUser && !currentUser.isAdmin && navLink('Parrainage', 'parrainage')}
            {currentUser?.isAdmin && navLink('Administration', 'admin')}
            {!currentUser ? (
              navLink('Connexion', 'login')
            ) : (
              <button
                onClick={handleLogout}
                className="text-red-600 hover:text-red-700 font-medium transition"
              >
                Déconnexion
              </button>
            )}
          </div>

          <button
            className="md:hidden p-2 text-slate-600"
            onClick={() => setMenuOpen(!menuOpen)}
          >
            <svg viewBox="0 0 24 24" className="w-6 h-6 fill-current">
              {menuOpen ? (
                <path d="M18.3 5.7a1 1 0 0 0-1.4 0L12 10.6 7.1 5.7a1 1 0 0 0-1.4 1.4l4.9 4.9-4.9 4.9a1 1 0 0 0 1.4 1.4l4.9-4.9 4.9 4.9a1 1 0 0 0 1.4-1.4l-4.9-4.9 4.9-4.9a1 1 0 0 0 0-1.4z" />
              ) : (
                <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z" />
              )}
            </svg>
          </button>
        </div>

        {menuOpen && (
          <div className="md:hidden border-t border-slate-200 bg-white px-4 py-4 space-y-3">
            <button onClick={() => navigate('home')} className="block w-full text-left font-medium text-slate-700">
              Accueil
            </button>
            <button onClick={() => navigate('register')} className="block w-full text-left font-medium text-slate-700">
              Inscription
            </button>
            {currentUser && !currentUser.isAdmin && (
              <button onClick={() => navigate('dashboard')} className="block w-full text-left font-medium text-slate-700">
                Mon Tableau
              </button>
            )}
            {currentUser && !currentUser.isAdmin && (
              <button onClick={() => navigate('parrainage')} className="block w-full text-left font-medium text-slate-700">
                Parrainage
              </button>
            )}
            {currentUser?.isAdmin && (
              <button onClick={() => navigate('admin')} className="block w-full text-left font-medium text-slate-700">
                Administration
              </button>
            )}
            {!currentUser ? (
              <button onClick={() => navigate('login')} className="block w-full text-left font-medium text-slate-700">
                Connexion
              </button>
            ) : (
              <button onClick={handleLogout} className="block w-full text-left font-medium text-red-600">
                Déconnexion
              </button>
            )}
          </div>
        )}
      </nav>
    );
  };

  // ============================================================
  // FOOTER
  // ============================================================
  const Footer = () => (
    <footer className="bg-slate-900 text-slate-300 py-12">
      <div className="max-w-7xl mx-auto px-4 md:px-6 grid md:grid-cols-3 gap-8">
        <div>
          <h4 className="text-white font-bold text-lg mb-4">Communauté Grace & Partage</h4>
          <p className="text-sm leading-relaxed">
            Une communauté basée sur la participation, le partage et la solidarité. Rejoignez-nous et
            construisons ensemble un avenir prospère.
          </p>
        </div>
        <div>
          <h4 className="text-white font-bold text-lg mb-4">Contact</h4>
          <ul className="space-y-2 text-sm">
            <li>Nom : St Fort Joseph Charly</li>
            <li>Adresse : Delmas, Haiti</li>
            <li>Email : communautegracepartage@gmail.com</li>
            <li>WhatsApp / Téléphone : +509 40928148</li>
            <li>Natcash : +509 40928148</li>
            <li>MonCash : +509 31966582</li>
          </ul>
        </div>
        <div>
          <h4 className="text-white font-bold text-lg mb-4">Liens rapides</h4>
          <div className="flex flex-col gap-2 text-sm">
            <button onClick={() => navigate('home')} className="text-left hover:text-emerald-400 transition">
              Accueil
            </button>
            <button onClick={() => navigate('register')} className="text-left hover:text-emerald-400 transition">
              Inscription
            </button>
            <button onClick={() => navigate('login')} className="text-left hover:text-emerald-400 transition">
              Connexion
            </button>
          </div>
        </div>
      </div>
      <div className="max-w-7xl mx-auto px-4 md:px-6 mt-8 pt-8 border-t border-slate-800 text-center text-xs">
        © {new Date().getFullYear()} Communauté Grace & Partage. Tous droits réservés.
      </div>
    </footer>
  );

  // ============================================================
  // PAGE D'ACCUEIL
  // ============================================================
  const HomePage = () => {
    const packages = [
      {
        key: 'goal',
        name: 'GOAL',
        price: '$200 HT',
        color: 'emerald',
        features: ['Accès tableau Goal', '7 positions solidaires', 'Support communautaire']
      },
      {
        key: 'bronze',
        name: 'BRONZE',
        price: '$400 HT',
        color: 'amber',
        features: ['Accès tableau Bronze', 'Réseau étendu', 'Accompagnement prioritaire']
      },
      {
        key: 'platinium',
        name: 'PLATINIUM',
        price: '$800 HT',
        color: 'indigo',
        features: ['Accès tableau Platinium', 'Communauté premium', 'Opportunités avancées']
      }
    ];

    const bgGradient = (color) =>
      color === 'emerald'
        ? 'from-emerald-500 to-teal-600'
        : color === 'amber'
        ? 'from-amber-500 to-orange-600'
        : 'from-indigo-500 to-purple-600';

    return (
      <div className="animate-fade-in">
        <section className="relative overflow-hidden bg-slate-900 text-white">
          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-emerald-700/40 via-slate-900 to-slate-900" />
          <div className="max-w-7xl mx-auto px-4 md:px-6 py-24 md:py-32 relative">
            <div className="max-w-3xl mx-auto text-center">
              <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
                Bienvenue dans la <span className="text-emerald-400">Communauté</span> Grace & Partage
              </h1>
              <p className="text-lg md:text-xl text-slate-300 mb-8">
                Une communauté basée sur la participation, le partage et la solidarité.
              </p>
              <Btn onClick={() => navigate('register')}>Rejoindre la communauté</Btn>
            </div>
          </div>
        </section>

        <section className="py-16 md:py-24 bg-slate-50">
          <div className="max-w-7xl mx-auto px-4 md:px-6">
            <SectionTitle subtitle="Choisissez le pack qui correspond à vos objectifs et commencez votre parcours.">
              Nos Packs
            </SectionTitle>

            <div className="grid md:grid-cols-3 gap-8">
              {packages.map((pkg) => (
                <Card key={pkg.key} className="relative overflow-hidden group hover:shadow-2xl transition">
                  <div
                    className={`absolute top-0 inset-x-0 h-2 bg-gradient-to-r ${bgGradient(pkg.color)}`}
                  />
                  <div className="pt-6 pb-2 text-center">
                    <h3 className="text-2xl font-bold text-slate-800 mb-1">{pkg.name}</h3>
                    <div className="text-3xl font-extrabold text-slate-900 mb-4">{pkg.price}</div>
                    <ul className="text-left space-y-3 mb-8 px-4">
                      {pkg.features.map((f, i) => (
                        <li key={i} className="flex items-center gap-2 text-slate-600 text-sm">
                          <span className={`w-2 h-2 rounded-full bg-${pkg.color}-500`} />
                          {f}
                        </li>
                      ))}
                    </ul>
                    <Btn
                      variant={pkg.key}
                      className="w-full"
                      onClick={() => {
                        setPreselectedPackage(pkg.key);
                        navigate('register');
                      }}
                    >
                      Rejoindre {pkg.name}
                    </Btn>
                  </div>
                </Card>
              ))}
            </div>
          </div>
        </section>

        <section className="py-16 md:py-24 bg-white">
          <div className="max-w-7xl mx-auto px-4 md:px-6">
            <SectionTitle subtitle="Nous sommes à votre écoute pour toute question ou assistance.">
              Nous Contacter
            </SectionTitle>
            <div className="max-w-3xl mx-auto">
              <ContactBlock />
            </div>
          </div>
        </section>
      </div>
    );
  };

  // ============================================================
  // PAGE INSCRIPTION
  // ============================================================
  const RegisterPage = () => {
    const [form, setForm] = React.useState({
      nom: '',
      prenom: '',
      username: '',
      emailOrPhone: '',
      password: '',
      confirmPassword: '',
      package: preselectedPackage || 'goal',
      sponsorCode: ''
    });

    const update = (field, value) => setForm((f) => ({ ...f, [field]: value }));

    return (
      <div className="animate-fade-in py-10">
        <div className="max-w-6xl mx-auto px-4 md:px-6 grid lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2">
            <Card>
              <h2 className="text-2xl font-bold text-slate-800 mb-6">Créer mon compte</h2>
              <form
                onSubmit={(e) => {
                  e.preventDefault();
                  handleRegister(form);
                }}
                className="space-y-5"
              >
                <div className="grid md:grid-cols-2 gap-5">
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">Nom</label>
                    <input
                      required
                      className="w-full rounded-xl border border-slate-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                      value={form.nom}
                      onChange={(e) => update('nom', e.target.value)}
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">Prénom</label>
                    <input
                      required
                      className="w-full rounded-xl border border-slate-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                      value={form.prenom}
                      onChange={(e) => update('prenom', e.target.value)}
                    />
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Nom utilisateur</label>
                  <input
                    required
                    className="w-full rounded-xl border border-slate-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                    value={form.username}
                    onChange={(e) => update('username', e.target.value)}
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Email ou Numéro de téléphone</label>
                  <input
                    required
                    type="text"
                    className="w-full rounded-xl border border-slate-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                    value={form.emailOrPhone}
                    onChange={(e) => update('emailOrPhone', e.target.value)}
                  />
                </div>

                <div className="grid md:grid-cols-2 gap-5">
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">Mot de passe</label>
                    <input
                      required
                      type="password"
                      minLength={6}
                      className="w-full rounded-xl border border-slate-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                      value={form.password}
                      onChange={(e) => update('password', e.target.value)}
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">Confirmation mot de passe</label>
                    <input
                      required
                      type="password"
                      className="w-full rounded-xl border border-slate-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                      value={form.confirmPassword}
                      onChange={(e) => update('confirmPassword', e.target.value)}
                    />
                  </div>
                </div>

                <div className="grid md:grid-cols-2 gap-5">
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">Package sélectionné</label>
                    <select
                      className="w-full rounded-xl border border-slate-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 bg-white"
                      value={form.package}
                      onChange={(e) => update('package', e.target.value)}
                    >
                      <option value="goal">Goal — $200 HT</option>
                      <option value="bronze">Bronze — $400 HT</option>
                      <option value="platinium">Platinium — $800 HT</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">Code de parrainage (facultatif)</label>
                    <input
                      type="text"
                      placeholder="Ex: REF-ABC1"
                      className="w-full rounded-xl border border-slate-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                      value={form.sponsorCode}
                      onChange={(e) => update('sponsorCode', e.target.value)}
                    />
                  </div>
                </div>

                <div className="pt-2">
                  <Btn variant="primary" className="w-full md:w-auto">
                    Créer mon compte
                  </Btn>
                </div>
              </form>
            </Card>
          </div>

          <div className="lg:col-span-1 space-y-6">
            <ContactBlock compact />
            <div className="bg-emerald-50 border border-emerald-100 rounded-2xl p-5 text-sm text-emerald-800">
              <p className="font-semibold mb-1">Besoin d'aide pour vous inscrire ?</p>
              <p className="mb-3">
                Contactez-nous directement via WhatsApp ou par email. Notre équipe vous guidera.
              </p>
              <div className="flex flex-col gap-2">
                <a
                  href="https://wa.me/50940928148?text=Bonjour%2C%20j%27ai%20besoin%20d%27aide%20pour%20m%27inscrire."
                  target="_blank"
                  rel="noreferrer"
                  className="inline-flex items-center gap-2 font-medium hover:underline"
                >
                  <span>📱</span> WhatsApp : +509 40928148
                </a>
                <a
                  href="mailto:communautegracepartage@gmail.com"
                  className="inline-flex items-center gap-2 font-medium hover:underline"
                >
                  <span>✉️</span> communautegracepartage@gmail.com
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  };

  // ============================================================
  // PAGE CONNEXION
  // ============================================================
  const LoginPage = () => {
    const [username, setUsername] = React.useState('');
    const [password, setPassword] = React.useState('');

    return (
      <div className="animate-fade-in py-16 flex items-center justify-center">
        <Card className="w-full max-w-md">
          <h2 className="text-2xl font-bold text-slate-800 mb-6 text-center">Connexion</h2>
          <form
            onSubmit={(e) => {
              e.preventDefault();
              handleLogin(username, password);
            }}
            className="space-y-5"
          >
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">
                Nom utilisateur ou Email / Téléphone
              </label>
              <input
                required
                className="w-full rounded-xl border border-slate-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Mot de passe</label>
              <input
                required
                type="password"
                className="w-full rounded-xl border border-slate-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>
            <Btn className="w-full">Se connecter</Btn>
            <p className="text-center text-sm text-slate-500">
              Pas encore de compte ?{' '}
              <button
                type="button"
                onClick={() => navigate('register')}
                className="text-emerald-600 font-semibold hover:underline"
              >
                S'inscrire
              </button>
            </p>
            <p className="text-center text-xs text-slate-400">
              Connexion admin : admin / admin
            </p>
          </form>
        </Card>
      </div>
    );
  };

  // ============================================================
  // PAGE TABLEAU DE BORD MEMBRE
  // ============================================================
  const DashboardPage = () => {
    if (!currentUser) {
      navigate('login');
      return null;
    }

    const sponsor = getSponsor(currentUser);
    const filleuls = getFilleuls(currentUser);
    const userTable = tables[currentUser.package].find((t) => t.id === currentUser.tableId);

    const copyToClipboard = (text) => {
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(text);
      }
      alert('Copié dans le presse-papiers !');
    };

    return (
      <div className="animate-fade-in py-8">
        <div className="max-w-7xl mx-auto px-4 md:px-6">
          <div className="mb-8">
            <h2 className="text-2xl md:text-3xl font-bold text-slate-800">
              Bonjour, {currentUser.prenom} 👋
            </h2>
            <p className="text-slate-500">Voici votre espace personnel et vos informations de table.</p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <Card>
              <div className="text-sm text-slate-500 mb-1">Package</div>
              <div className="text-xl font-bold capitalize text-slate-800">{currentUser.package}</div>
            </Card>
            <Card>
              <div className="text-sm text-slate-500 mb-1">Tableau</div>
              <div className="text-xl font-bold text-slate-800">{currentUser.tableId}</div>
            </Card>
            <Card>
              <div className="text-sm text-slate-500 mb-1">Position</div>
              <div className="text-xl font-bold text-slate-800">{currentUser.position}</div>
            </Card>
            <Card>
              <div className="text-sm text-slate-500 mb-1">Parrain</div>
              <div className="text-xl font-bold text-slate-800">
                {sponsor ? sponsor.username : 'Aucun'}
              </div>
            </Card>
          </div>

          <div className="grid lg:grid-cols-3 gap-8 mb-10">
            <Card className="lg:col-span-2">
              <h3 className="text-lg font-bold text-slate-800 mb-4">Mon tableau ({currentUser.tableId})</h3>
              {userTable ? (
                <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-7 gap-3">
                  {Array.from({ length: 7 }).map((_, idx) => {
                    const memberId = userTable.members[idx];
                    const member = memberId ? getUserById(memberId) : null;
                    const isMe = memberId === currentUser.id;
                    return (
                      <div
                        key={idx}
                        className={`rounded-xl border p-3 text-center transition ${
                          isMe
                            ? 'border-emerald-500 bg-emerald-50 ring-1 ring-emerald-500'
                            : member
                            ? 'border-slate-200 bg-slate-50'
                            : 'border-dashed border-slate-300'
                        }`}
                      >
                        <div className="text-xs text-slate-500 mb-1">Pos {idx + 1}</div>
                        <div className={`font-semibold text-sm truncate ${isMe ? 'text-emerald-700' : 'text-slate-700'}`}>
                          {member ? member.username : 'Libre'}
                        </div>
                      </div>
                    );
                  })}
                </div>
              ) : (
                <p className="text-slate-500">Aucune assignation de table pour le moment.</p>
              )}
            </Card>

            <Card>
              <h3 className="text-lg font-bold text-slate-800 mb-4">Mon parrainage</h3>
              <div className="space-y-4">
                <div>
                  <div className="text-sm text-slate-500 mb-1">Code de parrainage</div>
                  <div className="flex items-center gap-2">
                    <div className="flex-1 bg-slate-100 rounded-lg px-3 py-2 font-mono text-sm text-slate-700 truncate">
                      {currentUser.referralCode}
                    </div>
                    <button
                      onClick={() => copyToClipboard(currentUser.referralCode)}
                      className="p-2 rounded-lg hover:bg-slate-100 text-slate-600 transition"
                      title="Copier"
                    >
                      📋
                    </button>
                  </div>
                </div>
                <div>
                  <div className="text-sm text-slate-500 mb-1">Lien de parrainage</div>
                  <div className="flex items-center gap-2">
                    <div className="flex-1 bg-slate-100 rounded-lg px-3 py-2 font-mono text-xs text-slate-700 truncate">
                      {`https://gracepartage.app/?ref=${currentUser.referralCode}`}
                    </div>
                    <button
                      onClick={() => copyToClipboard(`https://gracepartage.app/?ref=${currentUser.referralCode}`)}
                      className="p-2 rounded-lg hover:bg-slate-100 text-slate-600 transition"
                      title="Copier"
                    >
                      📋
                    </button>
                  </div>
                </div>
                <div className="pt-2">
                  <div className="text-sm font-medium text-slate-700 mb-2">
                    Membres invités : {filleuls.length}
                  </div>
                  {filleuls.length === 0 ? (
                    <p className="text-xs text-slate-500">Vous n'avez pas encore invité de membres.</p>
                  ) : (
                    <ul className="space-y-2 max-h-40 overflow-auto pr-2">
                      {filleuls.map((f) => (
                        <li
                          key={f.id}
                          className="text-sm bg-slate-50 rounded-lg px-3 py-2 flex justify-between"
                        >
                          <span className="font-medium">@{f.username}</span>
                          <span className="text-slate-500 text-xs">{f.package}</span>
                        </li>
                      ))}
                    </ul>
                  )}
                </div>
              </div>
            </Card>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            <Card>
              <h3 className="text-lg font-bold text-slate-800 mb-4">Mon profil</h3>
              <div className="space-y-2 text-sm text-slate-600">
                <p>
                  <span className="font-semibold text-slate-800">Nom :</span> {currentUser.nom}
                </p>
                <p>
                  <span className="font-semibold text-slate-800">Prénom :</span> {currentUser.prenom}
                </p>
                <p>
                  <span className="font-semibold text-slate-800">Email / Téléphone :</span>{' '}
                  {currentUser.emailOrPhone}
                </p>
                <p>
                  <span className="font-semibold text-slate-800">Inscrit le :</span> {currentUser.date}
                </p>
              </div>
            </Card>

            <ContactBlock compact />
          </div>
        </div>
      </div>
    );
  };

  // ============================================================
  // PAGE PARRAINAGE
  // ============================================================
  const ParrainagePage = () => {
    if (!currentUser) {
      navigate('login');
      return null;
    }
    const filleuls = getFilleuls(currentUser);

    return (
      <div className="animate-fade-in py-10">
        <div className="max-w-4xl mx-auto px-4 md:px-6">
          <SectionTitle subtitle="Partagez votre lien et faites grandir votre réseau au sein de la communauté.">
            Centre de Parrainage
          </SectionTitle>

          <div className="grid md:grid-cols-2 gap-8 mb-10">
            <Card className="text-center py-10">
              <div className="text-sm text-slate-500 mb-2">Votre code de parrainage</div>
              <div className="text-3xl font-extrabold tracking-widest text-emerald-700 mb-4">
                {currentUser.referralCode}
              </div>
              <button
                onClick={() => {
                  if (navigator.clipboard) navigator.clipboard.writeText(currentUser.referralCode);
                  alert('Code copié !');
                }}
                className="text-emerald-600 font-semibold hover:underline"
              >
                Copier le code
              </button>
            </Card>

            <Card className="text-center py-10">
              <div className="text-sm text-slate-500 mb-2">Votre lien de parrainage</div>
              <div className="text-sm font-mono text-slate-700 mb-4 break-all px-4">
                {`https://gracepartage.app/?ref=${currentUser.referralCode}`}
              </div>
              <button
                onClick={() => {
                  const link = `https://gracepartage.app/?ref=${currentUser.referralCode}`;
                  if (navigator.clipboard) navigator.clipboard.writeText(link);
                  alert('Lien copié !');
                }}
                className="text-emerald-600 font-semibold hover:underline"
              >
                Copier le lien
              </button>
            </Card>
          </div>

          <Card>
            <h3 className="text-lg font-bold text-slate-800 mb-4">Mes filleuls ({filleuls.length})</h3>
            {filleuls.length === 0 ? (
              <p className="text-slate-500 text-sm">Aucun membre invité pour le moment.</p>
            ) : (
              <div className="overflow-x-auto">
                <table className="min-w-full text-sm text-left">
                  <thead className="bg-slate-50 text-slate-600 font-semibold">
                    <tr>
                      <th className="px-4 py-3 rounded-l-lg">Nom utilisateur</th>
                      <th className="px-4 py-3">Package</th>
                      <th className="px-4 py-3">Tableau</th>
                      <th className="px-4 py-3 rounded-r-lg">Date</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {filleuls.map((f) => (
                      <tr key={f.id}>
                        <td className="px-4 py-3 font-medium text-slate-800">{f.username}</td>
                        <td className="px-4 py-3 capitalize">{f.package}</td>
                        <td className="px-4 py-3">{f.tableId}</td>
                        <td className="px-4 py-3 text-slate-500">{f.date}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </Card>
        </div>
      </div>
    );
  };

  // ============================================================
  // PAGE ADMIN
  // ============================================================
  const AdminPage = () => {
    if (!currentUser || !currentUser.isAdmin) {
      navigate('login');
      return null;
    }

    const [tab, setTab] = React.useState('stats');
    const [search, setSearch] = React.useState('');
    const [pkgFilter, setPkgFilter] = React.useState('all');

    const members = users.filter((u) => !u.isAdmin);
    const filtered = members.filter((u) => {
      const matchesSearch =
        u.nom.toLowerCase().includes(search.toLowerCase()) ||
        u.prenom.toLowerCase().includes(search.toLowerCase()) ||
        u.username.toLowerCase().includes(search.toLowerCase()) ||
        u.emailOrPhone.includes(search);
      const matchesPkg = pkgFilter === 'all' || u.package === pkgFilter;
      return matchesSearch && matchesPkg;
    });

    const stats = {
      total: members.length,
      goal: members.filter((u) => u.package === 'goal').length,
      bronze: members.filter((u) => u.package === 'bronze').length,
      platinium: members.filter((u) => u.package === 'platinium').length
    };

    return (
      <div className="animate-fade-in py-8">
        <div className="max-w-7xl mx-auto px-4 md:px-6">
          <div className="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4">
            <h2 className="text-2xl font-bold text-slate-800">Tableau de bord Administrateur</h2>
            <div className="flex gap-2">
              {['stats', 'members', 'tables', 'sponsors'].map((t) => (
                <button
                  key={t}
                  onClick={() => setTab(t)}
                  className={`px-4 py-2 rounded-lg text-sm font-medium transition ${
                    tab === t ? 'bg-emerald-600 text-white' : 'bg-white text-slate-600 border border-slate-200 hover:bg-slate-50'
                  }`}
                >
                  {t === 'stats' && 'Statistiques'}
                  {t === 'members' && 'Membres'}
                  {t === 'tables' && 'Tables'}
                  {t === 'sponsors' && 'Parrainages'}
                </button>
              ))}
            </div>
          </div>

          {tab === 'stats' && (
            <div className="grid md:grid-cols-4 gap-6 mb-8">
              <Card className="text-center">
                <div className="text-3xl font-extrabold text-slate-800">{stats.total}</div>
                <div className="text-sm text-slate-500 mt-1">Membres total</div>
              </Card>
              <Card className="text-center border-t-4 border-emerald-500">
                <div className="text-3xl font-extrabold text-emerald-700">{stats.goal}</div>
                <div className="text-sm text-slate-500 mt-1">Pack Goal</div>
              </Card>
              <Card className="text-center border-t-4 border-amber-500">
                <div className="text-3xl font-extrabold text-amber-700">{stats.bronze}</div>
                <div className="text-sm text-slate-500 mt-1">Pack Bronze</div>
              </Card>
              <Card className="text-center border-t-4 border-indigo-500">
                <div className="text-3xl font-extrabold text-indigo-700">{stats.platinium}</div>
                <div className="text-sm text-slate-500 mt-1">Pack Platinium</div>
              </Card>

              <div className="md:col-span-4">
                <Card>
                  <h3 className="text-lg font-bold text-slate-800 mb-4">Répartition des inscriptions</h3>
                  <div className="space-y-4">
                    {['goal', 'bronze', 'platinium'].map((pkg) => {
                      const count = members.filter((u) => u.package === pkg).length;
                      const pct = stats.total ? Math.round((count / stats.total) * 100) : 0;
                      return (
                        <div key={pkg}>
                          <div className="flex justify-between text-sm font-medium mb-1 capitalize">
                            <span>{pkg}</span>
                            <span>{count} inscrits</span>
                          </div>
                          <div className="h-3 bg-slate-100 rounded-full overflow-hidden">
                            <div
                              className={`h-full rounded-full ${
                                pkg === 'goal'
                                  ? 'bg-emerald-500'
                                  : pkg === 'bronze'
                                  ? 'bg-amber-500'
                                  : 'bg-indigo-500'
                              }`}
                              style={{ width: `${pct}%` }}
                            />
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </Card>
              </div>
            </div>
          )}

          {tab === 'members' && (
            <Card>
              <div className="flex flex-col md:flex-row gap-3 mb-5">
                <input
                  placeholder="Rechercher un membre..."
                  className="flex-1 rounded-xl border border-slate-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                />
                <select
                  className="rounded-xl border border-slate-200 px-4 py-2 bg-white"
                  value={pkgFilter}
                  onChange={(e) => setPkgFilter(e.target.value)}
                >
                  <option value="all">Tous les packs</option>
                  <option value="goal">Goal</option>
                  <option value="bronze">Bronze</option>
                  <option value="platinium">Platinium</option>
                </select>
              </div>
              <div className="overflow-x-auto">
                <table className="min-w-full text-sm text-left">
                  <thead className="bg-slate-50 text-slate-600 font-semibold">
                    <tr>
                      <th className="px-4 py-3 rounded-l-lg">Nom</th>
                      <th className="px-4 py-3">Prénom</th>
                      <th className="px-4 py-3">Utilisateur</th>
                      <th className="px-4 py-3">Contact</th>
                      <th className="px-4 py-3">Pack</th>
                      <th className="px-4 py-3">Tableau</th>
                      <th className="px-4 py-3">Position</th>
                      <th className="px-4 py-3 rounded-r-lg">Date</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {filtered.map((u) => (
                      <tr key={u.id} className="hover:bg-slate-50 transition">
                        <td className="px-4 py-3">{u.nom}</td>
                        <td className="px-4 py-3">{u.prenom}</td>
                        <td className="px-4 py-3 font-medium">@{u.username}</td>
                        <td className="px-4 py-3">{u.emailOrPhone}</td>
                        <td className="px-4 py-3 capitalize">{u.package}</td>
                        <td className="px-4 py-3">{u.tableId}</td>
                        <td className="px-4 py-3">{u.position}</td>
                        <td className="px-4 py-3 text-slate-500">{u.date}</td>
                      </tr>
                    ))}
                    {filtered.length === 0 && (
                      <tr>
                        <td colSpan="8" className="px-4 py-6 text-center text-slate-400">
                          Aucun membre trouvé.
                        </td>
                      </tr>
                    )}
                  </tbody>
                </table>
              </div>
            </Card>
          )}

          {tab === 'tables' && (
            <div className="space-y-10">
              {['goal', 'bronze', 'platinium'].map((pkg) => (
                <div key={pkg}>
                  <h3 className="text-xl font-bold text-slate-800 capitalize mb-4">{pkg}</h3>
                  <div className="grid md:grid-cols-3 gap-6">
                    {tables[pkg].map((tbl) => (
                      <Card key={tbl.id}>
                        <div className="flex items-center justify-between mb-4">
                          <div className="font-bold text-slate-800">{tbl.id}</div>
                          <div className="text-xs px-2 py-1 rounded-full bg-slate-100 text-slate-600">
                            {tbl.members.length} / 7
                          </div>
                        </div>
                        <div className="grid grid-cols-7 gap-2">
                          {Array.from({ length: 7 }).map((_, idx) => {
                            const uid = tbl.members[idx];
                            const m = uid ? getUserById(uid) : null;
                            return (
                              <div
                                key={idx}
                                className={`rounded-lg text-center py-2 text-xs border ${
                                  m
                                    ? 'bg-emerald-50 border-emerald-200 text-emerald-800 font-medium'
                                    : 'bg-slate-50 border-dashed border-slate-300 text-slate-400'
                                }`}
                                title={m ? m.username : 'Disponible'}
                              >
                                {idx + 1}
                              </div>
                            );
                          })}
                        </div>
                        <div className="mt-4 space-y-1 max-h-32 overflow-auto text-xs">
                          {tbl.members.map((uid, idx) => {
                            const m = getUserById(uid);
                            return m ? (
                              <div key={uid} className="flex justify-between text-slate-700">
                                <span>
                                  {idx + 1}. {m.prenom} {m.nom} (@{m.username})
                                </span>
                              </div>
                            ) : null;
                          })}
                        </div>
                      </Card>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          )}

          {tab === 'sponsors' && (
            <Card>
              <h3 className="text-lg font-bold text-slate-800 mb-4">Relations de parrainage</h3>
              <div className="overflow-x-auto">
                <table className="min-w-full text-sm text-left">
                  <thead className="bg-slate-50 text-slate-600 font-semibold">
                    <tr>
                      <th className="px-4 py-3 rounded-l-lg">Membre</th>
                      <th className="px-4 py-3">Code du membre</th>
                      <th className="px-4 py-3">Parrain</th>
                      <th className="px-4 py-3">Code du parrain</th>
                      <th className="px-4 py-3 rounded-r-lg">Filleuls</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {members.map((u) => {
                      const sp = getSponsor(u);
                      const fCount = getFilleuls(u).length;
                      return (
                        <tr key={u.id} className="hover:bg-slate-50 transition">
                          <td className="px-4 py-3 font-medium">@{u.username}</td>
                          <td className="px-4 py-3 font-mono text-xs">{u.referralCode}</td>
                          <td className="px-4 py-3">{sp ? `@${sp.username}` : '-'}</td>
                          <td className="px-4 py-3 font-mono text-xs">{sp ? sp.referralCode : '-'}</td>
                          <td className="px-4 py-3">{fCount}</td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </Card>
          )}
        </div>
      </div>
    );
  };

  // ============================================================
  // RENDU GLOBAL
  // ============================================================
  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 antialiased font-sans">
      <style>{`
        @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
        .animate-fade-in { animation: fadeIn .4s ease-out; }
      `}</style>
      <Navbar />
      <main className="min-h-[80vh] pt-16">
        {page === 'home' && <HomePage />}
        {page === 'register' && <RegisterPage />}
        {page === 'login' && <LoginPage />}
        {page === 'dashboard' && <DashboardPage />}
        {page === 'parrainage' && <ParrainagePage />}
        {page === 'admin' && <AdminPage />}
      </main>
      <Footer />
    </div>
  );
}