/* Individual talent profile page — three layout variants for comparison */

function TalentBio({ bio }) {
  return bio.split("\n\n").map((para, i) => (
    <p key={i} style={{
      fontSize: "clamp(16px, 1.6vw, 21px)",
      lineHeight: 1.65,
      color: "var(--muted)",
      fontFamily: "var(--sans)",
      marginBottom: 18
    }}>
      {para}
    </p>
  ));
}

function TalentIG({ instagram }) {
  if (!instagram) return null;
  return (
    <a
      href={"https://instagram.com/" + instagram}
      target="_blank"
      rel="noopener noreferrer"
      data-cursor="hover"
      data-cursor-label="INSTA"
      style={{
        fontFamily: "var(--mono)", fontSize: 11,
        letterSpacing: "0.1em", textTransform: "uppercase",
        color: "var(--muted)", textDecoration: "none"
      }}
    >
      @{instagram}
    </a>
  );
}

function TalentClients({ clients }) {
  if (!clients || !clients.length) return null;
  return (
    <div style={{
      fontFamily: "var(--mono)", fontSize: 11,
      letterSpacing: "0.1em", textTransform: "uppercase",
      color: "var(--muted)"
    }}>
      {clients.join(" · ")}
    </div>
  );
}

function TalentWorkGrid({ work }) {
  if (!work || !work.length) return null;
  return (
    <section style={{ padding: "40px var(--pad-x) 0" }}>
      <div style={{ marginBottom: 32 }} />
      <div style={{ columns: "3 320px", columnGap: 20 }}>
        {work.map((item, i) => (
          <div key={i} style={{ breakInside: "avoid", marginBottom: 20 }}>
            {item.type === "video" ? (
              <VideoTile src={item.src} label={item.title} sub={item.client} aspect="auto" dark showSprockets={false} />
            ) : (
              <div style={{ position: "relative", overflow: "hidden" }}>
                <img src={item.src} alt={item.title} loading="lazy" style={{ width: "100%", display: "block" }} />
                <div style={{
                  position: "absolute", bottom: 0, left: 0, right: 0,
                  padding: "20px 16px",
                  background: "linear-gradient(transparent, rgba(0,0,0,0.55))",
                  color: "rgba(244,241,234,0.8)",
                  fontFamily: "var(--mono)", fontSize: 10,
                  letterSpacing: "0.12em", textTransform: "uppercase"
                }}>
                  <div style={{ marginBottom: 4 }}>{item.client}</div>
                  <div style={{
                    fontFamily: "var(--display)", fontSize: 18,
                    color: "var(--paper)", textTransform: "none",
                    letterSpacing: "-0.01em"
                  }}>
                    {item.title}
                  </div>
                </div>
              </div>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}

function TalentCTA({ talent, navigate }) {
  return (
    <section style={{
      padding: "80px var(--pad-x) 0",
      maxWidth: 1400, margin: "0 auto",
      borderTop: "1px solid var(--line)", marginTop: 80
    }}>
      <div style={{
        fontFamily: "var(--display)",
        fontSize: "clamp(28px, 4vw, 52px)",
        lineHeight: 1.1, letterSpacing: "-0.02em",
        fontWeight: 400, fontStyle: "italic", marginBottom: 28
      }}>
        Interested in working with {talent.name.split(" ")[0]}?
      </div>
      <button className="link-action" onClick={() => navigate("contact")} data-cursor="hover" data-cursor-label="CONTACT">
        Get in Touch <span className="glyph">↗</span>
      </button>
    </section>
  );
}

function TalentBack({ navigate }) {
  return (
    <button
      className="link-action small"
      onClick={() => navigate("talent")}
      data-cursor="hover"
      data-cursor-label="BACK"
      style={{ color: "var(--muted)", marginBottom: 60 }}
    >
      <span className="glyph" style={{ marginRight: 6 }}>←</span> 212 Talent
    </button>
  );
}

/* ── Layout A: Stacked (current) ── */
function LayoutStacked({ talent, navigate }) {
  return (
    <>
      <section style={{ padding: "140px var(--pad-x) 80px", maxWidth: 1400, margin: "0 auto" }}>
        <TalentBack navigate={navigate} />
        <h1 style={{
          fontFamily: "var(--display)", fontSize: "clamp(52px, 10vw, 180px)",
          lineHeight: 0.92, letterSpacing: "-0.03em",
          fontWeight: 400, fontStyle: "italic", color: "var(--fg)", marginBottom: 28
        }}>
          {talent.name}
        </h1>
        <div className="eyebrow" style={{ marginBottom: 20 }}>{talent.role}</div>
        <TalentClients clients={talent.clients} />
        <div style={{ maxWidth: 680, marginTop: 32, marginBottom: 28 }}>
          <TalentBio bio={talent.bio} />
        </div>
        <TalentIG instagram={talent.instagram} />
      </section>
      <TalentWorkGrid work={talent.work} />
      <TalentCTA talent={talent} navigate={navigate} />
    </>
  );
}

/* ── Layout B: Split editorial ── */
function LayoutSplit({ talent, navigate }) {
  return (
    <>
      <section style={{
        padding: "140px var(--pad-x) 80px", maxWidth: 1400, margin: "0 auto",
        display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: "0 clamp(40px, 6vw, 100px)", alignItems: "start"
      }}>
        <div style={{ position: "sticky", top: 140 }}>
          <TalentBack navigate={navigate} />
          <h1 style={{
            fontFamily: "var(--display)", fontSize: "clamp(44px, 7vw, 120px)",
            lineHeight: 0.92, letterSpacing: "-0.03em",
            fontWeight: 400, fontStyle: "italic", color: "var(--fg)", marginBottom: 28
          }}>
            {talent.name}
          </h1>
          <div className="eyebrow" style={{ marginBottom: 20 }}>{talent.role}</div>
          <TalentIG instagram={talent.instagram} />
        </div>

        <div>
          <TalentClients clients={talent.clients} />
          <div style={{ marginTop: 32 }}>
            <TalentBio bio={talent.bio} />
          </div>
        </div>
      </section>
      <TalentWorkGrid work={talent.work} />
      <TalentCTA talent={talent} navigate={navigate} />
    </>
  );
}

/* ── Layout C: Full-bleed name + sidebar metadata ── */
function TalentHeroVideo({ src }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const wrap = ref.current;
    if (!wrap || !src) return;
    const video = document.createElement("video");
    video.src = src;
    video.autoplay = true;
    video.muted = true;
    video.loop = true;
    video.playsInline = true;
    video.setAttribute("playsinline", "");
    video.setAttribute("webkit-playsinline", "");
    Object.assign(video.style, {
      position: "absolute", inset: "0",
      width: "100%", height: "100%", objectFit: "cover"
    });
    wrap.appendChild(video);
    video.play().catch(function() {});
    return function() { video.pause(); video.remove(); };
  }, [src]);
  return <div ref={ref} style={{ position: "absolute", inset: 0, overflow: "hidden" }} />;
}

function LayoutBleed({ talent, navigate }) {
  const heroSrc = talent.heroVideo || null;
  return (
    <>
      {/* Hero: full-bleed video with name overlay */}
      <section style={{
        position: "relative", minHeight: "80vh",
        display: "flex", flexDirection: "column", justifyContent: "flex-end",
        background: "#0a0a0a", overflow: "hidden"
      }}>
        {heroSrc && <TalentHeroVideo src={heroSrc} />}
        {!heroSrc && <div style={{ position: "absolute", inset: 0, background: "#0a0a0a" }} />}
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 30%, transparent 40%, rgba(0,0,0,0.65) 100%)",
          pointerEvents: "none"
        }} />
        <div style={{ position: "absolute", top: 120, left: "var(--pad-x)" }}>
          <TalentBack navigate={navigate} />
        </div>
        <div style={{ position: "relative", padding: "0 var(--pad-x) 60px" }}>
          <h1 style={{
            fontFamily: "var(--display)", fontSize: "clamp(64px, 14vw, 260px)",
            lineHeight: 0.88, letterSpacing: "-0.04em",
            fontWeight: 400, fontStyle: "italic", color: "#EFEBE3"
          }}>
            {talent.name}
          </h1>
        </div>
      </section>

      <section style={{
        padding: "60px var(--pad-x) 80px", maxWidth: 1400, margin: "0 auto",
        display: "grid", gridTemplateColumns: "2fr 1fr", gap: "0 clamp(40px, 6vw, 100px)", alignItems: "start"
      }}>
        <div>
          <TalentBio bio={talent.bio} />
        </div>
        <div style={{ position: "sticky", top: 140 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Role</div>
          <div style={{
            fontFamily: "var(--sans)", fontSize: "clamp(16px, 1.4vw, 20px)",
            color: "var(--fg)", marginBottom: 36
          }}>
            {talent.role}
          </div>

          <div className="eyebrow" style={{ marginBottom: 16 }}>Clients</div>
          <div style={{
            fontFamily: "var(--sans)", fontSize: 14,
            color: "var(--muted)", lineHeight: 1.8, marginBottom: 36
          }}>
            {(talent.clients || []).map((c, i) => (
              <span key={i}>{c}{i < talent.clients.length - 1 ? <br/> : null}</span>
            ))}
          </div>

          <div className="eyebrow" style={{ marginBottom: 16 }}>Instagram</div>
          <TalentIG instagram={talent.instagram} />
        </div>
      </section>
      <TalentWorkGrid work={talent.work} />
      <TalentCTA talent={talent} navigate={navigate} />
    </>
  );
}

/* ── Main wrapper with layout switcher ── */
function TalentProfilePage({ slug, navigate }) {
  const talent = window.getTalentBySlug(slug);
  const [layout, setLayout] = React.useState(window.__talentLayout || "stacked");

  React.useEffect(() => { window.__talentLayout = layout; }, [layout]);

  React.useEffect(() => {
    if (!talent) navigate("home");
  }, [talent]);

  if (!talent) return null;

  const layouts = ["stacked", "split", "bleed"];

  return (
    <div className="page" style={{ background: "var(--bg)", minHeight: "100vh", paddingBottom: 120 }}>
      {/* Layout switcher — temporary for comparison */}
      <div style={{
        position: "fixed", bottom: 24, left: "50%", transform: "translateX(-50%)",
        zIndex: 100, display: "flex", gap: 4, padding: 4,
        background: "var(--ink)", borderRadius: 6
      }}>
        {layouts.map(l => (
          <button
            key={l}
            onClick={() => { setLayout(l); window.scrollTo(0, 0); }}
            data-cursor="hover"
            style={{
              fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.1em",
              textTransform: "uppercase", padding: "8px 16px", borderRadius: 4,
              color: layout === l ? "var(--ink)" : "var(--paper)",
              background: layout === l ? "var(--accent)" : "transparent",
              transition: "all 200ms var(--ease)"
            }}
          >
            {l === "stacked" ? "A · Stacked" : l === "split" ? "B · Split" : "C · Full-bleed"}
          </button>
        ))}
      </div>

      {layout === "stacked" && <LayoutStacked talent={talent} navigate={navigate} />}
      {layout === "split" && <LayoutSplit talent={talent} navigate={navigate} />}
      {layout === "bleed" && <LayoutBleed talent={talent} navigate={navigate} />}
    </div>
  );
}

Object.assign(window, { TalentProfilePage });