/* BVS Master Deck — PART 4: Alaska opportunity · Partners · Close */

/* ---------------- ALASKA DIVIDER ---------------- */
function AlaskaDividerSlide({ 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>the next move · with kyle</DEyebrow></Reveal>
        <Reveal from="up" dist={34} delay={0.12} style={{ marginTop: 8 }}>
          <h1 style={{ margin: 0, fontStyle: "italic", fontWeight: 900, fontSize: "clamp(80px,15vw,230px)", lineHeight: 0.86, letterSpacing: "-0.04em", color: "var(--bvs-ink)" }}>
            Alaska<span style={{ color: "var(--bvs-blue)" }}>.</span>
          </h1>
        </Reveal>
        <Reveal from="up" dist={22} delay={0.26} style={{ marginTop: 24, maxWidth: 720 }}>
          <p style={{ margin: 0, fontSize: "clamp(18px,1.6vw,25px)", fontWeight: 500, lineHeight: 1.45, color: "rgba(10,10,10,0.64)" }}>
            A partnership to take on the Alaskan market together — you bring the clients, we build it all, and you share in the revenue.
          </p>
        </Reveal>
      </div>
      <Float amp={10} dur={9} style={{ position: "absolute", right: "7vw", bottom: "10vh" }}>
        <Reveal from="scale" dist={12} delay={0.3}>
          <div style={{ width: 130, color: "rgba(0,23,219,0.10)" }} dangerouslySetInnerHTML={{ __html: VMARK_SVG }} />
        </Reveal>
      </Float>
      <CornerMark />
    </Slide>
  );
}

