/* hub.jsx — the gallery of demo businesses + the shared BrandLogo. */

/* Cloud-provider mark shown beside each business name on its hub card
   (which gateway/cloud that demo runs on). Files live in images/. */
const BUSINESS_CLOUD = {
  evercare: { src: "images/aws.svg", alt: "AWS" },
  bloom: { src: "images/gcp.svg", alt: "Google Cloud" },
  nro: { src: "images/azure.png", alt: "Microsoft Azure" },
};

/* LLM/model mark shown beside each business name (which model that bot runs on). */
const BUSINESS_LLM = {
  evercare: { src: "images/claude.svg", alt: "Claude" },
  nro: { src: "images/deepseek.svg", alt: "DeepSeek" },
  bloom: { src: "images/gemini.svg", alt: "Gemini" },
};

// Brand-accurate little logo lockup for each business. Reused in the
// demo-app chrome so the mark stays consistent.
function BrandLogo({ business, size = 40, withWordmark = false, onDark = false, wordOverride }) {
  const t = business.theme;
  const marks = {
    evercare: { icon: "Stethoscope", bg: `linear-gradient(135deg, ${t.primary}, ${t.accent})`, fg: "#fff", radius: 12 },
    nro: { icon: "Landmark", bg: t.primary, fg: t.gold || "#cdb27e", radius: 8, border: `1.5px solid ${t.gold || "#cdb27e"}` },
    bloom: { icon: "Flower2", bg: `linear-gradient(135deg, ${t.primary}, ${t.heroTo})`, fg: "#fff", radius: 14 },
  };
  const m = marks[business.id] || marks.evercare;
  const wordColor = wordOverride || (onDark ? "#f6eef0" : t.ink);
  const subColor = onDark ? "rgba(246,238,240,0.55)" : t.sub;
  return (
    <div className="flex items-center gap-3">
      <div
        className="flex shrink-0 items-center justify-center"
        style={{ width: size, height: size, background: m.bg, borderRadius: m.radius, color: m.fg, border: m.border || "none", boxShadow: "0 6px 16px -8px rgba(0,0,0,0.35)" }}
      >
        <Icon name={m.icon} size={size * 0.5} strokeWidth={2.2} />
      </div>
      {withWordmark && (
        <div className="leading-tight">
          <div style={{ fontFamily: t.headingFont, fontWeight: 700, fontSize: size * 0.42, color: wordColor, letterSpacing: "-0.01em" }}>
            {business.name}
          </div>
          <div className="text-[11px] font-medium uppercase tracking-[0.18em]" style={{ color: subColor }}>
            {business.tagline}
          </div>
        </div>
      )}
    </div>
  );
}

function HubCard({ business, index, onLaunch, th }) {
  const t = business.theme;
  const launch = t.hubAccent || t.primary; // brighter accent for the rest-state launch button on the dark hub
  const [hover, setHover] = React.useState(false);
  const route = "#/app/" + business.id;
  return (
    <div className="relative a-fade-up" style={{ animationDelay: index * 90 + "ms" }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <a
        href={route}
        onClick={(e) => { if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return; e.preventDefault(); onLaunch(business); }}
        className="group relative flex flex-col overflow-hidden rounded-3xl text-left transition-[transform,box-shadow] duration-300"
        style={{
          background: th.card,
          border: `1px solid ${hover ? t.primary + "66" : th.cardBorder}`,
          boxShadow: hover ? th.cardShadowHover : th.cardShadow,
          transform: hover ? "translateY(-4px)" : "none",
        }}
      >
        {/* brand band */}
        <div className="relative h-28 w-full overflow-hidden" style={{ background: `linear-gradient(120deg, ${t.heroFrom}, ${t.heroTo})` }}>
          <div className="absolute -right-6 -top-10 opacity-25">
            <Icon name={business.id === "evercare" ? "Stethoscope" : business.id === "nro" ? "Scale" : "ShoppingBag"} size={150} style={{ color: "#fff" }} strokeWidth={1.1} />
          </div>
          <div className="absolute left-5 top-5">
            <BrandLogo business={business} size={44} />
          </div>
          <span className="absolute right-14 top-4 rounded-full px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em]" style={{ background: "rgba(0,0,0,0.22)", color: "#fff" }}>
            {business.industry}
          </span>
        </div>

        <div className="flex flex-1 flex-col p-5">
          <div className="flex items-center gap-2">
            <div style={{ fontFamily: "'Manrope', sans-serif", color: th.inkStrong }} className="text-[19px] font-extrabold leading-tight tracking-[-0.01em]">
              {business.name}
            </div>
            {BUSINESS_CLOUD[business.id] && (
              <img src={BUSINESS_CLOUD[business.id].src} alt={BUSINESS_CLOUD[business.id].alt} className="shrink-0" style={{ height: 22, width: "auto" }} />
            )}
            {BUSINESS_LLM[business.id] && (
              <img src={BUSINESS_LLM[business.id].src} alt={BUSINESS_LLM[business.id].alt} title={BUSINESS_LLM[business.id].alt} className="shrink-0" style={{ height: 20, width: "auto" }} />
            )}
            <img src="images/portkey.png" alt="Portkey" title="Portkey" className="shrink-0" style={{ height: 20, width: "auto" }} />
          </div>
          <p className="mt-1.5 flex-1 text-[13.5px] leading-relaxed" style={{ color: th.ink }}>
            {business.description}
          </p>
          <div className="mt-5 flex items-center justify-between">
            <span className="inline-flex items-center gap-1.5 text-[12px]" style={{ color: th.faint }}>
              <span className="inline-block h-1.5 w-1.5 rounded-full" style={{ background: "#3fae6a" }} /> Live · 1 chatbot
            </span>
            <span
              className="inline-flex items-center gap-1.5 rounded-xl px-3.5 py-2 text-[13px] font-semibold transition-all"
              style={{ background: hover ? launch : "color-mix(in oklab, " + launch + " 16%, transparent)", color: hover ? (t.primaryInk || "#fff") : launch }}
            >
              Launch demo <Icon name="ArrowRight" size={15} className="transition-transform" style={{ transform: hover ? "translateX(2px)" : "none" }} />
            </span>
          </div>
        </div>
      </a>
      <OpenInNewTab href={route} className="absolute right-4 top-4 z-10 h-7 w-7" title={"Open " + business.name + " in new tab"} style={{ background: "rgba(0,0,0,0.28)", color: "#fff", border: "1px solid rgba(255,255,255,0.22)" }} />
    </div>
  );
}

/* Disabled "coming soon" card for pillars that aren't live yet.
   Deliberately muted — no brand band, no launch, no hover lift. */
function PlaceholderCard({ item, index, th }) {
  const [hover, setHover] = React.useState(false);
  const preview = item.previewHref;
  return (
    <div
      className="relative flex h-full flex-col overflow-hidden rounded-3xl a-fade-up"
      onMouseEnter={() => preview && setHover(true)}
      onMouseLeave={() => preview && setHover(false)}
      style={{ background: th.card, border: `1.5px dashed ${th.dashed}`, boxShadow: hover ? th.cardShadowHover : th.cardShadow, opacity: preview ? 1 : 0.92, transform: hover ? "translateY(-4px)" : "none", transition: "transform .3s, box-shadow .3s", animationDelay: index * 90 + "ms" }}
    >
      {/* muted band */}
      <div className="relative flex h-28 w-full items-center justify-between px-5" style={{ background: th.surfaceAlt }}>
        <div className="flex h-12 w-12 items-center justify-center rounded-2xl" style={{ background: th.chip, color: th.faint }}>
          <Icon name={item.accentIcon || "Boxes"} size={24} strokeWidth={1.6} />
        </div>
        <span className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em]" style={{ background: th.chip, color: th.sub }}>
          {preview ? <><Icon name="Eye" size={11} /> Preview</> : <><Icon name="Clock" size={11} /> Coming soon</>}
        </span>
      </div>

      <div className="flex flex-1 flex-col p-5">
        <div className="text-[11px] font-semibold uppercase tracking-[0.16em]" style={{ color: th.faint }}>{item.industry}</div>
        <div className="mt-1 flex items-center gap-2">
          <span className="text-[19px] font-extrabold leading-tight tracking-[-0.01em]" style={{ fontFamily: "'Manrope', sans-serif", color: th.inkStrong }}>{item.title}</span>
          {item.titleImg ? <img src={item.titleImg} alt="" aria-hidden="true" className="h-5 w-5 object-contain" /> : null}
        </div>
        {item.logos ? (
          <div className="mt-2.5 flex flex-wrap items-center gap-x-3 gap-y-1.5">
            {item.logos.map((lg) => (
              lg.text ? (
                <span key={lg.text} className="shrink-0 text-[15px] font-extrabold tracking-[-0.01em]" style={{ color: th.sub, fontFamily: "'Manrope', sans-serif" }}>{lg.text}</span>
              ) : (
                <img key={lg.src} src={lg.src} alt={lg.alt} title={lg.alt} className="shrink-0" style={{ height: lg.h || 16, width: "auto" }} />
              )
            ))}
          </div>
        ) : null}
        <p className="mt-1.5 flex-1 text-[13.5px] leading-relaxed" style={{ color: preview ? th.ink : th.faint }}>{item.blurb}</p>
        {preview ? (
          <a href={preview} className="mt-5 inline-flex w-fit items-center gap-1.5 rounded-xl px-3.5 py-2 text-[13px] font-semibold transition-all" style={{ background: hover ? th.accent : "color-mix(in oklab, " + th.accent + " 14%, transparent)", color: hover ? "#fff" : th.accent }}>
            {item.hint} <Icon name="ArrowRight" size={15} style={{ transform: hover ? "translateX(2px)" : "none", transition: "transform .2s" }} />
          </a>
        ) : (
          <div className="mt-5 inline-flex w-fit cursor-default items-center gap-1.5 rounded-xl px-3.5 py-2 text-[13px] font-semibold" style={{ background: th.chip, color: th.sub }}>
            {item.hint} <Icon name="ArrowRight" size={15} />
          </div>
        )}
      </div>
      {preview ? (
        <OpenInNewTab href={preview} className="absolute right-4 top-4 z-10 h-7 w-7" title={"Open " + item.title + " preview in new tab"} style={{ background: th.chip, color: th.sub, border: `1px solid ${th.cardBorder}` }} />
      ) : null}
    </div>
  );
}

