// pages-pharmacies.jsx — Garde, Alertes

// ─── PHARMACIES DE GARDE ───────────────────────────────────
function Garde({ navigate }) {
  const [ville, setVille] = useState("Niamey");
  const courant = GARDES.find((g) => g.ville === ville) || GARDES[0];
  const villes = GARDES.map((g) => g.ville);

  // Calendrier 14 jours
  const today = new Date(2026, 4, 22); // 22 mai 2026
  const jours = Array.from({ length: 14 }, (_, i) => {
    const d = new Date(today); d.setDate(d.getDate() + i);
    const isWeekend = d.getDay() === 0 || d.getDay() === 6;
    return { d, isWeekend, isToday: i === 0 };
  });

  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Service public"
        title="Pharmacies de garde"
        lede="Trouvez immédiatement une pharmacie ouverte près de chez vous, jour et nuit, week-ends et jours fériés."
        breadcrumb={["Accueil", "Pharmacies de garde"]}
      />

      <section className="section-sm">
        <div className="container">

          {/* Banner urgence */}
          <div className="garde-urgence">
            <div className="garde-urgence-pulse"></div>
            <div>
              <div className="eyebrow" style={{ color: "var(--gold-400)" }}>Urgence sanitaire</div>
              <div style={{ color: "#fff", fontFamily: "var(--ff-serif)", fontSize: 24, marginTop: 6 }}>
                15 — Numéro national des urgences
              </div>
            </div>
            <a href="tel:15" className="btn btn-accent">
              <Icon.Phone /> Appeler le 15
            </a>
          </div>

          {/* Sélecteur ville */}
          <div className="garde-villes">
            {villes.map((v) => (
              <button key={v} className={`garde-pill ${ville === v ? "active" : ""}`} onClick={() => setVille(v)}>
                <Icon.Pin size={12} /> {v}
              </button>
            ))}
          </div>

          <div className="garde-content">
            {/* Carte (placeholder) */}
            <div className="garde-map">
              <div className="ph ph-dark" style={{ aspectRatio: "4/3", borderRadius: "var(--r-lg)" }} data-label={`[ Carte interactive — ${ville} avec pharmacies de garde ]`}></div>
              <div className="garde-legend">
                <span><span className="dot dot-on"></span> De garde maintenant</span>
                <span><span className="dot dot-soon"></span> Bientôt de garde</span>
                <span><span className="dot dot-off"></span> Ouverte normalement</span>
              </div>
            </div>

            {/* Liste */}
            <div className="garde-list">
              <div className="garde-list-head">
                <div className="eyebrow">{courant.dates}</div>
                <div style={{ fontFamily: "var(--ff-serif)", fontSize: 26, marginTop: 4 }}>
                  {courant.pharmacies.length} pharmacie{courant.pharmacies.length > 1 ? "s" : ""} de garde à {courant.ville}
                </div>
              </div>

              {courant.pharmacies.map((p) => {
                const ph = PHARMACIES.find((x) => x.nom === p) || {};
                return (
                  <div key={p} className="garde-card">
                    <div className="garde-status">
                      <div className="garde-status-dot"></div>
                      <span>Ouverte</span>
                    </div>
                    <div className="garde-name serif">{p}</div>
                    <div className="garde-meta">
                      <span><Icon.Pin size={12} /> {ph.quartier || "—"}, {courant.ville}</span>
                      <span><Icon.Users size={12} /> {ph.titulaire || "—"}</span>
                    </div>
                    <div className="garde-actions">
                      <a href={`tel:${(ph.tel || "").replace(/\s/g, "")}`} className="btn btn-primary btn-sm">
                        <Icon.Phone size={12} /> {ph.tel || "Téléphone"}
                      </a>
                      <button className="btn btn-ghost btn-sm">
                        <Icon.Pin size={12} /> Itinéraire
                      </button>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Calendrier */}
          <div style={{ marginTop: 56 }}>
            <div className="kicker-rule"><span className="eyebrow">Planning — 14 jours</span></div>
            <h2 className="serif" style={{ marginBottom: 24 }}>Calendrier des gardes — {ville}</h2>
            <div className="garde-calendrier">
              {jours.map((j, i) => (
                <div key={i} className={`garde-jour ${j.isWeekend ? "weekend" : ""} ${j.isToday ? "today" : ""}`}>
                  <div className="garde-jour-d">{j.d.toLocaleDateString("fr-FR", { weekday: "short" })}</div>
                  <div className="garde-jour-n serif">{j.d.getDate()}</div>
                  <div className="garde-jour-m">{j.d.toLocaleDateString("fr-FR", { month: "short" })}</div>
                  {j.isWeekend && <div className="garde-jour-tag">Garde</div>}
                  {j.isToday && <div className="garde-jour-tag today">Aujourd'hui</div>}
                </div>
              ))}
            </div>
          </div>

        </div>
      </section>
    </div>
  );
}
window.Garde = Garde;


// ─── ALERTES SANITAIRES ────────────────────────────────────
function Alertes() {
  const [filtre, setFiltre] = useState("Toutes");
  const niveaux = ["Toutes", "critique", "élevé", "info"];
  const liste = filtre === "Toutes" ? ALERTES : ALERTES.filter((a) => a.niveau === filtre);

  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Vigilance pharmaceutique"
        title="Alertes sanitaires & rappels de lots"
        lede="Centre d'information officiel sur les médicaments falsifiés, les rappels de lots et les ruptures d'approvisionnement signalés au Niger."
        breadcrumb={["Accueil", "Alertes sanitaires"]}
      />

      <section className="section-sm">
        <div className="container">
          <div className="filter-bar">
            {niveaux.map((n) => (
              <button key={n} className={`filter-chip ${filtre === n ? "active" : ""}`} onClick={() => setFiltre(n)}>
                {n === "Toutes" ? n : `${n[0].toUpperCase()}${n.slice(1)}`}
              </button>
            ))}
            <div style={{ flex: 1 }}></div>
            <button className="btn btn-ghost btn-sm"><Icon.Bell /> S'abonner aux alertes</button>
          </div>

          <div className="alerte-list">
            {liste.map((a) => (
              <article key={a.id} className={`alerte-card niveau-${a.niveau}`}>
                <div className="alerte-niveau">
                  <span className="alerte-niveau-dot"></span>
                  <span>{a.niveau.toUpperCase()}</span>
                </div>
                <div className="alerte-body">
                  <div className="alerte-meta">
                    <span className="mono">{a.ref}</span>
                    <span>·</span>
                    <span>{a.date}</span>
                    <span>·</span>
                    <span>{a.lot}</span>
                  </div>
                  <h3 className="serif">{a.titre}</h3>
                  <p>{a.desc}</p>
                  <div className="alerte-action">
                    <div className="alerte-action-label">Conduite à tenir</div>
                    <div className="alerte-action-text">{a.action}</div>
                  </div>
                </div>
                <div className="alerte-cta">
                  <button className="btn btn-ghost btn-sm"><Icon.Download /> PDF</button>
                  <button className="btn btn-primary btn-sm">Détails <Icon.ArrowRight size={12} /></button>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}
window.Alertes = Alertes;