/* global React, window */
const { Ph, SecHead, Arrow } = window;

function PageRealisations({ go }) {
  const [cat, setCat] = React.useState("Tous");
  const counts = {};
  window.CATEGORIES.forEach((c) => {
    counts[c] = c === "Tous" ? window.PROJECTS.length : window.PROJECTS.filter((p) => p.cat === c).length;
  });
  const items = cat === "Tous" ? window.PROJECTS : window.PROJECTS.filter((p) => p.cat === cat);
  const layout = ["span-6", "span-6", "span-4", "span-4", "span-4", "span-7", "span-5", "span-6", "span-6"];

  return (
    <div>
      <section className="sec" style={{ paddingTop: 88, paddingBottom: 56 }}>
        <div className="sec__head">
          <div>
            <div className="eyebrow">Portfolio · 2018 — 2026</div>
          </div>
          <div>
            <h2 style={{ fontSize: 84, lineHeight: 1, fontWeight: 300, letterSpacing: "-0.02em" }}>
              Réalisations
            </h2>
            <p className="body" style={{ marginTop: 28, maxWidth: 520 }}>
              Vingt-cinq projets sélectionnés parmi cent vingt livrés. Chaque fiche raconte
              une rencontre, un terrain, une contrainte transformée en geste.
            </p>
          </div>
        </div>
        <div className="filters">
          {window.CATEGORIES.map((c) => (
            <button key={c} className={`filter ${cat === c ? "is-on" : ""}`} onClick={() => setCat(c)} data-cursor="hover">
              {c}<span className="count">{counts[c]}</span>
            </button>
          ))}
        </div>
        <div className="proj-grid">
          {items.map((p, i) => (
            <div key={p.id} className={`proj ${layout[i % layout.length]}`} data-cursor="hover" onClick={() => go("project", p.id)}>
              <div className="proj__index">— {String(i + 1).padStart(2, "0")}</div>
              <div className="proj__cat">{p.cat}</div>
              <div className="proj__img"><div><Ph project={p} ratio="4/3" /></div></div>
              <div className="proj__meta">
                <div>
                  <div className="proj__title">{p.title}</div>
                  <div className="proj__loc" style={{ marginTop: 6 }}>{p.loc} · {p.year}</div>
                </div>
                <div className="proj__loc">{p.surf}</div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

function PageProject({ id, go }) {
  const idx = window.PROJECTS.findIndex((p) => p.id === id);
  const p = window.PROJECTS[idx >= 0 ? idx : 0];
  const next = window.PROJECTS[(idx + 1) % window.PROJECTS.length];

  return (
    <div>
      <section className="pd-hero">
        <a className="pd-back" onClick={() => go("realisations")} data-cursor="hover"><span style={{ display: "inline-block", transform: "rotate(180deg)" }}><Arrow/></span> Toutes les réalisations</a>
        <div className="eyebrow" style={{ marginTop: 36 }}>{p.cat} · {p.year}</div>
        <h1 className="pd-title">{p.title.split(" ").slice(0, -1).join(" ")} <em>{p.title.split(" ").slice(-1)}</em></h1>
        <div className="pd-meta">
          <div><div className="k">Lieu</div><div className="v">{p.loc}</div></div>
          <div><div className="k">Surface</div><div className="v">{p.surf}</div></div>
          <div><div className="k">Programme</div><div className="v">{p.lot}</div></div>
          <div><div className="k">Statut</div><div className="v">Livré · {p.year}</div></div>
        </div>
      </section>

      <div className="pd-cover"><Ph project={p} ratio="16/9" /></div>

      <section className="pd-body">
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}>Le projet</div>
          <h3>Une lecture <em>patiente</em> du site et du programme.</h3>
        </div>
        <div>
          <p className="body">
            Au départ, un terrain {p.loc.toLowerCase().includes("bru") ? "urbain serré" : "en pente, bordé de chênes anciens"}.
            Au départ aussi, un programme tendu : trois chambres, un atelier, une circulation traversante,
            un budget précis. Le projet naît de la conciliation, jamais du compromis.
          </p>
          <p className="body">
            Nous avons travaillé l'orientation pour capter la lumière du sud sans excès de gain solaire en été.
            Les volumes répondent à la topographie : un socle en maçonnerie ancré dans la pente, un volume bois
            qui se pose dessus, presque en lévitation.
          </p>
          <p className="body">
            La palette matérielle reste sobre — chaux, chêne, acier patiné — pour laisser la lumière et le paysage
            faire l'essentiel.
          </p>
        </div>
      </section>

      <div className="pd-gallery">
        <Ph project={p} ratio="4/3" label="Vue extérieure" />
        <div className="col">
          <Ph src={window.AUX.detail1} label="Détail · matière" />
          <Ph src={window.AUX.detail2} label="Intérieur · jour" />
        </div>
      </div>

      <div className="pd-foot">
        <div>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Projet suivant</div>
          <div className="next">{next.title.split(" ").slice(0, -1).join(" ")} <em>{next.title.split(" ").slice(-1)}</em></div>
        </div>
        <a className="btn btn--primary" onClick={() => go("project", next.id)} data-cursor="hover">Découvrir <Arrow/></a>
      </div>
    </div>
  );
}

Object.assign(window, { PageRealisations, PageProject });