// Monifest.ai homepage — two variations
const { useState, useMemo } = React;
const I = window.MonifestIcons;
const APPS = window.MonifestApps;

// ----------------------------- shared bits -----------------------------
function ThemeToggle({ dark, onToggle, accent = "#00C46A" }) {
  return (
    <button
      onClick={onToggle}
      style={{
        all: "unset",
        cursor: "pointer",
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        width: 28,
        height: 28,
        borderRadius: 999,
        color: "currentColor",
        opacity: 0.7,
      }}
      title={dark ? "Switch to light" : "Switch to dark"}
    >
      {dark ? <I.Sun size={14} /> : <I.Moon size={14} />}
    </button>
  );
}

function SearchPill({ placeholder = "Search tools" }) {
  return (
    <div
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 8,
        height: 32,
        padding: "0 12px 0 12px",
        borderRadius: 999,
        border: "1px solid currentColor",
        opacity: 0.55,
        fontFamily: "Geist, sans-serif",
        fontSize: 12,
        letterSpacing: 0.1,
      }}
    >
      <I.Search size={12} />
      <span>{placeholder}</span>
      <span style={{ marginLeft: 14, opacity: 0.6, fontSize: 10, padding: "1px 5px", border: "1px solid currentColor", borderRadius: 4 }}>⌘K</span>
    </div>
  );
}

function StatusBadge({ status, variant = "luxe", accent }) {
  const live = status === "live";
  if (variant === "luxe") {
    return (
      <span
        style={{
          display: "inline-flex",
          alignItems: "center",
          gap: 6,
          fontFamily: "Geist, sans-serif",
          fontSize: 10.5,
          letterSpacing: 1.4,
          textTransform: "uppercase",
          color: live ? accent : "currentColor",
          opacity: live ? 1 : 0.4,
        }}
      >
        <span
          style={{
            width: 5,
            height: 5,
            borderRadius: 999,
            background: live ? accent : "currentColor",
            opacity: live ? 1 : 0.6,
            boxShadow: live ? `0 0 0 3px ${accent}22` : "none",
          }}
        />
        {live ? "Live" : "Coming soon"}
      </span>
    );
  }
  // playful pill
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 5,
        fontFamily: "Geist, sans-serif",
        fontSize: 10.5,
        letterSpacing: 0.3,
        padding: "3px 9px 3px 8px",
        borderRadius: 999,
        background: live ? accent : "transparent",
        color: live ? "#06140C" : "currentColor",
        border: live ? "none" : "1px solid currentColor",
        opacity: live ? 1 : 0.45,
        fontWeight: 500,
      }}
    >
      <span
        style={{
          width: 5,
          height: 5,
          borderRadius: 999,
          background: live ? "#06140C" : "currentColor",
        }}
      />
      {live ? "Live" : "Coming soon"}
    </span>
  );
}

// ----------- Flamingo button (2 variants) ------------
function openFlamingo() {
  const password = window.prompt("Enter Flamingo password");
  if (password === "etoro2026") {
    window.location.href = "https://im5.flamingo.fm/";
  } else if (password !== null) {
    window.alert("Wrong password");
  }
}

function FlamingoButton({ variant = "pink", compact = false }) {
  if (variant === "pink") {
    const pink = "#FF8FB1";
    return (
      <button
        title="Restricted access"
        onClick={openFlamingo}
        style={{
          all: "unset",
          cursor: "pointer",
          display: "inline-flex",
          alignItems: "center",
          gap: 6,
          height: 32,
          padding: compact ? "0 9px" : "0 12px",
          borderRadius: 999,
          color: pink,
          border: `1px solid ${pink}55`,
          background: `radial-gradient(120% 200% at 0% 50%, ${pink}26, ${pink}08 60%, transparent)`,
          fontFamily: "Geist, sans-serif",
          fontSize: 12,
          letterSpacing: 0.1,
          boxShadow: `0 0 0 0 ${pink}00, 0 0 18px -4px ${pink}55`,
        }}
      >
        <span style={{ display: "inline-flex", filter: `drop-shadow(0 0 4px ${pink}88)` }}>
          <IconFlamingoLocal size={13} stroke={1.5} color={pink} />
        </span>
        {!compact && <span>Flamingo</span>}
      </button>
    );
  }
  // gold / champagne
  const gold = "#D9B872";
  return (
    <button
      title="Restricted access"
      onClick={openFlamingo}
      style={{
        all: "unset",
        cursor: "pointer",
        display: "inline-flex",
        alignItems: "center",
        gap: 6,
        height: 32,
        padding: compact ? "0 9px" : "0 12px",
        borderRadius: 999,
        color: gold,
        border: `1px solid ${gold}66`,
        background: `linear-gradient(180deg, ${gold}1c, ${gold}06)`,
        fontFamily: "Geist, sans-serif",
        fontSize: 12,
        letterSpacing: 0.1,
      }}
    >
      <IconFlamingoLocal size={13} stroke={1.5} color={gold} />
      {!compact && <span>Flamingo</span>}
      <span aria-hidden="true" style={{ fontSize: 9, color: gold, opacity: 0.9, marginLeft: 1 }}>★</span>
    </button>
  );
}
function IconFlamingoLocal({ size = 14, stroke = 1.5, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
         strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M9 5 C 11.5 5, 13 6.5, 13 9 C 13 11, 12 12, 12 13.5 C 12 15, 13.5 16, 16 16 H 19" />
      <path d="M12 13.5 V 21" />
      <path d="M10 21 H 14" />
      <circle cx="8.6" cy="4.6" r="0.7" fill={color} stroke="none" />
      <path d="M8 5.2 L 6.5 5.6" />
    </svg>
  );
}

