// Creator profile modal — full-screen editorial overlay

function CreatorProfile({ creator, onClose, accent }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [onClose]);

  if (!creator) return null;
  const { CREATORS } = window.CB_DATA;
  const others = CREATORS.filter(c => c.id !== creator.id && c.category === creator.category).slice(0, 3);
  const fallback = CREATORS.filter(c => c.id !== creator.id).slice(0, 3);
  const related = others.length > 0 ? others : fallback;

  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 100,
      background: "#fff",
      overflowY: "auto",
      animation: "cb-fade-in 320ms cubic-bezier(.2,.7,.2,1)",
    }}>
      {/* Top bar */}
      <div style={{
        position: "sticky", top: 0, zIndex: 10,
        display: "flex", justifyContent: "space-between", alignItems: "center",
        padding: "16px 32px", borderBottom: "1px solid #000",
        background: "#000", color: "#fff",
      }}>
        <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: "0.22em", textTransform: "uppercase" }}>
          perfil — {creator.id} / {creator.catLabel}
        </div>
        <button onClick={onClose} style={{
          background: "none", border: "1px solid #fff", color: "#fff",
          padding: "8px 14px",
          fontFamily: "'Montserrat', sans-serif", fontSize: 10, fontWeight: 600,
          letterSpacing: "0.22em", textTransform: "uppercase",
          cursor: "pointer",
        }}
        onMouseEnter={e => { e.currentTarget.style.background = accent; e.currentTarget.style.color = "#000"; e.currentTarget.style.borderColor = accent; }}
        onMouseLeave={e => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "#fff"; e.currentTarget.style.borderColor = "#fff"; }}
        >cerrar ✕</button>
      </div>

      {/* Hero — split */}
      <section style={{ display: "grid", gridTemplateColumns: "5fr 7fr", borderBottom: "1px solid #000" }}>
        <div style={{ borderRight: "1px solid #000", aspectRatio: "4/5" }}>
          <Portrait tone={creator.tone} num={creator.id} name={creator.name} ratio="4/5" />
        </div>
        <div style={{ padding: "48px 40px 40px", display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: "60vh" }}>
          <div>
            <Eyebrow style={{ borderTop: "1px solid #000", paddingTop: 8, display: "inline-block", paddingRight: 60, marginBottom: 32 }}>
              {creator.catLabel} · {creator.city}
            </Eyebrow>
            <h1 style={{
              fontFamily: "'TT Bells', serif",
              fontSize: "clamp(64px, 9vw, 144px)",
              lineHeight: 0.92, letterSpacing: "-0.05em",
              margin: 0, fontWeight: 400,
            }}>
              {creator.name}<span style={{ color: accent, fontStyle: "italic" }}>.</span>
            </h1>
            <p style={{
              fontFamily: "'TT Bells', serif",
              fontSize: "clamp(20px, 2vw, 28px)",
              lineHeight: 1.25,
              margin: "32px 0 0",
              maxWidth: "85%",
              fontStyle: "italic",
              color: "#1a1a1a",
            }}>{creator.blurb}</p>
          </div>
          <div style={{ display: "flex", gap: 32, paddingTop: 32, borderTop: "1px solid #000", marginTop: 32 }}>
            <Stat label="estado" value={creator.available ? "disponible" : "ocupado"} dot={creator.available} />
            <Stat label="rango" value={creator.rate} />
            <Stat label="ciudad" value={creator.city} />
            <Stat label="práctica" value={creator.catLabel} />
          </div>
        </div>
      </section>

      {/* Bio + tags + meta */}
      <section style={{ padding: "64px 40px", borderBottom: "1px solid #000", display: "grid", gridTemplateColumns: "3fr 6fr 3fr", gap: 40 }}>
        <div>
          <Eyebrow style={{ borderTop: "1px solid #000", paddingTop: 8 }}>biografía</Eyebrow>
        </div>
        <div>
          <p style={{ fontFamily: "'TT Bells', serif", fontSize: 32, lineHeight: 1.2, letterSpacing: "-0.01em", margin: 0, fontWeight: 400 }}>
            {creator.longBio}
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 32 }}>
            {creator.tags.map(t => (
              <span key={t} style={{
                fontFamily: "'Montserrat', sans-serif", fontSize: 10, fontWeight: 600,
                letterSpacing: "0.18em", textTransform: "uppercase",
                padding: "6px 14px", border: "1px solid #000", borderRadius: 999,
              }}>{t}</span>
            ))}
          </div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <Eyebrow style={{ borderTop: "1px solid #000", paddingTop: 8 }}>contacto</Eyebrow>
          <Linkline label="instagram" value={creator.links.ig} />
          <Linkline label="sitio" value={creator.links.web} />
          <Linkline label="rango" value={creator.rateRange} />
          <button style={{
            marginTop: 12,
            fontFamily: "'Montserrat', sans-serif", fontSize: 11, fontWeight: 600,
            letterSpacing: "0.18em", textTransform: "uppercase",
            padding: "14px 18px", border: "1px solid #000", background: accent, color: "#000",
            cursor: "pointer", transition: "all 220ms cubic-bezier(.2,.7,.2,1)",
          }}
          onMouseEnter={e => { e.currentTarget.style.background = "#000"; e.currentTarget.style.color = "#fff"; }}
          onMouseLeave={e => { e.currentTarget.style.background = accent; e.currentTarget.style.color = "#000"; }}
          >iniciar brief →</button>
        </div>
      </section>

      {/* Portfolio — works grid */}
      <section style={{ padding: "64px 40px", borderBottom: "1px solid #000" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 32, paddingBottom: 16, borderBottom: "1px solid #000" }}>
          <div>
            <Eyebrow>portafolio · selección</Eyebrow>
            <h2 style={{ fontFamily: "'TT Bells', serif", fontSize: "clamp(48px, 6vw, 88px)", lineHeight: 0.95, letterSpacing: "-0.03em", margin: "12px 0 0", fontWeight: 400 }}>
              piezas recientes<span style={{ color: accent, fontStyle: "italic" }}>.</span>
            </h2>
          </div>
          <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 11, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "#555" }}>
            {creator.works.length} piezas — 2024–2026
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: `repeat(${Math.min(creator.works.length, 4)}, 1fr)`, gap: 14 }}>
          {creator.works.map((w, i) => (
            <WorkCard key={i} work={w} index={i + 1} />
          ))}
        </div>
      </section>

      {/* Related */}
      <section style={{ padding: "64px 40px", background: "#e4e4e4", borderBottom: "1px solid #000" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 24, paddingBottom: 16, borderBottom: "1px solid #000" }}>
          <div>
            <Eyebrow>también en {creator.catLabel}</Eyebrow>
            <h3 style={{ fontFamily: "'TT Bells', serif", fontSize: 48, lineHeight: 1, letterSpacing: "-0.02em", margin: "8px 0 0", fontWeight: 400 }}>
              otras piezas
            </h3>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14 }}>
          {related.map(c => (
            <RelatedCard key={c.id} creator={c} onClick={() => {
              onClose();
              setTimeout(() => window.__openCreator(c.id), 100);
            }} />
          ))}
        </div>
      </section>
    </div>
  );
}

