/* ============================================================
   Case studies: shell, data, and shared primitives.
   Real content lives in subaru.jsx and nomi.jsx, which register
   panels into window.CASE_PANELS[caseId][tabName].
   ============================================================ */

const CASE_LIST = [
  {
    id: "nomi", org: "ZeyaAI", title: "nomi", subtitle: "A social self generator",
    metrics: ["800+ visitors in week one", "87% mobile → mobile-first rebuild", "Intended-self fit 50% → 69%"],
    year: "2026", live: "https://zeyaai.com/nomi",
    desc: "A social self generator that lets you create with GenAI without losing your voice. Launched April 2026: live at zeyaai.com/nomi.",
    summary: "nomi is ZeyaAI's first product, launched in April 2026. It helps you shape one version of yourself, then create through it, so AI-generated content feels intentional and recognizably yours. The MVP focuses on Instagram posts: define your tone, then generate copy through that lens instead of a generic prompt.",
    tags: ["Zero to One", "Generative AI", "AI Product"],
    role: "Solo product design, research, and build", platform: "Responsive web",
    coverEmbed: "assets/nomi-cover.html",
  },
  {
    id: "nyla", org: "ZeyaAI", title: "NYLA", subtitle: "Many social-selves, owned over time",
    metrics: ["Strategy derived from 32 sessions", "4-level success model", "North star: multi-self creators"],
    year: "2026",
    desc: "An AI-native system for managing the different versions of yourself you create and communicate through: the identity layer personal AI is missing.",
    summary: "Nyla is an AI-native system for managing the different versions of yourself you create and communicate through. It gives personal AI a missing identity layer: multiple contextual selves, each with its own memory, expression, and purpose. Nyla is the system that emerges from the evidence Nomi produced.",
    tags: ["AI-Native Identity", "Personal AI", "Creator Infrastructure"],
    role: "Solo product strategy and design", platform: "Responsive web",
    cover: { dark: "assets/nyla-cover-dark.png", light: "assets/nyla-cover-light.png", darkBg: "#2f2f2f", lightBg: "#ffffff" },
  },
  {
    id: "mysubaru-redesign", org: "Dentsu × Subaru", liveBadge: true, title: "MySubaru Redesign", subtitle: "Reframing a remote-command utility as a vehicle ownership companion",
    metrics: ["2M+ connected owners", "+40.6% year-end active usage", "97.6K → 149.8K daily returning"],
    year: "2025",
    desc: "Reframing an engagement problem as a category problem: what makes an owner return when they are not trying to unlock, locate, or start their car?",
    summary: "MySubaru already performed its best-known job well: owners could start, lock, unlock, and locate their vehicle remotely. That utility created strong episodic value, but no reason to return between those moments. Rather than optimize engagement inside the existing structure, I proposed moving MySubaru from remote control to vehicle ownership companion, and rebuilt the research question around what the category was missing.",
    tags: ["Connected Vehicle", "IA", "Design System"],
    role: "Senior Product Designer, embedded at Subaru of America", platform: "iOS, Android, Head unit, Watch",
    cover: { dark: "assets/subaru-redesign-cover-dark-v2.png", light: "assets/subaru-redesign-cover-light-v2.png" },
  },
  {
    id: "mysubaru-onboarding", org: "Dentsu × Subaru", liveBadge: true, title: "MySubaru Onboarding", subtitle: "Turning subscription complexity into a clearer path from purchase to activation",
    metrics: ["96% all-level enrollment", "52.9% paid-tier adoption", "61.3% preferred the shorter activation"],
    year: "2025",
    desc: "Getting owners to begin took more than simplifying sign-up: the service had to become understandable, purchasable, and completable across the dealership, the web, and the app.",
    summary: "Onboarding friction did not live in one screen. It accumulated across the experience: from understanding what Subaru was selling, to purchasing a subscription at the dealership, to activating the service across different devices. I reduced the problem to three conditions we had to validate, value clarity, point-of-sale ease, and cross-surface consistency, and addressed pricing clarity first because checkout cannot explain a product the organization itself described inconsistently.",
    tags: ["Onboarding", "Conversion", "Cross-platform"],
    role: "Senior Product Designer, embedded at Subaru of America", platform: "Web, Mobile, Head unit, Watch",
    heroMap: true, coverEmbed: "assets/mysubaru-kiosk-tour.html", coverFrame: "tv",
  },
  {
    id: "subaru-agentic-ai", org: "Dentsu × Subaru", title: "MySubaru AI Driving Assistant", subtitle: "Designing an assistant that knows when to act, and when to stay out of the way",
    metrics: [">80% would use it again and pay", "Three modes, three interruption rights", "Value preserved when prediction was priced out"],
    year: "2025",
    cover: { light: "assets/subaru-ai-cover-light.png", dark: "assets/subaru-ai-cover-dark.png", lightBg: "#ffffff", darkBg: "#000000" },
    desc: "Not how to add AI to MySubaru, but when an intelligent vehicle companion should interrupt, ask permission, or stay silent.",
    summary: "The redesign showed that owners respond well when the system surfaces useful context before they know where to look. But making a product proactive creates a new problem: an assistant that intervenes too little feels unintelligent, and one that intervenes too often becomes intrusive. I ran a narrative simulation to find where that line sits, and turned the result into a behavioral framework I call calibrated proactivity.",
    tags: ["AI Interaction", "Autonomy & Trust", "Validated Concept"],
    role: "Senior Product Designer, embedded at Subaru of America", platform: "Connected vehicle, mobile",
  },
];

