// home.jsx — Page d'accueil

function Home({ navigate, tweaks }) {
  const [q, setQ] = useState("");

  return (
    <div className="page-enter">

      {/* HERO */}
      <section className="hero" data-screen-label="01 Hero">
        <div className="hero-bg"></div>
        <div className="hero-image-label">[ Photo institutionnelle — Conseil de l'Ordre / Façade siège ]</div>
        <div className="hero-inner">
          <div>
            <div className="hero-eyebrow">République du Niger</div>
            <h1>
              L'Ordre des Pharmaciens,<br/>
              au service de la <em>santé publique</em>.
            </h1>
            <p className="hero-lede">
              Institution de régulation, de déontologie et de protection de la santé publique. L'Ordre garantit la probité de la profession pharmaceutique au Niger.
            </p>
            <div className="hero-actions">
              <button className="btn btn-accent btn-lg" onClick={() => navigate("ordre")}>
                Découvrir l'Ordre <Icon.ArrowRight />
              </button>
              <button className="btn btn-light btn-lg" onClick={() => navigate("annuaire")}>
                Consulter l'annuaire
              </button>
            </div>
          </div>

          <div className="hero-card">
            <h4>Vérifier une inscription</h4>
            <form className="hero-card-search" onSubmit={(e) => { e.preventDefault(); navigate("verifier"); }}>
              <input
                placeholder="Nom ou numéro d'inscription…"
                value={q}
                onChange={(e) => setQ(e.target.value)}
              />
              <button type="submit" className="btn btn-primary btn-sm" style={{ height: 36 }}>
                <Icon.Search /> Vérifier
              </button>
            </form>
            <div className="hero-stats">
              <div className="hero-stat">
                <div className="hero-stat-n">1 247</div>
                <div className="hero-stat-l">Pharmaciens inscrits</div>
              </div>
              <div className="hero-stat">
                <div className="hero-stat-n">412</div>
                <div className="hero-stat-l">Officines</div>
              </div>
              <div className="hero-stat">
                <div className="hero-stat-n">8</div>
                <div className="hero-stat-l">Régions couvertes</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* QUICK ACCESS */}
      <section className="section" data-screen-label="02 Accès rapide">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="kicker-rule"><span className="eyebrow">Accès rapides</span></div>
              <h2 className="serif">Quatre portes d'entrée vers nos services</h2>
            </div>
          </div>
          <div className="quick-grid">
            {[
              { icon: "Users",   t: "Annuaire", d: "Tableau de l'Ordre et liste des pharmacies inscrites.", r: "annuaire" },
              { icon: "Shield",  t: "Vérifier", d: "Contrôler le statut d'inscription d'un pharmacien.", r: "verifier" },
              { icon: "Doc",     t: "Réglementation", d: "Textes officiels, décrets, arrêtés en vigueur.", r: "reglementation" },
              { icon: "Alert",   t: "Signaler", d: "Signaler un manquement ou un exercice illégal.", r: "signaler" },
            ].map((q) => {
              const I = Icon[q.icon];
              return (
                <button key={q.t} className="quick-tile" onClick={() => navigate(q.r)}>
                  <div className="quick-tile-icon"><I /></div>
                  <div className="quick-tile-title">{q.t}</div>
                  <div className="quick-tile-text">{q.d}</div>
                  <div className="quick-tile-arrow">Y accéder <Icon.ArrowRight size={12} /></div>
                </button>
              );
            })}
          </div>
        </div>
      </section>

      {/* MISSION */}
      <section className="section-sm" style={{ background: "var(--green-50)" }} data-screen-label="03 Mission">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="kicker-rule"><span className="eyebrow">Notre mission</span></div>
              <h2 className="serif">Quatre piliers d'action</h2>
              <p className="lede" style={{ marginTop: 12 }}>
                Une institution garante de la probité, de la sécurité et de l'éthique pharmaceutique au Niger.
              </p>
            </div>
          </div>
          <div className="mission-grid">
            {[
              { n: "01", t: "Régulation", d: "Tenir le tableau de l'Ordre et veiller à la régularité d'exercice de la profession." },
              { n: "02", t: "Déontologie", d: "Faire respecter le code de déontologie. Statuer en chambre disciplinaire." },
              { n: "03", t: "Protection", d: "Protéger le public contre l'exercice illégal et les médicaments falsifiés." },
              { n: "04", t: "Représentation", d: "Représenter la profession auprès des pouvoirs publics et partenaires." },
            ].map((m) => (
              <div key={m.n} className="mission-cell">
                <div className="mission-num">{m.n} —</div>
                <h4>{m.t}</h4>
                <p>{m.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* GARDE — Service public */}
      <section className="section-sm" style={{ background: "var(--green-900)", color: "#fff" }} data-screen-label="04 Pharmacies de garde">
        <div className="container">
          <div className="garde-strip">
            <div>
              <div className="hero-eyebrow" style={{ color: "var(--gold-400)" }}>Service public</div>
              <h2 className="serif" style={{ color: "#fff", marginTop: 8 }}>Une pharmacie ouverte, à toute heure.</h2>
              <p style={{ color: "rgba(255,255,255,0.75)", marginTop: 14, fontSize: 17 }}>
                Trouvez immédiatement la pharmacie de garde la plus proche, jour et nuit, week-ends et jours fériés.
              </p>
              <button className="btn btn-accent btn-lg" style={{ marginTop: 24 }} onClick={() => navigate("garde")}>
                Voir les pharmacies de garde <Icon.ArrowRight />
              </button>
            </div>
            <div className="garde-strip-cards">
              {GARDES.slice(0, 3).map((g) => (
                <div key={g.ville} className="garde-strip-card" onClick={() => navigate("garde")}>
                  <div className="hero-eyebrow" style={{ color: "var(--gold-400)" }}>{g.ville}</div>
                  <div style={{ fontFamily: "var(--ff-serif)", fontSize: 22, color: "#fff", marginTop: 6 }}>{g.pharmacies[0]}</div>
                  <div style={{ color: "rgba(255,255,255,0.55)", fontSize: 13, marginTop: 4 }}>{g.dates}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* NEWS */}
      <section className="section" data-screen-label="05 Actualités">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="kicker-rule"><span className="eyebrow">Actualités</span></div>
              <h2 className="serif">Dernières publications</h2>
            </div>
            <button className="btn btn-ghost" onClick={() => navigate("actualites")}>
              Toutes les actualités <Icon.ArrowRight />
            </button>
          </div>

          <div className="news-grid">
            {NEWS.slice(0, 3).map((n, i) => (
              <article key={n.id} className={`news-card ${i === 0 ? "featured" : ""}`} onClick={() => navigate("actualites")}>
                <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 l'article <Icon.ArrowRight size={12} /></div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* PRESIDENT / CALL-OUT */}
      <section className="section" data-screen-label="06 Mot du Président" style={{ background: "var(--green-900)", color: "#fff" }}>
        <div className="container">
          <div className="president-grid">
            <div className="ph ph-dark" style={{ aspectRatio: "4/5", borderRadius: "var(--r-lg)" }} data-label="[ Portrait — Président de l'Ordre ]"></div>
            <div>
              <div className="hero-eyebrow" style={{ marginBottom: 18 }}>Mot du Président</div>
              <p className="serif president-quote">
                « L'Ordre est, et restera, le garant silencieux mais vigilant de la confiance que les Nigériens placent dans leur pharmacien. »
              </p>
              <div style={{ marginTop: 28, display: "flex", alignItems: "center", gap: 16 }}>
                <div style={{ width: 40, height: 1, background: "var(--gold-400)" }}></div>
                <div>
                  <div style={{ color: "#fff", fontWeight: 600 }}>Pr. Abdoulaye Hima</div>
                  <div style={{ color: "rgba(255,255,255,0.6)", fontSize: 13 }}>Président de l'Ordre — Mandat 2026-2029</div>
                </div>
              </div>
              <button className="btn btn-light" style={{ marginTop: 32 }} onClick={() => navigate("ordre")}>
                Lire l'éditorial complet <Icon.ArrowRight />
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* PORTRAITS / TÉMOIGNAGES */}
      <section className="section" data-screen-label="07 Portraits">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="kicker-rule"><span className="eyebrow">Visages de la profession</span></div>
              <h2 className="serif">Celles et ceux qui font la pharmacie nigérienne</h2>
            </div>
            <button className="btn btn-ghost" onClick={() => navigate("portraits")}>
              Tous les portraits <Icon.ArrowRight />
            </button>
          </div>
          <div className="home-portraits">
            {PORTRAITS.slice(0, 3).map((p, i) => (
              <article key={p.nom} className="home-portrait" onClick={() => navigate("portraits")}>
                <div className="ph home-portrait-img" data-label={`[ Portrait — ${p.nom} ]`}></div>
                <div className="home-portrait-body">
                  <span className="tag tag-gold">{p.exercice}</span>
                  <blockquote className="serif home-portrait-quote">
                    « {p.phrase} »
                  </blockquote>
                  <div style={{ marginTop: 14, display: "flex", alignItems: "center", gap: 10 }}>
                    <div style={{ width: 28, height: 1, background: "var(--c-accent)" }}></div>
                    <div>
                      <div style={{ fontWeight: 600, fontSize: 14 }}>{p.nom}</div>
                      <div className="muted" style={{ fontSize: 12 }}>{p.ville} · {p.annees} ans d'exercice</div>
                    </div>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* GUIDES SANTÉ — Grand public */}
      <section className="section-sm" style={{ background: "var(--ink-50)" }} data-screen-label="08 Guides santé">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="kicker-rule"><span className="eyebrow">Pour le grand public</span></div>
              <h2 className="serif">Comprendre. Vérifier. Se soigner.</h2>
              <p className="lede" style={{ marginTop: 12 }}>Des fiches courtes rédigées par des pharmaciens.</p>
            </div>
            <button className="btn btn-ghost" onClick={() => navigate("guides")}>
              Tous les guides <Icon.ArrowRight />
            </button>
          </div>
          <div className="home-guides">
            {GUIDES.slice(0, 4).map((g, i) => (
              <button key={g.id} className="home-guide" onClick={() => navigate("guides")}>
                <span className="home-guide-num serif">{String(i + 1).padStart(2, "0")}</span>
                <div>
                  <h4>{g.titre}</h4>
                  <div className="muted" style={{ fontSize: 13, marginTop: 4 }}>{g.duree} de lecture · {g.cat}</div>
                </div>
                <Icon.ArrowRight />
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* CONTACT STRIP */}
      <section className="section-sm" data-screen-label="09 Contact rapide">
        <div className="container">
          <div className="contact-strip">
            <div>
              <h2 className="serif">Une question ? Nous sommes à votre écoute.</h2>
              <p className="lede" style={{ marginTop: 12 }}>
                Notre secrétariat répond aux pharmaciens et au grand public du lundi au vendredi, de 8h à 16h.
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 15 }}>
                <span style={{ width: 36, height: 36, borderRadius: 8, background: "var(--white)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--c-primary)" }}><Icon.Phone /></span>
                <span><b style={{ fontFamily: "var(--ff-serif)", fontSize: 18 }}>+227 20 00 00 00</b><br/><span className="muted" style={{ fontSize: 13 }}>Lun – Ven, 8h–16h</span></span>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 15 }}>
                <span style={{ width: 36, height: 36, borderRadius: 8, background: "var(--white)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--c-primary)" }}><Icon.Mail /></span>
                <span><b style={{ fontFamily: "var(--ff-serif)", fontSize: 18 }}>contact@opn.ne</b><br/><span className="muted" style={{ fontSize: 13 }}>Réponse sous 48h</span></span>
              </div>
              <button className="btn btn-primary" style={{ marginTop: 6, alignSelf: "flex-start" }} onClick={() => navigate("contact")}>
                Formulaire de contact <Icon.ArrowRight />
              </button>
            </div>
          </div>
        </div>
      </section>

    </div>
  );
}

window.Home = Home;