// Grille des réalisations
function Work({ lang, onOpen }) {
  const t = window.I18N[lang];
  const works = window.WORKS;

  return (
    <section id="work" className="section">
      <div className="container">
        <window.Reveal as="div" className="section-head">
          <div>
            <div className="eyebrow">— {t.work.eyebrow}</div>
            <h2>{t.work.title} <em>{t.work.titleEm}</em></h2>
          </div>
          <div className="count">
            <span>{t.work.count}</span>
            <strong>{String(works.length).padStart(2, "0")}</strong>
          </div>
        </window.Reveal>

        <div className="work-grid">
          {works.map((w, i) => (
            <window.Reveal
              key={w.id}
              delay={(i % 3) * 80}
              className="work-card"
            >
              <div
                onClick={() => onOpen(w)}
                style={{ position: "absolute", inset: 0, cursor: "pointer" }}
              >
                {(() => {
                  const ytId = window.getYouTubeId(w.link);
                  return ytId ? (
                    <div className="media" style={{ backgroundImage: `url(https://img.youtube.com/vi/${ytId}/maxresdefault.jpg)` }}></div>
                  ) : null;
                })()}
                <div className="overlay"></div>
                <div className="tag">
                  <span className="live"></span>
                  <span>{w.type[lang] || w.type.fr}</span>
                </div>
                <div className="info">
                  <div>
                    <h3 className="title">{w.title[lang] || w.title.fr}</h3>
                    <div className="meta">
                      <span>{w.client}</span>
                      <span className="dot">·</span>
                      <span>{w.year}</span>
                      {(w.runtime || w.recurrence) && <>
                        <span className="dot">·</span>
                        <span>{w.runtime || w.recurrence}</span>
                      </>}
                    </div>
                  </div>
                  <div className="index">{String(i + 1).padStart(2, "0")} / {String(works.length).padStart(2, "0")}</div>
                </div>
              </div>
            </window.Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Work = Work;