/* BVS Master Deck — PART 2: Track record · Case studies · Team */

/* ---------------- TRACK RECORD ---------------- */
function TrackRecordSlide({ index, label }) {
  const sectors = ["Home Services", "Healthcare", "Dentistry", "Logistics", "Financial Services", "Education", "Government", "Hospitality"];
  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 we have done</DEyebrow></Reveal>
        <Reveal from="up" dist={30} delay={0.1} style={{ marginTop: 14 }}>
          <H size="clamp(38px,5vw,84px)">Shipped systems across <span style={{ color: "var(--bvs-blue)" }}>eight</span> industries.</H>
        </Reveal>
        <Reveal from="up" dist={22} delay={0.2} style={{ marginTop: 22, maxWidth: 880 }}>
          <p style={{ margin: 0, fontSize: "clamp(16px,1.3vw,21px)", fontWeight: 500, lineHeight: 1.5, color: "rgba(10,10,10,0.62)" }}>
            Multiple solutions in AI and SaaS — from conversational agents and operating systems to CRMs, dashboards and full custom platforms, delivered end-to-end.
          </p>
        </Reveal>
        <Reveal from="up" dist={20} delay={0.32} style={{ marginTop: 28 }}>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap", maxWidth: 920 }}>
            {sectors.map((s) => <Chip key={s} tone="ink">{s}</Chip>)}
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 36, marginTop: 56, maxWidth: 1020 }}>
          {[["5+", "AI & SaaS systems shipped"], ["3-phase", "delivery on every engagement"], ["100%", "HIPAA-aligned data architecture"], ["24/7", "AI communication coverage"]].map(([v, l], i) => (
            <Reveal key={v} from="up" dist={24} delay={0.42 + i * 0.1}>
              <StatBig value={v} label={l} color={i === 2 ? "var(--bvs-green-deep)" : "var(--bvs-ink)"} size={56} />
            </Reveal>
          ))}
        </div>
      </div>
      <CornerMark />
    </Slide>
  );
}