// ----------- Team line (small uppercase label + names + tooltips) -----------
function TeamLine({ team, muted, dim, fg, compact = false }) {
  if (!team || team.length === 0) return null;
  return (
    <div
      style={{
        marginTop: compact ? 8 : 10,
        display: "flex",
        alignItems: "baseline",
        gap: 8,
        flexWrap: "wrap",
        opacity: muted ? 0.7 : 1,
      }}
    >
      <span
        style={{
          fontSize: 9,
          letterSpacing: 1.4,
          textTransform: "uppercase",
          color: dim,
          opacity: 0.8,
          fontWeight: 500,
        }}
      >
        Team
      </span>
      <span style={{ fontSize: 10.5, color: dim, letterSpacing: 0.1, lineHeight: 1.4 }}>
        {team.map((p, i) => (
          <React.Fragment key={p.name}>
            {i > 0 && <span style={{ opacity: 0.5, margin: "0 5px" }}>·</span>}
            <span title={p.role} style={{ color: dim, cursor: "help", borderBottom: `1px dotted ${dim}66` }}>
              {p.name}
            </span>
          </React.Fragment>
        ))}
      </span>
    </div>
  );
}

// ----------- Utilities strip --------------------------------------------
function UtilitiesStrip({ fg, dim, hair, dark, accent, compact = false }) {
  const UTIL = window.MonifestUtilities || [];
  const tint = dark ? "rgba(255,255,255,0.025)" : "rgba(0,0,0,0.025)";
  return (
    <section style={{ marginBottom: compact ? 22 : 28 }}>
      <div
        style={{
          display: "flex",
          alignItems: "baseline",
          justifyContent: "space-between",
          marginBottom: 10,
        }}
      >
        <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
          <span
            style={{
              fontSize: 10,
              letterSpacing: 1.8,
              textTransform: "uppercase",
              color: dim,
              fontWeight: 500,
            }}
          >
            Team utilities
          </span>
          <span style={{ fontSize: 10.5, color: dim, opacity: 0.7 }}>internal docs</span>
        </div>
        <span style={{ fontSize: 10.5, color: dim, display: "inline-flex", alignItems: "center", gap: 5 }}>
          Swipe <span aria-hidden="true">→</span>
        </span>
      </div>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: compact ? "repeat(4, minmax(180px, 1fr))" : "repeat(4, 1fr)",
          gap: 10,
          overflowX: compact ? "auto" : "visible",
          paddingBottom: compact ? 4 : 0,
        }}
      >
        {UTIL.map((u) => {
          if (u.status === "placeholder") {
            return (
              <div
                key={u.id}
                style={{
                  background: "transparent",
                  border: `1px dashed ${hair}`,
                  borderRadius: 12,
                  padding: "14px 14px",
                  minHeight: 78,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  color: dim,
                  fontSize: 11,
                  letterSpacing: 1.4,
                  textTransform: "uppercase",
                  opacity: 0.6,
                }}
              >
                Coming soon
              </div>
            );
          }
          const IconCmp = I[u.icon] || I.Roadmap;
          return (
            <article
              key={u.id}
              onClick={() => u.url && (window.location.href = u.url)}
              role={u.url ? "link" : undefined}
              tabIndex={u.url ? 0 : undefined}
              onKeyDown={(e) => { if (u.url && (e.key === "Enter" || e.key === " ")) window.location.href = u.url; }}
              style={{
                background: tint,
                border: `1px solid ${hair}`,
                borderRadius: 12,
                padding: "12px 14px",
                display: "flex",
                gap: 12,
                minHeight: 78,
                cursor: "pointer",
                alignItems: "flex-start",
              }}
            >
              <div
                style={{
                  width: 28,
                  height: 28,
                  flexShrink: 0,
                  borderRadius: 7,
                  border: `1px solid ${hair}`,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  color: dim,
                  marginTop: 1,
                }}
              >
                <IconCmp size={14} stroke={1.4} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div
                  style={{
                    fontFamily: "'Instrument Serif', serif",
                    fontSize: 17,
                    letterSpacing: -0.2,
                    color: fg,
                    lineHeight: 1.1,
                  }}
                >
                  {u.short ? (
                    <>
                      {u.name.replace(` (${u.short})`, "").replace(u.short, "").trim()}{" "}
                      <span style={{ color: dim, fontStyle: "italic" }}>({u.short})</span>
                    </>
                  ) : (
                    u.name
                  )}
                </div>
                <div style={{ fontSize: 11, color: dim, marginTop: 2, lineHeight: 1.4 }}>{u.desc}</div>
                {u.team && (
                  <div style={{ marginTop: 5, fontSize: 9.5, color: dim, letterSpacing: 0.15 }}>
                    <span style={{ letterSpacing: 1.2, textTransform: "uppercase", opacity: 0.7, marginRight: 6 }}>
                      Team
                    </span>
                    {u.team.map((p, i) => (
                      <span key={p.name} title={p.role} style={{ cursor: "help", borderBottom: `1px dotted ${dim}66` }}>
                        {i > 0 && " · "}
                        {p.name}
                      </span>
                    ))}
                  </div>
                )}
              </div>
            </article>
          );
        })}
      </div>
    </section>
  );
}