function Stat({ label, value, dot }) {
  return (
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 9, fontWeight: 600, letterSpacing: "0.22em", textTransform: "uppercase", color: "#555", marginBottom: 6 }}>{label}</div>
      <div style={{ fontFamily: "'TT Bells', serif", fontSize: 24, lineHeight: 1, letterSpacing: "-0.01em", display: "flex", alignItems: "center", gap: 8 }}>
        {dot !== undefined && <span style={{ display: "inline-block", width: 10, height: 10, borderRadius: "50%", background: dot ? "#000" : "transparent", border: "1px solid #000" }}></span>}
        {value}
      </div>
    </div>
  );
}

function Linkline({ label, value }) {
  return (
    <div style={{ paddingBottom: 10, borderBottom: "1px solid #000" }}>
      <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 9, fontWeight: 600, letterSpacing: "0.22em", textTransform: "uppercase", color: "#555", marginBottom: 4 }}>{label}</div>
      <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 14, color: "#000" }}>{value}</div>
    </div>
  );
}

function WorkCard({ work, index }) {
  const colors = { pink: "#fd99c6", yellow: "#fffaa4", blue: "#c7e7f5", grey: "#e4e4e4" };
  return (
    <div style={{ border: "1px solid #000", cursor: "pointer", transition: "transform 220ms cubic-bezier(.2,.7,.2,1)" }}
      onMouseEnter={e => e.currentTarget.style.transform = "translate(-2px,-2px)"}
      onMouseLeave={e => e.currentTarget.style.transform = "translate(0,0)"}
    >
      <div style={{
        background: colors[work.tone] || colors.pink, aspectRatio: "1/1",
        display: "flex", alignItems: "flex-end", justifyContent: "space-between",
        padding: 12, borderBottom: "1px solid #000", position: "relative", overflow: "hidden",
      }}>
        <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.5 }}>
          <line x1="0" y1="0" x2="100" y2="100" stroke="#000" strokeWidth="0.4" />
          <line x1="100" y1="0" x2="0" y2="100" stroke="#000" strokeWidth="0.4" />
          <circle cx="50" cy="50" r="36" fill="none" stroke="#000" strokeWidth="0.5" />
          <circle cx="50" cy="50" r="22" fill="none" stroke="#000" strokeWidth="0.5" />
        </svg>
        <span style={{ position: "relative", fontFamily: "'TT Bells', serif", fontSize: 32, lineHeight: 0.9 }}>0{index}</span>
        <span style={{ position: "relative", fontFamily: "'Montserrat', sans-serif", fontSize: 9, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase" }}>{work.year}</span>
      </div>
      <div style={{ padding: "10px 12px 12px" }}>
        <div style={{ fontFamily: "'TT Bells', serif", fontSize: 18, lineHeight: 1.05, letterSpacing: "-0.01em" }}>{work.title}</div>
      </div>
    </div>
  );
}

function RelatedCard({ creator, onClick }) {
  return (
    <article onClick={onClick} style={{ border: "1px solid #000", background: "#fff", cursor: "pointer" }}>
      <Portrait tone={creator.tone} num={creator.id} name={creator.name} ratio="3/4" />
      <div style={{ padding: "12px 14px 14px" }}>
        <Eyebrow style={{ color: "#555" }}>{creator.catLabel}</Eyebrow>
        <div style={{ fontFamily: "'TT Bells', serif", fontSize: 26, lineHeight: 1, letterSpacing: "-0.02em", margin: "6px 0 0" }}>{creator.name}</div>
      </div>
    </article>
  );
}

Object.assign(window, { CreatorProfile });