const DEFAULT_TABS = ["Opening", "Research", "Ideation", "Testing", "Iterations", "Prototype", "Outcome"];

/* ---------- Glass segmented tab bar ---------- */
function CaseTabs(props) {
  const { value, onChange, tabs } = props;
  const wrapRef = useRef(null);
  const btnRefs = useRef({});
  const [pill, setPill] = useState({ left: 0, width: 0, ready: false });
  const measure = useCallback(function () {
    const el = btnRefs.current[value];
    if (!el) return;
    setPill({ left: el.offsetLeft, width: el.offsetWidth, ready: true });
    /* On narrow screens the bar scrolls; keep the active tab in view. */
    const wrap = wrapRef.current;
    if (wrap && wrap.scrollWidth > wrap.clientWidth + 4) {
      wrap.scrollTo({ left: Math.max(0, el.offsetLeft - (wrap.clientWidth - el.offsetWidth) / 2), behavior: "smooth" });
    }
  }, [value]);
  useEffect(function () { measure(); }, [measure, tabs]);
  useEffect(function () {
    window.addEventListener("resize", measure);
    return function () { window.removeEventListener("resize", measure); };
  }, [measure]);

  return (
    <div role="tablist" aria-label="Case study chapters" ref={wrapRef} className="pf-glass" style={{
      position: "relative", display: "inline-flex", alignItems: "center", gap: 4, padding: 8,
      maxWidth: "100%", overflowX: "auto", borderRadius: 999,
    }}>
      <span aria-hidden="true" style={{
        position: "absolute", top: 8, bottom: 8, left: pill.left, width: pill.width,
        borderRadius: 999, background: "var(--pf-glass-tint-thick)",
        border: "1px solid var(--pf-border)", boxShadow: "inset 0 1px 1px rgba(255,255,255,0.4)",
        transition: pill.ready ? "left 460ms var(--glass-spring), width 460ms var(--glass-spring)" : "none",
        opacity: pill.width ? 1 : 0, zIndex: 0,
      }} />
      {tabs.map(function (t) {
        const on = t === value;
        return (
          <button key={t} role="tab" aria-selected={on} ref={function (el) { btnRefs.current[t] = el; }}
            onClick={function () { onChange(t); }}
            style={{
              position: "relative", zIndex: 1, whiteSpace: "nowrap", border: "none", cursor: "pointer",
              background: "transparent", padding: "12px 24px", borderRadius: 999,
              fontSize: 14, fontWeight: 400, letterSpacing: "0.01em",
              color: on ? "var(--label-primary)" : "var(--label-secondary)",
              transition: "color 220ms var(--glass-ease)",
            }}>
            {t}
          </button>
        );
      })}
    </div>
  );
}