window.FlamingoButton = FlamingoButton;

// =====================================================================
// VARIATION A — LUXE  (2 cols, editorial, hairline)
// =====================================================================
function MonifestLuxe({ initialDark = true, flamingo = "pink" }) {
  const [dark, setDark] = useState(initialDark);
  const accent = "#00C46A";
  const bg = dark ? "#0B0E10" : "#F4F1EC";
  const fg = dark ? "#E8E4DC" : "#13171A";
  const dim = dark ? "#8C8780" : "#6A6760";
  const hair = dark ? "#1F2326" : "#D9D3C8";
  const cardBg = dark ? "#0F1316" : "#FBF9F5";

  return (
    <div
      style={{
        background: bg,
        color: fg,
        fontFamily: "Geist, sans-serif",
        height: "100%",
        padding: "44px 56px 36px",
        boxSizing: "border-box",
        display: "flex",
        flexDirection: "column",
      }}
    >
      {/* Header */}
      <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 0 }}>
          <span
            style={{
              fontFamily: "'Instrument Serif', serif",
              fontSize: 30,
              letterSpacing: -0.6,
              fontWeight: 400,
            }}
          >
            Monifest
          </span>
          <span
            style={{
              fontFamily: "'Instrument Serif', serif",
              fontStyle: "italic",
              fontSize: 30,
              color: accent,
              marginLeft: 1,
            }}
          >
            .ai
          </span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <FlamingoButton variant={flamingo} />
          <SearchPill />
          <ThemeToggle dark={dark} onToggle={() => setDark((d) => !d)} accent={accent} />
        </div>
      </header>

      {/* Welcome */}
      <section style={{ marginTop: 56, marginBottom: 36, maxWidth: 720 }}>
        <div
          style={{
            fontFamily: "Geist, sans-serif",
            fontSize: 10.5,
            letterSpacing: 2,
            textTransform: "uppercase",
            color: dim,
            marginBottom: 18,
          }}
        >
          <span style={{ color: accent }}>●</span> &nbsp; CryptoMoney · internal
        </div>
        <h1
          style={{
            fontFamily: "'Instrument Serif', serif",
            fontWeight: 400,
            fontSize: 64,
            lineHeight: 1.02,
            letterSpacing: -1.6,
            margin: 0,
            textWrap: "balance",
          }}
        >
          Money,
          <span style={{ fontStyle: "italic", color: dim }}> manifested.</span>
        </h1>
        <p
          style={{
            marginTop: 18,
            fontSize: 14.5,
            lineHeight: 1.5,
            color: dim,
            maxWidth: 520,
          }}
        >
          AI tools by the CryptoMoney team at eToro.
        </p>
      </section>

      {/* Section header */}
      <div
        style={{
          display: "flex",
          alignItems: "baseline",
          justifyContent: "space-between",
          paddingBottom: 14,
          borderBottom: `1px solid ${hair}`,
          marginBottom: 22,
        }}
      >
        <div style={{ display: "flex", alignItems: "baseline", gap: 16 }}>
          <span style={{ fontFamily: "'Instrument Serif', serif", fontSize: 22 }}>The library</span>
          <span style={{ fontSize: 11, color: dim, letterSpacing: 0.4 }}>
            {APPS.filter((a) => a.status === "live").length} live · {APPS.filter((a) => a.status === "soon").length} coming
          </span>
        </div>
        <div style={{ display: "flex", gap: 18, fontSize: 11, color: dim, letterSpacing: 0.5, textTransform: "uppercase" }}>
          <span style={{ color: fg }}>All</span>
          <span>Live</span>
          <span>Upcoming</span>
        </div>
      </div>

      {/* Card grid */}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 0,
          borderTop: `1px solid ${hair}`,
          borderLeft: `1px solid ${hair}`,
        }}
      >
        {APPS.map((app, i) => {
          const IconCmp = I[app.icon];
          const muted = app.status !== "live";
          return (
            <article
              key={app.id}
              onClick={() => app.url && (window.location.href = app.url)}
              role={app.url ? "link" : undefined}
              tabIndex={app.url ? 0 : undefined}
              onKeyDown={(e) => { if (app.url && (e.key === "Enter" || e.key === " ")) window.location.href = app.url; }}
              style={{
                position: "relative",
                padding: "26px 30px 26px",
                borderRight: `1px solid ${hair}`,
                borderBottom: `1px solid ${hair}`,
                background: cardBg,
                display: "flex",
                gap: 22,
                minHeight: 132,
                cursor: app.url ? "pointer" : "default",
                transition: "background 0.2s",
              }}
            >
              <div
                style={{
                  width: 44,
                  height: 44,
                  flexShrink: 0,
                  borderRadius: 999,
                  border: `1px solid ${hair}`,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  color: muted ? dim : fg,
                  opacity: muted ? 0.7 : 1,
                }}
              >
                <IconCmp size={20} stroke={1.4} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12 }}>
                  <h3
                    style={{
                      fontFamily: "'Instrument Serif', serif",
                      fontWeight: 400,
                      fontSize: 24,
                      margin: 0,
                      letterSpacing: -0.4,
                      opacity: muted ? 0.85 : 1,
                    }}
                  >
                    {app.name}
                  </h3>
                  <StatusBadge status={app.status} variant="luxe" accent={accent} />
                </div>
                <p
                  style={{
                    margin: "8px 0 0",
                    fontSize: 13,
                    lineHeight: 1.5,
                    color: dim,
                    opacity: muted ? 0.78 : 1,
                    textWrap: "pretty",
                    maxWidth: 360,
                  }}
                >
                  {app.desc}
                </p>
                <TeamLine team={app.team} muted={muted} dim={dim} fg={fg} />
              </div>
              {app.status === "live" && (
                <div style={{ position: "absolute", right: 22, bottom: 18, color: dim }}>
                  <I.Arrow size={14} />
                </div>
              )}
            </article>
          );
        })}
      </div>

      {/* Footer */}
      <footer
        style={{
          marginTop: "auto",
          paddingTop: 28,
          display: "flex",
          alignItems: "baseline",
          justifyContent: "space-between",
          fontSize: 12,
          color: dim,
        }}
      >
        <div style={{ display: "flex", alignItems: "baseline", gap: 14 }}>
          <span
            style={{
              fontFamily: "'Instrument Serif', serif",
              fontStyle: "italic",
              fontSize: 15,
              color: fg,
            }}
          >
            What&rsquo;s new —
          </span>
          <span>
            <span style={{ color: accent }}>Round-up</span> is now live. Next up: <span style={{ color: fg }}>Goal Investor</span> enters internal testing.
          </span>
        </div>
        <span style={{ fontSize: 10.5, letterSpacing: 1.4, textTransform: "uppercase" }}>
          Built by CryptoMoney · Guy Gabel &nbsp;·&nbsp; v0.4
        </span>
      </footer>
    </div>
  );
}

