/* BVS Master Deck — PART 1: Cover · Statement · Pitch · Ventures */

/* ---------------- COVER ---------------- */
function CoverSlide({ 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={22}>
          <DEyebrow slash={false} style={{ color: "rgba(10,10,10,0.45)", letterSpacing: "0.32em" }}>a product of bleu venture studios</DEyebrow>
        </Reveal>
        <Reveal from="up" dist={34} delay={0.12} style={{ marginTop: 10 }}>
          <h1 style={{ margin: 0, fontStyle: "italic", fontWeight: 900, fontSize: "clamp(140px, 26vw, 380px)", lineHeight: 0.82, letterSpacing: "-0.06em", color: "var(--bvs-ink)" }}>
            BVS<span style={{ color: "var(--bvs-blue)" }}>.</span>
          </h1>
        </Reveal>
        <Reveal from="up" dist={26} delay={0.26} style={{ marginTop: 26, maxWidth: 640 }}>
          <p style={{ margin: 0, fontSize: "clamp(19px, 1.7vw, 25px)", fontWeight: 500, lineHeight: 1.4, color: "rgba(10,10,10,0.66)" }}>
            One studio. Three engines — <strong style={{ color: "var(--bvs-ink)" }}>AI growth systems</strong>, an owned <strong style={{ color: "var(--bvs-ink)" }}>venture portfolio</strong>, and a full <strong style={{ color: "var(--bvs-ink)" }}>media department</strong>.
          </p>
        </Reveal>
        <Reveal from="up" dist={20} delay={0.42} style={{ marginTop: 46 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, fontFamily: "var(--bvs-mono)", fontSize: 13, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(10,10,10,0.4)" }}>
            <span style={{ width: 30, height: 1, background: "rgba(10,10,10,0.3)" }} /> globalizing you · scroll to begin
          </div>
        </Reveal>
      </div>
      <Float amp={10} dur={9} style={{ position: "absolute", right: "6vw", bottom: "8vh" }}>
        <Reveal from="scale" dist={12} delay={0.3}>
          <div style={{ width: 150, color: "rgba(0,23,219,0.12)" }} dangerouslySetInnerHTML={{ __html: VMARK_SVG }} />
        </Reveal>
      </Float>
    </Slide>
  );
}

/* ---------------- STATEMENT ---------------- */
function StatementSlide({ 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 venture studios</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 <span style={{ background: "#fff", color: "var(--bvs-blue)", padding: "0 .12em" }}>globalizes</span> you and re-engineers you for the future.
          </h2>
        </Reveal>
      </div>
      <CornerMark dark />
    </Slide>
  );
}

/* ---------------- PITCH ---------------- */
function PitchSlide({ index, label }) {
  return (
    <Slide index={index} label={label} grid={true}>
      <div style={{ position: "absolute", inset: 0, display: "grid", gridTemplateColumns: "0.85fr 1.15fr", alignItems: "center" }}>
        <div style={{ padding: "0 3vw 0 8vw" }}>
          <Reveal from="up" dist={18}>
            <GhostNum size="clamp(70px,9vw,150px)" color="rgba(0,23,219,0.14)">Bleu<br />Venture<br />Studios<span style={{ color: "rgba(0,23,219,0.22)" }}>…</span></GhostNum>
          </Reveal>
        </div>
        <div style={{ padding: "0 8vw 0 2vw", maxWidth: 920 }}>
          <Reveal from="up" dist={24}>
            <DEyebrow>what we build</DEyebrow>
          </Reveal>
          <Reveal from="up" dist={28} delay={0.1} style={{ marginTop: 14 }}>
            <H size="clamp(30px, 3.4vw, 52px)">Building AI Growth Solutions <span style={{ color: "var(--bvs-blue)" }}>&amp; Systems</span> for Your Company.</H>
          </Reveal>
          <Reveal from="up" dist={22} delay={0.2} style={{ marginTop: 22 }}>
            <p style={{ margin: 0, fontSize: "clamp(15px,1.15vw,18px)", fontWeight: 500, lineHeight: 1.55, color: "rgba(10,10,10,0.66)" }}>
              BVS goes beyond automation. We architect and develop systems powered by AI built around your exact business needs — from basic to complex automations, operating systems, accounting software, and HR systems to internal tools, dashboards, and decision engines. Whether you're streamlining ops or building entirely new digital infrastructure, we deliver end-to-end.
            </p>
          </Reveal>
          <Reveal from="up" dist={20} delay={0.32} style={{ marginTop: 26 }}>
            <div style={{ display: "flex", alignItems: "baseline", gap: 18, flexWrap: "wrap" }}>
              <span style={{ fontStyle: "italic", fontWeight: 500, fontSize: 18, color: "rgba(10,10,10,0.5)" }}>The result?</span>
              <span style={{ fontStyle: "italic", fontWeight: 900, fontSize: "clamp(22px,2.2vw,34px)", letterSpacing: "-0.02em", color: "var(--bvs-ink)" }}>
                Lower costs. Higher output. <span style={{ color: "var(--bvs-blue)" }}>Faster growth.</span>
              </span>
            </div>
          </Reveal>
        </div>
      </div>
      <CornerMark />
    </Slide>
  );
}

/* ---------------- VENTURE (reusable highlight slide) ---------------- */
function VentureSlide({ index, label, v }) {
  return (
    <Slide index={index} label={label} grid={true}>
      <div style={{ position: "absolute", left: "52%", top: "12%", bottom: "12%", width: 1, background: "rgba(10,10,10,0.10)" }} />
      <div style={{ position: "absolute", inset: 0, display: "grid", gridTemplateColumns: "minmax(0,0.92fr) minmax(0,1.08fr)" }}>
        {/* LEFT */}
        <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", padding: "0 4vw 0 8vw", position: "relative" }}>
          <Reveal from="up" dist={18}>
            <GhostNum size={58} color="rgba(0,23,219,0.16)" style={{ marginLeft: -3, marginBottom: 0 }}>{v.num}</GhostNum>
            <DEyebrow>{v.eyebrow}</DEyebrow>
          </Reveal>
          <div style={{ position: "relative", zIndex: 1 }}>
            <Reveal from="up" dist={30} delay={0.1} style={{ marginTop: 8 }}>
              <H size="clamp(32px, 3.7vw, 58px)">{v.title}<span style={{ color: "var(--bvs-blue)" }}>.</span></H>
            </Reveal>
            <Reveal from="up" dist={22} delay={0.2} style={{ marginTop: 12, maxWidth: 470 }}>
              <p style={{ margin: 0, fontSize: "clamp(14px,1.05vw,17px)", fontWeight: 500, lineHeight: 1.45, color: "rgba(10,10,10,0.64)" }}>{v.desc}</p>
            </Reveal>
            <Reveal from="up" dist={20} delay={0.3} style={{ marginTop: 14 }}>
              <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                {v.tags.map((t, ti) => <Chip key={ti} tone={t.tone || "blue"}>{t.label || t}</Chip>)}
              </div>
            </Reveal>
            <div style={{ marginTop: 4, maxWidth: 520 }}>
              {v.items.map((it, i) => (
                <Reveal key={i} from="up" dist={20} delay={0.4 + i * 0.1}>
                  <PhaseItem kind="check" title={it.title} sub={it.sub} />
                </Reveal>
              ))}
            </div>
          </div>
        </div>
        {/* RIGHT */}
        <div style={{ position: "relative", padding: "5vh 5vw 5vh 2vw" }}>
          <Reveal from="left" dist={50} delay={0.25} dur={0.9} style={{ width: "100%", height: "100%" }}>
            {v.Cards()}
          </Reveal>
        </div>
      </div>
      <CornerMark />
    </Slide>
  );
}

/* small bespoke ownership card */
function OwnerCard({ stake, role }) {
  return (
    <div style={{ fontFamily: "var(--bvs-sans)", padding: "20px 22px" }}>
      <div style={{ fontFamily: "var(--bvs-mono)", fontSize: 10, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--bvs-blue)" }}>bvs position</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginTop: 10 }}>
        <div style={{ fontStyle: "italic", fontWeight: 900, fontSize: 44, letterSpacing: "-0.03em", color: "var(--bvs-ink)" }}>{stake}</div>
      </div>
      <div style={{ fontSize: 13.5, fontWeight: 600, color: "rgba(10,10,10,0.6)", marginTop: 6, lineHeight: 1.35 }}>{role}</div>
    </div>
  );
}

const VENTURES = [
  {
    num: "01", eyebrow: "venture · equity partner", title: "LicenseOS",
    desc: "LicenseOS helps people build their own AI agencies. We're equity partners — and we power the company on the delivery side: client fulfillment, consulting, operations and strategic direction.",
    tags: [{ label: "equity partner", tone: "green" }, { label: "fulfillment & ops", tone: "blue" }],
    items: [
      { title: "Equity partners", sub: "We hold a stake in LicenseOS — aligned on the upside." },
      { title: "Client fulfillment & consulting", sub: "We deliver for their clients building AI agencies." },
      { title: "Operations & strategic direction", sub: "We run ops and help steer where the company goes." },
    ],
    Cards: () => (
      <div style={{ position: "relative", width: "100%", height: "100%" }}>
        <Float amp={12} dur={8} rot={1.5} style={{ position: "absolute", top: "8%", right: "1%", width: 460 }}>
          <FloatCard w={460} rot={1.5} pad={0} style={{ overflow: "hidden" }}>{MOCKS["license-os"]({ h: 300 })}</FloatCard>
        </Float>
        <Float amp={9} dur={9} delay={0.6} rot={-2.5} style={{ position: "absolute", bottom: "8%", left: "0%", width: 300 }}>
          <FloatCard w={300} rot={-2.5}><OwnerCard stake="Equity" role="Partner powering fulfillment, consulting & operations" /></FloatCard>
        </Float>
      </div>
    ),
  },
  {
    num: "02", eyebrow: "venture · majority owner", title: "BLEUX",
    desc: "Our logistics-software venture. BVS holds the majority share, building a custom logistics operating platform alongside one of Chicago's largest logistics companies — from live load board to dispatch and full audit trail.",
    tags: [{ label: "majority owner", tone: "green" }, { label: "logistics SaaS", tone: "blue" }, { label: "chicago", tone: "ink" }],
    items: [
      { title: "Majority ownership", sub: "BVS controls the venture as majority shareholder." },
      { title: "Built with a major Chicago logistics partner", sub: "Co-developed with one of the city's largest operators." },
      { title: "Custom TMS, ground-up", sub: "Live board, drag-to-merge loads, dispatch, role-based audit." },
    ],
    Cards: () => (
      <div style={{ position: "relative", width: "100%", height: "100%" }}>
        <Float amp={11} dur={8.5} rot={-1.5} style={{ position: "absolute", top: "12%", left: "0%", width: 560 }}>
          <FloatCard w={560} rot={-1.5} pad={0} style={{ overflow: "hidden" }}>{MOCKS["bleux-tms"]({ h: 320 })}</FloatCard>
        </Float>
        <Float amp={9} dur={9.5} delay={0.7} rot={3} style={{ position: "absolute", bottom: "9%", right: "2%", width: 280 }}>
          <FloatCard w={280} rot={3}><OwnerCard stake="Majority" role="Software JV with a major Chicago logistics company" /></FloatCard>
        </Float>
      </div>
    ),
  },
  {
    num: "03", eyebrow: "venture · healthcare · global", title: "Healthcare AI",
    desc: "We're bringing AI automations into healthcare across the US, Serbia and Poland — with Monaco and Dubai next. We've already sold into Serbia's largest dental clinic.",
    tags: [{ label: "dental · sold", tone: "green" }, { label: "US · Serbia · Poland", tone: "blue" }, { label: "Monaco · Dubai next", tone: "outline" }],
    items: [
      { title: "Sold into Serbia's largest clinic", sub: "Serbia's largest dental clinic — our healthcare beachhead." },
      { title: "AI receptionist + insurance automation", sub: "Multilingual intake, booking and verification." },
      { title: "Five markets and growing", sub: "US, Serbia & Poland today — Monaco and Dubai next." },
    ],
    Cards: () => (
      <div style={{ position: "relative", width: "100%", height: "100%" }}>
        <Float amp={11} dur={8.5} rot={2} style={{ position: "absolute", top: "8%", right: "1%", width: 260 }}>
          <FloatCard w={260} rot={2} pad={0} style={{ overflow: "hidden" }}>{MOCKS["clinic-call"]({ h: 400 })}</FloatCard>
        </Float>
        <Float amp={9} dur={9.5} delay={0.6} rot={-2.5} style={{ position: "absolute", bottom: "12%", left: "0%", width: 420 }}>
          <FloatCard w={420} rot={-2.5} pad={0} style={{ overflow: "hidden" }}>{MOCKS["clinic-ops"]({ h: 210 })}</FloatCard>
        </Float>
      </div>
    ),
  },
];

Object.assign(window, { CoverSlide, StatementSlide, PitchSlide, VentureSlide, VENTURES, OwnerCard, PortfolioSlide });

/* ---------------- PORTFOLIO (owned companies, condensed) ---------------- */
function PortfolioSlide({ index, label, items }) {
  return (
    <Slide index={index} label={label} grid={true}>
      <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", justifyContent: "center", padding: "0 6vw" }}>
        <Reveal from="up" dist={20}><DEyebrow>the portfolio</DEyebrow></Reveal>
        <Reveal from="up" dist={28} delay={0.1} style={{ marginTop: 12 }}>
          <H size="clamp(34px,4.4vw,72px)">What we <span style={{ color: "var(--bvs-blue)" }}>own</span>.</H>
        </Reveal>
        <Reveal from="up" dist={18} delay={0.2} style={{ marginTop: 14, maxWidth: 780 }}>
          <p style={{ margin: 0, fontSize: "clamp(15px,1.2vw,19px)", fontWeight: 500, lineHeight: 1.45, color: "rgba(10,10,10,0.6)" }}>
            BVS holds equity across its venture portfolio — and operates the engine room behind each one.
          </p>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22, marginTop: "3.6vh" }}>
          {items.map((v, k) => (
            <Reveal key={v.title} from="up" dist={26} delay={0.3 + k * 0.14}>
              <div style={{ background: "#fff", border: "1px solid var(--bvs-line)", borderRadius: 8, overflow: "hidden", boxShadow: "0 1px 0 rgba(0,0,0,0.04)", display: "flex", flexDirection: "column" }}>
                <div style={{ height: "26vh", minHeight: 150, background: "var(--bvs-paper)", borderBottom: "1px solid var(--bvs-line)", padding: 16, display: "flex" }}>
                  {MOCKS[v.mock]({ h: "100%" })}
                </div>
                <div style={{ padding: "22px 24px 24px" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <span style={{ fontFamily: "var(--bvs-mono)", fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--bvs-green-deep)", background: "rgba(22,163,74,0.12)", padding: "5px 10px", borderRadius: 3 }}>{v.stake}</span>
                    <span style={{ fontFamily: "var(--bvs-mono)", fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(10,10,10,0.45)" }}>{v.sector}</span>
                  </div>
                  <div style={{ fontStyle: "italic", fontWeight: 900, fontSize: "clamp(28px,2.9vw,46px)", letterSpacing: "-0.02em", marginTop: 14, lineHeight: 1, color: "var(--bvs-ink)" }}>{v.title}<span style={{ color: "var(--bvs-blue)" }}>.</span></div>
                  <p style={{ margin: "12px 0 0", fontSize: "clamp(13.5px,1.05vw,16px)", fontWeight: 500, lineHeight: 1.45, color: "rgba(10,10,10,0.62)" }}>{v.desc}</p>
                  <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 16 }}>
                    {v.points.map((p) => (
                      <span key={p} style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 13, fontWeight: 600, color: "rgba(10,10,10,0.7)" }}>
                        <span style={{ color: "var(--bvs-blue)", fontWeight: 800 }}>✓</span>{p}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <CornerMark />
    </Slide>
  );
}

const OWNED = [
  {
    title: "LicenseOS", stake: "Equity partner", sector: "AI agencies", mock: "license-os",
    desc: "Where people build their own AI agencies. We power the delivery side — client fulfillment, consulting, operations and strategic direction.",
    points: ["Equity stake", "Fulfillment & consulting", "Operations & direction"],
  },
  {
    title: "BLEUX", stake: "Majority owner", sector: "Logistics SaaS", mock: "bleux-tms",
    desc: "Our logistics-software venture, built alongside one of Chicago's largest logistics companies — from live load board to dispatch and audit.",
    points: ["Majority share", "Chicago logistics partner", "Custom TMS, ground-up"],
  },
];

Object.assign(window, { OWNED });