/* ---------- Shared content primitives (exposed on window.CSKit) ---------- */
function Eyebrow(props) {
  return <div className="pf-eyebrow" style={Object.assign({ marginBottom: 18, color: "var(--accent)" }, props.style)}>{props.children}</div>;
}
function SectionHead(props) {
  return (
    <header style={{ maxWidth: 900, marginBottom: 36 }}>
      {props.kicker ? <Eyebrow>{props.kicker}</Eyebrow> : null}
      <h2 className="pf-h2" style={{ margin: 0, fontSize: "clamp(21px, 2.2vw, 30px)" }}>{props.title}</h2>
      {props.lead ? <p className="pf-lead" style={{ margin: "16px 0 0", maxWidth: 820 }}>{props.lead}</p> : null}
    </header>
  );
}
function Stat(props) {
  return (
    <div className="pf-glass" style={{ padding: "clamp(22px, 2vw, 30px)", display: "flex", flexDirection: "column", height: "100%" }}>
      <div className="pf-num" style={{ fontSize: "clamp(26px, 2.6vw, 34px)", fontWeight: 300, lineHeight: 1, color: "var(--label-primary)" }}>{props.value}</div>
      <p className="pf-body" style={{ margin: "14px 0 0", fontSize: 14 }}>{props.children}</p>
    </div>
  );
}
function Quote(props) {
  return (
    <blockquote style={{ margin: 0, padding: 22, borderRadius: 18, background: "var(--fill-tertiary)", borderLeft: "1px solid var(--accent)" }}>
      <p className="pf-body" style={{ margin: 0, color: "var(--label-primary)", fontStyle: "italic" }}>{props.children}</p>
    </blockquote>
  );
}
function Panel(props) {
  return (
    <div className={"pf-glass " + (props.thick ? "pf-glass--thick" : "")} style={Object.assign({ padding: "clamp(26px, 2.4vw, 38px)", display: "flex", flexDirection: "column", height: "100%" }, props.style)}>
      {props.kicker ? <div className="pf-eyebrow" style={{ marginBottom: 14 }}>{props.kicker}</div> : null}
      {props.title ? <h4 className="pf-h3" style={{ margin: "0 0 16px", fontSize: "clamp(18px, 1.6vw, 24px)" }}>{props.title}</h4> : null}
      {props.children}
    </div>
  );
}
function Bento(props) {
  return <div className="pf-bento" style={Object.assign({ gridAutoRows: "auto" }, props.style)}>{props.children}</div>;
}
function Cell(props) {
  return <div style={Object.assign({ gridColumn: props.col || "span 6" }, props.style)}>{props.children}</div>;
}
function Figure(props) {
  return (
    <div className="pf-ph" role="img" aria-label={props.label || "Design artifact placeholder"} style={Object.assign({ minHeight: props.h || 220, flexDirection: "column", gap: 8, padding: 20, textAlign: "center" }, props.style)}>
      <span className="pf-eyebrow" style={{ color: "var(--label-tertiary)" }}>Figure</span>
      <span className="pf-body" style={{ fontSize: 13, maxWidth: 360 }}>{props.label}</span>
    </div>
  );
}
function ListBlock(props) {
  return (
    <ul style={{ margin: 0, paddingLeft: 20, display: "flex", flexDirection: "column", gap: 12, fontSize: 16, fontWeight: 400, color: "var(--label-secondary)", lineHeight: 1.6 }}>
      {props.items.map(function (it, i) { return <li key={i}>{it}</li>; })}
    </ul>
  );
}
window.CSKit = { Eyebrow: Eyebrow, SectionHead: SectionHead, Stat: Stat, Quote: Quote, Panel: Panel, Bento: Bento, Cell: Cell, Figure: Figure, ListBlock: ListBlock };