// =====================================================================
// VARIATION B — PLAYFUL (3 cols, tonal cards, more rhythm)
// =====================================================================
function MonifestPlayful({ initialDark = true, flamingo = "pink" }) {
  const [dark, setDark] = useState(initialDark);
  const accent = "#00C46A";
  const bg = dark ? "#0C0F11" : "#F2EFE9";
  const fg = dark ? "#EEEAE2" : "#15191C";
  const dim = dark ? "#8E8980" : "#65625B";
  const hair = dark ? "#1E2225" : "#DBD5CA";

  // Per-app tonal accent in OKLCH neighborhood — same chroma, varied hue
  const palettes = dark
    ? {
        club:        { tint: "oklch(0.22 0.04 80)",  ink: "oklch(0.86 0.08 80)" }, // amber
        roundup:     { tint: "oklch(0.22 0.04 150)", ink: "oklch(0.86 0.10 150)" }, // green
        nium:        { tint: "oklch(0.22 0.04 220)", ink: "oklch(0.86 0.08 220)" }, // blue
        goal:        { tint: "oklch(0.22 0.04 30)",  ink: "oklch(0.86 0.08 30)" },  // coral
        "fam-invest":{ tint: "oklch(0.22 0.04 110)", ink: "oklch(0.86 0.08 110)" }, // lime
        "fam-bank":  { tint: "oklch(0.22 0.04 320)", ink: "oklch(0.86 0.08 320)" }, // pink
        jpm:         { tint: "oklch(0.22 0.04 260)", ink: "oklch(0.86 0.08 260)" }, // violet
        zengo:       { tint: "oklch(0.22 0.04 190)", ink: "oklch(0.86 0.08 190)" }, // teal
      }
    : {
        club:        { tint: "oklch(0.94 0.04 80)",  ink: "oklch(0.30 0.10 80)" },
        roundup:     { tint: "oklch(0.94 0.04 150)", ink: "oklch(0.30 0.10 150)" },
        nium:        { tint: "oklch(0.94 0.04 220)", ink: "oklch(0.30 0.10 220)" },
        goal:        { tint: "oklch(0.94 0.04 30)",  ink: "oklch(0.30 0.10 30)" },
        "fam-invest":{ tint: "oklch(0.94 0.04 110)", ink: "oklch(0.30 0.10 110)" },
        "fam-bank":  { tint: "oklch(0.94 0.04 320)", ink: "oklch(0.30 0.10 320)" },
        jpm:         { tint: "oklch(0.94 0.04 260)", ink: "oklch(0.30 0.10 260)" },
        zengo:       { tint: "oklch(0.94 0.04 190)", ink: "oklch(0.30 0.10 190)" },
      };

  return (
    <div
      style={{
        background: bg,
        color: fg,
        fontFamily: "Geist, sans-serif",
        height: "100%",
        padding: "36px 44px 28px",
        boxSizing: "border-box",
        display: "flex",
        flexDirection: "column",
      }}
    >
      {/* Header */}
      <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "baseline" }}>
          <span
            style={{
              fontFamily: "'Instrument Serif', serif",
              fontSize: 28,
              fontWeight: 400,
              letterSpacing: -0.5,
            }}
          >
            Monifest
          </span>
          <span
            style={{
              fontFamily: "'Instrument Serif', serif",
              fontStyle: "italic",
              fontSize: 28,
              color: accent,
            }}
          >
            .ai
          </span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <FlamingoButton variant={flamingo} />
          <SearchPill />
          <ThemeToggle dark={dark} onToggle={() => setDark((d) => !d)} accent={accent} />
        </div>
      </header>

      {/* Welcome — playful split */}
      <section
        style={{
          marginTop: 36,
          marginBottom: 24,
          display: "grid",
          gridTemplateColumns: "1fr auto",
          gap: 24,
          alignItems: "end",
        }}
      >
        <div>
          <div
            style={{
              fontSize: 10.5,
              letterSpacing: 2,
              textTransform: "uppercase",
              color: dim,
              marginBottom: 14,
              display: "flex",
              alignItems: "center",
              gap: 8,
            }}
          >
            <span style={{ color: accent }}>
              <I.Sparkle size={12} />
            </span>
            Welcome back
          </div>
          <h1
            style={{
              fontFamily: "'Instrument Serif', serif",
              fontWeight: 400,
              fontSize: 54,
              lineHeight: 1.0,
              letterSpacing: -1.2,
              margin: 0,
              textWrap: "balance",
            }}
          >
            Money,{" "}
            <span style={{ fontStyle: "italic", color: accent }}>manifested</span>.
          </h1>
          <p style={{ marginTop: 14, fontSize: 13.5, color: dim, maxWidth: 460 }}>
            AI tools by the CryptoMoney team at eToro. Pick one and get to work.
          </p>
        </div>
        <div
          style={{
            display: "flex",
            gap: 6,
            alignItems: "center",
            color: dim,
            fontSize: 11,
            letterSpacing: 0.3,
            paddingBottom: 6,
          }}
        >
          <span
            style={{
              padding: "5px 10px",
              borderRadius: 999,
              background: accent,
              color: "#06140C",
              fontSize: 10.5,
              fontWeight: 500,
              letterSpacing: 0.2,
            }}
          >
            3 live
          </span>
          <span style={{ padding: "5px 10px", borderRadius: 999, border: `1px solid ${hair}` }}>5 coming</span>
        </div>
      </section>

      {/* Team utilities */}
      <UtilitiesStrip fg={fg} dim={dim} hair={hair} dark={dark} accent={accent} />

      {/* Card grid 3-col */}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 14,
        }}
      >
        {APPS.map((app) => {
          const IconCmp = I[app.icon];
          const muted = app.status !== "live";
          const pal = palettes[app.id];
          return (
            <article
              key={app.id}
              onClick={() => app.url && (window.location.href = app.url)}
              role={app.url ? "link" : undefined}
              tabIndex={app.url ? 0 : undefined}
              onKeyDown={(e) => { if (app.url && (e.key === "Enter" || e.key === " ")) window.location.href = app.url; }}
              style={{
                position: "relative",
                background: pal.tint,
                color: fg,
                borderRadius: 14,
                padding: "18px 18px 16px",
                display: "flex",
                flexDirection: "column",
                gap: 14,
                minHeight: 168,
                cursor: app.url ? "pointer" : "default",
                border: `1px solid ${hair}`,
                opacity: muted ? 0.92 : 1,
                transition: "transform 0.2s",
              }}
            >
              <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between" }}>
                <div
                  style={{
                    width: 36,
                    height: 36,
                    borderRadius: 10,
                    background: dark ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.03)",
                    border: `1px solid ${hair}`,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    color: pal.ink,
                  }}
                >
                  <IconCmp size={18} stroke={1.5} />
                </div>
                <StatusBadge status={app.status} variant="playful" accent={accent} />
              </div>
              <div style={{ marginTop: "auto" }}>
                <h3
                  style={{
                    fontFamily: "'Instrument Serif', serif",
                    fontWeight: 400,
                    fontSize: 24,
                    letterSpacing: -0.4,
                    margin: "0 0 4px",
                    opacity: muted ? 0.92 : 1,
                  }}
                >
                  {app.name}
                </h3>
                <p
                  style={{
                    margin: 0,
                    fontSize: 12.5,
                    lineHeight: 1.45,
                    color: dim,
                    opacity: muted ? 0.85 : 1,
                    textWrap: "pretty",
                  }}
                >
                  {app.desc}
                </p>
                <TeamLine team={app.team} muted={muted} dim={dim} fg={fg} compact />
              </div>
            </article>
          );
        })}
      </div>

      {/* Footer */}
      <footer
        style={{
          marginTop: 28,
          paddingTop: 18,
          borderTop: `1px solid ${hair}`,
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          fontSize: 12,
          color: dim,
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span
            style={{
              padding: "3px 8px",
              borderRadius: 999,
              background: accent,
              color: "#06140C",
              fontSize: 9.5,
              letterSpacing: 0.6,
              textTransform: "uppercase",
              fontWeight: 600,
            }}
          >
            What&rsquo;s new
          </span>
          <span>
            <span style={{ color: fg }}>Round-up</span> is now live. Next up: <span style={{ color: fg }}>Goal Investor</span> enters internal testing.
          </span>
        </div>
        <span style={{ fontSize: 10.5, letterSpacing: 1.4, textTransform: "uppercase" }}>
          Built by CryptoMoney · Guy Gabel
        </span>
      </footer>
    </div>
  );
}

