// pages-info.jsx — L'Ordre, Actualités, Contact

// ─── PAGE HEADER (réutilisable) ───────────────────
function PageHeader({ eyebrow, title, lede, breadcrumb }) {
  return (
    <section className="page-header">
      <div className="container">
        {breadcrumb && (
          <nav className="breadcrumb">
            {breadcrumb.map((b, i) => (
              <span key={i}>
                {i > 0 && <span className="breadcrumb-sep">/</span>}
                <span>{b}</span>
              </span>
            ))}
          </nav>
        )}
        <div className="eyebrow" style={{ marginTop: 12 }}>{eyebrow}</div>
        <h1 className="serif" style={{ marginTop: 14 }}>{title}</h1>
        {lede && <p className="lede" style={{ marginTop: 18 }}>{lede}</p>}
      </div>
    </section>
  );
}
window.PageHeader = PageHeader;

// ─── L'ORDRE ───────────────────────────────────────
function Ordre({ navigate }) {
  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="L'Institution"
        title="L'Ordre des Pharmaciens du Niger"
        lede="Créé pour garantir la probité de la profession, l'Ordre veille au respect de la déontologie et protège la santé publique en matière pharmaceutique."
        breadcrumb={["Accueil", "L'Ordre"]}
      />

      {/* Intro + image */}
      <section className="section-sm">
        <div className="container">
          <div className="split-2">
            <div className="ph" style={{ aspectRatio: "4/5", borderRadius: "var(--r-lg)" }} data-label="[ Photo institutionnelle — Siège de l'Ordre ]"></div>
            <div>
              <div className="kicker-rule"><span className="eyebrow">Présentation</span></div>
              <h2 className="serif">Une institution au service de la profession et du public.</h2>
              <p className="lede" style={{ marginTop: 16 }}>
                L'Ordre des Pharmaciens du Niger est un organisme professionnel doté de la personnalité morale. Il regroupe l'ensemble des pharmaciens autorisés à exercer sur le territoire national.
              </p>
              <p style={{ marginTop: 14, color: "var(--ink-500)" }}>
                Il a pour mission de veiller au maintien des principes de moralité, de probité et de compétence indispensables à l'exercice de la pharmacie, et au respect par tous ses membres des devoirs professionnels et des règles édictées par le code de déontologie.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Mission / Vision / Valeurs */}
      <section className="section-sm" style={{ background: "var(--green-50)" }}>
        <div className="container">
          <div className="three-col">
            {[
              { num: "Mission", t: "Garantir la santé publique", d: "Tenir le tableau de l'Ordre, instruire les demandes d'inscription, juger les manquements à la déontologie, défendre la profession." },
              { num: "Vision",  t: "Une pharmacie de confiance", d: "Faire de la pharmacie nigérienne un secteur exemplaire en matière de probité, d'innovation et de service au patient." },
              { num: "Valeurs", t: "Probité, indépendance, service", d: "Intégrité professionnelle, indépendance face aux intérêts privés, service du patient et de la collectivité, solidarité confraternelle." },
            ].map((m) => (
              <div key={m.num} className="value-card">
                <div className="value-num">{m.num}</div>
                <h3 className="serif">{m.t}</h3>
                <p>{m.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Histoire — timeline */}
      <section className="section" id="histoire">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="kicker-rule"><span className="eyebrow">Historique</span></div>
              <h2 className="serif">Cinquante années d'engagement</h2>
            </div>
          </div>
          <div className="timeline">
            {[
              { y: "1975", t: "Création de la pharmacie publique nigérienne", d: "Premières structures officielles d'encadrement du médicament." },
              { y: "1992", t: "Loi fondatrice de l'Ordre", d: "Adoption de la loi instituant un Ordre national des Pharmaciens." },
              { y: "2008", t: "Modernisation du Code de déontologie", d: "Refonte des règles éthiques et instauration du Conseil de discipline." },
              { y: "2020", t: "Nouveau Code de la santé publique", d: "Élargissement des missions et renforcement de la lutte contre les médicaments falsifiés." },
              { y: "2026", t: "Plan stratégique 2026-2029", d: "Digitalisation, ouverture régionale, programme DPC renforcé." },
            ].map((e) => (
              <div key={e.y} className="timeline-row">
                <div className="timeline-y serif">{e.y}</div>
                <div className="timeline-line"><span className="timeline-dot"></span></div>
                <div className="timeline-body">
                  <h4>{e.t}</h4>
                  <p>{e.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Bureau */}
      <section className="section-sm" id="bureau" style={{ background: "var(--ink-50)" }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="kicker-rule"><span className="eyebrow">Conseil National</span></div>
              <h2 className="serif">Bureau de l'Ordre — Mandat 2026-2029</h2>
            </div>
          </div>
          <div className="bureau-grid">
            {BUREAU.map((m) => (
              <div key={m.nom} className="card bureau-card">
                <div className="ph" style={{ aspectRatio: "1/1", borderRadius: "var(--r-md)", marginBottom: 14 }} data-label={`[ Portrait — ${m.role} ]`}></div>
                <div className="bureau-role">{m.role}</div>
                <div className="bureau-nom serif">{m.nom}</div>
                <div className="bureau-ville">{m.ville} · Mandat {m.mandat}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Rôle institutionnel */}
      <section className="section" id="role">
        <div className="container">
          <div className="split-2">
            <div>
              <div className="kicker-rule"><span className="eyebrow">Rôle institutionnel</span></div>
              <h2 className="serif">Régulation, déontologie, protection.</h2>
              <p className="lede" style={{ marginTop: 16 }}>
                L'Ordre exerce une triple fonction au service de la profession et du public.
              </p>
            </div>
            <div className="role-list">
              {[
                { i: "Shield",   t: "Régulation de l'exercice", d: "Tenue du tableau, instruction des demandes d'inscription, contrôle de la légalité d'exercice." },
                { i: "Book",     t: "Déontologie professionnelle", d: "Application du Code de déontologie. Le Conseil de discipline statue sur les manquements." },
                { i: "Alert",    t: "Protection du public",      d: "Lutte contre l'exercice illégal et les médicaments falsifiés. Alertes sanitaires." },
                { i: "Users",    t: "Représentation",            d: "Représentation de la profession auprès du Ministère de la Santé Publique et des partenaires." },
              ].map((r) => {
                const I = Icon[r.i];
                return (
                  <div key={r.t} className="role-row">
                    <div className="role-icon"><I /></div>
                    <div>
                      <h4>{r.t}</h4>
                      <p>{r.d}</p>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.Ordre = Ordre;

// ─── ACTUALITÉS ───────────────────────────────────
function Actualites({ navigate }) {
  const [cat, setCat] = useState("Toutes");
  const cats = ["Toutes", ...Array.from(new Set(NEWS.map(n => n.cat)))];
  const filtered = cat === "Toutes" ? NEWS : NEWS.filter(n => n.cat === cat);

  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Salle de presse"
        title="Actualités & Communiqués"
        lede="Publications officielles, alertes sanitaires, événements et vie de l'Ordre."
        breadcrumb={["Accueil", "Actualités"]}
      />

      <section className="section-sm">
        <div className="container">
          <div className="filter-bar">
            {cats.map((c) => (
              <button
                key={c}
                className={`filter-chip ${cat === c ? "active" : ""}`}
                onClick={() => setCat(c)}
              >
                {c}
              </button>
            ))}
          </div>

          <div className="actu-grid">
            {filtered.map((n) => (
              <article key={n.id} className="news-card">
                <div className="news-card-img ph ph-dark" data-label={`[ Visuel — ${n.cat} ]`}></div>
                <div className="news-card-body">
                  <div className="news-card-meta">
                    <span className="tag">{n.cat}</span>
                    <span>{n.date}</span>
                  </div>
                  <h4>{n.title}</h4>
                  <p className="news-card-excerpt">{n.excerpt}</p>
                  <div className="news-card-read">Lire plus <Icon.ArrowRight size={12} /></div>
                </div>
              </article>
            ))}
          </div>

          <div style={{ display: "flex", justifyContent: "center", marginTop: 48 }}>
            <button className="btn btn-ghost">Charger plus d'actualités</button>
          </div>
        </div>
      </section>
    </div>
  );
}
window.Actualites = Actualites;

// ─── CONTACT ─────────────────────────────────────
function Contact() {
  const [form, setForm] = useState({ nom: "", email: "", sujet: "Information générale", message: "" });
  const [sent, setSent] = useState(false);

  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4000);
    setForm({ nom: "", email: "", sujet: "Information générale", message: "" });
  };

  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Nous joindre"
        title="Contactez l'Ordre"
        lede="Notre secrétariat est à votre disposition du lundi au vendredi. Pour toute question administrative, professionnelle ou de signalement."
        breadcrumb={["Accueil", "Contact"]}
      />

      <section className="section-sm">
        <div className="container">
          <div className="contact-grid">
            <aside className="contact-info">
              <div className="info-block">
                <div className="info-icon"><Icon.Pin /></div>
                <div>
                  <div className="info-label">Siège</div>
                  <div className="info-value">Avenue de la République<br/>Quartier Plateau<br/>BP 11202 Niamey, Niger</div>
                </div>
              </div>
              <div className="info-block">
                <div className="info-icon"><Icon.Phone /></div>
                <div>
                  <div className="info-label">Téléphone</div>
                  <div className="info-value">+227 20 00 00 00<br/><span className="muted">Lun – Ven, 8h–16h</span></div>
                </div>
              </div>
              <div className="info-block">
                <div className="info-icon"><Icon.Mail /></div>
                <div>
                  <div className="info-label">Email</div>
                  <div className="info-value">contact@opn.ne<br/><span className="muted">Réponse sous 48h</span></div>
                </div>
              </div>
              <div className="info-block">
                <div className="info-icon"><Icon.Cal /></div>
                <div>
                  <div className="info-label">Horaires</div>
                  <div className="info-value">Lundi – Vendredi<br/>8h00 – 16h00</div>
                </div>
              </div>
            </aside>

            <form className="contact-form" onSubmit={onSubmit}>
              <h3 className="serif" style={{ marginBottom: 6 }}>Formulaire de contact</h3>
              <p className="muted" style={{ marginBottom: 24, fontSize: 14 }}>Les champs marqués d'un astérisque sont obligatoires.</p>

              <div className="form-row">
                <div className="field">
                  <label>Nom complet *</label>
                  <input required value={form.nom} onChange={(e) => setForm({...form, nom: e.target.value})} placeholder="Votre nom" />
                </div>
                <div className="field">
                  <label>Email *</label>
                  <input required type="email" value={form.email} onChange={(e) => setForm({...form, email: e.target.value})} placeholder="vous@exemple.com" />
                </div>
              </div>

              <div className="field">
                <label>Objet du message *</label>
                <select value={form.sujet} onChange={(e) => setForm({...form, sujet: e.target.value})}>
                  <option>Information générale</option>
                  <option>Demande d'inscription</option>
                  <option>Vérification</option>
                  <option>Demande de document</option>
                  <option>Presse / Média</option>
                  <option>Autre</option>
                </select>
              </div>

              <div className="field">
                <label>Votre message *</label>
                <textarea required rows="6" value={form.message} onChange={(e) => setForm({...form, message: e.target.value})} placeholder="Précisez votre demande…"></textarea>
              </div>

              <button type="submit" className="btn btn-primary" style={{ alignSelf: "flex-start" }}>
                {sent ? <><Icon.Check /> Message envoyé</> : <>Envoyer le message <Icon.ArrowRight /></>}
              </button>
            </form>
          </div>

          {/* Map placeholder */}
          <div className="map-block">
            <div className="ph" style={{ aspectRatio: "21/9", borderRadius: "var(--r-lg)" }} data-label="[ Carte interactive — Localisation du siège, Niamey ]"></div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.Contact = Contact;