/* ---------- Opening panel (default) ---------- */
function OpeningPanel(props) {
  const c = props.case;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 44 }}>
      <div style={{ maxWidth: 820 }}>
        <h2 className="pf-h2" style={{ margin: 0, fontSize: "clamp(21px, 2.2vw, 30px)" }}>{c.title}</h2>
        <p className="pf-lead" style={{ margin: "16px 0 0", maxWidth: 820 }}>{c.summary}</p>
        {c.live ? (
          <a href={c.live} target="_blank" rel="noopener noreferrer" className="pf-btn pf-btn--primary gv-lift"
            style={{ display: "inline-flex", marginTop: 26, textDecoration: "none" }}>
            <span className="gv-ping" aria-hidden="true" style={{ width: 8, height: 8, borderRadius: "50%", background: "currentColor" }} />
            Live &middot; {c.live.replace(/^https?:\/\//, "")}
            <i data-lucide="arrow-up-right" style={{ width: 16, height: 16, opacity: 0.8 }} />
          </a>
        ) : null}
      </div>
      <div className="pf-bento" style={{ gridAutoRows: "auto" }}>
        <Meta label="Role" value={c.role} />
        <Meta label="Platform" value={c.platform} />
        <Meta label="Year" value={c.year} />
        <Meta label="Organization" value={c.org} />
      </div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
        {c.tags.map(function (t) { return <span key={t} className="pf-chip">{t}</span>; })}
      </div>
    </div>
  );
}
function Meta(props) {
  return (
    <div className="pf-glass" style={{ gridColumn: "span 3", padding: "clamp(22px, 2vw, 30px)" }}>
      <div className="pf-eyebrow" style={{ marginBottom: 12 }}>{props.label}</div>
      <div className="pf-h3" style={{ fontSize: 18 }}>{props.value}</div>
    </div>
  );
}

function PlaceholderPanel(props) {
  return (
    <div className="pf-glass" style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", padding: "clamp(56px, 8vw, 96px) 24px", gap: 18 }}>
      <span style={{ width: 60, height: 60, borderRadius: "50%", display: "inline-flex", alignItems: "center", justifyContent: "center", background: "var(--fill-secondary)", color: "var(--label-secondary)", border: "1px solid var(--pf-border)" }}>
        <i data-lucide="pen-line" style={{ width: 24, height: 24 }} />
      </span>
      <div className="pf-h3" style={{ fontSize: 24 }}>{props.tab} in progress</div>
      <p className="pf-body" style={{ margin: 0, maxWidth: 440 }}>
        This chapter is being written. Reach out and I will happily walk you through it.
      </p>
    </div>
  );
}