/* Runbook card — a coming-soon resource that links into its per-VM runbook
   (#/cucaracha/<id>). Shares the LIVE cards' anatomy (colored brand band,
   icon tile, category chip, footer with right-aligned action) so it sits
   natively beside them — color-coded by Koi posture:
     observe (Going Dark)  → amber (unprotected / danger)
     enforce (Koi on Guard) → green (protected) */
function RunbookCard({ item, index, th }) {
  const [hover, setHover] = React.useState(false);
  const rb = (window.getRunbook && window.getRunbook(item.runbookId)) || {};
  const enforce = rb.posture === "enforce";
  const c = rb.accent || (enforce ? "#1f9d57" : "#dd7a26");
  const icon = item.accentIcon || (enforce ? "ShieldCheck" : "Bug");
  const route = "#/cucaracha/" + item.runbookId;
  const band = `linear-gradient(120deg, ${c}, color-mix(in oklab, ${c} 52%, #050508))`;
  const chip = item.chip || (enforce ? "Koi-Protected" : "Unprotected");
  return (
    <div className="relative h-full a-fade-up" style={{ animationDelay: index * 90 + "ms" }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <a
        href={route}
        className="group relative flex h-full flex-col overflow-hidden rounded-3xl text-left transition-[transform,box-shadow] duration-300"
        style={{ background: th.card, border: `1px solid ${hover ? c + "66" : th.cardBorder}`, boxShadow: hover ? th.cardShadowHover : th.cardShadow, transform: hover ? "translateY(-4px)" : "none" }}
      >
        {/* brand band */}
        <div className="relative h-28 w-full overflow-hidden" style={{ background: band }}>
          <div className="absolute -right-6 -top-10" style={{ opacity: 0.22 }}>
            <Icon name={icon} size={150} style={{ color: "#fff" }} strokeWidth={1.1} />
          </div>
          <div className="absolute left-5 top-5 flex h-11 w-11 items-center justify-center rounded-2xl" style={{ background: "rgba(5,5,8,0.32)", color: "#fff", border: "1px solid rgba(255,255,255,0.22)" }}>
            <Icon name={icon} size={22} strokeWidth={2} />
          </div>
          <span className="absolute right-5 top-4 rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.16em]" style={{ background: "rgba(5,5,8,0.34)", color: "#fff", fontFamily: "'JetBrains Mono', monospace" }}>{chip}</span>
        </div>

        <div className="flex flex-1 flex-col p-5">
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em]" style={{ color: th.faint }}>{rb.osLabel || item.industry}</div>
          <div className="flex items-center gap-2">
            <div className="mt-0.5 text-[19px] font-extrabold leading-tight tracking-[-0.01em]" style={{ fontFamily: "'Manrope', sans-serif", color: th.inkStrong }}>{item.title}</div>
            {/^windows$/i.test(rb.os || "") || /windows/i.test(item.industry || "") ? (
              <img src="images/windows.png" alt="Windows" className="mt-0.5 shrink-0" style={{ height: 20, width: "auto" }} />
            ) : null}
            {/linux|ubuntu/i.test(rb.os || "") || /linux|ubuntu/i.test(item.industry || "") ? (
              <img src="images/ubuntu.png" alt="Ubuntu" className="mt-0.5 shrink-0" style={{ height: 20, width: "auto" }} />
            ) : null}
            {enforce ? (
              <img src="images/koi.png" alt="Koi" className="mt-0.5 shrink-0" style={{ height: 22, width: "auto" }} />
            ) : null}
          </div>
          <p className="mt-1.5 flex-1 text-[13.5px] leading-relaxed" style={{ color: th.ink }}>{item.blurb}</p>
          <div className="mt-5 flex items-center justify-end">
            <span
              className="inline-flex items-center gap-1.5 rounded-xl px-3.5 py-2 text-[13px] font-semibold transition-all"
              style={{ background: hover ? c : "color-mix(in oklab, " + c + " 14%, transparent)", color: hover ? "#fff" : c }}
            >
              Open runbook <Icon name="ArrowRight" size={15} style={{ transform: hover ? "translateX(2px)" : "none", transition: "transform .2s" }} />
            </span>
          </div>
        </div>
      </a>
      <OpenInNewTab href={route} className="absolute right-4 top-4 z-10 h-7 w-7" title={"Open " + item.title + " runbook in new tab"} style={{ background: "rgba(5,5,8,0.34)", color: "#fff", border: "1px solid rgba(255,255,255,0.22)" }} />
    </div>
  );
}

/* Eagle Eye card — routes into the self-contained SOC experience.
   Mirrors HubCard's anatomy (brand band, logo tile, industry chip, name,
   footer launch) so the bucket feels native, but accented with the card's
   layer color instead of a business theme. */
