/* BVS Master Deck — PART 3: Media (Bleu Media Group) */

/* ---------------- BMG SECTION DIVIDER ---------------- */
function BMGDividerSlide({ index, label }) {
  return (
    <Slide index={index} label={label} grid={true}>
      <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", justifyContent: "center", padding: "0 8vw" }}>
        <Reveal from="up" dist={20}>
          <DEyebrow slash={true}>the media department</DEyebrow>
        </Reveal>
        <Reveal from="up" dist={34} delay={0.12} style={{ marginTop: 8 }}>
          <h1 style={{ margin: 0, fontStyle: "italic", fontWeight: 900, fontSize: "clamp(130px,24vw,360px)", lineHeight: 0.82, letterSpacing: "-0.05em", color: "var(--bvs-ink)" }}>
            BMG<span style={{ color: "var(--bvs-blue)" }}>.</span>
          </h1>
        </Reveal>
        <Reveal from="up" dist={24} delay={0.26} style={{ marginTop: 22 }}>
          <DEyebrow slash={false} style={{ color: "rgba(10,10,10,0.5)", letterSpacing: "0.32em" }}>bleu media group</DEyebrow>
        </Reveal>
        <Reveal from="up" dist={22} delay={0.36} style={{ marginTop: 22, maxWidth: 640 }}>
          <p style={{ margin: 0, fontSize: "clamp(17px,1.5vw,23px)", fontWeight: 500, lineHeight: 1.45, color: "rgba(10,10,10,0.64)" }}>
            The media &amp; marketing arm of BVS — a complete, end-to-end production operation built around your brand.
          </p>
        </Reveal>
      </div>
      <Float amp={10} dur={9} style={{ position: "absolute", right: "6vw", top: "12vh" }}>
        <Reveal from="scale" dist={12} delay={0.3}>
          <div style={{ width: 120, color: "rgba(0,23,219,0.10)" }} dangerouslySetInnerHTML={{ __html: VMARK_SVG }} />
        </Reveal>
      </Float>
      <CornerMark />
    </Slide>
  );
}

/* ---------------- BMG STATEMENT ---------------- */
function BMGStatementSlide({ index, label }) {
  return (
    <Slide index={index} label={label} bg="var(--bvs-blue)" dark>
      <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", justifyContent: "center", padding: "0 9vw", color: "#fff" }}>
        <Reveal from="up" dist={20}><DEyebrow color="rgba(255,255,255,0.6)">bleu media group</DEyebrow></Reveal>
        <Reveal from="up" dist={34} delay={0.12} style={{ marginTop: 26 }}>
          <h2 style={{ margin: 0, fontStyle: "italic", fontWeight: 900, fontSize: "clamp(40px,5.4vw,92px)", lineHeight: 1.02, letterSpacing: "-0.03em", maxWidth: 1300 }}>
            We are the company that globalizes and <span style={{ background: "#fff", color: "var(--bvs-blue)", padding: "0 .12em" }}>re-shapes</span> your digital presence.
          </h2>
        </Reveal>
      </div>
      <CornerMark dark />
    </Slide>
  );
}