/* ---------- Floating back-to-top (case pages) ---------- */
function BackToTop() {
  const [show, setShow] = useState(false);
  useEffect(function () {
    function onScroll() { setShow(window.scrollY > 500); }
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return function () { window.removeEventListener("scroll", onScroll); };
  }, []);
  useEffect(function () { if (window.lucide) window.lucide.createIcons(); }, [show]);
  return (
    <button onClick={function () {
      const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
      window.scrollTo({ top: 0, behavior: reduced ? "auto" : "smooth" });
    }} aria-label="Back to top" className="pf-glass gv-lift"
      style={{ position: "fixed", right: 28, bottom: 28, zIndex: 45, width: 48, height: 48, borderRadius: "50%", border: "1px solid var(--pf-border)", cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--label-primary)", padding: 0, opacity: show ? 1 : 0, transform: show ? "translateY(0)" : "translateY(14px)", pointerEvents: show ? "auto" : "none", transition: "opacity 300ms var(--glass-ease, ease), transform 300ms var(--glass-ease, ease)" }}>
      <i data-lucide="chevron-up" style={{ width: 18, height: 18 }} />
    </button>
  );
}

/* ---------- Onboarding diagnostics journey map (embedded) ---------- */
function OnboardingMapBlock() {
  return (
    <div className="pf-container" style={{ paddingBlock: "clamp(48px, 7vh, 96px)" }}>
      <div style={{ maxWidth: 760, margin: "0 auto clamp(28px, 4vh, 44px)", textAlign: "center" }}>
        <div className="pf-eyebrow" style={{ marginBottom: 14, color: "var(--accent)" }}>From earlier research</div>
        <p className="pf-body" style={{ margin: 0, fontSize: 17, color: "var(--label-primary)" }}>
          This map comes from earlier research. It traces the full customer enrollment journey for a MySubaru
          subscription, and the checkpoints mark where friction lives along the way. Click a checkpoint to explore
          the ideation behind it.
        </p>
      </div>
      <div className="pf-glass pf-glass--thick" style={{ padding: "clamp(20px, 2.4vh, 32px) clamp(10px, 1vw, 16px)", background: "#ffffff" }}>
        <iframe title="MySubaru onboarding diagnostics journey map" src="assets/diagnostics-journey-map.html" loading="lazy"
          onLoad={function (e) {
            try {
              var ifr = e.target, doc = ifr.contentDocument, win = ifr.contentWindow;
              if (!doc) return;
              // Size the frame to the map's actual scaled content so nothing crops
              // and no dead white space is left, and keep it in sync on resize.
              function fit() {
                try {
                  var root = doc.getElementById("root");
                  var col = root && root.querySelector(".flex.flex-col");
                  if (!col) return;
                  var h = 0;
                  [].forEach.call(col.children, function (k) { h += k.getBoundingClientRect().height; });
                  h += 56; // column gap + a little breathing room
                  ifr.style.height = Math.ceil(h) + "px";
                } catch (err) {}
              }
              fit();
              setTimeout(fit, 150); setTimeout(fit, 500);
              if (win) win.addEventListener("resize", fit);
              window.addEventListener("resize", fit);
              doc.addEventListener("click", function (ev) {
                var r = ifr.getBoundingClientRect();
                if (ev.clientY / (r.height || 1) > 0.82) return;
                var i = Math.min(3, Math.max(0, Math.floor((ev.clientX / (r.width || 1)) * 4)));
                var id = ["cp-1", "cp-2", "cp-3", "cp-3"][i];
                var el = document.getElementById(id);
                if (!el) return;
                var reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
                var top = el.getBoundingClientRect().top + window.scrollY - 120;
                window.scrollTo({ top: top, behavior: reduced ? "auto" : "smooth" });
              });
            } catch (err) {}
          }}
          style={{ display: "block", width: "100%", height: "min(78vh, 760px)", border: 0, borderRadius: 16, background: "transparent" }} />
      </div>
    </div>
  );
}

/* ---------- Case study shell ---------- */
function CaseStudy(props) {
  const { caseId, onBack, onNav } = props;
  const idx = CASE_LIST.findIndex(function (c) { return c.id === caseId; });
  const c = CASE_LIST[idx];
  const prev = CASE_LIST[idx - 1];
  const next = CASE_LIST[idx + 1];
  const tabs = (c && c.tabs) || DEFAULT_TABS;
  const [tab, setTab] = useState(tabs[0]);
  useEffect(function () { setTab(tabs[0]); window.scrollTo(0, 0); }, [caseId]);

  /* The header is fixed and the tab bar sits under it. On a phone a long
     case title wraps, so the header's height is not a constant and the
     tab bar cannot be pinned to a hard-coded offset. Publish the measured
     heights; the phone stylesheet reads them, desktop keeps its own
     fixed values. */
  const headRef = useRef(null);
  const tabsRef = useRef(null);
  const artRef = useRef(null);
  useEffect(function () {
    const head = headRef.current;
    const tabsEl = tabsRef.current;
    const art = artRef.current;
    if (!head || !art) return;
    function measure() {
      const hh = Math.round(head.getBoundingClientRect().height);
      if (hh) art.style.setProperty("--gv-head-h", hh + "px");
      if (tabsEl) {
        const th = Math.round(tabsEl.getBoundingClientRect().height);
        if (th) art.style.setProperty("--gv-tabs-h", th + "px");
      }
    }
    measure();
    /* fonts and the glass layer settle a frame or two after mount */
    const t1 = setTimeout(measure, 120);
    const t2 = setTimeout(measure, 600);
    let ro = null;
    if (window.ResizeObserver) {
      ro = new ResizeObserver(measure);
      ro.observe(head);
      if (tabsEl) ro.observe(tabsEl);
    }
    window.addEventListener("resize", measure);
    return function () {
      clearTimeout(t1); clearTimeout(t2);
      if (ro) ro.disconnect();
      window.removeEventListener("resize", measure);
    };
  }, [caseId, tab, c]);

  if (!c) return null;

  const registry = (window.CASE_PANELS && window.CASE_PANELS[c.id]) || {};
  let panel;
  if (registry[tab]) {
    const P = registry[tab];
    panel = <P case={c} />;
  } else if (tab === "Opening") {
    panel = <OpeningPanel case={c} />;
  } else {
    panel = <PlaceholderPanel tab={tab} />;
  }

  return (
    <article ref={artRef} className="gv-case" style={{ minHeight: "100vh", position: "relative", zIndex: 1, paddingTop: 88 }}>
      <div ref={headRef} style={caseHeader} className="pf-glass gv-casehead">
        <button onClick={onBack} className="pf-pill gv-lift" style={{ justifySelf: "start", border: "1px solid var(--pf-border)", background: "transparent", cursor: "pointer" }}>
          All Work
        </button>
        <div style={{ textAlign: "center", minWidth: 0 }}>
          <div className="pf-eyebrow" style={{ fontSize: 11 }}>Genevieve</div>
          <h1 className="pf-h3" style={{ margin: "6px 0 0", fontSize: 18 }}>{c.title}</h1>
        </div>
        <div style={{ display: "flex", gap: 10, justifySelf: "end" }}>
          <button onClick={props.toggle} aria-pressed={props.theme === "light"} aria-label={props.theme === "dark" ? "Switch to light mode" : "Switch to dark mode"} className="gv-lift" style={iconPill}>
            <i data-lucide="moon" style={{ width: 18, height: 18 }} />
          </button>
          <button onClick={function () { prev && onNav(prev.id); }} disabled={!prev} className="gv-lift gv-pgbtn" style={Object.assign({}, textPill, { opacity: prev ? 1 : 0.3, cursor: prev ? "pointer" : "default" })}>Previous</button>
          <button onClick={function () { next && onNav(next.id); }} disabled={!next} className="gv-lift gv-pgbtn" style={Object.assign({}, textPill, { opacity: next ? 1 : 0.3, cursor: next ? "pointer" : "default" })}>Next</button>
        </div>
      </div>

      <div ref={tabsRef} className="gv-casetabs" style={{ position: "fixed", top: 76, left: 0, right: 0, zIndex: 39, display: "flex", justifyContent: "center", padding: "12px 24px 8px", pointerEvents: "none" }}>
        <div style={{ pointerEvents: "auto" }}>
          <CaseTabs value={tab} onChange={function (t) { setTab(t); window.scrollTo({ top: 0, behavior: "auto" }); }} tabs={tabs} />
        </div>
      </div>
      <div className="gv-casetabs-spacer" style={{ height: 64 }} />

      {/* case pages go straight to content; the onboarding journey map opens Ideation */}
      {c.heroMap && window.OnboardingMap && tab === "Ideation" ? <OnboardingMapBlock /> : null}

      <div className="pf-container" style={{ paddingBlock: "56px" }}>
        {panel}
      </div>

      {c.heroMap && window.OnboardingMap && tab === "Research" ? (
        <OnboardingMapBlock />
      ) : null}

      <nav aria-label="Case study paging" className="pf-container" style={{ paddingBlock: "40px 80px" }}>
        <hr className="pf-rule" style={{ marginBottom: 36 }} />
        <div style={{ display: "flex", justifyContent: "space-between", gap: 24 }}>
          <div>
            {prev ? (
              <a href="#" onClick={function (e) { e.preventDefault(); onNav(prev.id); }} style={pageLink}>
                <span className="pf-eyebrow">Previous</span>
                <span className="pf-h3" style={{ fontSize: 20, marginTop: 8 }}>{prev.title}</span>
              </a>
            ) : <span />}
          </div>
          <div style={{ textAlign: "right" }}>
            {next ? (
              <a href="#" onClick={function (e) { e.preventDefault(); onNav(next.id); }} style={Object.assign({}, pageLink, { alignItems: "flex-end" })}>
                <span className="pf-eyebrow">Next</span>
                <span className="pf-h3" style={{ fontSize: 20, marginTop: 8 }}>{next.title}</span>
              </a>
            ) : <span />}
          </div>
        </div>
      </nav>
      <BackToTop />
    </article>
  );
}

const caseHeader = { position: "fixed", top: 0, left: 0, right: 0, zIndex: 40, display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", gap: 16, padding: "18px clamp(20px, 4vw, 56px)", borderRadius: 0, borderLeft: 0, borderRight: 0, borderTop: 0 };
const iconPill = { display: "inline-flex", alignItems: "center", justifyContent: "center", width: 44, height: 44, borderRadius: 999, border: "1px solid var(--pf-border)", background: "transparent", color: "var(--label-primary)", cursor: "pointer" };
const textPill = { display: "inline-flex", alignItems: "center", height: 44, padding: "0 20px", borderRadius: 999, border: "1px solid var(--pf-border)", background: "transparent", color: "var(--label-primary)", fontSize: 14, fontWeight: 400, letterSpacing: "0.01em" };
const pageLink = { display: "inline-flex", flexDirection: "column", textDecoration: "none" };

Object.assign(window, { CaseStudy: CaseStudy, CASE_LIST: CASE_LIST });