/* ---------------- CASE STUDIES DIVIDER ---------------- */
function CaseDividerSlide({ index, label }) {
  const list = [
    ["I", "18Wheeler / BLEUX", "Logistics"],
    ["II", "Craftwood & Skyvi", "Home Services"],
    ["III", "Dental Clinic", "Healthcare · NDA"],
    ["IV", "Accounting Firm", "Financial · NDA"],
  ];
  return (
    <Slide index={index} label={label} bg="var(--bvs-blue)" dark>
      <div style={{ position: "absolute", inset: 0, display: "grid", gridTemplateColumns: "1fr 1fr", alignItems: "center", color: "#fff" }}>
        <div style={{ padding: "0 4vw 0 8vw" }}>
          <Reveal from="up" dist={22}><DEyebrow color="rgba(255,255,255,0.6)">selected work</DEyebrow></Reveal>
          <Reveal from="up" dist={34} delay={0.12} style={{ marginTop: 16 }}>
            <h2 style={{ margin: 0, fontStyle: "italic", fontWeight: 900, fontSize: "clamp(64px,10vw,170px)", lineHeight: 0.86, letterSpacing: "-0.04em" }}>CASE<br />STUDIES<span style={{ opacity: 0.5 }}>.</span></h2>
          </Reveal>
        </div>
        <div style={{ padding: "0 8vw 0 2vw" }}>
          {list.map(([n, name, tag], i) => (
            <Reveal key={n} from="up" dist={20} delay={0.25 + i * 0.09}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 20, padding: "16px 0", borderBottom: "1px solid rgba(255,255,255,0.18)" }}>
                <span style={{ fontFamily: "var(--bvs-mono)", fontSize: 13, fontWeight: 700, letterSpacing: "0.1em", color: "rgba(255,255,255,0.7)", width: 34 }}>{n}</span>
                <span style={{ flex: 1, fontStyle: "italic", fontWeight: 900, fontSize: "clamp(20px,1.9vw,30px)", letterSpacing: "-0.01em" }}>{name}</span>
                <span style={{ fontFamily: "var(--bvs-mono)", fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(255,255,255,0.6)" }}>{tag}</span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <CornerMark dark />
    </Slide>
  );
}

/* ---------------- CASE (reusable) ---------------- */
function CaseSlide({ index, label, c }) {
  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.95fr) minmax(0,1.05fr)" }}>
        <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", padding: "0 4vw 0 8vw" }}>
          <Reveal from="up" dist={18}>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <DEyebrow>case study {c.n} · {c.sector}</DEyebrow>
              {c.nda && <span style={{ fontFamily: "var(--bvs-mono)", fontSize: 10, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "#fff", background: "var(--bvs-ink)", padding: "3px 8px", borderRadius: 2 }}>nda signed</span>}
            </div>
          </Reveal>
          <Reveal from="up" dist={30} delay={0.1} style={{ marginTop: 12 }}>
            <H size="clamp(38px,4.4vw,70px)">{c.title}<span style={{ color: "var(--bvs-blue)" }}>.</span></H>
          </Reveal>
          <Reveal from="up" dist={22} delay={0.2} style={{ marginTop: 16, maxWidth: 480 }}>
            <p style={{ margin: 0, fontSize: "clamp(15px,1.2vw,18px)", fontWeight: 500, lineHeight: 1.5, color: "rgba(10,10,10,0.64)" }}>{c.challenge}</p>
          </Reveal>
          <Reveal from="up" dist={20} delay={0.3} style={{ marginTop: 22 }}>
            <MicroTag style={{ marginBottom: 12 }}>what we built</MicroTag>
            <div style={{ display: "flex", gap: 9, flexWrap: "wrap", maxWidth: 520 }}>
              {c.modules.map((m) => <Chip key={m} tone="blue">{m}</Chip>)}
            </div>
          </Reveal>
          {c.callout && (
            <Reveal from="up" dist={18} delay={0.42} style={{ marginTop: 22 }}>
              <div style={{ display: "flex", alignItems: "flex-start", gap: 12, background: "var(--bvs-ink)", color: "#fff", borderRadius: 4, padding: "14px 16px", maxWidth: 500 }}>
                <span style={{ fontFamily: "var(--bvs-mono)", fontSize: 10, fontWeight: 700, letterSpacing: "0.1em", color: "var(--bvs-green)", whiteSpace: "nowrap", marginTop: 2 }}>{c.callout.tag}</span>
                <span style={{ fontSize: 13.5, fontWeight: 500, lineHeight: 1.4 }}>{c.callout.text}</span>
              </div>
            </Reveal>
          )}
        </div>
        <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%" }}>
            {c.Cards()}
          </Reveal>
        </div>
      </div>
      <CornerMark />
    </Slide>
  );
}

const CASES = [
  {
    n: "I", sector: "Logistics", title: "18Wheeler / BLEUX",
    challenge: "A 50-truck LTL refrigerated-freight company running its entire operation on a manual Google Sheets board. BVS ran full discovery, pinpointed the operational bottlenecks, then built a custom TMS from scratch — the engagement that became BLEUX.",
    modules: ["Discovery & Consulting", "Custom TMS", "Live Load Board", "Trip Consolidation", "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: "14%", left: "0%", width: 560 }}>
          <FloatCard w={560} rot={-1.5} pad={0} style={{ overflow: "hidden" }}>{MOCKS["bleux-tms"]({ h: 330 })}</FloatCard>
        </Float>
        <Float amp={9} dur={9.5} delay={0.7} rot={3} style={{ position: "absolute", bottom: "9%", right: "3%", width: 250 }}>
          <FloatCard w={250} rot={3}><OwnerCard stake="Built" role="Discovery → custom TMS for refrigerated LTL freight" /></FloatCard>
        </Float>
      </div>
    ),
  },
  {
    n: "II", sector: "Home Services", title: "Craftwood & Skyvi",
    challenge: "A home-services company running bookings, supplier coordination and installations through manual channels. BVS delivered the consulting phase — running discovery and finding the solution — then architected three connected automation layers.",
    modules: ["Discovery & Consulting", "AI Client Agent", "Supplier Workflow AI", "CRM + Analytics"],
    Cards: () => (
      <div style={{ position: "relative", width: "100%", height: "100%" }}>
        <Float amp={12} dur={8} rot={1.5} style={{ position: "absolute", top: "12%", right: "1%", width: 470 }}>
          <FloatCard w={470} rot={1.5} pad={0} style={{ overflow: "hidden" }}>{MOCKS["crm"]({ h: 300 })}</FloatCard>
        </Float>
        <Float amp={9} dur={9} delay={0.7} rot={-3} style={{ position: "absolute", bottom: "10%", left: "0%", width: 250 }}>
          <FloatCard w={250} rot={-3} pad={0} style={{ overflow: "hidden" }}>{MOCKS["agent-chat"]({ h: 360, title: "AI Client Agent", tag: "whatsapp · new booking" })}</FloatCard>
        </Float>
      </div>
    ),
  },
  {
    n: "III", sector: "Healthcare", nda: true, title: "Dental Clinic",
    challenge: "On a consulting engagement, BVS identified exactly where a 15,000-patient clinic was losing money — manual insurance verification and a broken reminder system — then designed the fix: automated benefit verification into Dentrix behind a HIPAA-compliant AI receptionist.",
    modules: ["Consulting & Discovery", "Insurance Verification", "AI Receptionist", "HIPAA Audit Trail"],
    callout: { tag: "HIPAA CRITICAL", text: "Every violation risks $100K+. 15,000+ patients. Zero margin for error — all development HIPAA-compliant." },
    Cards: () => (
      <div style={{ position: "relative", width: "100%", height: "100%" }}>
        <Float amp={11} dur={8.5} rot={2} style={{ position: "absolute", top: "8%", right: "2%", width: 260 }}>
          <FloatCard w={260} rot={2} pad={0} style={{ overflow: "hidden" }}>{MOCKS["agent-chat"]({ h: 400, title: "AI Receptionist", tag: "incoming · patient", badge: { title: "Appointment booked", meta: "Thu · 11:30am · synced to Dentrix" } })}</FloatCard>
        </Float>
        <Float amp={9} dur={9.5} delay={0.6} rot={-2.5} style={{ position: "absolute", bottom: "11%", left: "0%", width: 420 }}>
          <FloatCard w={420} rot={-2.5} pad={0} style={{ overflow: "hidden" }}>{MOCKS["results"]({ h: 210, stats: [["Inbound capture", "+38%"], ["No-show rate", "\u221247%"], ["Recovered", "$310K"]] })}</FloatCard>
        </Float>
      </div>
    ),
  },
  {
    n: "IV", sector: "Financial Services", nda: true, title: "Accounting Firm",
    challenge: "BVS came in to consult on a firm drowning in manual WhatsApp, no CRM, and invoices aging 60–90+ days. We diagnosed the leaks and proposed an AI-powered revenue operating system — then deployed it across a three-phase roadmap.",
    modules: ["Consulting & Diagnosis", "WhatsApp AI Triage", "GoHighLevel CRM", "AR Recovery", "Document Intake AI"],
    callout: { tag: "5X · 24/7", text: "5× faster AR recovery vs. manual, 24/7 AI communication coverage, deployed across a 3-phase roadmap." },
    Cards: () => (
      <div style={{ position: "relative", width: "100%", height: "100%" }}>
        <Float amp={12} dur={8} rot={1.5} style={{ position: "absolute", top: "12%", right: "1%", width: 470 }}>
          <FloatCard w={470} rot={1.5} pad={0} style={{ overflow: "hidden" }}>{MOCKS["crm"]({ h: 300 })}</FloatCard>
        </Float>
        <Float amp={9} dur={9} delay={0.7} rot={-3} style={{ position: "absolute", bottom: "10%", left: "1%", width: 250 }}>
          <FloatCard w={250} rot={-3} pad={0} style={{ overflow: "hidden" }}>{MOCKS["agent-chat"]({ h: 360, title: "WhatsApp AI Triage", tag: "whatsapp · client", badge: { title: "Routed & answered", meta: "policy-aligned · 24/7" } })}</FloatCard>
        </Float>
      </div>
    ),
  },
];

/* ---------------- CASE STUDIES — one general summary slide ---------------- */
const CASE_SUMMARY = {
  "18Wheeler / BLEUX": "Discovery, then a ground-up custom TMS for a 50-truck refrigerated-LTL operation stuck on spreadsheets — the engagement that became BLEUX.",
  "Craftwood & Skyvi": "Consulting and discovery for a home-services company, then three connected automation layers: AI client agent, supplier workflow and a CRM control center.",
  "Dental Clinic": "Consulting that pinpointed where a 15,000-patient clinic lost money, then a designed fix — insurance verification into Dentrix behind a HIPAA-compliant AI receptionist.",
  "Accounting Firm": "Diagnosed a firm buried in manual WhatsApp and aging invoices; designed and deployed an AI revenue operating system across a three-phase roadmap.",
};
function CaseSummarySlide({ index, label }) {
  return (
    <Slide index={index} label={label} grid={true}>
      <div style={{ position: "absolute", inset: 0, padding: "7vh 6vw 8vh", display: "flex", flexDirection: "column" }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 16 }}>
          <Reveal from="up" dist={20}>
            <DEyebrow>selected work</DEyebrow>
            <H size="clamp(34px,4.4vw,72px)" style={{ marginTop: 10 }}>Case studies<span style={{ color: "var(--bvs-blue)" }}>.</span></H>
          </Reveal>
          <Reveal from="up" dist={16} delay={0.12}>
            <div style={{ fontFamily: "var(--bvs-mono)", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(10,10,10,0.45)", maxWidth: 300, lineHeight: 1.6 }}>We lead with consulting — find the leak, design the fix, then build it.</div>
          </Reveal>
        </div>
        <div style={{ flex: 1, display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 18, marginTop: "4vh", minHeight: 0 }}>
          {CASES.map((c, i) => (
            <Reveal key={c.title} from="up" dist={26} delay={0.2 + i * 0.1}>
              <div style={{ height: "100%", background: "#fff", border: "1px solid var(--bvs-line)", borderRadius: 6, padding: "22px 22px 24px", display: "flex", flexDirection: "column" }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <span style={{ fontFamily: "var(--bvs-mono)", fontSize: 13, fontWeight: 700, letterSpacing: "0.12em", color: "var(--bvs-blue)" }}>{c.n}</span>
                  {c.nda && <span style={{ fontFamily: "var(--bvs-mono)", fontSize: 9, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "#fff", background: "var(--bvs-ink)", padding: "3px 7px", borderRadius: 2 }}>nda</span>}
                </div>
                <div style={{ fontStyle: "italic", fontWeight: 900, fontSize: "clamp(19px,1.55vw,25px)", letterSpacing: "-0.01em", lineHeight: 1.05, marginTop: 16, color: "var(--bvs-ink)" }}>{c.title}</div>
                <div style={{ fontFamily: "var(--bvs-mono)", fontSize: 10.5, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(10,10,10,0.45)", marginTop: 8 }}>{c.sector}</div>
                <p style={{ margin: "14px 0 0", fontSize: "clamp(12.5px,0.95vw,14.5px)", fontWeight: 500, lineHeight: 1.5, color: "rgba(10,10,10,0.64)" }}>{CASE_SUMMARY[c.title]}</p>
                <div style={{ flex: 1 }}></div>
                <div style={{ display: "flex", gap: 7, flexWrap: "wrap", marginTop: 18 }}>
                  {c.modules.slice(0, 2).map((m) => <Chip key={m} tone="blue" style={{ fontSize: 10 }}>{m}</Chip>)}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <CornerMark />
    </Slide>
  );
}

/* ---------------- AI TEAM ---------------- */
const AI_TEAM = [
  { name: "Simon Choudhry", role: "Founder · CEO", photo: "assets/team/simon.png" },
  { name: "Piotr Gladysz", role: "Co-Founder · COO", photo: "assets/team/piotr-gladysz.png" },
  { name: "Piotr Duda", role: "Chief Technology Officer", photo: "assets/team/duda.png" },
  { name: "Radek Radzilowski", role: "Chief Marketing Officer · Bleu Media Group", photo: "assets/team/radek.png" },
  { name: "Jacopo Pucci", role: "Director of Business Development · Monaco", photo: "assets/team/jacopo.png" },
  { name: "Aina Häkkinen", role: "Director of Client Relations · Monaco", photo: "assets/team/aina.png" },
];

function TeamSlide({ 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 6vw", color: "#fff" }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 16 }}>
          <Reveal from="up" dist={22}>
            <DEyebrow color="rgba(255,255,255,0.6)">the studio</DEyebrow>
            <H size="clamp(30px,3.4vw,58px)" color="#fff" style={{ marginTop: 10 }}>Our world-class team<span style={{ color: "rgba(255,255,255,0.55)" }}>.</span></H>
          </Reveal>
          <Reveal from="up" dist={18} delay={0.15}>
            <div style={{ fontFamily: "var(--bvs-mono)", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)", maxWidth: 280, lineHeight: 1.6 }}>Founders & leadership across the US, Poland & Monaco</div>
          </Reveal>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6,1fr)", gap: "2.2vh 24px", marginTop: "4vh" }}>
          {AI_TEAM.map((m, i) => (
            <Reveal key={m.name} from="up" dist={24} delay={0.2 + i * 0.08}>
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                {m.photo ? (
                  <img src={window.__res(m.photo)} alt={m.name} style={{ width: "100%", aspectRatio: "1 / 1", objectFit: "cover", borderRadius: 4, filter: "grayscale(1) contrast(1.05)", display: "block", background: "#fff" }} />
                ) : (
                  <StyledAvatar name={m.name} initials={m.initials} size="100%" />
                )}
                <div>
                  <div style={{ fontStyle: "italic", fontWeight: 900, fontSize: "clamp(15px,1.2vw,21px)", letterSpacing: "-0.01em", lineHeight: 1.1 }}>{m.name}</div>
                  <div style={{ fontFamily: "var(--bvs-mono)", fontSize: 10.5, fontWeight: 700, letterSpacing: "0.04em", textTransform: "uppercase", color: "rgba(255,255,255,0.66)", marginTop: 7, lineHeight: 1.4 }}>{m.role}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </Slide>
  );
}

Object.assign(window, { TrackRecordSlide, CaseDividerSlide, CaseSlide, CaseSummarySlide, CASES, TeamSlide, AI_TEAM });