/* ---------------- TRUSTED BY ---------------- */
const CLIENTS = [
  // band 1 — wide feature tiles
  { f: "blrk", gc: "1 / 4", gr: "1 / 3", fit: "contain", bg: "#0a0a0a" },
  { f: "daniel", gc: "4 / 7", gr: "1 / 3", fit: "cover", pos: "50% 30%" },
  // band 2
  { f: "young", gc: "1", gr: "3 / 5", fit: "cover", pos: "50% 20%" },
  { f: "prozis", gc: "2", gr: "3 / 5", fit: "contain", bg: "#ed1c24" },
  { f: "ryt-wall", gc: "3", gr: "3 / 5", fit: "cover" },
  { f: "cr-longhair", gc: "4", gr: "3 / 5", fit: "cover", pos: "50% 30%" },
  { f: "cr-cap", gc: "5", gr: "3 / 5", fit: "cover", pos: "50% 22%" },
  { f: "athlete", gc: "6", gr: "3 / 5", fit: "cover", pos: "50% 28%" },
  // band 3
  { f: "cr-triangle", gc: "1", gr: "5 / 7", fit: "cover", pos: "50% 18%" },
  { f: "cr-keffiyeh", gc: "2", gr: "5 / 7", fit: "cover", pos: "50% 22%" },
  { f: "cr-ibiza", gc: "3", gr: "5 / 7", fit: "cover", pos: "50% 20%" },
  { f: "cr-podcaster", gc: "4", gr: "5 / 7", fit: "cover", pos: "50% 22%" },
  { f: "cr-cartoon", gc: "5", gr: "5 / 7", fit: "cover", pos: "50% 40%" },
  { f: "cr-orange", gc: "6", gr: "5 / 7", fit: "cover", pos: "50% 20%" },
];
function TrustedSlide({ index, label }) {
  return (
    <Slide index={index} label={label} grid={true}>
      <div style={{ position: "absolute", inset: 0, padding: "7vh 6vw 8vh", display: "flex", flexDirection: "column" }}>
        <Reveal from="up" dist={20}><DEyebrow>trusted by</DEyebrow></Reveal>
        <Reveal from="up" dist={28} delay={0.1} style={{ marginTop: 10 }}>
          <H size="clamp(32px,4.2vw,68px)">High-performing creators <span style={{ color: "var(--bvs-blue)" }}>&amp; brands.</span></H>
        </Reveal>
        <div style={{ flex: 1, display: "grid", gridTemplateColumns: "repeat(6,1fr)", gridTemplateRows: "repeat(6,1fr)", gap: 12, marginTop: "3vh", minHeight: 0 }}>
          {CLIENTS.map((c, i) => (
            <Reveal key={c.f} from="up" dist={22} delay={0.14 + i * 0.04} style={{ gridColumn: c.gc, gridRow: c.gr, minHeight: 0, minWidth: 0 }}>
              <img src={window.__res("assets/clients/" + c.f + ".png")} alt={c.f} style={{ width: "100%", height: "100%", objectFit: c.fit, objectPosition: c.pos || "50% 26%", borderRadius: 6, border: "1px solid var(--bvs-line)", display: "block", background: c.bg || "#fff", padding: c.fit === "contain" ? "3%" : 0 }} />
            </Reveal>
          ))}
        </div>
      </div>
      <CornerMark />
    </Slide>
  );
}

