// Directory page — tabs por categoría + grid de creadores

function Directory({ initialCategory = "all", onOpenCreator, accent, density = "espacioso" }) {
  const { CATEGORIES, CREATORS } = window.CB_DATA;
  const [active, setActive] = React.useState(initialCategory);
  const [view, setView] = React.useState("grid"); // grid | index
  const [hovered, setHovered] = React.useState(null);

  React.useEffect(() => { setActive(initialCategory); }, [initialCategory]);

  const filtered = active === "all" ? CREATORS : CREATORS.filter(c => c.category === active);
  const cols = density === "compacto" ? 4 : 3;

  return (
    <main>
      {/* Header */}
      <section style={{ padding: "48px 32px 24px", borderBottom: "1px solid #000" }}>
        <div style={{ display: "grid", gridTemplateColumns: "9fr 3fr", gap: 32, alignItems: "end" }}>
          <div>
            <Eyebrow style={{ marginBottom: 24, paddingTop: 8, borderTop: "1px solid #000", display: "inline-block", paddingRight: 60 }}>directorio · vol. 03 · {filtered.length} resultados</Eyebrow>
            <h1 style={{
              fontFamily: "'TT Bells', serif",
              fontSize: "clamp(72px, 11vw, 180px)",
              lineHeight: 0.92, letterSpacing: "-0.05em",
              margin: 0, fontWeight: 400,
            }}>
              directorio<span style={{ color: accent, fontStyle: "italic" }}>.</span>
            </h1>
          </div>
          <div>
            <p style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 14, lineHeight: 1.6, color: "#1a1a1a", margin: 0 }}>
              talento curado por práctica. cada perfil incluye bio, portafolio, contacto y rango de tarifa. selección revisada bianualmente.
            </p>
          </div>
        </div>
      </section>

      {/* Tabs por categoría */}
      <div style={{
        position: "sticky", top: 80, zIndex: 30,
        background: "#fff", borderBottom: "1px solid #000",
        padding: "16px 32px",
        display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16,
        flexWrap: "wrap",
      }}>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          {CATEGORIES.map(c => (
            <Tag key={c.id} active={active === c.id} onClick={() => setActive(c.id)}>
              {c.label}
              <span style={{ paddingLeft: 6, opacity: 0.55 }}>
                {c.id === "all" ? CREATORS.length : CREATORS.filter(x => x.category === c.id).length}
              </span>
            </Tag>
          ))}
        </div>
        <div style={{ display: "flex", gap: 0, border: "1px solid #000" }}>
          {[{id:"grid", label:"piezas"}, {id:"index", label:"índice"}].map(v => (
            <button key={v.id} onClick={() => setView(v.id)} style={{
              fontFamily: "'Montserrat', sans-serif", fontSize: 10, fontWeight: 600,
              letterSpacing: "0.18em", textTransform: "uppercase",
              padding: "8px 14px",
              background: view === v.id ? "#000" : "#fff",
              color: view === v.id ? "#fff" : "#000",
              border: "none", cursor: "pointer",
              borderLeft: v.id === "index" ? "1px solid #000" : "none",
            }}>{v.label}</button>
          ))}
        </div>
      </div>

      {/* Grid view */}
      {view === "grid" && (
        <section style={{ padding: "32px 32px 64px" }}>
          <div style={{ display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 18 }}>
            {filtered.map((c, i) => (
              <CreatorCard
                key={c.id}
                creator={c}
                index={i}
                onClick={() => onOpenCreator(c.id)}
                onHover={setHovered}
                isHovered={hovered === c.id}
              />
            ))}
          </div>
          {filtered.length === 0 && (
            <div style={{ padding: "96px 0", textAlign: "center", fontFamily: "'TT Bells', serif", fontSize: 48, color: "#555" }}>
              sin resultados<span style={{ fontStyle: "italic" }}>.</span>
            </div>
          )}
        </section>
      )}

      {/* Index (list) view */}
      {view === "index" && (
        <section style={{ padding: "0 32px 64px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "60px 3fr 2fr 1.5fr 1fr 1fr 80px", padding: "12px 0", borderBottom: "1px solid #000", fontFamily: "'Montserrat', sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: "0.2em", textTransform: "uppercase", color: "#555" }}>
            <span>nº</span>
            <span>nombre</span>
            <span>práctica</span>
            <span>ciudad</span>
            <span>tarifa</span>
            <span>estado</span>
            <span></span>
          </div>
          {filtered.map((c, i) => (
            <div key={c.id}
              onClick={() => onOpenCreator(c.id)}
              onMouseEnter={() => setHovered(c.id)}
              onMouseLeave={() => setHovered(null)}
              style={{
                display: "grid", gridTemplateColumns: "60px 3fr 2fr 1.5fr 1fr 1fr 80px",
                alignItems: "center", padding: "20px 0", borderBottom: "1px solid #000",
                cursor: "pointer",
                background: hovered === c.id ? accent : "transparent",
                transition: "background 220ms cubic-bezier(.2,.7,.2,1)",
              }}
            >
              <span style={{ fontFamily: "'TT Bells', serif", fontSize: 22 }}>{c.id}</span>
              <span style={{ fontFamily: "'TT Bells', serif", fontSize: 32, letterSpacing: "-0.02em" }}>{c.name}</span>
              <span style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 11, fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase" }}>{c.catLabel}</span>
              <span style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12 }}>{c.city}</span>
              <span style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, fontWeight: 600 }}>{c.rate}</span>
              <span style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase" }}>
                <span style={{ display: "inline-block", width: 8, height: 8, borderRadius: "50%", background: c.available ? "#000" : "transparent", border: "1px solid #000", marginRight: 8, verticalAlign: "middle" }}></span>
                {c.available ? "disponible" : "ocupado"}
              </span>
              <span style={{ textAlign: "right", fontFamily: "'TT Bells', serif", fontSize: 28 }}>→</span>
            </div>
          ))}
        </section>
      )}
    </main>
  );
}