// =====================================================================
// VARIATION B — MOBILE (single-column, tonal cards)
// =====================================================================
function MonifestPlayfulMobile({ initialDark = true, flamingo = "pink" }) {
  const [dark, setDark] = useState(initialDark);
  const accent = "#00C46A";
  const bg = dark ? "#0C0F11" : "#F2EFE9";
  const fg = dark ? "#EEEAE2" : "#15191C";
  const dim = dark ? "#8E8980" : "#65625B";
  const hair = dark ? "#1E2225" : "#DBD5CA";

  const palettes = dark
    ? {
        club:        { tint: "oklch(0.22 0.04 80)",  ink: "oklch(0.86 0.08 80)" },
        roundup:     { tint: "oklch(0.22 0.04 150)", ink: "oklch(0.86 0.10 150)" },
        nium:        { tint: "oklch(0.22 0.04 220)", ink: "oklch(0.86 0.08 220)" },
        goal:        { tint: "oklch(0.22 0.04 30)",  ink: "oklch(0.86 0.08 30)" },
        "fam-invest":{ tint: "oklch(0.22 0.04 110)", ink: "oklch(0.86 0.08 110)" },
        "fam-bank":  { tint: "oklch(0.22 0.04 320)", ink: "oklch(0.86 0.08 320)" },
        jpm:         { tint: "oklch(0.22 0.04 260)", ink: "oklch(0.86 0.08 260)" },
        zengo:       { tint: "oklch(0.22 0.04 190)", ink: "oklch(0.86 0.08 190)" },
      }
    : {
        club:        { tint: "oklch(0.94 0.04 80)",  ink: "oklch(0.30 0.10 80)" },
        roundup:     { tint: "oklch(0.94 0.04 150)", ink: "oklch(0.30 0.10 150)" },
        nium:        { tint: "oklch(0.94 0.04 220)", ink: "oklch(0.30 0.10 220)" },
        goal:        { tint: "oklch(0.94 0.04 30)",  ink: "oklch(0.30 0.10 30)" },
        "fam-invest":{ tint: "oklch(0.94 0.04 110)", ink: "oklch(0.30 0.10 110)" },
        "fam-bank":  { tint: "oklch(0.94 0.04 320)", ink: "oklch(0.30 0.10 320)" },
        jpm:         { tint: "oklch(0.94 0.04 260)", ink: "oklch(0.30 0.10 260)" },
        zengo:       { tint: "oklch(0.94 0.04 190)", ink: "oklch(0.30 0.10 190)" },
      };

  const live = APPS.filter((a) => a.status === "live");
  const soon = APPS.filter((a) => a.status === "soon");

  return (
    <div
      style={{
        background: bg,
        color: fg,
        fontFamily: "Geist, sans-serif",
        minHeight: "100%",
        padding: "60px 20px 28px",
        boxSizing: "border-box",
        display: "flex",
        flexDirection: "column",
      }}
    >
      {/* Header */}
      <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 28 }}>
        <div style={{ display: "flex", alignItems: "baseline" }}>
          <span style={{ fontFamily: "'Instrument Serif', serif", fontSize: 24, letterSpacing: -0.5 }}>Monifest</span>
          <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontSize: 24, color: accent }}>.ai</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <FlamingoButton variant={flamingo} compact />
          <button
            aria-label="Search"
            style={{
              all: "unset",
              cursor: "pointer",
              width: 32,
              height: 32,
              borderRadius: 999,
              border: `1px solid ${hair}`,
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              color: dim,
            }}
          >
            <I.Search size={14} />
          </button>
          <ThemeToggle dark={dark} onToggle={() => setDark((d) => !d)} accent={accent} />
        </div>
      </header>

      {/* Welcome */}
      <section style={{ marginBottom: 20 }}>
        <div
          style={{
            fontSize: 10,
            letterSpacing: 1.8,
            textTransform: "uppercase",
            color: dim,
            marginBottom: 10,
            display: "flex",
            alignItems: "center",
            gap: 6,
          }}
        >
          <span style={{ color: accent }}><I.Sparkle size={11} /></span>
          Welcome back
        </div>
        <h1
          style={{
            fontFamily: "'Instrument Serif', serif",
            fontWeight: 400,
            fontSize: 40,
            lineHeight: 1.0,
            letterSpacing: -1,
            margin: 0,
            textWrap: "balance",
          }}
        >
          Money, <span style={{ fontStyle: "italic", color: accent }}>manifested</span>.
        </h1>
        <p style={{ marginTop: 10, fontSize: 13, color: dim, lineHeight: 1.45, margin: "10px 0 0" }}>
          AI tools by the CryptoMoney team at eToro.
        </p>
      </section>

      {/* count chips */}
      <div style={{ display: "flex", gap: 6, marginBottom: 18 }}>
        <span style={{ padding: "5px 10px", borderRadius: 999, background: accent, color: "#06140C", fontSize: 10.5, fontWeight: 600, letterSpacing: 0.2 }}>
          {live.length} live
        </span>
        <span style={{ padding: "5px 10px", borderRadius: 999, border: `1px solid ${hair}`, fontSize: 10.5, color: dim }}>
          {soon.length} coming
        </span>
      </div>

      {/* Team utilities */}
      <UtilitiesStrip fg={fg} dim={dim} hair={hair} dark={dark} accent={accent} compact />

      {/* Live section label */}
      <div style={{ fontSize: 10, letterSpacing: 1.6, textTransform: "uppercase", color: dim, marginBottom: 10 }}>Live now</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 22 }}>
        {live.map((app) => (
          <MobileCard key={app.id} app={app} palette={palettes[app.id]} fg={fg} dim={dim} hair={hair} dark={dark} accent={accent} />
        ))}
      </div>

      <div style={{ fontSize: 10, letterSpacing: 1.6, textTransform: "uppercase", color: dim, marginBottom: 10 }}>Coming soon</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {soon.map((app) => (
          <MobileCard key={app.id} app={app} palette={palettes[app.id]} fg={fg} dim={dim} hair={hair} dark={dark} accent={accent} />
        ))}
      </div>

      {/* Footer */}
      <footer
        style={{
          marginTop: 28,
          paddingTop: 16,
          borderTop: `1px solid ${hair}`,
          fontSize: 11.5,
          color: dim,
          lineHeight: 1.5,
        }}
      >
        <span
          style={{
            padding: "3px 8px",
            borderRadius: 999,
            background: accent,
            color: "#06140C",
            fontSize: 9,
            letterSpacing: 0.6,
            textTransform: "uppercase",
            fontWeight: 600,
            marginRight: 8,
          }}
        >
          What&rsquo;s new
        </span>
        <span style={{ color: fg }}>Round-up</span> is now live. Next up: <span style={{ color: fg }}>Goal Investor</span> enters internal testing.
        <div style={{ marginTop: 8, fontSize: 10, letterSpacing: 1.3, textTransform: "uppercase", opacity: 0.8 }}>
          Built by CryptoMoney · Guy Gabel
        </div>
      </footer>
    </div>
  );
}

