// WORK INDEX
const { useState, useEffect } = React;
const { Link, MediaPh, CASES, SERVICES } = window;
const CaseGlyph = window.CaseGlyph;

function Work() {
  const [activeService, setActiveService] = useState("Toutes");
  const [activeIndustry, setActiveIndustry] = useState("Tous");

  const services = ["Toutes", ...new Set(SERVICES.map(s => s.title))];
  const industries = ["Tous", ...new Set(CASES.map(c => c.industry))];

  const filtered = CASES.filter(c =>
    (activeService === "Toutes" || c.services.includes(activeService)) &&
    (activeIndustry === "Tous" || c.industry === activeIndustry)
  );

  return (
    <main className="page-enter">
      <WorkHero count={filtered.length} />
      <section style={{ padding: "0 0 40px" }}>
        <div className="page">
          <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 24, padding: "20px 0", borderTop: "1px solid var(--rule)" }}>
            <div className="mono" style={{ color: "var(--muted)", paddingTop: 8 }}>Par pratique</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {services.map(s => (
                <button key={s} onClick={() => setActiveService(s)} className={"pill" + (activeService === s ? " acid" : "")}
                  style={{ background: activeService === s ? "var(--ink)" : "transparent", color: activeService === s ? "var(--cream)" : "var(--ink-2)", borderColor: activeService === s ? "var(--ink)" : "var(--rule)" }}>
                  {activeService === s && <span className="dot" />}{s}
                </button>
              ))}
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 24, padding: "20px 0", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
            <div className="mono" style={{ color: "var(--muted)", paddingTop: 8 }}>Par secteur</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {industries.map(s => (
                <button key={s} onClick={() => setActiveIndustry(s)} className="pill"
                  style={{ background: activeIndustry === s ? "var(--ink)" : "transparent", color: activeIndustry === s ? "var(--cream)" : "var(--ink-2)", borderColor: activeIndustry === s ? "var(--ink)" : "var(--rule)" }}>
                  {s}
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: "40px 0 120px" }}>
        <div className="page">
          <WorkGrid items={filtered} />
        </div>
      </section>
    </main>
  );
}

function WorkHero({ count }) {
  return (
    <section style={{ paddingTop: 180, paddingBottom: 60 }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end" }}>
        <div>
          <div className="eyebrow">↳ Travaux sélectionnés · 2019–2026</div>
          <h1 className="serif" style={{ fontSize: "clamp(64px, 9.4vw, 192px)", lineHeight: 0.9, letterSpacing: "-0.025em", marginTop: 28 }}>
            {count} choses <em style={{ color: "var(--acid-deep)" }}>précises</em><br/>
            que nous avons<br/>faites<br/>volontairement.
          </h1>
        </div>
        <div>
          <p className="body-lg" style={{ maxWidth: 520 }}>
            Une archive filtrable de nos sept dernières années. Chaque cas est une mission réelle, avec des chiffres réels — et quelques-uns que nous ne pouvons pas encore vous montrer. Filtrez par pratique ou par secteur, ou faites défiler.
          </p>
          <div className="hairline" style={{ margin: "28px 0" }} />
          <div className="mono" style={{ color: "var(--muted)" }}>
            38 études publiées · 11 sous NDA · 6 à venir
          </div>
        </div>
      </div>
    </section>
  );
}

function WorkGrid({ items }) {
  // mixed-size layout
  const layout = ["lg", "md", "sm", "md", "lg", "sm", "sm", "md", "lg", "sm"];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 24 }}>
      {items.map((c, i) => {
        const k = layout[i % layout.length];
        const span = k === "lg" ? 8 : k === "md" ? 6 : 4;
        const ratio = k === "lg" ? "16/10" : k === "md" ? "4/3" : "1/1";
        return (
          <div key={c.slug + i} style={{ gridColumn: `span ${span}` }}>
            <WorkCard c={c} ratio={ratio} size={k} />
          </div>
        );
      })}
    </div>
  );
}

function WorkCard({ c, ratio, size }) {
  const [hover, setHover] = useState(false);
  return (
    <Link to={`/work/${c.slug}`}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      className="img-hover" style={{ display: "block" }}>
      <div style={{ position: "relative" }}>
        <MediaPh ratio={ratio} accent={c.accent} label={c.client} tr={c.year}>
          <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
            <CaseGlyph slug={c.slug} accent={c.accent} />
          </div>
          <div style={{
            position: "absolute", inset: 0,
            background: "rgba(15,15,14,0.85)", color: "var(--cream)",
            opacity: hover ? 1 : 0, transition: "opacity .3s var(--ease)",
            display: "flex", padding: 28, flexDirection: "column", justifyContent: "space-between"
          }}>
            <div className="mono" style={{ color: "var(--acid)" }}>↳ {c.year} · {c.duration}</div>
            <div>
              <h3 className="serif" style={{ fontSize: 28, lineHeight: 1.1, marginBottom: 12 }}>{c.title}</h3>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                {c.services.map(s => <span key={s} className="mono" style={{ color: "rgba(242,237,228,0.7)", fontSize: 10, padding: "4px 10px", border: "1px solid rgba(242,237,228,0.3)", borderRadius: 999 }}>{s}</span>)}
              </div>
            </div>
          </div>
        </MediaPh>
      </div>
      <div style={{ marginTop: 16 }}>
        <div className="mono" style={{ color: "var(--muted)", marginBottom: 6 }}>{c.industry} · {c.location}</div>
        <h3 className="serif" style={{ fontSize: size === "lg" ? 32 : size === "md" ? 24 : 20, lineHeight: 1.12, letterSpacing: "-0.01em" }}>
          {c.client}<span style={{ color: "var(--muted)" }}> — </span>{c.title}
        </h3>
      </div>
    </Link>
  );
}

window.Work = Work;