function CreatorCard({ creator, index, onClick, onHover, isHovered }) {
  return (
    <article
      onClick={onClick}
      onMouseEnter={() => onHover(creator.id)}
      onMouseLeave={() => onHover(null)}
      style={{
        border: "1px solid #000", background: "#fff",
        cursor: "pointer",
        transition: "transform 280ms cubic-bezier(.2,.7,.2,1), box-shadow 280ms cubic-bezier(.2,.7,.2,1)",
        transform: isHovered ? "translate(-3px, -3px)" : "translate(0,0)",
        boxShadow: isHovered ? "5px 5px 0 #000" : "0 0 0 #000",
        display: "flex", flexDirection: "column",
      }}
    >
      <Portrait tone={creator.tone} num={creator.id} name={creator.name} ratio="3/4" />
      <div style={{ padding: "14px 16px 16px", flex: 1, display: "flex", flexDirection: "column" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <Eyebrow style={{ color: "#555" }}>{creator.catLabel}</Eyebrow>
          <span style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase" }}>
            <span style={{ display: "inline-block", width: 6, height: 6, borderRadius: "50%", background: creator.available ? "#000" : "transparent", border: "1px solid #000", marginRight: 6, verticalAlign: "middle" }}></span>
            {creator.available ? "abierto" : "ocupado"}
          </span>
        </div>
        <div style={{ fontFamily: "'TT Bells', serif", fontSize: 28, lineHeight: 1, letterSpacing: "-0.02em", margin: "6px 0 8px" }}>{creator.name}</div>
        <p style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, lineHeight: 1.55, color: "#1a1a1a", margin: "0 0 12px", flex: 1 }}>{creator.blurb}</p>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 4, marginBottom: 12 }}>
          {creator.tags.slice(0, 3).map(t => (
            <span key={t} style={{
              fontFamily: "'Montserrat', sans-serif", fontSize: 9, fontWeight: 600,
              letterSpacing: "0.14em", textTransform: "uppercase",
              padding: "3px 8px", border: "1px solid #000", borderRadius: 999,
            }}>{t}</span>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", paddingTop: 10, borderTop: "1px solid #000", fontFamily: "'Montserrat', sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: "0.2em", textTransform: "uppercase" }}>
          <span>{creator.city}</span>
          <span>{creator.rate}</span>
          <span>perfil →</span>
        </div>
      </div>
    </article>
  );
}

Object.assign(window, { Directory });