function MobileCard({ app, palette, fg, dim, hair, dark, accent }) {
  const IconCmp = I[app.icon];
  const muted = app.status !== "live";
  return (
    <article
      onClick={() => app.url && (window.location.href = app.url)}
      role={app.url ? "link" : undefined}
      tabIndex={app.url ? 0 : undefined}
      onKeyDown={(e) => { if (app.url && (e.key === "Enter" || e.key === " ")) window.location.href = app.url; }}
      style={{
        background: palette.tint,
        color: fg,
        borderRadius: 14,
        padding: "14px 14px 14px",
        display: "flex",
        gap: 14,
        border: `1px solid ${hair}`,
        opacity: muted ? 0.95 : 1,
        cursor: app.url ? "pointer" : "default",
      }}
    >
      <div
        style={{
          width: 40,
          height: 40,
          flexShrink: 0,
          borderRadius: 10,
          background: dark ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.03)",
          border: `1px solid ${hair}`,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          color: palette.ink,
        }}
      >
        <IconCmp size={18} stroke={1.5} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 8 }}>
          <h3
            style={{
              fontFamily: "'Instrument Serif', serif",
              fontWeight: 400,
              fontSize: 22,
              letterSpacing: -0.3,
              margin: 0,
              opacity: muted ? 0.92 : 1,
            }}
          >
            {app.name}
          </h3>
          <StatusBadge status={app.status} variant="playful" accent={accent} />
        </div>
        <p
          style={{
            margin: "4px 0 0",
            fontSize: 12,
            lineHeight: 1.45,
            color: dim,
            opacity: muted ? 0.85 : 1,
            textWrap: "pretty",
          }}
        >
          {app.desc}
        </p>
        <TeamLine team={app.team} muted={muted} dim={dim} fg={fg} compact />
      </div>
    </article>
  );
}

window.MonifestLuxe = MonifestLuxe;
window.MonifestPlayful = MonifestPlayful;
window.MonifestPlayfulMobile = MonifestPlayfulMobile;