/* ---------------- ALASKA MODEL (partnership options) ---------------- */
function AlaskaModelSlide({ index, label }) {
  const options = [
    {
      tag: "the core", featured: true, title: "Rev-share partnership",
      body: "You bring the clients and the market. We build it all — AI systems and media. You earn a share of the revenue on every client you bring in.",
    },
    {
      tag: "option", title: "A co-built venture",
      body: "Spin up a dedicated company for Alaska — co-owned and purpose-built to win the market together.",
    },
    {
      tag: "option", title: "We power your company",
      body: "We run delivery behind the scenes for your own company — AI and content, white-labeled under your brand.",
    },
  ];
  return (
    <Slide index={index} label={label} grid={true}>
      <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", justifyContent: "center", padding: "0 7vw" }}>
        <Reveal from="up" dist={20}><DEyebrow>the partnership</DEyebrow></Reveal>
        <Reveal from="up" dist={30} delay={0.1} style={{ marginTop: 12, maxWidth: 1180 }}>
          <H size="clamp(32px,4vw,62px)">Here's what's <span style={{ color: "var(--bvs-blue)" }}>possible</span>.</H>
        </Reveal>
        <Reveal from="up" dist={20} delay={0.2} style={{ marginTop: 16, maxWidth: 820 }}>
          <p style={{ margin: 0, fontSize: "clamp(15px,1.2vw,19px)", fontWeight: 500, lineHeight: 1.45, color: "rgba(10,10,10,0.6)" }}>
            Nothing's set in stone — a few ways we could work together. At the core: a partnership where you share in the revenue of every client you bring in.
          </p>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18, marginTop: "4vh", alignItems: "stretch" }}>
          {options.map((o, i) => (
            <Reveal key={o.title} from="up" dist={28} delay={0.3 + i * 0.12}>
              <div style={{
                position: "relative", height: "100%", borderRadius: 6, padding: "26px 24px",
                background: o.featured ? "var(--bvs-blue)" : "#fff",
                color: o.featured ? "#fff" : "var(--bvs-ink)",
                border: o.featured ? "1px solid var(--bvs-blue)" : "1px solid var(--bvs-line)",
                boxShadow: o.featured ? "0 30px 60px -24px rgba(0,23,219,0.5)" : "0 1px 0 rgba(0,0,0,0.04)",
                transform: o.featured ? "translateY(-10px)" : "none",
              }}>
                {o.featured && <div style={{ position: "absolute", top: -12, left: 24, background: "var(--bvs-green)", color: "var(--bvs-ink)", fontFamily: "var(--bvs-mono)", fontSize: 10, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", padding: "4px 10px", borderRadius: 2 }}>{o.tag}</div>}
                {!o.featured && <div style={{ fontFamily: "var(--bvs-mono)", fontSize: 10.5, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(10,10,10,0.4)" }}>{o.tag}</div>}
                <div style={{ fontStyle: "italic", fontWeight: 900, fontSize: "clamp(22px,2.1vw,32px)", letterSpacing: "-0.02em", lineHeight: 1.04, marginTop: o.featured ? 14 : 12 }}>{o.title}</div>
                <p style={{ margin: "14px 0 0", fontSize: "clamp(13.5px,1vw,16px)", fontWeight: 500, lineHeight: 1.45, color: o.featured ? "rgba(255,255,255,0.86)" : "rgba(10,10,10,0.62)" }}>{o.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal from="up" dist={16} delay={0.66} style={{ marginTop: "3vh" }}>
          <div style={{ fontFamily: "var(--bvs-mono)", fontSize: 12.5, fontWeight: 700, letterSpacing: "0.08em", color: "rgba(10,10,10,0.5)" }}>// we'll shape the structure around whatever works best for you</div>
        </Reveal>
      </div>
      <CornerMark />
    </Slide>
  );
}

/* ---------------- ALASKA DELIVER (2x2 matrix) ---------------- */
function AlaskaDeliverSlide({ index, label }) {
  const cells = [
    { row: "For Kyle's clients", col: "AI & Systems", body: "Custom AI agents, automations and operating systems sold into his client base — new recurring revenue.", tone: "blue" },
    { row: "For Kyle's clients", col: "Media & Marketing", body: "Full content production & distribution for his clients — the media department they don't have.", tone: "ink" },
    { row: "For Kyle's company", col: "AI & Systems", body: "Internal tooling, dashboards and automations that lower cost and raise output across his operation.", tone: "ink" },
    { row: "For Kyle's company", col: "Media & Marketing", body: "A founder-led brand and content engine that grows his company's presence at scale.", tone: "blue" },
  ];
  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)">what we build</DEyebrow></Reveal>
        <Reveal from="up" dist={28} delay={0.1} style={{ marginTop: 14 }}>
          <H size="clamp(30px,3.6vw,58px)" color="#fff">Two engines, on both sides<span style={{ color: "rgba(255,255,255,0.55)" }}>.</span></H>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "180px 1fr 1fr", gap: 14, marginTop: 34, alignItems: "stretch" }}>
          {/* header row */}
          <div></div>
          <Reveal from="up" dist={16} delay={0.18}><div style={{ fontFamily: "var(--bvs-mono)", fontSize: 13, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "#fff", paddingBottom: 6 }}>AI &amp; Systems · BVS</div></Reveal>
          <Reveal from="up" dist={16} delay={0.24}><div style={{ fontFamily: "var(--bvs-mono)", fontSize: 13, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "#fff", paddingBottom: 6 }}>Media &amp; Marketing · BMG</div></Reveal>
          {/* rows */}
          {["For Kyle's clients", "For Kyle's company"].map((rowName, ri) => (
            <React.Fragment key={rowName}>
              <Reveal from="up" dist={18} delay={0.3 + ri * 0.16}>
                <div style={{ display: "flex", alignItems: "center", height: "100%", fontStyle: "italic", fontWeight: 900, fontSize: "clamp(17px,1.6vw,24px)", letterSpacing: "-0.01em", lineHeight: 1.05 }}>{rowName}</div>
              </Reveal>
              {cells.filter((c) => c.row === rowName).map((c, ci) => (
                <Reveal key={ci} from="up" dist={22} delay={0.34 + ri * 0.16 + ci * 0.08}>
                  <div style={{ background: c.tone === "blue" ? "rgba(255,255,255,0.10)" : "var(--bvs-ink)", border: "1px solid rgba(255,255,255,0.18)", borderRadius: 6, padding: "20px 20px", height: "100%" }}>
                    <p style={{ margin: 0, fontSize: 15, fontWeight: 500, lineHeight: 1.45, color: "rgba(255,255,255,0.9)" }}>{c.body}</p>
                  </div>
                </Reveal>
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>
      <CornerMark dark />
    </Slide>
  );
}

/* ---------------- PARTNERS ---------------- */
function PartnersSlide({ 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>partners</DEyebrow></Reveal>
        <Reveal from="up" dist={30} delay={0.1} style={{ marginTop: 14 }}>
          <H size="clamp(34px,4.4vw,72px)">Our media &amp; marketing <span style={{ color: "var(--bvs-blue)" }}>partners.</span></H>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22, marginTop: 44, maxWidth: 1080 }}>
          <Reveal from="up" dist={24} delay={0.22}>
            <div style={{ background: "#fff", border: "1px solid var(--bvs-line)", borderRadius: 6, padding: "40px 36px", minHeight: 260, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div style={{ fontStyle: "italic", fontWeight: 900, fontSize: "clamp(54px,6vw,92px)", letterSpacing: "-0.03em", color: "var(--bvs-blue)", lineHeight: 0.9 }}>BMG</div>
              <div>
                <div style={{ fontFamily: "var(--bvs-mono)", fontSize: 12, fontWeight: 700, letterSpacing: "0.22em", textTransform: "lowercase", color: "rgba(10,10,10,0.5)" }}>bleu media group</div>
                <div style={{ fontSize: 15, fontWeight: 500, color: "rgba(10,10,10,0.6)", marginTop: 10, maxWidth: 380, lineHeight: 1.45 }}>Our in-house media &amp; marketing engine — production, distribution and growth.</div>
              </div>
            </div>
          </Reveal>
          <Reveal from="up" dist={24} delay={0.34}>
            <div style={{ background: "var(--bvs-ink)", color: "#fff", borderRadius: 6, padding: "30px 32px", minHeight: 260, display: "flex", flexDirection: "column", gap: 22 }}>
              <div style={{ background: "#fff", borderRadius: 6, padding: "22px 26px", display: "grid", placeItems: "center" }}>
                <img src={window.__res("assets/clients/jake-logo.png")} alt="Jake Productions" style={{ width: "70%", maxHeight: 110, objectFit: "contain", display: "block" }} />
              </div>
              <div>
                <div style={{ fontFamily: "var(--bvs-mono)", fontSize: 12, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)" }}>monaco · france</div>
                <div style={{ fontSize: 15, fontWeight: 500, color: "rgba(255,255,255,0.72)", marginTop: 10, maxWidth: 380, lineHeight: 1.45 }}>Strategic production partner — our man in Monaco.</div>
                <div style={{ display: "flex", alignItems: "center", gap: 13, marginTop: 18, paddingTop: 16, borderTop: "1px solid rgba(255,255,255,0.16)" }}>
                  <img src={window.__res("assets/team/jake.png")} alt="Jake Bernard" style={{ width: 52, height: 52, borderRadius: "50%", objectFit: "cover", objectPosition: "50% 25%", flex: "none" }} />
                  <div>
                    <div style={{ fontWeight: 700, fontSize: 16 }}>Jake Bernard</div>
                    <div style={{ fontSize: 12.5, color: "rgba(255,255,255,0.6)", marginTop: 2 }}>Strategic Partner · Co-CEO, Jake Productions</div>
                  </div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
      <CornerMark />
    </Slide>
  );
}

/* ---------------- CLOSE ---------------- */
function CloseSlide({ 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 8vw", color: "#fff" }}>
        <Reveal from="scale" dist={14}>
          <div style={{ width: 88, color: "#fff" }} dangerouslySetInnerHTML={{ __html: VMARK_SVG }} />
        </Reveal>
        <Reveal from="up" dist={30} delay={0.15} style={{ marginTop: 34 }}>
          <h2 style={{ margin: 0, fontStyle: "italic", fontWeight: 900, fontSize: "clamp(46px,6.4vw,108px)", lineHeight: 0.95, letterSpacing: "-0.03em" }}>
            Let's globalize<br />your operation<span style={{ color: "rgba(255,255,255,0.55)" }}>.</span>
          </h2>
        </Reveal>
        <div style={{ display: "flex", gap: 64, flexWrap: "wrap", marginTop: 52 }}>
          {[["Simon Choudhry", "Founder · Chief Executive Officer"], ["Piotr Gladysz", "Co-Founder · Chief Operating Officer"]].map(([n, r], i) => (
            <Reveal key={n} from="up" dist={22} delay={0.32 + i * 0.12}>
              <div>
                <div style={{ fontWeight: 700, fontSize: 22 }}>{n}</div>
                <div style={{ fontSize: 14.5, opacity: 0.78, marginTop: 4 }}>{r}</div>
              </div>
            </Reveal>
          ))}
          <Reveal from="up" dist={22} delay={0.56}>
            <div style={{ borderLeft: "1px solid rgba(255,255,255,0.25)", paddingLeft: 32 }}>
              <div style={{ fontSize: 18, fontWeight: 600 }}>admin@bleuventurestudios.com</div>
              <div style={{ fontSize: 18, opacity: 0.85, marginTop: 6 }}>+1 (773) 814-0959</div>
            </div>
          </Reveal>
        </div>
        <Reveal from="up" dist={18} delay={0.7} style={{ marginTop: 48 }}>
          <div style={{ fontFamily: "var(--bvs-mono)", fontSize: 13, fontWeight: 700, letterSpacing: "0.28em", textTransform: "lowercase", color: "rgba(255,255,255,0.7)" }}>globalizing you</div>
        </Reveal>
      </div>
    </Slide>
  );
}

Object.assign(window, { AlaskaDividerSlide, AlaskaModelSlide, AlaskaDeliverSlide, PartnersSlide, CloseSlide });