function EagleCard({ item, index, onLaunchEagle, th }) {
  const [hover, setHover] = React.useState(false);
  const [vHover, setVHover] = React.useState(false);
  const c = item.color;
  // The "Launch demo" button matches the Evercare ("clinic") button exactly —
  // same deep teal, soft tint at rest, solid + white on hover.
  const btnC = item.btnColor || c;
  const band = `linear-gradient(120deg, ${c}, color-mix(in oklab, ${c} 55%, #050508))`;

  /* EXTERNAL WHEN THE SEAM IS SET, IN-HUB WHEN IT IS NOT.
     Eagle Eye now has its own deployed home at port.eagle.lastrose.live, so the
     Key card link-outs there in a new tab — same treatment as the Lite card, which
     has always pointed at its own console via liteEagleUrl.
     The seam carries the ORIGIN only; the screen is appended here, so this keeps
     working if a second eagle card with a different `screen` is ever added.
     Unset (raw export, local preview) falls back to the in-hub hash route, so the
     card is never dead. */
  const keyBase = (window.LASTROSE_BACKENDS && window.LASTROSE_BACKENDS.keyEagleUrl) || "";
  const screen = item.screen || "soc";
  const external = keyBase ? keyBase.replace(/\/+$/, "") + "/#/eagle/" + screen : "";
  const route = external || "#/eagle/" + screen;
  const launch = (e) => {
    // External: let the browser do it — the anchor already carries target=_blank.
    if (external) return;
    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
    e.preventDefault();
    onLaunchEagle(item.screen);
  };
  const openCard = () => { if (external) window.open(external, "_blank", "noopener"); else onLaunchEagle(item.screen); };
  return (
    <div className="relative a-fade-up" style={{ animationDelay: index * 90 + "ms" }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <div
        role="link"
        tabIndex={0}
        onClick={(e) => { if (e.target.closest("a,button")) return; openCard(); }}
        onKeyDown={(e) => { if (e.key === "Enter") openCard(); }}
        className="group relative flex cursor-pointer flex-col overflow-hidden rounded-3xl text-left transition-[transform,box-shadow] duration-300"
        style={{
          background: th.card,
          border: `1px solid ${hover ? c + "66" : th.cardBorder}`,
          boxShadow: hover ? th.cardShadowHover : th.cardShadow,
          transform: hover ? "translateY(-4px)" : "none",
        }}
      >
        {/* layer band */}
        <div className="relative h-28 w-full overflow-hidden" style={{ background: band }}>
          <div className="absolute -right-6 -top-10" style={{ opacity: 0.22 }}>
            <Icon name={item.icon} size={150} style={{ color: "#fff" }} strokeWidth={1.1} />
          </div>
          <div className="absolute left-5 top-5 flex h-11 w-11 items-center justify-center rounded-2xl" style={{ background: "rgba(5,5,8,0.32)", color: "#fff", border: "1px solid rgba(255,255,255,0.22)" }}>
            <Icon name={item.icon} size={22} strokeWidth={2} />
          </div>
          {item.layer ? (
            <span className="absolute right-14 top-4 rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.16em]" style={{ background: "rgba(5,5,8,0.34)", color: "#fff", fontFamily: "'JetBrains Mono', monospace" }}>{item.layer}</span>
          ) : (
            <span className="absolute right-14 top-4 rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.16em]" style={{ background: "rgba(5,5,8,0.34)", color: "#fff" }}>Dashboard</span>
          )}
        </div>

        <div className="flex flex-1 flex-col p-5">
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em]" style={{ color: th.faint }}>{item.industry}</div>
          <div className="flex items-center gap-2">
            <div style={{ fontFamily: "'Manrope', sans-serif", color: th.inkStrong }} className="mt-0.5 text-[19px] font-extrabold leading-tight tracking-[-0.01em]">{item.title}</div>
            {item.lead && (
              <img src="images/portkey.png" alt="Portkey" className="mt-0.5 shrink-0" style={{ height: 22, width: "auto" }} />
            )}
            <img src="images/claude.svg" alt="Claude" title="Claude" className="mt-0.5 shrink-0" style={{ height: 20, width: "auto" }} />
          </div>
          <p className="mt-1.5 flex-1 text-[13.5px] leading-relaxed" style={{ color: th.ink }}>{item.blurb}</p>
          <div className="mt-5 flex flex-col gap-2.5">
            <span className="inline-flex items-center gap-1.5 text-[12px]" style={{ color: th.faint }}>
              <span className="inline-block h-1.5 w-1.5 rounded-full" style={{ background: c }} /> {item.lead ? "Live · SOC console" : "Live · on the alert"}
            </span>
            <div className="flex items-center gap-2">
              <a
                href={route}
                onClick={launch}
                {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
                className="inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl px-3.5 py-2 text-[13px] font-semibold transition-all"
                style={{ background: hover ? btnC : "color-mix(in oklab, " + btnC + " 14%, transparent)", color: hover ? "#fff" : btnC }}
              >
                Launch demo <Icon name={external ? "ArrowUpRight" : "ArrowRight"} size={15} style={{ transform: hover ? "translateX(2px)" : "none", transition: "transform .2s" }} />
              </a>
              {item.vendor && (
                <a
                  href={item.vendor.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  onMouseDown={(e) => e.stopPropagation()}
                  onMouseEnter={() => setVHover(true)}
                  onMouseLeave={() => setVHover(false)}
                  title={"Visit " + item.vendor.name}
                  className="inline-flex shrink-0 items-center gap-1.5 rounded-xl px-3 py-2 text-[12.5px] font-semibold transition-all"
                  style={{ border: `1px solid ${vHover ? btnC : th.cardBorder}`, color: vHover ? btnC : th.ink, background: vHover ? "color-mix(in oklab, " + btnC + " 12%, transparent)" : th.card, transform: vHover ? "translateY(-2px)" : "none", boxShadow: vHover ? "0 8px 18px -10px " + btnC : "none" }}
                >
                  {item.vendor.name} <Icon name="ArrowUpRight" size={14} style={{ color: vHover ? btnC : th.faint }} />
                </a>
              )}
            </div>
          </div>
        </div>
      </div>
      <OpenInNewTab href={route} className="absolute right-4 top-4 z-10 h-7 w-7" title={"Open " + item.title + " in new tab"} style={{ background: "rgba(5,5,8,0.34)", color: "#fff", border: "1px solid rgba(255,255,255,0.22)" }} />
    </div>
  );
}

/* Eagle Eye, Lite — a fully LIVE card with the same visual treatment as the Key
   card, but an EXTERNAL link-out to the self-contained standalone Lite Eagle Eye
   app (Key routes in-hub; Lite opens a separate deployed SOC console). The href is
   the window.LASTROSE_BACKENDS.liteEagleUrl SEAM — never hardcoded — falling back to
   "#" when unset. IMPORTANT: the fallback only changes WHERE the link points; the
   card is ALWAYS rendered live (full colour, lite-teal band, "Live · LiteLLM SOC",
   "Launch demo →"), never dimmed or "coming soon". */
function EagleLiteCard({ item, index, th }) {
  const [hover, setHover] = React.useState(false);
  const [vHover, setVHover] = React.useState(false);
  const url = (window.LASTROSE_BACKENDS && window.LASTROSE_BACKENDS.liteEagleUrl) || "#";
  const c = item.color || "#22d3ee";
  const btnC = item.btnColor || c;
  const band = `linear-gradient(120deg, ${c}, color-mix(in oklab, ${c} 55%, #050508))`;

  return (
    <div className="relative h-full a-fade-up" style={{ animationDelay: index * 90 + "ms" }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <div
        role="link"
        tabIndex={0}
        onClick={(e) => { if (e.target.closest("a,button")) return; if (url !== "#") window.open(url, "_blank", "noopener"); }}
        className="group relative flex h-full cursor-pointer flex-col overflow-hidden rounded-3xl text-left transition-[transform,box-shadow] duration-300"
        style={{
          background: th.card,
          border: `1px solid ${hover ? c + "66" : th.cardBorder}`,
          boxShadow: hover ? th.cardShadowHover : th.cardShadow,
          transform: hover ? "translateY(-4px)" : "none",
        }}
      >
        <div className="relative h-28 w-full overflow-hidden" style={{ background: band }}>
          <div className="absolute -right-6 -top-10" style={{ opacity: 0.22 }}>
            <Icon name={item.icon || "Feather"} size={150} style={{ color: "#fff" }} strokeWidth={1.1} />
          </div>
          <div className="absolute left-5 top-5 flex h-11 w-11 items-center justify-center rounded-2xl" style={{ background: "rgba(5,5,8,0.32)", color: "#fff", border: "1px solid rgba(255,255,255,0.22)" }}>
            <Icon name={item.icon || "Feather"} size={22} strokeWidth={2} />
          </div>
          <span className="absolute right-14 top-4 rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.16em]" style={{ background: "rgba(5,5,8,0.34)", color: "#fff", fontFamily: "'JetBrains Mono', monospace" }}>{item.layer || "SOC"}</span>
        </div>

        <div className="flex flex-1 flex-col p-5">
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em]" style={{ color: th.faint }}>{item.industry}</div>
          <div className="flex items-center gap-2">
            <div style={{ fontFamily: "'Manrope', sans-serif", color: th.inkStrong }} className="mt-0.5 text-[19px] font-extrabold leading-tight tracking-[-0.01em]">{item.title}</div>
            <img src="images/litellm.png" alt="LiteLLM" className="mt-0.5 shrink-0" style={{ height: 22, width: "auto" }} />
            <img src="images/claude.svg" alt="Claude" title="Claude" className="mt-0.5 shrink-0" style={{ height: 20, width: "auto" }} />
          </div>
          <p className="mt-1.5 flex-1 text-[13.5px] leading-relaxed" style={{ color: th.ink }}>{item.blurb}</p>
          <div className="mt-5 flex flex-col gap-2.5">
            <span className="inline-flex items-center gap-1.5 text-[12px]" style={{ color: th.faint }}>
              <span className="inline-block h-1.5 w-1.5 rounded-full" style={{ background: c }} /> {item.statusLine || "Live · LiteLLM SOC"}
            </span>
            <div className="flex items-center gap-2">
              <a
                href={url}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl px-3.5 py-2 text-[13px] font-semibold transition-all"
                style={{ background: hover ? btnC : "color-mix(in oklab, " + btnC + " 14%, transparent)", color: hover ? "#fff" : btnC }}
              >
                Launch demo <Icon name="ArrowRight" size={15} style={{ transform: hover ? "translateX(2px)" : "none", transition: "transform .2s" }} />
              </a>
              {item.vendor && (
                <a
                  href={item.vendor.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  onMouseDown={(e) => e.stopPropagation()}
                  onMouseEnter={() => setVHover(true)}
                  onMouseLeave={() => setVHover(false)}
                  title={"Visit " + item.vendor.name}
                  className="inline-flex shrink-0 items-center gap-1.5 rounded-xl px-3 py-2 text-[12.5px] font-semibold transition-all"
                  style={{ border: `1px solid ${vHover ? btnC : th.cardBorder}`, color: vHover ? btnC : th.ink, background: vHover ? "color-mix(in oklab, " + btnC + " 12%, transparent)" : th.card, transform: vHover ? "translateY(-2px)" : "none", boxShadow: vHover ? "0 8px 18px -10px " + btnC : "none" }}
                >
                  {item.vendor.name} <Icon name="ArrowUpRight" size={14} style={{ color: vHover ? btnC : th.faint }} />
                </a>
              )}
            </div>
          </div>
        </div>
      </div>
      <OpenInNewTab href={url} className="absolute right-4 top-4 z-10 h-7 w-7" title={"Open " + item.title + " in new tab"} style={{ background: "rgba(5,5,8,0.34)", color: "#fff", border: "1px solid rgba(255,255,255,0.22)" }} />
    </div>
  );
}

/* Troy Story — Azure ML model scan. A fully LIVE card mirroring EagleLiteCard's
   anatomy and link-out behaviour, but reading the window.LASTROSE_BACKENDS.modelScanUrl
   SEAM (never hardcoded). When the seam is unset (raw mock export) the card stays
   live-styled but the CTA drops to a quiet "not yet connected" state and the click
   is inert — so the standalone export still runs with no backend. */
function ModelScanCard({ item, index, th }) {
  const [hover, setHover] = React.useState(false);
  const url = (window.LASTROSE_BACKENDS && window.LASTROSE_BACKENDS.modelScanUrl) || null;
  const connected = !!url;
  const c = item.color || "#3b82f6";
  const btnC = item.btnColor || c;
  const band = `linear-gradient(120deg, ${c}, color-mix(in oklab, ${c} 55%, #050508))`;

  return (
    <div className="relative h-full a-fade-up" style={{ animationDelay: index * 90 + "ms" }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <div
        role={connected ? "link" : undefined}
        tabIndex={connected ? 0 : undefined}
        onClick={(e) => { if (e.target.closest("a,button")) return; if (connected) window.open(url, "_blank", "noopener"); }}
        className="group relative flex h-full flex-col overflow-hidden rounded-3xl text-left transition-[transform,box-shadow] duration-300"
        style={{
          background: th.card,
          border: `1px solid ${hover ? c + "66" : th.cardBorder}`,
          boxShadow: hover ? th.cardShadowHover : th.cardShadow,
          transform: hover ? "translateY(-4px)" : "none",
          cursor: connected ? "pointer" : "default",
        }}
      >
        <div className="relative h-28 w-full overflow-hidden" style={{ background: band }}>
          <div className="absolute -right-6 -top-10" style={{ opacity: 0.22 }}>
            <Icon name={item.accentIcon || item.icon || "ScanLine"} size={150} style={{ color: "#fff" }} strokeWidth={1.1} />
          </div>
          <div className="absolute left-5 top-5 flex h-11 w-11 items-center justify-center rounded-2xl" style={{ background: "rgba(5,5,8,0.32)", color: "#fff", border: "1px solid rgba(255,255,255,0.22)" }}>
            <Icon name={item.icon || "ScanLine"} size={22} strokeWidth={2} />
          </div>
          <span className="absolute right-14 top-4 rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.16em]" style={{ background: "rgba(5,5,8,0.34)", color: "#fff", fontFamily: "'JetBrains Mono', monospace" }}>{item.layer || "MODEL"}</span>
        </div>

        <div className="flex flex-1 flex-col p-5">
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em]" style={{ color: th.faint }}>{item.industry}</div>
          <div className="flex items-center gap-2">
            <div style={{ fontFamily: "'Manrope', sans-serif", color: th.inkStrong }} className="mt-0.5 text-[19px] font-extrabold leading-tight tracking-[-0.01em]">{item.title}</div>
            {item.logo && <img src={item.logo} alt="" className="h-5 w-5 shrink-0" style={{ display: "block" }} />}
          </div>
          <p className="mt-1.5 flex-1 text-[13.5px] leading-relaxed" style={{ color: th.ink }}>{item.blurb}</p>
          <div className="mt-5 flex flex-col gap-2.5">
            <span className="inline-flex items-center gap-1.5 text-[12px]" style={{ color: th.faint }}>
              <span className="inline-block h-1.5 w-1.5 rounded-full" style={{ background: connected ? c : th.faint }} /> {connected ? (item.statusLine || "Live · Azure ML scan") : "Standby · connect Azure ML"}
            </span>
            {connected ? (
              <a
                href={url}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center justify-center gap-1.5 rounded-xl px-3.5 py-2 text-[13px] font-semibold transition-all"
                style={{ background: hover ? btnC : "color-mix(in oklab, " + btnC + " 14%, transparent)", color: hover ? "#fff" : btnC }}
              >
                Open the Azure ML scan <Icon name="ArrowRight" size={15} style={{ transform: hover ? "translateX(2px)" : "none", transition: "transform .2s" }} />
              </a>
            ) : (
              <span
                aria-disabled="true"
                title="Not yet connected — set LASTROSE_BACKENDS.modelScanUrl"
                className="inline-flex cursor-not-allowed items-center justify-center gap-1.5 rounded-xl px-3.5 py-2 text-[13px] font-semibold"
                style={{ background: th.chip, color: th.faint, border: `1px solid ${th.cardBorder}` }}
              >
                Not yet connected <Icon name="Lock" size={14} />
              </span>
            )}
          </div>
        </div>
      </div>
      {connected && (
        <OpenInNewTab href={url} className="absolute right-4 top-4 z-10 h-7 w-7" title={"Open " + item.title + " in new tab"} style={{ background: "rgba(5,5,8,0.34)", color: "#fff", border: "1px solid rgba(255,255,255,0.22)" }} />
      )}
    </div>
  );
}

/* Ship Happens! — GCP Cloud Build. A normal compact card (Chiquitito anatomy):
   the hub shows just the card; ALL the pipeline detail lives on the routed screen
   (#/shiphappens, see ship-happens.jsx), opened when you click it. A secondary
   link-out jumps straight to the Cloud Build console via the cloudBuildUrl SEAM
   (never hardcoded); with the seam unset it renders disabled (mock-safe). */
function CloudBuildCard({ item, index, th }) {
  const [hover, setHover] = React.useState(false);
  const [vHover, setVHover] = React.useState(false);
  const c = item.color || "#4285F4";
  const btnC = item.btnColor || c;
  const band = `linear-gradient(120deg, ${c}, color-mix(in oklab, ${c} 55%, #050818))`;
  const route = "#/shiphappens";
  const url = (window.LASTROSE_BACKENDS && window.LASTROSE_BACKENDS.cloudBuildUrl) || null;
  return (
    <div className="relative h-full a-fade-up" style={{ animationDelay: index * 90 + "ms" }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <div
        role="link"
        tabIndex={0}
        onClick={(e) => { if (e.target.closest("a,button")) return; window.location.hash = route; }}
        onKeyDown={(e) => { if (e.key === "Enter") window.location.hash = route; }}
        className="group relative flex h-full cursor-pointer flex-col overflow-hidden rounded-3xl text-left transition-[transform,box-shadow] duration-300"
        style={{ background: th.card, border: `1px solid ${hover ? c + "66" : th.cardBorder}`, boxShadow: hover ? th.cardShadowHover : th.cardShadow, transform: hover ? "translateY(-4px)" : "none" }}
      >
        <div className="relative h-28 w-full overflow-hidden" style={{ background: band }}>
          <div className="absolute -right-6 -top-10" style={{ opacity: 0.22 }}>
            <Icon name={item.accentIcon || "ShieldCheck"} size={150} style={{ color: "#fff" }} strokeWidth={1.1} />
          </div>
          <div className="absolute left-5 top-5 flex h-11 w-11 items-center justify-center rounded-2xl" style={{ background: "rgba(5,8,24,0.3)", color: "#fff", border: "1px solid rgba(255,255,255,0.22)" }}>
            <Icon name={item.icon || "Hammer"} size={22} strokeWidth={2} />
          </div>
        </div>

        <div className="flex flex-1 flex-col p-5">
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em]" style={{ color: th.faint }}>{item.industry}</div>
          <div className="mt-1 flex items-center gap-2">
            <div style={{ fontFamily: "'Manrope', sans-serif", color: th.inkStrong }} className="text-[19px] font-extrabold leading-tight tracking-[-0.01em]">{item.title}</div>
            {item.titleImg && <img src={item.titleImg} alt="" className="h-5 w-5 shrink-0" style={{ display: "block" }} />}
          </div>
          <p className="mt-1.5 flex-1 text-[13.5px] leading-relaxed" style={{ color: th.ink }}>{item.blurb}</p>
          <div className="mt-3.5">
            <span className="inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-[10.5px] font-bold" style={{ background: th.chip, color: th.sub, border: `1px solid ${th.cardBorder}` }}>
              <span className="inline-block h-2 w-2 rounded-full" style={{ background: c }} /> 7 gates · 2 blocks
            </span>
          </div>
          <div className="mt-4 flex flex-col gap-2.5">
            <span className="inline-flex items-center gap-1.5 text-[12px]" style={{ color: th.faint }}>
              <span className="inline-block h-1.5 w-1.5 rounded-full" style={{ background: c }} /> {item.statusLine || "Live · GCP Cloud Build"}
            </span>
            <div className="flex items-center gap-2">
              <a href={route} className="inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl px-3.5 py-2 text-[13px] font-semibold transition-all" style={{ background: hover ? btnC : "color-mix(in oklab, " + btnC + " 14%, transparent)", color: hover ? "#fff" : btnC }}>
                View pipeline <Icon name="ArrowRight" size={15} style={{ transform: hover ? "translateX(2px)" : "none", transition: "transform .2s" }} />
              </a>
              {url ? (
                <a
                  href={url}
                  target="_blank"
                  rel="noopener noreferrer"
                  onMouseDown={(e) => e.stopPropagation()}
                  onMouseEnter={() => setVHover(true)}
                  onMouseLeave={() => setVHover(false)}
                  title="Open the GCP Cloud Build console"
                  className="inline-flex shrink-0 items-center gap-1.5 rounded-xl px-3 py-2 text-[12.5px] font-semibold transition-all"
                  style={{ border: `1px solid ${vHover ? btnC : th.cardBorder}`, color: vHover ? btnC : th.ink, background: vHover ? "color-mix(in oklab, " + btnC + " 12%, transparent)" : th.card, transform: vHover ? "translateY(-2px)" : "none" }}
                >
                  Cloud Build <Icon name="ArrowUpRight" size={14} style={{ color: vHover ? btnC : th.faint }} />
                </a>
              ) : (
                <span aria-disabled="true" title="Console link not configured yet" className="inline-flex shrink-0 cursor-not-allowed items-center gap-1.5 rounded-xl px-3 py-2 text-[12.5px] font-semibold" style={{ border: `1px solid ${th.cardBorder}`, color: th.faint, background: th.chip }}>
                  <Icon name="Lock" size={13} /> Cloud Build
                </span>
              )}
            </div>
          </div>
        </div>
      </div>
      <OpenInNewTab href={route} className="absolute right-4 top-4 z-10 h-7 w-7" title="Open Ship Happens! in new tab" style={{ background: "rgba(5,8,24,0.34)", color: "#fff", border: "1px solid rgba(255,255,255,0.22)" }} />
    </div>
  );
}

/* Azure DevOps — the LIVE twin of CloudBuildCard. A compact card (same anatomy as
   the GCP Cloud Build tile): the hub shows just the card; ALL the pipeline detail
   (the 8-stage strip) lives on the routed screen (#/azuredevops, see
   azure-devops.jsx), opened when you click it — exactly like Ship Happens!. A
   secondary link-out jumps straight to the Azure DevOps pipeline via the
   azureDevopsUrl SEAM (never hardcoded); with the seam unset it renders the quiet
   "Not yet connected" state (mock-safe). */
function AzureDevopsCard({ item, index, th }) {
  const [hover, setHover] = React.useState(false);
  const [vHover, setVHover] = React.useState(false);
  const c = item.color || "#0078D4";
  const btnC = item.btnColor || c;
  const band = `linear-gradient(120deg, ${c}, color-mix(in oklab, ${c} 55%, #050818))`;
  const route = "#/azuredevops";
  const url = (window.LASTROSE_BACKENDS && window.LASTROSE_BACKENDS.azureDevopsUrl) || null;
  const stages = item.stages || [];
  const blocks = stages.filter((s) => s.blocked).length;
  return (
    <div className="relative h-full a-fade-up" style={{ animationDelay: index * 90 + "ms" }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <div
        role="link"
        tabIndex={0}
        onClick={(e) => { if (e.target.closest("a,button")) return; window.location.hash = route; }}
        onKeyDown={(e) => { if (e.key === "Enter") window.location.hash = route; }}
        className="group relative flex h-full cursor-pointer flex-col overflow-hidden rounded-3xl text-left transition-[transform,box-shadow] duration-300"
        style={{ background: th.card, border: `1px solid ${hover ? c + "66" : th.cardBorder}`, boxShadow: hover ? th.cardShadowHover : th.cardShadow, transform: hover ? "translateY(-4px)" : "none" }}
      >
        <div className="relative h-28 w-full overflow-hidden" style={{ background: band }}>
          <div className="absolute -right-6 -top-10" style={{ opacity: 0.22 }}>
            <Icon name={item.accentIcon || "ShieldCheck"} size={150} style={{ color: "#fff" }} strokeWidth={1.1} />
          </div>
          <div className="absolute left-5 top-5 flex h-11 w-11 items-center justify-center rounded-2xl" style={{ background: "rgba(5,8,24,0.3)", color: "#fff", border: "1px solid rgba(255,255,255,0.22)" }}>
            <Icon name={item.icon || "GitBranch"} size={22} strokeWidth={2} />
          </div>
        </div>

        <div className="flex flex-1 flex-col p-5">
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em]" style={{ color: th.faint }}>{item.industry}</div>
          <div className="mt-1 flex items-center gap-2">
            <div style={{ fontFamily: "'Manrope', sans-serif", color: th.inkStrong }} className="text-[19px] font-extrabold leading-tight tracking-[-0.01em]">{item.title}</div>
            {item.titleImg && <img src={item.titleImg} alt="" className="h-5 w-5 shrink-0" style={{ display: "block" }} />}
          </div>
          <p className="mt-1.5 flex-1 text-[13.5px] leading-relaxed" style={{ color: th.ink }}>{item.blurb}</p>
          <div className="mt-3.5">
            <span className="inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-[10.5px] font-bold" style={{ background: th.chip, color: th.sub, border: `1px solid ${th.cardBorder}` }}>
              <span className="inline-block h-2 w-2 rounded-full" style={{ background: c }} /> {stages.length} stages · {blocks} blocks
            </span>
          </div>
          <div className="mt-4 flex flex-col gap-2.5">
            <span className="inline-flex items-center gap-1.5 text-[12px]" style={{ color: th.faint }}>
              <span className="inline-block h-1.5 w-1.5 rounded-full" style={{ background: c }} /> {item.statusLine || "Live · Azure DevOps"}
            </span>
            <div className="flex items-center gap-2">
              <a href={route} className="inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl px-3.5 py-2 text-[13px] font-semibold transition-all" style={{ background: hover ? btnC : "color-mix(in oklab, " + btnC + " 14%, transparent)", color: hover ? "#fff" : btnC }}>
                View pipeline <Icon name="ArrowRight" size={15} style={{ transform: hover ? "translateX(2px)" : "none", transition: "transform .2s" }} />
              </a>
              {url ? (
                <a
                  href={url}
                  target="_blank"
                  rel="noopener noreferrer"
                  onMouseDown={(e) => e.stopPropagation()}
                  onMouseEnter={() => setVHover(true)}
                  onMouseLeave={() => setVHover(false)}
                  title="Open the Azure DevOps pipeline"
                  className="inline-flex shrink-0 items-center gap-1.5 rounded-xl px-3 py-2 text-[12.5px] font-semibold transition-all"
                  style={{ border: `1px solid ${vHover ? btnC : th.cardBorder}`, color: vHover ? btnC : th.ink, background: vHover ? "color-mix(in oklab, " + btnC + " 12%, transparent)" : th.card, transform: vHover ? "translateY(-2px)" : "none" }}
                >
                  Azure DevOps <Icon name="ArrowUpRight" size={14} style={{ color: vHover ? btnC : th.faint }} />
                </a>
              ) : (
                <span aria-disabled="true" title="Pipeline link not configured yet" className="inline-flex shrink-0 cursor-not-allowed items-center gap-1.5 rounded-xl px-3 py-2 text-[12.5px] font-semibold" style={{ border: `1px solid ${th.cardBorder}`, color: th.faint, background: th.chip }}>
                  <Icon name="Lock" size={13} /> Not yet connected
                </span>
              )}
            </div>
          </div>
        </div>
      </div>
      <OpenInNewTab href={route} className="absolute right-4 top-4 z-10 h-7 w-7" title="Open Azure DevOps in new tab" style={{ background: "rgba(5,8,24,0.34)", color: "#fff", border: "1px solid rgba(255,255,255,0.22)" }} />
    </div>
  );
}

/* Boğaziçi · Vapur card — routes into the self-contained ferry-concierge
   experience (#/bogazici?gw=apigee). Mirrors EagleCard's anatomy but signals the
   internal 3-gateway selector with a row of cloud chips in the footer. */
function BogaziciCard({ item, index, onLaunchBogazici, th }) {
  const [hover, setHover] = React.useState(false);
  const c = item.color || "#2bb9c4";
  const btnC = item.btnColor || c;
  const band = `linear-gradient(120deg, ${c}, color-mix(in oklab, ${c} 52%, #04181f))`;
  const route = "#/bogazici?gw=" + (item.gw || "apigee");
  const doors = (window.VAPUR_GATEWAY_LIST || []).map((g) => ({ label: g.short, color: g.accent, logo: g.cloudLogo }));
  return (
    <div className="relative a-fade-up" style={{ animationDelay: index * 90 + "ms" }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <a
        href={route}
        onClick={(e) => { if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return; e.preventDefault(); onLaunchBogazici(item.gw); }}
        className="group relative flex flex-col overflow-hidden rounded-3xl text-left transition-[transform,box-shadow] duration-300"
        style={{ background: th.card, border: `1px solid ${hover ? c + "66" : th.cardBorder}`, boxShadow: hover ? th.cardShadowHover : th.cardShadow, transform: hover ? "translateY(-4px)" : "none" }}
      >
        <div className="relative h-28 w-full overflow-hidden" style={{ background: band }}>
          <div className="absolute -right-6 -top-10" style={{ opacity: 0.22 }}>
            <Icon name={item.icon || "Ship"} size={150} style={{ color: "#fff" }} strokeWidth={1.1} />
          </div>
          <div className="absolute left-5 top-5 flex h-11 w-11 items-center justify-center rounded-2xl" style={{ background: "rgba(4,18,24,0.34)", color: "#fff", border: "1px solid rgba(255,255,255,0.24)" }}>
            <Icon name={item.icon || "Ship"} size={22} strokeWidth={2} />
          </div>
          <span className="absolute right-14 top-4 rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.16em]" style={{ background: "rgba(4,18,24,0.36)", color: "#fff", fontFamily: "'JetBrains Mono', monospace" }}>{item.eyebrow}</span>
        </div>

        <div className="flex flex-1 flex-col p-5">
          <div className="text-[19px] font-extrabold leading-tight tracking-[-0.01em]" style={{ fontFamily: "'Manrope', sans-serif", color: th.inkStrong }}>{item.title}</div>
          <p className="mt-1.5 flex-1 text-[13.5px] leading-relaxed" style={{ color: th.ink }}>{item.blurb}</p>
          {/* gateway selector preview */}
          <div className="mt-3.5 flex flex-wrap items-center gap-1.5">
            {doors.map((g) => (
              <span key={g.label} className="inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-[10.5px] font-bold" style={{ background: th.chip, color: th.sub, border: `1px solid ${th.cardBorder}` }}>
                {g.logo ? <img src={g.logo} alt="" style={{ height: 11, width: "auto" }} /> : <span className="inline-block h-2 w-2 rounded-full" style={{ background: g.color }} />}
                {g.label}
              </span>
            ))}
          </div>
          <div className="mt-4 flex items-center justify-between">
            <span className="inline-flex items-center gap-1.5 text-[12px]" style={{ color: th.faint }}>
              <span className="inline-block h-1.5 w-1.5 rounded-full" style={{ background: c }} /> Live · 3 gateways
            </span>
            <span className="inline-flex items-center gap-1.5 rounded-xl px-3.5 py-2 text-[13px] font-semibold transition-all" style={{ background: hover ? btnC : "color-mix(in oklab, " + btnC + " 14%, transparent)", color: hover ? "#fff" : btnC }}>
              Launch demo <Icon name="ArrowRight" size={15} style={{ transform: hover ? "translateX(2px)" : "none", transition: "transform .2s" }} />
            </span>
          </div>
        </div>
      </a>
      <OpenInNewTab href={route} className="absolute right-4 top-4 z-10 h-7 w-7" title="Open Boğaziçi in new tab" style={{ background: "rgba(4,18,24,0.36)", color: "#fff", border: "1px solid rgba(255,255,255,0.24)" }} />
    </div>
  );
}

/* Houdini · AI Red Teaming card — routes into the self-contained Custom Target Adapters
   walkthrough (#/houdini). Mirrors BogaziciCard's anatomy; a plain anchor (hashchange routes). */
function HoudiniCard({ item, index, th }) {
  const [hover, setHover] = React.useState(false);
  const c = item.color || "#f43f5e";
  const btnC = item.btnColor || c;
  const band = `linear-gradient(120deg, ${c}, color-mix(in oklab, ${c} 52%, #0a0a0f))`;
  const route = "#/houdini";
  const chips = ["Private · EKS", "HMAC-signed", "Claude on Bedrock"];
  return (
    <div className="relative a-fade-up" style={{ animationDelay: index * 90 + "ms" }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <a
        href={route}
        className="group relative flex flex-col overflow-hidden rounded-3xl text-left transition-[transform,box-shadow] duration-300"
        style={{ background: th.card, border: `1px solid ${hover ? c + "66" : th.cardBorder}`, boxShadow: hover ? th.cardShadowHover : th.cardShadow, transform: hover ? "translateY(-4px)" : "none" }}
      >
        <div className="relative h-28 w-full overflow-hidden" style={{ background: band }}>
          <div className="absolute -right-6 -top-10" style={{ opacity: 0.22 }}>
            <Icon name={item.icon || "Unlock"} size={150} style={{ color: "#fff" }} strokeWidth={1.1} />
          </div>
          <div className="absolute left-5 top-5 flex h-11 w-11 items-center justify-center rounded-2xl" style={{ background: "rgba(10,10,15,0.34)", color: "#fff", border: "1px solid rgba(255,255,255,0.24)" }}>
            <Icon name={item.icon || "Unlock"} size={22} strokeWidth={2} />
          </div>
          <span className="absolute right-14 top-4 rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.16em]" style={{ background: "rgba(10,10,15,0.36)", color: "#fff", fontFamily: "'JetBrains Mono', monospace" }}>{item.industry}</span>
        </div>

        <div className="flex flex-1 flex-col p-5">
          <div className="text-[19px] font-extrabold leading-tight tracking-[-0.01em]" style={{ fontFamily: "'Manrope', sans-serif", color: th.inkStrong }}>{item.title}</div>
          <p className="mt-1.5 flex-1 text-[13.5px] leading-relaxed" style={{ color: th.ink }}>{item.blurb}</p>
          <div className="mt-3.5 flex flex-wrap items-center gap-1.5">
            {chips.map((g) => (
              <span key={g} className="inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-[10.5px] font-bold" style={{ background: th.chip, color: th.sub, border: `1px solid ${th.cardBorder}` }}>
                <span className="inline-block h-2 w-2 rounded-full" style={{ background: c }} />{g}
              </span>
            ))}
          </div>
          <div className="mt-4 flex items-center justify-between">
            <span className="inline-flex items-center gap-1.5 text-[12px]" style={{ color: th.faint }}>
              <span className="inline-block h-1.5 w-1.5 rounded-full" style={{ background: c }} /> {item.statusLine || "Live"}
            </span>
            <span className="inline-flex items-center gap-1.5 rounded-xl px-3.5 py-2 text-[13px] font-semibold transition-all" style={{ background: hover ? btnC : "color-mix(in oklab, " + btnC + " 14%, transparent)", color: hover ? "#fff" : btnC }}>
              Open walkthrough <Icon name="ArrowRight" size={15} style={{ transform: hover ? "translateX(2px)" : "none", transition: "transform .2s" }} />
            </span>
          </div>
        </div>
      </a>
      <OpenInNewTab href={route} className="absolute right-4 top-4 z-10 h-7 w-7" title="Open Houdini in new tab" style={{ background: "rgba(10,10,15,0.36)", color: "#fff", border: "1px solid rgba(255,255,255,0.24)" }} />
    </div>
  );
}

/* Ventriloquist card — routes into the Azure "silent failure" walkthrough (#/ventriloquist).
   Mirrors HoudiniCard's anatomy; Azure-blue accent, theater-mask mark. */
function VentriloquistCard({ item, index, th }) {
  const [hover, setHover] = React.useState(false);
  const c = item.color || "#0078D4";
  const btnC = item.btnColor || c;
  const band = `linear-gradient(120deg, ${c}, color-mix(in oklab, ${c} 52%, #0a0a0f))`;
  const route = "#/ventriloquist";
  const chips = ["Azure · AKS", "tool-call output", "no secret"];
  return (
    <div className="relative a-fade-up" style={{ animationDelay: index * 90 + "ms" }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <a
        href={route}
        className="group relative flex flex-col overflow-hidden rounded-3xl text-left transition-[transform,box-shadow] duration-300"
        style={{ background: th.card, border: `1px solid ${hover ? c + "66" : th.cardBorder}`, boxShadow: hover ? th.cardShadowHover : th.cardShadow, transform: hover ? "translateY(-4px)" : "none" }}
      >
        <div className="relative h-28 w-full overflow-hidden" style={{ background: band }}>
          <div className="absolute -right-6 -top-10" style={{ opacity: 0.22 }}>
            <Icon name={item.icon || "Drama"} size={150} style={{ color: "#fff" }} strokeWidth={1.1} />
          </div>
          <div className="absolute left-5 top-5 flex h-11 w-11 items-center justify-center rounded-2xl" style={{ background: "rgba(10,10,15,0.34)", color: "#fff", border: "1px solid rgba(255,255,255,0.24)" }}>
            <Icon name={item.icon || "Drama"} size={22} strokeWidth={2} />
          </div>
          <span className="absolute right-14 top-4 rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.16em]" style={{ background: "rgba(10,10,15,0.36)", color: "#fff", fontFamily: "'JetBrains Mono', monospace" }}>{item.industry}</span>
        </div>

        <div className="flex flex-1 flex-col p-5">
          <div className="text-[19px] font-extrabold leading-tight tracking-[-0.01em]" style={{ fontFamily: "'Manrope', sans-serif", color: th.inkStrong }}>{item.title}</div>
          <p className="mt-1.5 flex-1 text-[13.5px] leading-relaxed" style={{ color: th.ink }}>{item.blurb}</p>
          <div className="mt-3.5 flex flex-wrap items-center gap-1.5">
            {chips.map((g) => (
              <span key={g} className="inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-[10.5px] font-bold" style={{ background: th.chip, color: th.sub, border: `1px solid ${th.cardBorder}` }}>
                <span className="inline-block h-2 w-2 rounded-full" style={{ background: c }} />{g}
              </span>
            ))}
          </div>
          <div className="mt-4 flex items-center justify-between">
            <span className="inline-flex items-center gap-1.5 text-[12px]" style={{ color: th.faint }}>
              <span className="inline-block h-1.5 w-1.5 rounded-full" style={{ background: c }} /> {item.statusLine || "Live"}
            </span>
            <span className="inline-flex items-center gap-1.5 rounded-xl px-3.5 py-2 text-[13px] font-semibold transition-all" style={{ background: hover ? btnC : "color-mix(in oklab, " + btnC + " 14%, transparent)", color: hover ? "#fff" : btnC }}>
              Open walkthrough <Icon name="ArrowRight" size={15} style={{ transform: hover ? "translateX(2px)" : "none", transition: "transform .2s" }} />
            </span>
          </div>
        </div>
      </a>
      <OpenInNewTab href={route} className="absolute right-4 top-4 z-10 h-7 w-7" title="Open The Ventriloquist in new tab" style={{ background: "rgba(10,10,15,0.36)", color: "#fff", border: "1px solid rgba(255,255,255,0.24)" }} />
    </div>
  );
}

/* Chiquitito card — routes into the self-contained low-code (n8n) experience
   (#/chiquitito). Mirrors BogaziciCard's anatomy but signals the two-demo split
   (node on the canvas · guard in the gateway) with a row of chips in the footer.
   Cinnamon/sugar-amber accent; n8n mark beside the title. */
function ChiquititoCard({ item, index, th }) {
  const [hover, setHover] = React.useState(false);
  const [vHover, setVHover] = React.useState(false);
  const c = item.color || "#c4452a";
  const btnC = item.btnColor || c;
  const band = `linear-gradient(120deg, ${c}, color-mix(in oklab, ${c} 55%, #2a1206))`;
  const route = "#/chiquitito";
  const editorUrl = (window.chiqEditorUrl && window.chiqEditorUrl()) || "https://n8n.io";
  return (
    <div className="relative a-fade-up" style={{ animationDelay: index * 90 + "ms" }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <div
        role="link"
        tabIndex={0}
        onClick={(e) => { if (e.target.closest("a,button")) return; window.location.hash = route; }}
        onKeyDown={(e) => { if (e.key === "Enter") window.location.hash = route; }}
        className="group relative flex cursor-pointer flex-col overflow-hidden rounded-3xl text-left transition-[transform,box-shadow] duration-300"
        style={{ background: th.card, border: `1px solid ${hover ? c + "66" : th.cardBorder}`, boxShadow: hover ? th.cardShadowHover : th.cardShadow, transform: hover ? "translateY(-4px)" : "none" }}
      >
        <div className="relative h-28 w-full overflow-hidden" style={{ background: band }}>
          <div className="absolute -right-6 -top-10" style={{ opacity: 0.22 }}>
            <Icon name={item.icon || "Workflow"} size={150} style={{ color: "#fff" }} strokeWidth={1.1} />
          </div>
          <div className="absolute left-5 top-5 flex h-11 w-11 items-center justify-center rounded-2xl" style={{ background: "rgba(42,18,6,0.34)", color: "#fff", border: "1px solid rgba(255,255,255,0.24)" }}>
            <Icon name={item.icon || "Workflow"} size={22} strokeWidth={2} />
          </div>
        </div>

        <div className="flex flex-1 flex-col p-5">
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em]" style={{ color: th.faint }}>{item.eyebrow}</div>
          <div className="mt-1 text-[19px] font-extrabold leading-tight tracking-[-0.01em]" style={{ fontFamily: "'Manrope', sans-serif", color: th.inkStrong }}>{item.title}</div>
          <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-2">
            <img src="images/n8n-color.svg" alt="N8N" title="N8N" className="shrink-0" style={{ height: 26, width: "auto" }} />
            <img src="images/aws-color.svg" alt="AWS" title="AWS" className="shrink-0" style={{ height: 19, width: "auto" }} />
            <img src="images/bedrock-color.svg" alt="Bedrock" title="Amazon Bedrock" className="shrink-0" style={{ height: 24, width: "auto" }} />
            <img src="images/nova-color.svg" alt="Nova" title="Nova" className="shrink-0" style={{ height: 24, width: "auto" }} />
          </div>
          <p className="mt-1.5 flex-1 text-[13.5px] leading-relaxed" style={{ color: th.ink }}>{item.blurb}</p>
          <div className="mt-3.5">
            <span className="inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-[10.5px] font-bold" style={{ background: th.chip, color: th.sub, border: `1px solid ${th.cardBorder}` }}>
              <span className="inline-block h-2 w-2 rounded-full" style={{ background: "#3fae6a" }} /> Node on canvas
            </span>
          </div>
          <div className="mt-4 flex flex-col gap-2.5">
            <span className="inline-flex items-center gap-1.5 text-[12px]" style={{ color: th.faint }}>
              <span className="inline-block h-1.5 w-1.5 rounded-full" style={{ background: c }} /> Live · N8N flow
            </span>
            <div className="flex items-center gap-2">
              <a href={route} className="inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl px-3.5 py-2 text-[13px] font-semibold transition-all" style={{ background: hover ? btnC : "color-mix(in oklab, " + btnC + " 14%, transparent)", color: hover ? "#fff" : btnC }}>
                Launch demo <Icon name="ArrowRight" size={15} style={{ transform: hover ? "translateX(2px)" : "none", transition: "transform .2s" }} />
              </a>
              <a
                href={editorUrl}
                target="_blank"
                rel="noopener noreferrer"
                onMouseDown={(e) => e.stopPropagation()}
                onMouseEnter={() => setVHover(true)}
                onMouseLeave={() => setVHover(false)}
                title="Open in the N8N editor (sign-in required)"
                className="inline-flex shrink-0 items-center gap-1.5 rounded-xl px-3 py-2 text-[12.5px] font-semibold transition-all"
                style={{ border: `1px solid ${vHover ? btnC : th.cardBorder}`, color: vHover ? btnC : th.ink, background: vHover ? "color-mix(in oklab, " + btnC + " 12%, transparent)" : th.card, transform: vHover ? "translateY(-2px)" : "none", boxShadow: vHover ? "0 8px 18px -10px " + btnC : "none" }}
              >
                Open in N8N <Icon name="ArrowUpRight" size={14} style={{ color: vHover ? btnC : th.faint }} />
              </a>
            </div>
          </div>
        </div>
      </div>
      <OpenInNewTab href={route} className="absolute right-4 top-4 z-10 h-7 w-7" title="Open Chiquitito in new tab" style={{ background: "rgba(42,18,6,0.36)", color: "#fff", border: "1px solid rgba(255,255,255,0.24)" }} />
    </div>
  );
}

/* Chiquitito · IT-Ops card — Demo B's live twin of ChiquititoCard. Same anatomy
   (colored band, logo row, footer chip, two-button footer) but indigo/TrueFoundry
   accented; routes into the IT-Ops gateway preview (#/chiquitito/itops) and link-
   out to TrueFoundry's site. */
function ChiquititoItopsCard({ item, index, th }) {
  const [hover, setHover] = React.useState(false);
  const [vHover, setVHover] = React.useState(false);
  const c = item.color || "#4f46e5";
  const btnC = item.btnColor || c;
  const band = `linear-gradient(120deg, ${c}, color-mix(in oklab, ${c} 55%, #0b1030))`;
  const route = item.previewHref || "#/chiquitito/itops";
  return (
    <div className="relative h-full a-fade-up" style={{ animationDelay: index * 90 + "ms" }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <div
        role="link"
        tabIndex={0}
        onClick={(e) => { if (e.target.closest("a,button")) return; window.location.hash = route; }}
        onKeyDown={(e) => { if (e.key === "Enter") window.location.hash = route; }}
        className="group relative flex h-full cursor-pointer flex-col overflow-hidden rounded-3xl text-left transition-[transform,box-shadow] duration-300"
        style={{ background: th.card, border: `1px solid ${hover ? c + "66" : th.cardBorder}`, boxShadow: hover ? th.cardShadowHover : th.cardShadow, transform: hover ? "translateY(-4px)" : "none" }}
      >
        <div className="relative h-28 w-full overflow-hidden" style={{ background: band }}>
          <div className="absolute -right-6 -top-10" style={{ opacity: 0.22 }}>
            <Icon name={item.icon || "ShieldCheck"} size={150} style={{ color: "#fff" }} strokeWidth={1.1} />
          </div>
          <div className="absolute left-5 top-5 flex h-11 w-11 items-center justify-center rounded-2xl" style={{ background: "rgba(11,16,48,0.34)", color: "#fff", border: "1px solid rgba(255,255,255,0.24)" }}>
            <Icon name={item.icon || "ShieldCheck"} size={22} strokeWidth={2} />
          </div>
        </div>

        <div className="flex flex-1 flex-col p-5">
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em]" style={{ color: th.faint }}>{item.eyebrow}</div>
          <div className="mt-1 text-[19px] font-extrabold leading-tight tracking-[-0.01em]" style={{ fontFamily: "'Manrope', sans-serif", color: th.inkStrong }}>{item.title}</div>
          {item.logos ? (
            <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-2">
              {item.logos.map((lg) => (
                lg.text ? (
                  <span key={lg.text} className="shrink-0 text-[15px] font-extrabold tracking-[-0.01em]" style={{ color: th.sub, fontFamily: "'Manrope', sans-serif" }}>{lg.text}</span>
                ) : (
                  <img key={lg.src} src={lg.src} alt={lg.alt} title={lg.alt} className="shrink-0" style={{ height: lg.h || 20, width: "auto" }} />
                )
              ))}
            </div>
          ) : null}
          <p className="mt-2 flex-1 text-[13.5px] leading-relaxed" style={{ color: th.ink }}>{item.blurb}</p>
          <div className="mt-3.5">
            <span className="inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-[10.5px] font-bold" style={{ background: th.chip, color: th.sub, border: `1px solid ${th.cardBorder}` }}>
              <span className="inline-block h-2 w-2 rounded-full" style={{ background: c }} /> Guard in gateway
            </span>
          </div>
          <div className="mt-4 flex flex-col gap-2.5">
            <span className="inline-flex items-center gap-1.5 text-[12px]" style={{ color: th.faint }}>
              <span className="inline-block h-1.5 w-1.5 rounded-full" style={{ background: c }} /> Live · gateway flow
            </span>
            <div className="flex items-center gap-2">
              <a href={route} className="inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl px-3.5 py-2 text-[13px] font-semibold transition-all" style={{ background: hover ? btnC : "color-mix(in oklab, " + btnC + " 14%, transparent)", color: hover ? "#fff" : btnC }}>
                Launch demo <Icon name="ArrowRight" size={15} style={{ transform: hover ? "translateX(2px)" : "none", transition: "transform .2s" }} />
              </a>
              {item.vendor && (
                <a
                  href={item.vendor.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  onMouseDown={(e) => e.stopPropagation()}
                  onMouseEnter={() => setVHover(true)}
                  onMouseLeave={() => setVHover(false)}
                  title={"Visit " + item.vendor.name}
                  className="inline-flex shrink-0 items-center gap-1.5 rounded-xl px-3 py-2 text-[12.5px] font-semibold transition-all"
                  style={{ border: `1px solid ${vHover ? btnC : th.cardBorder}`, color: vHover ? btnC : th.ink, background: vHover ? "color-mix(in oklab, " + btnC + " 12%, transparent)" : th.card, transform: vHover ? "translateY(-2px)" : "none", boxShadow: vHover ? "0 8px 18px -10px " + btnC : "none" }}
                >
                  {item.vendor.name} <Icon name="ArrowUpRight" size={14} style={{ color: vHover ? btnC : th.faint }} />
                </a>
              )}
            </div>
          </div>
        </div>
      </div>
      <OpenInNewTab href={route} className="absolute right-4 top-4 z-10 h-7 w-7" title="Open IT-Ops preview in new tab" style={{ background: "rgba(11,16,48,0.36)", color: "#fff", border: "1px solid rgba(255,255,255,0.24)" }} />
    </div>
  );
}

/* Çifte Kale's live card + runbook detail page now live in cifte.jsx
   (CifteCard / CifteRunbook), exported on window. The hub's renderCard
   dispatches `item.type === "cifte"` to it. */

/* Full-width rule that divides one pillar from the next. The first one
   carries the "Begin the tour" cue with a down-arrow that nudges the
   showroom down into the pillars. */
function PillarRule({ first, th, onBegin }) {
  if (!first) return <div className="h-px w-full" style={{ background: th.cardBorder }} />;
  return (
    <div className="flex items-center gap-4" style={{ fontFamily: "'JetBrains Mono', monospace" }}>
      <button
        onClick={onBegin}
        className="group flex h-9 w-9 shrink-0 items-center justify-center rounded-full transition-colors"
        style={{ border: `1px solid ${th.cardBorder}`, color: th.faint, background: th.chip }}
        title="Begin the tour"
        aria-label="Begin the tour"
      >
        <Icon name="ArrowDown" size={15} />
      </button>
      <span className="shrink-0 text-[11px] font-semibold uppercase tracking-[0.26em]" style={{ color: th.faint }}>Begin the tour</span>
      <span className="h-px flex-1" style={{ background: th.cardBorder }} />
    </div>
  );
}

/* Section header for a pillar: a big outlined index numeral, the brand icon +
   eyebrow + title + subtitle on the left, and the description set ragged-right
   on the far side — an editorial masthead per pillar. */
function PillarHeader({ pillar, index, th }) {
  const live = pillar.status === "live";
  // optional per-pillar accent override (e.g. Ted Kaczynski's kraft amber);
  // falls back to the shell theme accent so every other pillar is unchanged.
  const acc = pillar.accent || th.accent;
  const accSoft = pillar.accentSoft || th.accentSoft;
  const accText = pillar.accentText || th.accentText;
  return (
    <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:gap-8">
      {/* big hollow numeral */}
      <div
        className="shrink-0 select-none leading-[0.8] tabular-nums"
        style={{ fontFamily: "'Spectral', serif", fontSize: 68, fontWeight: 500, color: "transparent", WebkitTextStroke: `1.1px ${acc}`, letterSpacing: "0.03em", opacity: 0.85 }}
        aria-hidden="true"
      >
        {String(index).padStart(2, "0")}
      </div>

      {/* icon tile + identity */}
      <div className="flex items-start gap-3.5">
        <div className="mt-0.5 flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-2xl" style={{ background: accSoft, color: acc, border: `1px solid ${th.cardBorder}` }}>
          {pillar.iconEmoji ? (
            <span aria-hidden="true" style={{ fontSize: 24, lineHeight: 1 }}>{pillar.iconEmoji}</span>
          ) : pillar.iconImg ? (
            <img src={pillar.iconImg} alt="" aria-hidden="true" className={(pillar.iconImgClass || "h-7 w-7") + " object-contain"} />
          ) : pillar.portrait ? (
            <img src={pillar.portrait} alt="" aria-hidden="true" className="h-full w-full object-cover" style={{ filter: "grayscale(1) contrast(1.05)" }} />
          ) : (
            <Icon name={pillar.icon} size={21} />
          )}
        </div>
        <div>
          {pillar.eyebrow && (
            <div className="mb-1 text-[11px] font-semibold uppercase tracking-[0.22em]" style={{ color: accText, fontFamily: "'JetBrains Mono', monospace" }}>{pillar.eyebrow}</div>
          )}
          <div className="flex flex-wrap items-center gap-2.5">
            <h2 style={{ fontFamily: "'Spectral', serif", color: th.inkStrong }} className="text-[32px] font-medium leading-tight">{pillar.title}</h2>
            {pillar.hideStatusBadge || live ? null : (
              <span className="rounded-full px-2 py-0.5 text-[10.5px] font-semibold uppercase tracking-[0.12em]" style={{ background: th.chip, color: th.sub }}>Coming soon</span>
            )}
          </div>
          {pillar.subtitle && (
            <div className="mt-0.5 text-[15px] italic leading-tight" style={{ fontFamily: "'Spectral', serif", color: th.faint }}>{pillar.subtitle}</div>
          )}
        </div>
      </div>

      {/* description, ragged-right on the far side */}
      <p className="text-[14px] leading-relaxed lg:ml-auto lg:max-w-[440px] lg:pt-1 lg:text-right" style={{ color: th.ink }}>{pillar.description}</p>
    </div>
  );
}

function Hub({ onLaunch, onLaunchEagle, onLaunchBogazici, onLogout, mode, onToggleTheme }) {
  const th = window.SHELL_THEMES[mode] || window.SHELL_THEMES.dark;
  // smooth-scroll the showroom to a pillar without touching the URL hash (the
  // hash is the app router) — measure against the scroll container directly.
  const scrollToPillar = (id) => {
    const el = document.getElementById("pillar-" + id);
    const sc = el && el.closest(".lr-scroll");
    if (!el || !sc) return;
    const top = sc.scrollTop + (el.getBoundingClientRect().top - sc.getBoundingClientRect().top) - 88;
    sc.scrollTo({ top, behavior: "smooth" });
  };
  return (
    <div className="h-full w-full overflow-y-auto lr-scroll" style={{ background: th.page, fontFamily: "'Manrope', sans-serif" }}>
      {/* ambient */}
      <div className="pointer-events-none fixed inset-0">
        <div className="absolute -top-40 left-1/2 h-[560px] w-[900px] -translate-x-1/2 rounded-full" style={{ background: `radial-gradient(circle, ${th.glow1}, transparent 65%)` }} />
      </div>

      {/* top bar */}
      <header className="sticky top-0 z-20 border-b" style={{ borderColor: th.headerBorder, background: th.header, backdropFilter: "blur(14px)" }}>
        <div className="mx-auto flex max-w-[1660px] items-center justify-between px-12 py-4">
          <div className="flex items-center gap-2.5">
            <RoseMark size={38} color={th.accent} petals={6} />
            <span style={{ fontFamily: "'Pacifico', cursive", fontSize: 30, color: th.inkStrong, lineHeight: 1.1 }}>Last Rose</span>
          </div>
          <div className="flex items-center gap-2.5">
            <ThemeToggle mode={mode} onToggle={onToggleTheme} th={th} />
            <button
              onClick={onLogout}
              className="inline-flex items-center gap-2 rounded-xl px-3.5 py-2 text-[13px] font-medium transition-colors"
              style={{ color: th.ink, background: th.chip, border: `1px solid ${th.cardBorder}` }}
            >
              <Icon name="LogOut" size={15} /> Log out
            </button>
          </div>
        </div>
      </header>

      <main className="relative z-10 mx-auto max-w-[1660px] px-12 pb-24 pt-12">
        {/* ── Editorial hero: garden headline, contents index, brand rose. ── */}
        <div className="relative a-fade-up flex items-center gap-12">
          <div className="relative w-full xl:max-w-[640px] xl:shrink-0">
            {/* headline */}
            <h1 className="text-[44px] font-medium leading-[0.98] tracking-[-0.015em] sm:text-[54px] lg:text-[64px]" style={{ fontFamily: "'Spectral', serif", color: th.inkStrong }}>
              A garden of <span style={{ fontStyle: "italic", color: th.accent }}>living</span> security demos.
            </h1>

            {/* dek */}
            <p className="mt-6 max-w-md text-[15px] leading-relaxed" style={{ color: th.ink }}>
              Every environment is a fully interactive, brand-accurate world — chatbots, SOC consoles, gateways and endpoints, each with Prisma AIRS watching the door. Pick a specimen and step inside.
            </p>

            {/* contents index → jumps to each pillar below */}
            <div className="mb-2 mt-12 text-[11px] font-semibold uppercase tracking-[0.28em]" style={{ color: th.faint, fontFamily: "'JetBrains Mono', monospace" }}>Contents</div>
            <div className="grid grid-cols-1 gap-x-12 sm:grid-cols-2">
              {window.PILLARS.map((pillar, i) => {
                const live = pillar.status === "live";
                return (
                  <button
                    key={pillar.id}
                    onClick={() => scrollToPillar(pillar.id)}
                    className="toc-row flex items-center gap-3 py-2 text-left"
                    title={"Jump to " + pillar.title}
                  >
                    <span className="shrink-0 text-[12px] font-semibold tabular-nums" style={{ color: th.accentText, fontFamily: "'JetBrains Mono', monospace" }}>{String(i + 1).padStart(2, "0")}</span>
                    <span className="toc-name shrink-0 whitespace-nowrap text-[15px] font-medium" style={{ color: th.inkStrong }}>{pillar.title}</span>
                    <span className="toc-lead h-px flex-1" style={{ color: th.faint, backgroundImage: "radial-gradient(currentColor 1px, transparent 1.4px)", backgroundSize: "5px 2px", backgroundRepeat: "repeat-x", backgroundPosition: "0 center" }} />
                    <span className="shrink-0 text-[10px] font-semibold uppercase tracking-[0.18em]" style={{ color: live ? th.accentText : th.faint, fontFamily: "'JetBrains Mono', monospace" }}>{live ? "Live" : "Soon"}</span>
                  </button>
                );
              })}
            </div>
          </div>

          {/* brand rose — its own column so it never overlaps the index */}
          <div className="pointer-events-none relative hidden flex-1 items-center justify-center xl:flex" aria-hidden="true" style={{ transform: "translateX(148px)" }}>
            <div className="absolute rounded-full" style={{ width: 680, height: 680, background: `radial-gradient(circle, ${th.accent}2e, transparent 62%)` }} />
            <RoseMark size={620} color={th.accent} petals={9} className="hero-bloom relative" style={{ opacity: 0.7 }} />
          </div>
        </div>

        <div className="mt-16 space-y-16">
          {window.PILLARS.map((pillar, pillarIdx) => {
            const renderCard = (item, i) => {
              if (item.type === "business") {
                const b = window.getBusiness(item.businessId);
                if (!b) return null;
                return <HubCard key={b.id} business={b} index={i} onLaunch={onLaunch} th={th} />;
              }
              if (item.type === "eagle") {
                return <EagleCard key={pillar.id + "-" + i} item={item} index={i} onLaunchEagle={onLaunchEagle} th={th} />;
              }
              if (item.type === "eagleLite") {
                return <EagleLiteCard key={pillar.id + "-" + i} item={item} index={i} th={th} />;
              }
              if (item.type === "modelScan") {
                return <ModelScanCard key={pillar.id + "-" + i} item={item} index={i} th={th} />;
              }
              if (item.type === "cloudBuild") {
                return <CloudBuildCard key={pillar.id + "-" + i} item={item} index={i} th={th} />;
              }
              if (item.type === "azureDevops") {
                return <AzureDevopsCard key={pillar.id + "-" + i} item={item} index={i} th={th} />;
              }
              if (item.type === "bogazici") {
                return <BogaziciCard key={pillar.id + "-" + i} item={item} index={i} onLaunchBogazici={onLaunchBogazici} th={th} />;
              }
              if (item.type === "houdini") {
                return <HoudiniCard key={pillar.id + "-" + i} item={item} index={i} th={th} />;
              }
              if (item.type === "ventriloquist") {
                return <VentriloquistCard key={pillar.id + "-" + i} item={item} index={i} th={th} />;
              }
              if (item.type === "chiquitito") {
                return <ChiquititoCard key={pillar.id + "-" + i} item={item} index={i} th={th} />;
              }
              if (item.type === "chiquititoItops") {
                return <ChiquititoItopsCard key={pillar.id + "-" + i} item={item} index={i} th={th} />;
              }
              if (item.type === "garfio") {
                return <GarfioCard key={pillar.id + "-" + i} item={item} index={i} th={th} />;
              }
              if (item.type === "cifte") {
                return <CifteCard key={pillar.id + "-" + i} item={item} index={i} th={th} mode={mode} />;
              }
              if (item.type === "ted") {
                return <window.TedCard key={pillar.id + "-" + i} item={item} index={i} th={th} mode={mode} />;
              }
              if (item.runbookId) {
                return <RunbookCard key={pillar.id + "-" + i} item={item} index={i} th={th} />;
              }
              return <PlaceholderCard key={pillar.id + "-" + i} item={item} index={i} th={th} />;
            };
            // when items carry a `group` (e.g. by OS), render one labelled row per group
            const grouped = pillar.items.some((it) => it.group);
            const groups = grouped
              ? pillar.items.reduce((acc, it) => { const g = it.group || "Other"; (acc[g] = acc[g] || []).push(it); return acc; }, {})
              : null;
            return (
              <section key={pillar.id} id={"pillar-" + pillar.id} className="a-fade-up" style={{ scrollMarginTop: 88 }}>
                <PillarRule first={pillarIdx === 0} th={th} onBegin={() => scrollToPillar(pillar.id)} />
                <div className="mt-9"><PillarHeader pillar={pillar} index={pillarIdx + 1} th={th} /></div>
                {grouped ? (
                  <div className="mt-6 space-y-7">
                    {Object.keys(groups).map((g) => (
                      <div key={g}>
                        <div className="mb-3 flex items-center gap-2.5 text-[11px] font-semibold uppercase tracking-[0.18em]" style={{ color: th.faint, fontFamily: "'JetBrains Mono', monospace" }}>
                          <span className="inline-block h-px w-7" style={{ background: th.dashed }} /> {g}
                        </div>
                        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3" style={{ alignItems: "stretch" }}>
                          {groups[g].map((item, i) => renderCard(item, i))}
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                    {pillar.items.map((item, i) => renderCard(item, i))}
                  </div>
                )}
              </section>
            );
          })}
        </div>
      </main>
    </div>
  );
}

Object.assign(window, { Hub, BrandLogo, EagleCard, EagleLiteCard, ModelScanCard, CloudBuildCard, AzureDevopsCard, ChiquititoCard, ChiquititoItopsCard });