/* ---------------- VISIBILITY + TRUSTED BY (combined) ---------------- */
function VisibilityTrustedSlide({ index, label }) {
  const points = [
    { title: "No content infrastructure", body: "No production workflow, no post-production team, no system to consistently create and publish." },
    { title: "Production without strategy", body: "Filming happens, but there's no scripting, story arc or distribution plan. Views don't translate." },
    { title: "Short-form as an afterthought", body: "Output is inconsistent \u2014 there's no repeatable system behind it." },
    { title: "Branding all over the place", body: "No structure, no theme \u2014 content thrown out just to see what sticks." },
  ];
  const wall = ["daniel", "young", "prozis", "ryt-wall", "cr-longhair", "cr-cap", "blrk", "cr-triangle", "cr-keffiyeh", "cr-ibiza", "cr-podcaster", "cr-orange"];
  const pos = { daniel: "50% 30%", young: "50% 20%", "cr-longhair": "50% 30%", "cr-cap": "50% 22%", athlete: "50% 28%", "cr-triangle": "50% 18%", "cr-keffiyeh": "50% 22%", "cr-ibiza": "50% 20%", "cr-podcaster": "50% 22%", "cr-orange": "50% 20%" };
  return (
    <Slide index={index} label={label} grid={true}>
      <div style={{ position: "absolute", inset: 0, display: "grid", gridTemplateColumns: "0.92fr 1.08fr", alignItems: "center" }}>
        <div style={{ padding: "0 3vw 0 8vw" }}>
          <Reveal from="up" dist={20}><DEyebrow>the problem</DEyebrow></Reveal>
          <Reveal from="up" dist={30} delay={0.1} style={{ marginTop: 12 }}>
            <H size="clamp(28px,3.2vw,52px)">Most entrepreneurs have a <span style={{ color: "var(--bvs-blue)" }}>visibility problem</span>.</H>
          </Reveal>
          <div style={{ marginTop: 16 }}>
            {points.map((p, i) => (
              <Reveal key={i} from="up" dist={20} delay={0.2 + i * 0.08}>
                <div style={{ display: "flex", gap: 16, padding: "11px 0", borderBottom: "1px solid var(--bvs-line)" }}>
                  <span style={{ fontFamily: "var(--bvs-mono)", fontSize: 11, fontWeight: 700, color: "var(--bvs-blue)", marginTop: 5, minWidth: 22 }}>{String(i + 1).padStart(2, "0")}</span>
                  <div>
                    <div style={{ fontStyle: "italic", fontWeight: 900, fontSize: "clamp(15px,1.35vw,21px)", lineHeight: 1.1, letterSpacing: "-0.01em", color: "var(--bvs-ink)" }}>{p.title}</div>
                    <div style={{ fontSize: 12.5, fontWeight: 500, lineHeight: 1.38, color: "rgba(10,10,10,0.6)", marginTop: 3 }}>{p.body}</div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
        <div style={{ padding: "0 8vw 0 3vw" }}>
          <Reveal from="up" dist={18}>
            <div style={{ fontFamily: "var(--bvs-mono)", fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--bvs-blue)", marginBottom: 14 }}>[ trusted by high-performing creators &amp; brands ]</div>
          </Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 10 }}>
            {wall.map((f, i) => (
              <Reveal key={f} from="up" dist={20} delay={0.18 + i * 0.04}>
                <div style={{ aspectRatio: "1 / 1", minHeight: 0 }}>
                  <img src={window.__res("assets/clients/" + f + ".png")} alt={f} style={{ width: "100%", height: "100%", objectFit: (f === "prozis" || f === "blrk") ? "contain" : "cover", objectPosition: pos[f] || "50% 26%", borderRadius: 6, border: "1px solid var(--bvs-line)", display: "block", background: f === "prozis" ? "#ed1c24" : (f === "blrk" ? "#000" : "#fff"), padding: f === "prozis" ? "6%" : (f === "blrk" ? "12%" : 0) }} />
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
      <CornerMark />
    </Slide>
  );
}

/* ---------------- MANIFESTO (reusable numbered-points) ---------------- */
function ManifestoSlide({ index, label, eyebrow, title, intro, points, bg, dark, ghost }) {
  const ink = dark ? "#fff" : "var(--bvs-ink)";
  const mute = dark ? "rgba(255,255,255,0.64)" : "rgba(10,10,10,0.62)";
  const line = dark ? "rgba(255,255,255,0.16)" : "rgba(10,10,10,0.12)";
  const two = points.length > 4;
  return (
    <Slide index={index} label={label} bg={bg || "var(--bvs-paper)"} dark={dark} grid={!dark}>
      <div style={{ position: "absolute", inset: 0, display: "grid", gridTemplateColumns: "0.82fr 1.18fr", alignItems: "center" }}>
        <div style={{ padding: "0 3vw 0 8vw" }}>
          <Reveal from="up" dist={20}><DEyebrow color={dark ? "rgba(255,255,255,0.65)" : "var(--bvs-blue)"}>{eyebrow}</DEyebrow></Reveal>
          <Reveal from="up" dist={30} delay={0.1} style={{ marginTop: 14 }}>
            <H size="clamp(32px,3.7vw,60px)" color={ink}>{title}</H>
          </Reveal>
          {intro && (
            <Reveal from="up" dist={22} delay={0.2} style={{ marginTop: 18, maxWidth: 440 }}>
              <p style={{ margin: 0, fontSize: "clamp(14px,1.1vw,18px)", fontWeight: 500, lineHeight: 1.5, color: mute }}>{intro}</p>
            </Reveal>
          )}
        </div>
        <div style={{ padding: "0 8vw 0 2vw" }}>
          <div style={{ display: "grid", gridTemplateColumns: two ? "1fr 1fr" : "1fr", gap: two ? "0 40px" : 0 }}>
            {points.map((p, i) => (
              <Reveal key={i} from="up" dist={22} delay={0.25 + i * 0.09}>
                <div style={{ display: "flex", gap: 18, padding: "16px 0", borderBottom: "1px solid " + line }}>
                  <span style={{ fontFamily: "var(--bvs-mono)", fontSize: 12, fontWeight: 700, letterSpacing: "0.08em", color: dark ? "#fff" : "var(--bvs-blue)", marginTop: 6, minWidth: 26 }}>{String(i + 1).padStart(2, "0")}</span>
                  <div>
                    <div style={{ fontStyle: "italic", fontWeight: 900, fontSize: "clamp(17px,1.55vw,24px)", lineHeight: 1.1, letterSpacing: "-0.01em", color: ink }}>{p.title}</div>
                    <div style={{ fontSize: 13.5, fontWeight: 500, lineHeight: 1.4, color: mute, marginTop: 5 }}>{p.body}</div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
      {ghost && (
        <div style={{ position: "absolute", left: "8vw", bottom: "-4vh", pointerEvents: "none" }}>
          <GhostNum size="clamp(80px,12vw,200px)" color={dark ? "rgba(255,255,255,0.06)" : "rgba(0,23,219,0.07)"}>{ghost}</GhostNum>
        </div>
      )}
      <CornerMark dark={dark} />
    </Slide>
  );
}

/* ---------------- WE ARE YOUR MEDIA DEPARTMENT (service matrix) ---------------- */
function MediaDeptSlide({ index, label }) {
  const cols = [
    ["pre production", ["Content strategy & planning", "Ideation", "Scripting & narrative development", "Shot lists & storyboarding", "Brand positioning"]],
    ["post production", ["Short-form editing", "Long-form editing", "Motion graphics & titles", "Thumbnail & cover design", "Format optimization per platform"]],
    ["distribution", ["Posting & scheduling across platforms", "Short-form cuts & repurposing", "Mass distribution & clipping", "Performance tracking & reporting", "Ongoing content optimization"]],
  ];
  return (
    <Slide index={index} label={label} bg="var(--bvs-blue)" dark>
      <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", justifyContent: "center", padding: "0 6vw", color: "#fff" }}>
        <Reveal from="up" dist={20}><DEyebrow color="rgba(255,255,255,0.6)">all you do is film</DEyebrow></Reveal>
        <Reveal from="up" dist={30} delay={0.1} style={{ marginTop: 14, maxWidth: 1280 }}>
          <H size="clamp(34px,4.4vw,74px)" color="#fff">We are your <span style={{ background: "#fff", color: "var(--bvs-blue)", padding: "0 .1em" }}>media department</span>.</H>
        </Reveal>
        <Reveal from="up" dist={20} delay={0.2} style={{ marginTop: 18, maxWidth: 940 }}>
          <p style={{ margin: 0, fontSize: "clamp(15px,1.2vw,19px)", fontWeight: 500, lineHeight: 1.45, color: "rgba(255,255,255,0.72)" }}>
            A complete, end-to-end production operation — from first idea to published content. You film. We execute everything else.
          </p>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24, marginTop: 44 }}>
          {cols.map(([head, items], ci) => (
            <Reveal key={head} from="up" dist={26} delay={0.3 + ci * 0.12}>
              <div style={{ borderTop: "2px solid rgba(255,255,255,0.85)", paddingTop: 16 }}>
                <div style={{ fontFamily: "var(--bvs-mono)", fontSize: 12, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: "#fff" }}>[ {head} ]</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 11, marginTop: 18 }}>
                  {items.map((t) => (
                    <div key={t} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                      <span style={{ width: 5, height: 5, borderRadius: 1, background: "var(--bvs-green)", marginTop: 8, flex: "none" }} />
                      <span style={{ fontSize: 14.5, fontWeight: 500, lineHeight: 1.3, color: "rgba(255,255,255,0.92)" }}>{t}</span>
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </Slide>
  );
}

/* ---------------- SOME OF OUR WORK (gallery) ---------------- */
function WorkSlide({ index, label }) {
  return (
    <Slide index={index} label={label} bg="var(--bvs-ink)" dark>
      <div style={{ position: "absolute", inset: 0, padding: "7vh 6vw 8vh", display: "flex", flexDirection: "column" }}>
        <Reveal from="up" dist={20}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
            <DEyebrow color="rgba(255,255,255,0.6)">the reel</DEyebrow>
            <span style={{ fontFamily: "var(--bvs-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(255,255,255,0.4)" }}>short-form · in motion</span>
          </div>
        </Reveal>
        <Reveal from="up" dist={26} delay={0.1} style={{ marginTop: 10 }}>
          <H size="clamp(34px,4.4vw,72px)" color="#fff">Some of our work<span style={{ color: "rgba(255,255,255,0.5)" }}>.</span></H>
        </Reveal>
        <div style={{ flex: 1, display: "flex", gap: 18, justifyContent: "center", alignItems: "center", marginTop: "3vh", minHeight: 0 }}>
          {["clip5", "clip2", "clip3", "clip4"].map((c, i) => (
            <Reveal key={c} from="up" dist={28} delay={0.2 + i * 0.1} style={{ height: "62vh", aspectRatio: "9 / 16", minWidth: 0 }}>
              <video src={window.__res("assets/work/" + c + ".mp4")} poster={window.__res("assets/work/" + c + ".jpg")} autoPlay muted loop playsInline preload="metadata"
                style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 10, display: "block", background: "#000", border: "1px solid rgba(255,255,255,0.12)", boxShadow: "0 30px 60px -30px rgba(0,0,0,0.6)" }}></video>
            </Reveal>
          ))}
        </div>
      </div>
    </Slide>
  );
}

/* ---------------- INDUSTRY ---------------- */
function IndustrySlide({ index, label }) {
  return (
    <Slide index={index} label={label} grid={true}>
      <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", justifyContent: "center", padding: "0 8vw" }}>
        <Reveal from="up" dist={20}><DEyebrow>what's happening in the industry</DEyebrow></Reveal>
        <Reveal from="up" dist={34} delay={0.12} style={{ marginTop: 20, maxWidth: 1300 }}>
          <H size="clamp(36px,4.8vw,86px)">Brands are building <span style={{ color: "var(--bvs-blue)" }}>founder-led personal brands</span> across their company pages.</H>
        </Reveal>
        <Reveal from="up" dist={20} delay={0.28} style={{ marginTop: 28, maxWidth: 820 }}>
          <p style={{ margin: 0, fontSize: "clamp(16px,1.3vw,21px)", fontWeight: 500, lineHeight: 1.5, color: "rgba(10,10,10,0.6)" }}>
            The brands winning attention aren't hiding behind a logo. They're putting a face, a voice, and a point of view in front of their audience — consistently, at scale. That's exactly what we build.
          </p>
        </Reveal>
      </div>
      <CornerMark />
    </Slide>
  );
}

/* ---------------- MEDIA METRICS ---------------- */
function MediaMetricsSlide({ index, label }) {
  const stats = [
    ["1.5B+", "total views generated"],
    ["15,000+", "clips produced"],
    ["9M+", "followers managed"],
  ];
  return (
    <Slide index={index} label={label} bg="var(--bvs-blue)" dark>
      <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", justifyContent: "center", padding: "0 7vw", color: "#fff" }}>
        <Reveal from="up" dist={20}><DEyebrow color="rgba(255,255,255,0.6)">overall metrics</DEyebrow></Reveal>
        <Reveal from="up" dist={28} delay={0.1} style={{ marginTop: 14 }}>
          <H size="clamp(30px,3.4vw,56px)" color="#fff">The numbers behind the work<span style={{ color: "rgba(255,255,255,0.55)" }}>.</span></H>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "10px 48px", marginTop: 30 }}>
          {stats.map(([v, l], i) => (
            <Reveal key={v} from="up" dist={26} delay={0.2 + i * 0.1}>
              <div style={{ borderTop: "1px solid rgba(255,255,255,0.22)", padding: "26px 0" }}>
                <div style={{ fontStyle: "italic", fontWeight: 900, fontSize: "clamp(46px,5.6vw,104px)", lineHeight: 0.85, letterSpacing: "-0.04em", color: "#fff" }}>{v}</div>
                <div style={{ fontFamily: "var(--bvs-mono)", fontSize: 13, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(255,255,255,0.66)", marginTop: 14 }}>{l}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <CornerMark dark />
    </Slide>
  );
}

/* ---------------- MEDIA CASE (reusable) ---------------- */
function MediaCaseSlide({ index, label, mc }) {
  return (
    <Slide index={index} label={label} grid={true}>
      <div style={{ position: "absolute", inset: 0, display: "grid", gridTemplateColumns: "1fr 1fr" }}>
        <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", padding: "0 4vw 0 8vw" }}>
          <Reveal from="up" dist={18}>
            <DEyebrow>media case · {mc.sector}</DEyebrow>
          </Reveal>
          <Reveal from="up" dist={30} delay={0.1} style={{ marginTop: 12 }}>
            <H size="clamp(32px,4vw,62px)">{mc.title}<span style={{ color: "var(--bvs-blue)" }}>.</span></H>
          </Reveal>
          <Reveal from="up" dist={22} delay={0.2} style={{ marginTop: 16, maxWidth: 520 }}>
            <p style={{ margin: 0, fontSize: "clamp(14px,1.1vw,17.5px)", fontWeight: 500, lineHeight: 1.5, color: "rgba(10,10,10,0.64)" }}>{mc.body}</p>
          </Reveal>
          {mc.stats && (
            <Reveal from="up" dist={20} delay={0.32} style={{ marginTop: 24 }}>
              <div style={{ display: "flex", gap: 40, flexWrap: "wrap" }}>
                {mc.stats.map(([v, l]) => (
                  <div key={l}>
                    <div style={{ fontStyle: "italic", fontWeight: 900, fontSize: "clamp(28px,2.8vw,46px)", letterSpacing: "-0.02em", color: "var(--bvs-blue)" }}>{v}</div>
                    <div style={{ fontFamily: "var(--bvs-mono)", fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(10,10,10,0.5)", marginTop: 6 }}>{l}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          )}
          {mc.tags && (
            <Reveal from="up" dist={18} delay={0.42} style={{ marginTop: 22 }}>
              <div style={{ display: "flex", gap: 9, flexWrap: "wrap", maxWidth: 540 }}>
                {mc.tags.map((t) => <Chip key={t} tone="blue">{t}</Chip>)}
              </div>
            </Reveal>
          )}
        </div>
        <div style={{ position: "relative", padding: "6vh 7vw 6vh 2vw", display: "flex", alignItems: "center" }}>
          <Reveal from="left" dist={40} delay={0.25} dur={0.9} style={{ width: "100%" }}>
            {mc.Visual()}
          </Reveal>
        </div>
      </div>
      <CornerMark />
    </Slide>
  );
}

const MC_IMG = { width: "100%", display: "block", borderRadius: 8, border: "1px solid var(--bvs-line)" };

const MEDIA_CASES = [
  {
    id: "ryt", sector: "Blockchain · Web3", title: "RYT Chain",
    body: "RYT is a pioneering Layer-1 blockchain bringing governments and citizens onto a secure, gas-free ecosystem. They had zero social infrastructure — we're architecting it entirely, embedded in their team, across X, LinkedIn, Instagram, TikTok and YouTube Shorts.",
    tags: ["Full social build", "Short-form production", "Brand voice & identity", "Embedded with their team"],
    Visual: () => (
      <div style={{ display: "flex", flexDirection: "column", gap: 14, height: "76vh" }}>
        <img src={window.__res("assets/clients/ryt.png")} alt="RYT" style={{ ...MC_IMG, flex: "0 0 42%", objectFit: "cover", minHeight: 0 }} />
        <img src={window.__res("assets/clients/ryt-team.png")} alt="RYT team" style={{ ...MC_IMG, flex: 1, objectFit: "cover", minHeight: 0 }} />
      </div>
    ),
  },
  {
    id: "bigloud", sector: "Music · Records", title: "Big Loud Rock Records",
    body: "A mass-clipping campaign across their roster — one month of pure volume on 120+ accounts posting an artist's music daily, into the millions of views.",
    stats: [["2.3M+", "total views"], ["126", "accounts"], ["75K+", "likes"]],
    Visual: () => (
      <div style={{ display: "flex", flexDirection: "column", gap: 12, height: "76vh" }}>
        <div style={{ flex: "0 0 28%", background: "#0a0a0a", borderRadius: 8, display: "grid", placeItems: "center", padding: "3%", minHeight: 0 }}>
          <img src={window.__res("assets/clients/blrk.png")} alt="Big Loud Rock" style={{ maxWidth: "94%", maxHeight: "82%", objectFit: "contain", display: "block" }} />
        </div>
        <img src={window.__res("assets/clients/blrk-totals.png")} alt="Campaign totals" style={{ ...MC_IMG, flex: "0 0 18%", objectFit: "contain", background: "#fff", minHeight: 0, padding: 6 }} />
        <img src={window.__res("assets/clients/blrk-charts.png")} alt="Per-account performance" style={{ ...MC_IMG, flex: 1, objectFit: "contain", background: "#fff", minHeight: 0, padding: 8 }} />
      </div>
    ),
  },
  {
    id: "daniel", sector: "Education · Creator", title: "English with Daniel",
    body: "A creator-led education channel (Angielski z Danielem). End-to-end production and distribution that compounded into millions of views, a six-figure subscriber base and real creator revenue.",
    stats: [["3.5M", "views · 90 days"], ["110K+", "subscribers"], ["$10.7K", "revenue · 90 days"]],
    Visual: () => (
      <div style={{ display: "grid", placeItems: "center", width: "100%" }}>
        <img src={window.__res("assets/clients/daniel-analytics.png")} alt="English with Daniel — YouTube analytics" style={{ width: "100%", maxHeight: "72vh", objectFit: "contain", borderRadius: 8, border: "1px solid var(--bvs-line)", display: "block", background: "#0f0f0f" }} />
      </div>
    ),
  },
];

Object.assign(window, {
  BMGDividerSlide, BMGStatementSlide, TrustedSlide, VisibilityTrustedSlide, ManifestoSlide,
  MediaDeptSlide, WorkSlide, IndustrySlide, MediaMetricsSlide, MediaCaseSlide, MEDIA_CASES,
});