const React = window.React;
const { useState } = React;
const { Header, Footer, Arrow, useReveal, PROJECT_ILLU, REAL_PROJECTS, REAL_CAT_LABEL } = window.NodeItParts;

const REAL_CATS = [
  { id: "all", label: "Tous" },
  { id: "dev", label: "Développement" },
  { id: "ia", label: "Intelligence Artificielle" },
  { id: "growth", label: "Growth" },
];

function RealisationsApp() {
  useReveal();
  const [cat, setCat] = useState("all");
  const inCat = (p, id) => id === "all" || p.cats.indexOf(id) !== -1;
  const count = (id) => REAL_PROJECTS.filter((p) => inCat(p, id)).length;
  const shown = REAL_PROJECTS.filter((p) => inCat(p, cat));
  return (
    <div className="site">
      <Header />
      <section className="section" style={{ paddingBottom: 0 }}>
        <div className="container">
          <div className="reals-hero reveal is-in">
            <span className="kicker">Projets</span>
            <h1>Ce qu'on construit, rend intelligent et fait grandir au quotidien.</h1>
            <p>On signe un NDA avec chacun de nos clients : impossible de détailler leurs projets nommément. Voici donc, en clair, le type de réalisations qu'on mène de bout en bout, avec les mêmes équipes.</p>
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: "var(--space-7)" }}>
        <div className="container">
          <div className="reals-toolbar">
            <div className="real-filter" role="tablist" aria-label="Filtrer par métier">
              {REAL_CATS.map((c) => (
                <button
                  className="real-filter__btn"
                  data-active={cat === c.id ? "true" : undefined}
                  onClick={() => setCat(c.id)}
                  role="tab"
                  aria-selected={cat === c.id}
                  key={c.id}
                >
                  {c.label}<span className="real-filter__n">{count(c.id)}</span>
                </button>
              ))}
            </div>
            <span className="reals-count">
              <b>{shown.length}</b> {shown.length > 1 ? "projets" : "projet"}{cat !== "all" ? " · " + REAL_CAT_LABEL[cat] : ""}
            </span>
          </div>

          <div className="reals-grid" key={cat}>
            {shown.map((p, i) => (
              <div className="ni-project ni-project--static" data-cat={p.cats[0]} key={p.id} style={{ animationDelay: i * 55 + "ms" }}>
                <div className="ni-project__media">
                  <div className="proj-illu">{PROJECT_ILLU[p.id]}</div>
                </div>
                <div className="ni-project__body">
                  <span className="ni-project__cat">{p.cats.map((c) => REAL_CAT_LABEL[c]).join(" · ")}</span>
                  <div className="ni-project__title">{p.t}</div>
                  <p style={{ color: "var(--text-muted)", fontSize: "var(--fs-sm)", margin: 0, lineHeight: "var(--lh-relaxed)" }}>{p.sub}</p>
                  <div className="ni-project__tags">{p.tags.map((t, j) => <span className="ni-tag" key={j}>{t}</span>)}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="cta-panel on-dark reveal">
            <div className="ink-glow" />
            <span className="kicker" style={{ justifyContent: "center" }}>La suite</span>
            <h2>Le prochain projet sur cette page, ce sera le <span className="v">vôtre</span> ?</h2>
            <p>Prenez rendez-vous. On cadre votre besoin, qu'il soit produit, IA ou acquisition, et on vous dit par où commencer.</p>
            <a className="ni-btn" data-variant="primary" data-size="lg" href="contact.html">Prendre rendez-vous <Arrow cls="ni-btn__icon" /></a>
          </div>
        </div>
      </section>
      <Footer />
    </div>
  );
}

window.NodeItRealisations = RealisationsApp;