/* ============================================================
   NYLA: case chapters, laid out natively in the portfolio's
   design language and registered into the existing tab shell.
   Nyla is the multi-self system that emerges from the evidence
   Nomi produced; the copy below keeps validated results, V1
   hypotheses, and long-term vision clearly separated.
   The Prototype tab embeds the V1 product from
   assets/nyla-proto/ (a snapshot of the standalone build in
   ~/Desktop/Nyla-Real; re-copy those five files to update it).
   Registers into window.CASE_PANELS["nyla"].
   ============================================================ */
(function () {
  const K = window.CSKit;
  const SectionHead = K.SectionHead;

  /* ---------- shared bits (same vocabulary as the nomi chapters) ---------- */
  function H3Block(props) {
    return (
      <div>
        <h3 className="pf-h3" style={{ margin: "0 0 10px" }}>{props.title}</h3>
        {props.sub ? <p className="nmc-sub">{props.sub}</p> : null}
      </div>
    );
  }
  function Badge(props) {
    return <span className={"nmc-badge " + (props.kind || "")}>{props.children}</span>;
  }
  function Chain(props) {
    return (
      <div className="nmc-chain">
        {props.nodes.map(function (n, i) {
          return (
            <React.Fragment key={i}>
              {i > 0 ? <span className="nmc-arr">&rarr;</span> : null}
              <div className={"nmc-node" + (n.cut ? " cut" : "")}>{n.t}{n.s ? <small>{n.s}</small> : null}</div>
            </React.Fragment>
          );
        })}
      </div>
    );
  }
  /* one metric row; pass from+to for a delta (tick marks the "from") */
  function Metric(props) {
    const to = parseInt(props.to, 10);
    const from = props.from != null ? parseInt(props.from, 10) : null;
    return (
      <div>
        <div className="nmc-stat">
          <span>{props.label}</span>
          <b>{from != null ? props.from + " → " + props.to : props.to}</b>
        </div>
        <div className="nmc-bar" aria-hidden="true">
          <i style={{ width: to + "%" }} />
          {from != null && from !== to ? <em style={{ left: "calc(" + from + "% - 1px)" }} /> : null}
        </div>
      </div>
    );
  }
  function MetricCard(props) {
    return (
      <div className="pf-glass nmc-card">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 10, flexWrap: "wrap", marginBottom: props.p ? 0 : 6 }}>
          <div className="nmc-idx" style={{ marginBottom: props.p ? 10 : 0 }}>{props.kicker}</div>
          {props.badge ? props.badge : null}
        </div>
        {props.p ? <p>{props.p}</p> : null}
        <div style={{ marginTop: 18, display: "grid", gap: 13 }}>{props.children}</div>
      </div>
    );
  }
  function Down() { return <div className="dn" aria-hidden="true">&darr;</div>; }

  /* ============================================================
     OPENING: positioning, the social-self, Nomi → Nyla
     ============================================================ */
  function MetaCard(props) {
    return (
      <div className="pf-glass" style={{ gridColumn: "span 3", padding: "clamp(22px, 2vw, 30px)" }}>
        <div className="pf-eyebrow" style={{ marginBottom: 12 }}>{props.label}</div>
        <div className="pf-h3" style={{ fontSize: 18 }}>{props.value}</div>
      </div>
    );
  }
  function OpeningPanel(props) {
    const c = props.case;
    return (
      <div className="nmc" style={{ gap: 40 }}>
        <div style={{ maxWidth: 860 }}>
          <h2 className="pf-h2" style={{ margin: 0 }}>NYLA</h2>
          <p className="pf-lead" style={{ margin: "16px 0 0", maxWidth: 820 }}>
            Nyla is an AI-native system for managing the different versions of yourself you create and communicate
            through. It gives personal AI a missing identity layer: multiple contextual selves, each with its own
            memory, expression, and purpose.
          </p>
        </div>

        <div className="pf-glass nmc-map" style={{ maxWidth: 860 }}>
          <div className="pf-eyebrow" style={{ marginBottom: 12 }}>The opening claim</div>
          <h3 className="pf-h3" style={{ margin: 0, fontSize: "clamp(19px, 2.1vw, 25px)", lineHeight: 1.4 }}>
            Personal AI should know more than who you are. It should know which version of you belongs here.
          </h3>
          <p className="nmc-sub" style={{ marginTop: 12 }}>
            Nomi tested whether one reusable social-self could improve AI-assisted creation. The next question was
            structural: if people authentically show up differently across contexts, why should personal AI represent
            them through one universal profile? Nyla expands the social-self into a system. Users maintain multiple
            contextual selves, give each one relevant memory, switch intentionally between them, and create through
            the combination of identity, memory, and context.
          </p>
          <div style={{ marginTop: 16 }}>
            <Chain nodes={[
              { t: "Nomi", s: "one social-self" },
              { t: "Nyla", s: "multiple social-selves + contextual memory + context switching" },
            ]} />
          </div>
          <div className="nmc-loop">Nomi validates the object. Nyla explores the system.</div>
        </div>

        <blockquote style={{ margin: 0, padding: 22, borderRadius: 18, background: "var(--fill-tertiary)", borderLeft: "1px solid var(--accent)", maxWidth: 860 }}>
          <p className="pf-body" style={{ margin: 0, color: "var(--label-primary)", fontStyle: "italic", fontSize: 15.5 }}>
            AI should understand and preserve the different versions of a person instead of flattening them into one profile.
          </p>
          <p className="pf-body" style={{ margin: "8px 0 0", fontSize: 12.5, color: "var(--label-tertiary)" }}>The ZeyaAI thesis. Nomi is the first product that tests it; Nyla is the system that follows the evidence.</p>
        </blockquote>

        <div className="pf-bento" style={{ gridAutoRows: "auto" }}>
          <MetaCard label="Role" value={c.role} />
          <MetaCard label="Platform" value={c.platform} />
          <MetaCard label="Year" value={c.year} />
          <MetaCard label="Organization" value={c.org} />
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
          {c.tags.map(function (t) { return <span key={t} className="pf-chip">{t}</span>; })}
        </div>

        <hr className="pf-rule" style={{ margin: 0 }} />
        <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(440px, 100%), 1fr))" }}>
          <div className="pf-glass nmc-card">
            <div className="nmc-idx">What is a social-self?</div>
            <h4>A chosen, contextual version of a real person</h4>
            <p>
              Generative AI dramatically increases the speed of creation, but it tends to compress people into one
              generic AI voice. People do not actually show up as one fixed identity: the ways someone communicates
              as a designer, a founder, a friend, or a private person can all be authentic and intentionally
              different.
              A social-self captures one of those versions: how you want to show up in a particular context.
            </p>
            <div style={{ display: "grid", gap: 6, marginTop: 14 }}>
              {["a contextual version of the real user", "intentionally expressed in a specific situation", "persistent enough for AI to remember", "editable and always user-controlled", "able to accumulate relevant context"].map(function (t) {
                return (
                  <div key={t} style={{ display: "flex", gap: 8, alignItems: "baseline", fontSize: 12.5, color: "var(--label-secondary)" }}>
                    <span aria-hidden="true" style={{ color: "var(--accent)" }}>&rarr;</span>{t}
                  </div>
                );
              })}
            </div>
            <p style={{ margin: "14px 0 0", fontSize: 12.5, color: "var(--label-secondary)" }}>
              Registers a user can choose to express a self in, never personality types the system assigns:
            </p>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 8 }}>
              {["thoughtful", "professional", "intimate", "playful", "culturally tuned", "authoritative", "exploratory"].map(function (t) {
                return <span key={t} className="nmc-chip">{t}</span>;
              })}
            </div>
            <div className="nmc-ev">
              A social-self is not a fictional character, an avatar, or a fake persona, and never a fixed personality
              archetype. Every self is the same real person, expressed for a different context, in the user's own words.
            </div>
          </div>
          <div className="pf-glass nmc-card">
            <div className="nmc-idx">What Nyla is not</div>
            <h4>The framing that keeps the product honest</h4>
            <p>
              Nyla is not a social-media tool, not a generic AI assistant, and not another profile-management system.
              It sits at the intersection of AI-native identity systems, personal AI, creator infrastructure,
              contextual memory, and human-AI interaction.
            </p>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 14 }}>
              {["AI-native identity", "personal AI", "creator infrastructure", "contextual memory", "human-AI interaction"].map(function (t) {
                return <span key={t} className="nmc-chip" style={{ borderColor: "color-mix(in srgb, var(--accent) 40%, transparent)" }}>{t}</span>;
              })}
            </div>
            <div className="nmc-ev">
              The identity layer is the product. Creation, memory, and context organize around it.
            </div>
          </div>
        </div>

        <hr className="pf-rule" style={{ margin: 0 }} />
        <H3Block title="Where Nyla begins"
          sub="Nomi validates one social-self in one focused creator workflow. Nyla begins when one social-self is no longer enough. The expansion is deliberate: each stage exists only because the previous one produced evidence." />
        <div className="pf-glass nmc-map">
          <Chain nodes={[
            { t: "Nomi", s: "one social-self, one creator workflow · validated" },
            { t: "Nyla V1", s: "multiple social-selves + persistent memory · hypothesis" },
            { t: "Nyla V2", s: "cross-platform adaptation · future" },
            { t: "Personal AI layer", s: "which version of you acts, where · long term" },
          ]} />
          <div className="nmc-loop">Each arrow is earned by evidence, not added by ambition.</div>
        </div>

        <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(440px, 100%), 1fr))" }}>
          <div className="pf-glass nmc-card">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 10, flexWrap: "wrap" }}>
              <div className="nmc-idx" style={{ marginBottom: 10 }}>Nomi</div>
              <Badge kind="val">validated wedge</Badge>
            </div>
            <h4>One social-self, proven in a real workflow</h4>
            <p>
              Nomi's production wedge is RedNote content creation. A creator shapes one reusable social-self, creates
              through it, keeps a consistent way of showing up across posts, builds content history around that self,
              and reuses it instead of re-prompting AI every time. The purpose was never AI copywriting; it was to
              prove that a persistent social-self can be a meaningful control layer between a person and generative AI.
            </p>
          </div>
          <div className="pf-glass nmc-card">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 10, flexWrap: "wrap" }}>
              <div className="nmc-idx" style={{ marginBottom: 10 }}>Nyla</div>
              <Badge kind="hyp">unvalidated system</Badge>
            </div>
            <h4>Many selves, each with memory and purpose</h4>
            <p>
              Nyla lets people create and own multiple social-selves, understand what each one is for, switch between
              them intentionally, build memory around each one, organize what each created, reuse previous context
              instead of rebuilding identity through prompts, and adapt one self across platforms while preserving
              continuity. Over time it can grow from a creator system into a broader contextual identity layer, but
              V1 stays anchored in identity, creation, memory, and context.
            </p>
          </div>
        </div>
      </div>
    );
  }

  /* ============================================================
     RESEARCH: the Nomi evidence, honestly read
     ============================================================ */
  function ResearchPanel() {
    return (
      <div className="nmc" style={{ gap: 36 }}>
        <SectionHead kicker="Research" title={'The first signal was not "users want more features." It was persistence.'}
          lead="Nyla was not invented; it is the product direction Nomi's evidence produced. Two controlled rounds, 16 participants each, every session a within-participant comparison: the same person and the same topic, generated directly and then through a lightweight social-self. Round 1 ran across any platform; Round 2 narrowed to Instagram with qualified participants. The numbers below are the actual results, including the ones that did not improve." />

        <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(340px, 100%), 1fr))" }}>
          <MetricCard kicker="Round 1 · any platform · n=16" badge={<Badge kind="val">validated</Badge>}
            p="Did generating through a social-self beat direct generation at all?">
            <Metric label="output matched intended self" to="50%" />
            <Metric label="more likely to post it" to="56%" />
            <Metric label="required less editing" to="50%" />
            <Metric label="easier path to a usable result" to="44%" />
            <Metric label="would choose this workflow next time" to="63%" />
          </MetricCard>
          <MetricCard kicker="Round 1 · persistence pull" badge={<Badge kind="val">validated</Badge>}
            p="The unprompted signal: people wanted the self to live beyond the session.">
            <Metric label="definitely wanted to save the self" to="56%" />
            <Metric label="definitely wanted another version of themselves" to="56%" />
            <Metric label="open to saving the self (yes + maybe)" to="81%" />
            <Metric label="open to creating another self (yes + maybe)" to="81%" />
          </MetricCard>
        </div>

        <div className="pf-glass nmc-card">
          <div className="nmc-idx">What Round 1 revealed</div>
          <h4>The concept had pull, and the pull was bigger than style</h4>
          <p>
            The experience was still too broad across platforms, and the creation metrics hovered near a coin flip.
            But users responded far more strongly to <strong style={{ fontWeight: 500, color: "var(--label-primary)" }}>save</strong>,{" "}
            <strong style={{ fontWeight: 500, color: "var(--label-primary)" }}>reuse</strong>, and{" "}
            <strong style={{ fontWeight: 500, color: "var(--label-primary)" }}>create another version</strong> than to any
            stylistic adjustment. That was the first evidence the opportunity was larger than one customized AI voice.
          </p>
        </div>

        <MetricCard kicker="Round 2 · instagram only · n=16" badge={<Badge kind="val">validated</Badge>}
          p="Same comparison, one platform, qualified participants. Each tick marks Round 1; each bar is Round 2.">
          <Metric label="output matched intended self" from="50%" to="69%" />
          <Metric label="more likely to post it" from="56%" to="63%" />
          <Metric label="required less editing" from="50%" to="56%" />
          <Metric label="easier path to a usable result" from="44%" to="44%" />
          <Metric label="would choose this workflow next time" from="63%" to="56%" />
          <Metric label="open to saving the self (yes + maybe)" from="81%" to="75%" />
          <Metric label="open to creating another self (yes + maybe)" from="81%" to="75%" />
        </MetricCard>

        <div className="pf-glass nmc-card">
          <div className="nmc-idx">Interpretation</div>
          <h4>Not every metric was a win, and that is the point</h4>
          <div className="nmc-blk dec"><b>What strengthened</b>The most fundamental social-self value improved sharply: intended-self alignment rose about 19 percentage points once the platform and audience got specific. Postability and editing reduction moved with it. A social-self improves the immediate creation experience when context is focused.</div>
          <div className="nmc-blk trade"><b>What did not</b>Speed stayed flat at 44%, and the persistence signals stayed strong but did not increase. Narrowing improved output value, not effort, so future value cannot come from more setup. It has to come from memory and reuse making contextual identity increasingly automatic.</div>
          <div className="nmc-blk"><b>The strategic question this produced</b>If one social-self is useful, what happens when users need different versions of themselves for different contexts? That question is where Nyla begins.</div>
        </div>

        <hr className="pf-rule" style={{ margin: 0 }} />
        <H3Block title="Research synthesis: five findings, five product implications"
          sub="Each Nomi finding maps to a structural decision in Nyla. This is the evidence-to-decision chain the rest of the case study builds on." />
        <div style={{ display: "grid", gap: 12 }}>
          {[
            ["Users preferred identity-shaped outputs", "AI needs a layer between generic user memory and output generation. That layer is the social-self."],
            ["Users wanted to save and reuse the self", "The social-self must be persistent: an object that survives sessions, not something reconstructed through prompting."],
            ["Users wanted another version of themselves", "Identity should be plural. One universal profile is the wrong data model for a person."],
            ["Platform specificity improved the core value", "A social-self must understand context, not merely tone: platform, audience, purpose."],
            ["Speed did not materially improve", "Future value cannot come from added setup. Nyla must make contextual identity automatic through memory and reuse."],
          ].map(function (row, i) {
            return (
              <div key={i} className="nmc-evrow">
                <div className="pf-glass nmc-card" style={{ padding: 18 }}>
                  <div className="nmc-idx" style={{ marginBottom: 6 }}>Evidence {i + 1}</div>
                  <p style={{ color: "var(--label-primary)" }}>{row[0]}</p>
                </div>
                <div className="ar" aria-hidden="true">&rarr;</div>
                <div className="pf-glass nmc-card" style={{ padding: 18, background: "color-mix(in srgb, var(--accent) 7%, transparent)" }}>
                  <div className="nmc-idx" style={{ marginBottom: 6 }}>Implication</div>
                  <p>{row[1]}</p>
                </div>
              </div>
            );
          })}
        </div>

        <hr className="pf-rule" style={{ margin: 0 }} />
        <H3Block title="The next unresolved question became multiplicity"
          sub="Nomi established directional evidence that one social-self can create value. It did not establish whether users will maintain multiple selves, switch between them intentionally, or benefit from separate contextual memories. Those are Nyla's core product risks, and this case treats them as exactly that: risks, stated up front." />
        <div className="pf-glass nmc-card">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 10, flexWrap: "wrap" }}>
            <div className="nmc-idx" style={{ marginBottom: 10 }}>H1 through H5</div>
            <Badge kind="hyp">unvalidated Nyla hypotheses</Badge>
          </div>
          <div style={{ display: "grid", gap: 10, marginTop: 4 }}>
            {[
              ["H1", "Retained users will meaningfully use more than one social-self."],
              ["H2", "Different social-selves will accumulate meaningfully different memories."],
              ["H3", "Users will intentionally switch selves depending on context."],
              ["H4", "Accumulated memory will reduce repeated prompting and increase long-term utility."],
              ["H5", "The same social-self can adapt across platforms without collapsing into one generic cross-platform voice."],
            ].map(function (h) {
              return (
                <div key={h[0]} style={{ display: "flex", gap: 12, alignItems: "baseline" }}>
                  <span className="nmc-idx" style={{ minWidth: 28, marginBottom: 0 }}>{h[0]}</span>
                  <p style={{ margin: 0 }}>{h[1]}</p>
                </div>
              );
            })}
          </div>
          <div className="nmc-ev">
            Nothing in this list is claimed as proven. The Testing tab holds the experiments each hypothesis needs,
            and the Outcome tab holds the behavior that would confirm them.
          </div>
        </div>
      </div>
    );
  }

  /* ============================================================
     IDEATION: the problem, the object, the system model
     ============================================================ */
  function IdeationPanel() {
    return (
      <div className="nmc" style={{ gap: 36 }}>
        <SectionHead kicker="Ideation" title="The problem: AI knows one of you, or none of you"
          lead="General-purpose AI assumes one of two user models, and both are incomplete. Naming the gap between them precisely is what makes the social-self a product object rather than a feature idea." />
        <p className="nmc-sub">
          Status marker for this whole tab: everything proposed below, the object model, the four layers, and the
          core mechanism, is unvalidated design intent for Nyla. Nothing here has been user-tested, so every badge
          in this tab marks a proposal rather than a finding.
        </p>

        <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(340px, 100%), 1fr))" }}>
          <div className="pf-glass nmc-card">
            <div className="nmc-idx">Model A · the blank user</div>
            <h4>No memory, endless prompting</h4>
            <p>The model knows nothing about you, so every session starts from zero. You reconstruct who you are, what you sound like, and what the context is, every single time. Identity lives in the prompt, which means it evaporates when the session ends.</p>
          </div>
          <div className="pf-glass nmc-card">
            <div className="nmc-idx">Model B · the single profile</div>
            <h4>One memory pretending to be a person</h4>
            <p>The model keeps one persistent profile representing "the user." But people are contextual: the designer, the founder, the friend, and the private person are all authentic and intentionally different. One memory collapses those differences into an average.</p>
          </div>
        </div>

        <div className="pf-glass nmc-card">
          <div className="nmc-idx">What both models cost the user</div>
          <p style={{ marginTop: 4 }}>Blank context creates repetition. Universal memory creates context collapse. Nyla explores a third model: plural, contextual identity with explicit memory boundaries. That third model is the AI product thesis, and nothing in this tab is allowed to bury it beneath creator features.</p>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 10 }}>
            {["repeated prompting", "generic output", "loss of distinctiveness", "context collapse", "inconsistent expression", "poor control over what AI remembers", "professional and personal contexts blur together"].map(function (t) {
              return <span key={t} className="nmc-chip">{t}</span>;
            })}
          </div>
        </div>

        <hr className="pf-rule" style={{ margin: 0 }} />
        <H3Block title={'The design problem is not "how do I add more selves?"'}
          sub="A button for more selves is the shallow reading of Nomi's evidence. Once identity becomes plural, the product must answer four new questions, and every V1 decision below is an answer to one of them." />
        <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(240px, 100%), 1fr))" }}>
          {[
            ["Q1", "What belongs to each self?", "Memory, expression, and history need an owner, not a pile."],
            ["Q2", "What can be shared?", "Some things are the person, not the self. Sharing must be a choice."],
            ["Q3", "Which self is active?", "Switching has to be visible and intentional, never inferred silently."],
            ["Q4", "How does the system learn without silently redefining the user?", "Evolution must be proposed, reviewed, and accepted, never applied."],
          ].map(function (q) {
            return (
              <div key={q[0]} className="pf-glass nmc-card" style={{ padding: 20 }}>
                <div className="nmc-idx" style={{ marginBottom: 8 }}>{q[0]}</div>
                <h4 style={{ fontSize: 14.5, marginBottom: 6 }}>{q[1]}</h4>
                <p style={{ fontSize: 13 }}>{q[2]}</p>
              </div>
            );
          })}
        </div>

        <hr className="pf-rule" style={{ margin: 0 }} />
        <H3Block title="The opportunity: make the social-self a first-class product object"
          sub="Not a prompt, not a style preset: a persistent object the user owns. Once identity is an object, it can carry structure that a prompt never could." />
        <div className="pf-glass nmc-card">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 10, flexWrap: "wrap" }}>
            <div className="nmc-idx" style={{ marginBottom: 10 }}>social-self · the object</div>
            <Badge kind="hyp">Nyla's proposed data model</Badge>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 8 }}>
            {[["Purpose", "what this self is for"], ["Intended contexts", "the situations this self is declared for"], ["Expression", "voice, register, energy"], ["Preferences", "what it favors and avoids"], ["Boundaries", "what it will not say or share"], ["Memory", "what it has learned, inspectable"], ["Content history", "everything created through it"], ["Platforms", "where it shows up"], ["Evolution", "how it changes over time"]].map(function (f) {
              return (
                <div key={f[0]} style={{ border: "1px solid var(--pf-border)", borderRadius: 10, padding: "10px 12px", background: "var(--fill-tertiary)" }}>
                  <div style={{ fontSize: 12.5, fontWeight: 500, color: "var(--label-primary)" }}>{f[0]}</div>
                  <div style={{ fontSize: 11.5, color: "var(--label-tertiary)", marginTop: 2 }}>{f[1]}</div>
                </div>
              );
            })}
          </div>
          <div className="nmc-ev">This turns identity from a prompt into persistent infrastructure. Intended contexts is the scope the user declares for a self; it is not the runtime CONTEXT layer below, which is the single situation the active self is speaking into right now.</div>
        </div>

        <hr className="pf-rule" style={{ margin: 0 }} />
        <H3Block title="The product thesis, as a system"
          sub="The next generation of personal AI will not know one version of you. It will understand which version of you belongs in which context. Nyla turns that sentence into four layers, with the person in control of all four." />
        <div className="nmc-stack">
          {[
            ["PERSON", "one real person, always in control", false, []],
            ["SOCIAL-SELF LAYER", "the versions of you, created and named by you", true, ["Founder", "Personal Storyteller", "Creative Explorer", "Industry Voice"]],
            ["MEMORY LAYER", "what each self knows, remembers, and is allowed to use", true, ["self-specific", "shared intentionally", "general"]],
            ["CONTEXT", "where and to whom the active self is speaking right now", true, ["platform", "audience", "task"]],
            ["CREATION", "what each self creates in its own contexts", true, []],
          ].map(function (l, i) {
            return (
              <React.Fragment key={l[0]}>
                {i > 0 ? <Down /> : null}
                <div className="pf-glass nmc-card" style={{ padding: 18, background: l[2] ? "color-mix(in srgb, var(--accent) " + (3 + i * 2) + "%, transparent)" : undefined }}>
                  <div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "baseline", flexWrap: "wrap" }}>
                    <span style={{ fontSize: 14, fontWeight: 500, letterSpacing: "0.06em", color: "var(--label-primary)" }}>{l[0]}</span>
                    <span style={{ fontSize: 12.5, color: "var(--label-secondary)" }}>{l[1]}</span>
                  </div>
                  {l[3].length ? (
                    <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 10 }}>
                      {l[3].map(function (t) { return <span key={t} className="nmc-chip">{t}</span>; })}
                    </div>
                  ) : null}
                </div>
              </React.Fragment>
            );
          })}
          <div className="nmc-loop" style={{ textAlign: "center", marginTop: 10 }}>
            &#8635; learning over time: accepted edits and reuse refine each self's memory, never the person's identity
          </div>
        </div>
        <p className="nmc-sub">
          Nyla does not decide who you are. It suggests, remembers, and adapts; the person always chooses which self
          acts, and can override the suggestion at any time.
        </p>

        <div className="pf-glass nmc-map">
          <div className="pf-eyebrow" style={{ marginBottom: 14, color: "var(--accent)" }}>The core mechanism</div>
          <Chain nodes={[
            { t: "Idea", s: "what you want to say" },
            { t: "+ Social-self", s: "which version of you carries it" },
            { t: "+ Relevant memory", s: "only what that self owns or shares" },
            { t: "+ Current context", s: "platform, audience, task" },
            { t: "Creation", s: "the output, in that self's voice" },
          ]} />
          <div className="nmc-loop">Every Nyla output is this combination. Change any one input and the creation changes with it; that is what makes identity a control layer instead of a style preset.</div>
        </div>

        <hr className="pf-rule" style={{ margin: 0 }} />
        <H3Block title="How the thinking actually proceeded"
          sub="The strategy was derived, not imagined: start from the riskiest assumption, buy evidence cheaply, and only then widen the aperture." />
        <div className="pf-glass nmc-map">
          <Chain nodes={[
            { t: "Observation", s: "GenAI flattens people" },
            { t: "Hypothesis", s: "a social-self restores control" },
            { t: "Nomi", s: "smallest testable product" },
            { t: "Validation", s: "2 rounds, 32 sessions" },
            { t: "Narrowing", s: "one platform, one audience" },
            { t: "Stronger signal", s: "+19 pts intended-self fit" },
            { t: "New opportunity", s: "persistence + multiplicity" },
            { t: "Nyla", s: "the system" },
          ]} />
          <div className="nmc-loop">I did not begin by building the largest vision. I isolated the riskiest assumption and let the evidence set the scope.</div>
        </div>
      </div>
    );
  }

  /* ============================================================
     TESTING: the success model Nyla will be judged against
     ============================================================ */
  function TestingPanel() {
    const LEVELS = [
      {
        k: "Level 1 · Social-self value", badge: <Badge kind="val">validation underway via Nomi</Badge>,
        q: "Does creating through a social-self beat generic generation?",
        m: ["intended-self fit", "postability / usability", "editing reduction", "preference vs. direct generation"],
        note: "Nomi has already begun validating this layer: +19 pts intended-self fit in Round 2.",
      },
      {
        k: "Level 2 · Persistence", badge: <Badge kind="hyp">Nyla V1 hypothesis</Badge>,
        q: "Does a social-self become something users return to?",
        m: ["social-self reuse rate", "artifacts created per saved self", "% of active users returning to the same self", "time between self creation and first reuse"],
        note: "Nomi's 75–81% stated save intent makes this the first behavior V1 must convert from stated to observed.",
      },
      {
        k: "Level 3 · Multiplicity", badge: <Badge kind="hyp">Nyla V1 hypothesis</Badge>,
        q: "Do users genuinely need more than one version of themselves?",
        m: ["% of retained users creating a second self", "% actively using 2+ selves", "average active selves per retained user", "contexts differentiated between selves"],
        note: "This is Nyla's strongest early product-market signal: plurality is the premise the whole system rests on.",
      },
      {
        k: "Level 4 · Contextual network value", badge: <Badge>future</Badge>,
        q: "Does Nyla get more useful as a user's history grows?",
        m: ["30- and 90-day retention", "creation frequency", "cross-platform reuse", "% of new content drawing on existing memory", "reduction in repeated prompting"],
        note: "This is where Nyla stops being a feature and starts being infrastructure.",
      },
    ];
    return (
      <div className="nmc" style={{ gap: 36 }}>
        <SectionHead kicker="Testing" title="What Nyla needs to prove"
          lead="Nyla has not been user-tested yet, so this tab holds no results; it holds the measurement plan, designed before the product. Four levels, in the order they must be proven: each level is only meaningful if the one before it holds. Vanity metrics are deliberately excluded: signups, number of selves created, raw generation volume." />
        <div style={{ display: "grid", gap: 12 }}>
          {LEVELS.map(function (l, i) {
            return (
              <React.Fragment key={l.k}>
                {i > 0 ? <div className="dn" style={{ textAlign: "center", color: "var(--label-tertiary)", fontSize: 15, padding: 2 }} aria-hidden="true">&darr;</div> : null}
                <div className="pf-glass nmc-card">
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 10, flexWrap: "wrap" }}>
                    <div className="nmc-idx" style={{ marginBottom: 10 }}>{l.k}</div>
                    {l.badge}
                  </div>
                  <h4>{l.q}</h4>
                  <div style={{ display: "flex", gap: 8, flexWrap: "wrap", margin: "6px 0 0" }}>
                    {l.m.map(function (m) { return <span key={m} className="nmc-chip">{m}</span>; })}
                  </div>
                  <div className="nmc-ev">{l.note}</div>
                </div>
              </React.Fragment>
            );
          })}
        </div>

        <hr className="pf-rule" style={{ margin: 0 }} />
        <H3Block title="Three experiments, designed and waiting"
          sub="Each experiment targets one of the research tab's unvalidated hypotheses and names the behavior it will count. The measures are questions, not achieved targets; none of these has run." />
        <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(300px, 100%), 1fr))" }}>
          {[
            ["Test 1 · Multiplicity", "Can users meaningfully distinguish two social-selves?", ["second-self creation", "actual use of the second self", "switching behavior"], "tests H1 + H3"],
            ["Test 2 · Memory separation", "Does self-specific memory improve relevance without creating confusion?", ["memory acceptance", "memory removal", "context mistakes", "user trust"], "tests H2 + H4"],
            ["Test 3 · Context switching", "Does selecting a different self produce meaningfully preferred outputs for different contexts?", ["intended-self fit", "editing burden", "preference vs. one generic voice", "reuse"], "tests H3 + H5"],
          ].map(function (t) {
            return (
              <div key={t[0]} className="pf-glass nmc-card">
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 10, flexWrap: "wrap" }}>
                  <div className="nmc-idx" style={{ marginBottom: 10 }}>{t[0]}</div>
                  <Badge kind="hyp">not yet run</Badge>
                </div>
                <h4>{t[1]}</h4>
                <div style={{ display: "flex", gap: 8, flexWrap: "wrap", margin: "6px 0 0" }}>
                  {t[2].map(function (m) { return <span key={m} className="nmc-chip">{m}</span>; })}
                </div>
                <div className="nmc-ev">{t[3]}</div>
              </div>
            );
          })}
        </div>

        <hr className="pf-rule" style={{ margin: 0 }} />
        <H3Block title="North-star behavior" />
        <div className="pf-glass nmc-card" style={{ background: "color-mix(in srgb, var(--accent) 8%, transparent)" }}>
          <div className="nmc-idx">Monthly Multi-Self Creators</div>
          <h4 style={{ fontSize: 19 }}>Retained users repeatedly create through multiple saved social-selves</h4>
          <p>
            A retained user who uses at least two distinct saved social-selves to complete meaningful creation flows
            during a month. One behavior that jointly requires retention, persistence, multiplicity, and real
            social-self value, none of which can be gamed by the others.
          </p>
          <div className="nmc-ev">
            Deliberately rejected as north stars: account creation, number of selves created, raw generation volume.
            All three can grow while the product fails.
          </div>
        </div>
      </div>
    );
  }

  /* ============================================================
     ITERATIONS: Nyla V1, deliberately narrow
     ============================================================ */
  function IterationsPanel() {
    const SELVES = [
      ["Industry Voice", "professional analysis, measured"],
      ["Personal Storyteller", "warm, first-person, unhurried"],
      ["Creative Explorer", "playful, visual, experimental"],
      ["Close-Friends Self", "unpolished, private, direct"],
      ["Founder Self", "building in public, candid"],
    ];
    return (
      <div className="nmc" style={{ gap: 36 }}>
        <SectionHead kicker="Iterations" title="Nyla V1: three capabilities, nothing else"
          lead="The scope discipline is the design. V1 stays anchored in identity, creation, memory, and context. The three capabilities below are the smallest system that can prove multiple selves, differentiated memory, and contextual creation." />
        <p className="nmc-sub">
          Status marker for this whole tab: V1 is a proposed scope, not a shipped one. Every "V1 core" and "V1
          principle" badge below marks an unvalidated design decision waiting on the experiments in the Testing tab.
        </p>

        <div className="pf-glass nmc-card">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 10, flexWrap: "wrap" }}>
            <div className="nmc-idx" style={{ marginBottom: 10 }}>A · Multi-self management</div>
            <Badge kind="hyp">V1 core</Badge>
          </div>
          <h4>Create, name, switch, evolve, and always see how selves differ</h4>
          <p>
            Users create a new social-self, save it, name it, describe its purpose, and see where it is used. They can
            switch between selves intentionally, duplicate or evolve an existing one, and compare how each differs.
            Names are the user's own words, never fixed personality archetypes. The five below are example names a
            user wrote, not a set Nyla ships:
          </p>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 12 }}>
            {SELVES.map(function (s) {
              return (
                <span key={s[0]} style={{ display: "inline-flex", flexDirection: "column", border: "1px solid var(--pf-border)", borderRadius: 12, padding: "9px 14px", background: "var(--fill-tertiary)" }}>
                  <span style={{ fontSize: 13, fontWeight: 500, color: "var(--label-primary)" }}>{s[0]}</span>
                  <span style={{ fontSize: 11, color: "var(--label-tertiary)" }}>{s[1]}</span>
                </span>
              );
            })}
          </div>
        </div>

        <div className="pf-glass nmc-card">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 10, flexWrap: "wrap" }}>
            <div className="nmc-idx" style={{ marginBottom: 10 }}>B · Self-specific memory</div>
            <Badge kind="hyp">V1 core</Badge>
          </div>
          <h4>Each self remembers its own world, and shows its work</h4>
          <p>Memory belongs to a self, not to a global profile. Each self accumulates:</p>
          <div style={{ display: "flex", gap: 6, flexWrap: "wrap", margin: "10px 0 0" }}>
            {["past content", "recurring topics", "preferred language", "audience", "examples the user liked", "content patterns", "important experiences", "vocabulary preferences", "boundaries"].map(function (t) {
              return <span key={t} className="nmc-chip">{t}</span>;
            })}
          </div>
          <div className="nmc-blk dec" style={{ marginTop: 16 }}><b>Memory is never invisible</b>Users can always see what Nyla remembers, which self remembers it, where it came from, and why it is being applied to the current creation, and they can edit or remove any of it. This is the line between contextual memory and an opaque profile.</div>
          <div style={{ display: "grid", gap: 8, marginTop: 14 }}>
            {[
              ["a private reflection", "Personal Storyteller only"],
              ["a professional project detail", "Industry Voice only"],
              ["a general language preference", "shared across selves, by choice"],
            ].map(function (r) {
              return (
                <div key={r[0]} style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
                  <span className="nmc-chip">{r[0]}</span>
                  <span className="nmc-arr" style={{ padding: 0 }}>&rarr;</span>
                  <span className="nmc-chip" style={{ borderColor: "color-mix(in srgb, var(--accent) 40%, transparent)" }}>{r[1]}</span>
                </div>
              );
            })}
          </div>
          <p style={{ margin: "14px 0 0", fontSize: 12.5, color: "var(--label-secondary)" }}>The user's controls over any memory:</p>
          <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 8 }}>
            {["keep", "edit", "delete", "share", "move", "separate"].map(function (t) {
              return <span key={t} className="nmc-chip">{t}</span>;
            })}
          </div>
          <div className="nmc-ev">The governing principle: AI should remember context without collapsing contexts. Not everything the AI knows about the user belongs to every self, and nothing here is presented as invisible magic.</div>
        </div>

        <div className="pf-glass nmc-card">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 10, flexWrap: "wrap" }}>
            <div className="nmc-idx" style={{ marginBottom: 10 }}>C · Contextual creation</div>
            <Badge kind="hyp">V1 core</Badge>
          </div>
          <h4>One idea, three selves, three honest versions</h4>
          <p>
            Creation starts from an idea, and Nyla helps answer three questions: which social-self should carry it,
            what context from that self matters, and how the idea should change for this audience and platform. The
            same idea, say "what I learned shipping a product in six weeks", becomes:
          </p>
          <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(260px, 100%), 1fr))", marginTop: 14 }}>
            {[
              ["Founder Self", "LinkedIn", "a professional post: the decision framework, the trade-offs, what the team would repeat"],
              ["Personal Storyteller", "RedNote", "a thoughtful note: the 2am doubts, the small rituals that kept the weeks moving"],
              ["Creative Explorer", "Instagram", "a concise caption: one image, one sharp line about making things fast"],
            ].map(function (r) {
              return (
                <div key={r[0]} style={{ border: "1px solid var(--pf-border)", borderRadius: 12, padding: 14, background: "var(--fill-tertiary)" }}>
                  <div style={{ display: "flex", gap: 8, alignItems: "baseline", flexWrap: "wrap" }}>
                    <span style={{ fontSize: 12.5, fontWeight: 500, color: "var(--label-primary)" }}>{r[0]}</span>
                    <span className="nmc-arr" style={{ padding: 0 }}>&rarr;</span>
                    <span style={{ fontSize: 11.5, color: "var(--accent)" }}>{r[1]}</span>
                  </div>
                  <p style={{ margin: "8px 0 0", fontSize: 12.5, lineHeight: 1.6, color: "var(--label-secondary)" }}>{r[2]}</p>
                </div>
              );
            })}
          </div>
          <div className="nmc-ev">Three versions, one person: in each, a different self and its own memories are in play, so the idea adapts without flattening into a generic cross-platform voice. This context switch is the signature Nyla interaction, and the Prototype tab makes it operable.</div>
        </div>

        <hr className="pf-rule" style={{ margin: 0 }} />
        <H3Block title="What V1 deliberately does not do"
          sub="Each of these may eventually connect to social-selves. Adding them now would destroy the conceptual clarity V1 exists to prove: multiple selves + differentiated memory + contextual creation." />
        <div className="pf-glass nmc-map">
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {["profile-picture generation", "avatar generation", "generic image generation", "LinkedIn cold messages", "calendar management", "email assistant", "generic life assistant", "task manager", "full autonomous agent"].map(function (t) {
              return <span key={t} className="nmc-node cut" style={{ fontSize: 12 }}>{t}</span>;
            })}
          </div>
          <p className="nmc-sub" style={{ marginTop: 14, fontSize: 13 }}>
            Nomi's original ideation explored networking messages and profile appearance. Those were useful
            exploratory branches, but a branch does not return as a Nyla feature simply because it existed earlier;
            it returns only if the identity system proves out and the branch serves it.
          </p>
        </div>

        <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(340px, 100%), 1fr))" }}>
          <div className="pf-glass nmc-card">
            <div className="nmc-idx">Why not profile pictures yet</div>
            <h4>A different product problem, not a smaller one</h4>
            <p>Profile-image generation introduces visual identity, image-model quality, likeness, safety, and aesthetic consistency: an entire problem space of its own. None of it validates contextual social-self management, so it stays outside the first Nyla proof.</p>
          </div>
          <div className="pf-glass nmc-card">
            <div className="nmc-idx">Why not LinkedIn messaging yet</div>
            <h4>The coherent expansion is a self, not a message type</h4>
            <p>LinkedIn is already a V1 publishing context: the Founder Self posts there, and the prototype switches the same idea between LinkedIn and RedNote. What V1 defers is outbound messaging and networking. "LinkedIn messages" is a message type rather than a self, so it is too narrow to build on. That work returns as a Professional social-self carried into professional creation and communication contexts, and only after multi-self behavior is validated.</p>
          </div>
        </div>

        <hr className="pf-rule" style={{ margin: 0 }} />
        <H3Block title="Five deliberate narrowings"
          sub="Each row is a decision this case made on purpose, moving from the obvious reading of the evidence to the structural one." />
        <div style={{ display: "grid", gap: 12 }}>
          {[
            ["One social-self", "Multiple social-selves", "the one expansion V1 makes, because plurality is the thesis itself"],
            ["Universal memory", "Scoped, per-self memory", "context collapse is the failure mode Nyla exists to prevent"],
            ["Platform as product architecture", "Platform as context", "a platform is a room the self speaks in, not a product line"],
            ["Manual configuration", "Learning through accepted edits", "the flat speed metric proved setup cannot be the price of identity"],
            ["More features", "A stronger identity system", "every feature rejected above buys conceptual clarity for the proof"],
          ].map(function (row) {
            return (
              <div key={row[0]} className="nmc-evrow">
                <div className="pf-glass nmc-card" style={{ padding: 18 }}>
                  <p style={{ color: "var(--label-secondary)" }}>{row[0]}</p>
                </div>
                <div className="ar" aria-hidden="true">&rarr;</div>
                <div className="pf-glass nmc-card" style={{ padding: 18, background: "color-mix(in srgb, var(--accent) 7%, transparent)" }}>
                  <p style={{ color: "var(--label-primary)" }}>{row[1]}</p>
                  <p style={{ margin: "6px 0 0", fontSize: 12, color: "var(--label-tertiary)" }}>{row[2]}</p>
                </div>
              </div>
            );
          })}
        </div>

        <hr className="pf-rule" style={{ margin: 0 }} />
        <H3Block title="Human control and AI trust"
          sub="Nyla deals with identity, so control is not a settings page; it is the product philosophy. These principles are what separate Nyla from opaque memory systems." />
        <div className="nmc-grid">
          {[
            ["You create and name your selves", "Nyla never generates a persona and assigns it to you."],
            ["Memory is inspectable", "Every self shows what it remembers; you can change or delete any memory."],
            ["Selves never merge silently", "Sensitive contexts stay separated unless you explicitly connect them."],
            ["Suggestions, not impositions", "Nyla may suggest which self fits a moment; it never imposes one."],
            ["Override at any time", "The selected self is always yours to change, mid-flow included."],
            ["Boundaries are respected", "What a self will not say or share is part of the self, and it holds."],
          ].map(function (p) {
            return (
              <div key={p[0]} className="pf-glass nmc-card" style={{ padding: 20 }}>
                <h4 style={{ fontSize: 14.5, marginBottom: 6 }}>{p[0]}</h4>
                <p style={{ fontSize: 13 }}>{p[1]}</p>
              </div>
            );
          })}
        </div>

        <div className="pf-glass nmc-card">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 10, flexWrap: "wrap" }}>
            <div className="nmc-idx" style={{ marginBottom: 10 }}>Learning through use</div>
            <Badge kind="hyp">V1 principle</Badge>
          </div>
          <h4>The long-term value is not additional setup. It is decreasing setup.</h4>
          <p>
            Example: the user keeps removing promotional wording from Industry Voice outputs. Nyla notices the
            pattern across three posts and asks, instead of acting:
          </p>
          <div style={{ border: "1px solid var(--pf-border)", borderRadius: 12, padding: "14px 16px", background: "var(--fill-tertiary)", marginTop: 12 }}>
            <p style={{ margin: 0, fontSize: 13, color: "var(--label-primary)" }}>You made the last three Industry Voice posts more understated. Update this social-self?</p>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 10 }}>
              {["Yes", "Not now", "Review"].map(function (t, i) {
                return <span key={t} style={{ display: "inline-block", borderRadius: 999, padding: "5px 14px", fontSize: 11, background: i === 0 ? "var(--accent)" : "transparent", color: i === 0 ? "#fff" : "var(--label-secondary)", border: i === 0 ? "1px solid transparent" : "1px solid var(--pf-border)" }}>{t}</span>;
              })}
            </div>
          </div>
          <div className="nmc-ev">Social-selves evolve through behavior, not endless onboarding forms, and never silently. This is the same answer as Q4 in Ideation, expressed as an interaction.</div>
        </div>
      </div>
    );
  }

  /* ============================================================
     OUTCOME: expansion, business model, defensibility, ledger
     ============================================================ */
  function OutcomePanel() {
    return (
      <div className="nmc" style={{ gap: 36 }}>
        <SectionHead kicker="Outcome" title="From creator system to identity infrastructure"
          lead="Nyla expands only because contextual social-selves prove useful in more areas, never by bolting on unrelated AI features. The stages, the business model, and the defensibility story below all follow that single rule." />

        <div className="pf-glass nmc-map">
          <div className="pf-eyebrow" style={{ marginBottom: 14, color: "var(--accent)" }}>Expansion model</div>
          <Chain nodes={[
            { t: "Stage 1 · Creator identity", s: "selves for creation, memory per self" },
            { t: "Stage 2 · Cross-platform identity", s: "one self, adapted per context" },
            { t: "Stage 3 · Professional + personal intelligence", s: "contextual knowledge per self" },
            { t: "Stage 4 · Personal AI operating layer", s: "which you acts, where" },
          ]} />
          <div className="nmc-loop">Each stage is unlocked by the success model's levels: Stage 2 requires Level 3 multiplicity to be real. The path never jumps from a creator workflow to "manage your entire life": the long-term vision is credible only after contextual identity proves valuable beyond content.</div>
        </div>

        <hr className="pf-rule" style={{ margin: 0 }} />
        <H3Block title="The Nyla success model"
          sub="The north star defined in Testing, Monthly Multi-Self Creators, is deliberately a behavior, not a count. Number of selves created can be vanity behavior; repeated creation through distinct saved selves cannot. These are targets to reach, not results achieved." />
        <div className="pf-glass nmc-card">
          <div className="nmc-idx">Supporting metrics</div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 4 }}>
            {["social-self reuse", "second-self adoption", "% of users actively using 2+ selves", "context-switch frequency", "memory reuse in new creations", "30-day retention", "90-day retention"].map(function (t) {
              return <span key={t} className="nmc-chip">{t}</span>;
            })}
          </div>
        </div>
        <div className="pf-glass nmc-card">
          <div className="nmc-idx">Why these metrics decide the product</div>
          <div style={{ display: "grid", gap: 10, marginTop: 4 }}>
            {[
              ["Users only ever create one self", "Nyla may not need to exist separately from Nomi."],
              ["Many selves created, none reused", "The product is novelty, not a system."],
              ["Repeated creation through different saved selves", "Multiplicity has real value."],
              ["Memory makes those selves increasingly useful", "Nyla begins accumulating product value."],
              ["Users return because the system remembers contextual identity", "Nyla becomes hard to replace with a generic prompt."],
            ].map(function (r) {
              return (
                <div key={r[0]} style={{ display: "flex", gap: 10, alignItems: "baseline", flexWrap: "wrap" }}>
                  <span style={{ fontSize: 13, color: "var(--label-secondary)" }}>{r[0]}</span>
                  <span className="nmc-arr" style={{ padding: 0 }}>&rarr;</span>
                  <span style={{ fontSize: 13, fontWeight: 500, color: "var(--label-primary)" }}>{r[1]}</span>
                </div>
              );
            })}
          </div>
        </div>

        <hr className="pf-rule" style={{ margin: 0 }} />
        <H3Block title="Business model" sub="Nomi functions as the focused entry wedge; Nyla becomes the broader paid system when users need multiple selves, deeper memory, cross-context adaptation, and history. Kept deliberately simple until persistence and multiplicity are proven." />
        <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(300px, 100%), 1fr))" }}>
          <div className="pf-glass nmc-card">
            <div className="nmc-idx">Free</div>
            <h4>One primary social-self</h4>
            <p>Limited memory, limited creation. This tier already exists in the world: it is Nomi, and it doubles as the top of the funnel and the ongoing Level-1 validation surface.</p>
          </div>
          <div className="pf-glass nmc-card" style={{ background: "color-mix(in srgb, var(--accent) 7%, transparent)" }}>
            <div className="nmc-idx">Nyla Individual</div>
            <h4>The multi-self system</h4>
            <p>Multiple social-selves, persistent contextual memory, cross-platform adaptation, deeper history, and advanced creation workflows. The subscription maps exactly to the behaviors the north star measures.</p>
          </div>
          <div className="pf-glass nmc-card">
            <div className="nmc-idx">Future · Professional / Creator</div>
            <h4>When selves become work</h4>
            <p>Analytics, team and collaborator workflows, brand and professional contexts, deeper knowledge integration. Deliberately underdeveloped until the individual tier proves out.</p>
          </div>
        </div>

        <hr className="pf-rule" style={{ margin: 0 }} />
        <H3Block title="Where defensibility could come from"
          sub="The moat is not 'we use an LLM.' It is a future data advantage: a structured contextual identity graph that generic prompt history cannot produce. Framed honestly: this is a direction, not a currently proven technical moat." />
        <div className="nmc-evrow">
          <div className="pf-glass nmc-card" style={{ padding: 20 }}>
            <div className="nmc-idx" style={{ marginBottom: 8 }}>Every interaction is designed to emit structured signals</div>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              {["which self", "which context", "which memory was used", "what the user selected", "what the user edited", "accepted vs. rejected outputs", "reuse", "platform adaptation", "switching between selves"].map(function (t) {
                return <span key={t} className="nmc-chip">{t}</span>;
              })}
            </div>
          </div>
          <div className="ar" aria-hidden="true">&rarr;</div>
          <div className="pf-glass nmc-card" style={{ padding: 20, background: "color-mix(in srgb, var(--accent) 7%, transparent)" }}>
            <div className="nmc-idx" style={{ marginBottom: 8 }}>A longitudinal contextual identity graph</div>
            <p>
              Nyla is designed so that every use would deepen its read of which self is appropriate, which memory
              matters, how the user expresses each self, and where the boundaries between selves must hold.
              Corrections and preference signals would compound per self, producing value a single flat prompt
              history structurally cannot capture. No user has built this graph yet; it is the advantage V1 is meant
              to earn, not one the product currently holds.
            </p>
          </div>
        </div>

        <hr className="pf-rule" style={{ margin: 0 }} />
        <H3Block title="The honest ledger" sub="What this case study claims, sorted by the strength of its evidence." />
        <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(300px, 100%), 1fr))" }}>
          <div className="pf-glass nmc-card">
            <div style={{ display: "flex", justifyContent: "space-between", gap: 10, flexWrap: "wrap", alignItems: "baseline" }}>
              <div className="nmc-idx" style={{ marginBottom: 10 }}>Validated</div><Badge kind="val">Nomi, n=32</Badge>
            </div>
            <p>A social-self measurably improves intended-self fit, postability, and editing burden when context is focused. Users state strong intent to save and to create more selves.</p>
          </div>
          <div className="pf-glass nmc-card">
            <div style={{ display: "flex", justifyContent: "space-between", gap: 10, flexWrap: "wrap", alignItems: "baseline" }}>
              <div className="nmc-idx" style={{ marginBottom: 10 }}>Hypothesis</div><Badge kind="hyp">Nyla V1 will test</Badge>
            </div>
            <p>That stated persistence converts to reuse behavior; that retained users genuinely need 2+ selves; that memory makes contextual identity automatic instead of adding setup.</p>
          </div>
          <div className="pf-glass nmc-card">
            <div style={{ display: "flex", justifyContent: "space-between", gap: 10, flexWrap: "wrap", alignItems: "baseline" }}>
              <div className="nmc-idx" style={{ marginBottom: 10 }}>Future vision</div><Badge>unproven, by design</Badge>
            </div>
            <p>Cross-platform adaptation, contextual network value, and a personal AI operating layer. Presented as the expansion path the evidence points toward, not as achieved outcomes.</p>
          </div>
        </div>

        <hr className="pf-rule" style={{ margin: 0 }} />
        <H3Block title="Plain answers" sub="The whole case, compressed, for a reader with thirty seconds." />
        <div className="nmc-qgrid">
          {[
            ["What is a social-self?", "A chosen, contextual version of a real person: how you want to show up in one context. Not a character, avatar, or fake persona."],
            ["Why is one AI profile not enough?", "People are contextual. One memory averages the designer, the founder, and the friend into a voice that belongs to none of them."],
            ["What did Nomi prove?", "Creating through a social-self beats direct generation on the metrics that matter: intended-self fit rose ~19 points when context got specific, and users want to save and multiply their selves."],
            ["What did Nomi not prove?", "That stated persistence becomes real reuse, and that speed improves. Both are Nyla V1's burden, which is why V1 leads with memory and reuse rather than more setup."],
            ["What does Nyla do first?", "Three things only: multiple named selves, visible per-self memory, and contextual creation that adapts one idea across audiences without flattening it."],
            ["How is it different from AI memory or a writing assistant?", "Memory is plural, per-self, inspectable, and user-controlled; identity is the product object, not a hidden profile behind an assistant."],
            ["What behavior proves it works?", "Monthly Multi-Self Creators: retained users creating through at least two distinct saved selves every month."],
            ["Why is this a platform, not a feature?", "Because it is built so that every use would deepen a structured, per-self identity graph, and each proven level would unlock a wider context where the same selves apply. That compounding is the advantage V1 is meant to earn, not one it has yet."],
          ].map(function (q) {
            return (
              <div key={q[0]} className="pf-glass nmc-card" style={{ padding: 20 }}>
                <h4 style={{ fontSize: 14.5, marginBottom: 6 }}>{q[0]}</h4>
                <p style={{ fontSize: 13 }}>{q[1]}</p>
              </div>
            );
          })}
        </div>
      </div>
    );
  }

  /* ============================================================
     PROTOTYPE: the V1 product, running locally in the page
     Nyla is a full operating environment (persistent sidebar,
     internal scrolling), so it is framed at a fixed viewport
     height and scrolls inside, rather than auto-growing the way
     the single-screen Nomi flow does.
     ============================================================ */
  const PROTO_SRC = "assets/nyla-proto/index.html";
  /* Each jump lands on a screen the flow below starts from. */
  const PROTO_JUMPS = [
    ["Home", "home"],
    ["Selves", "selves"],
    ["A social-self", "self/iv"],
    ["Memory", "memory/ps"],
    ["Create", "create"],
  ];
  /* The site's own light/dark toggle drives the prototype. The panel doesn't
     receive the theme as a prop, so it watches the attribute the shell sets. */
  function useSiteTheme() {
    const read = function () { return document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light"; };
    const [theme, setTheme] = React.useState(read);
    React.useEffect(function () {
      const obs = new MutationObserver(function () { setTheme(read()); });
      obs.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
      setTheme(read());
      return function () { obs.disconnect(); };
    }, []);
    return theme;
  }

  function PrototypePanel() {
    const frameRef = React.useRef(null);
    const [jump, setJump] = React.useState("home");
    const theme = useSiteTheme();
    /* Baked into the initial src so the prototype boots in the right theme with
       no flash. Captured once: changing src later would reload and lose state. */
    const [bootSrc] = React.useState(function () {
      return PROTO_SRC + "?theme=" + (document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light");
    });
    /* Every later toggle is pushed in: the direct call when same-origin lets us
       skip a frame, postMessage covers file:// and any cross-origin host. */
    React.useEffect(function () {
      const ifr = frameRef.current;
      if (!ifr) return;
      ifr.style.colorScheme = theme;
      try {
        const win = ifr.contentWindow;
        if (win && typeof win.nylaSetTheme === "function") { win.nylaSetTheme(theme); return; }
        if (win) win.postMessage({ type: "nyla-theme", theme: theme }, "*");
      } catch (e) {
        try { ifr.contentWindow.postMessage({ type: "nyla-theme", theme: theme }, "*"); } catch (e2) {}
      }
    }, [theme]);
    function go(hash) {
      setJump(hash);
      const ifr = frameRef.current;
      if (!ifr) return;
      /* Same-origin: navigate in place so nothing reloads. If the page is opened
         straight off the filesystem the access throws, so fall back to src. */
      try {
        const win = ifr.contentWindow;
        if (win && win.location) { win.location.hash = "#" + hash; return; }
      } catch (e) {}
      ifr.src = PROTO_SRC + "?theme=" + theme + "#" + hash;
    }
    return (
      <div className="nmc" style={{ gap: 28 }}>
        <SectionHead kicker="Prototype" title="Nyla V1, running here in the page"
          lead="The three V1 capabilities, working end to end: multiple social-selves, memory that belongs to a self, and creation that adapts one idea across selves and platforms. Start anywhere: the sidebar switches selves, Create walks an idea through Nyla's read of which self should carry it, and Studio exposes the whole context chain as something you can change one layer at a time. The pill at the bottom of the sidebar swaps between three starting states: the established three-self system, the moment a Nomi social-self first arrives, and a brand-new account with nothing remembered yet." />

        <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
          <span className="pf-eyebrow" style={{ marginRight: 2 }}>Jump to</span>
          {PROTO_JUMPS.map(function (j) {
            const on = jump === j[1];
            return (
              <button key={j[1]} onClick={function () { go(j[1]); }}
                className="nmc-chip" style={{
                  cursor: "pointer", fontFamily: "inherit",
                  borderColor: on ? "var(--accent)" : undefined,
                  color: on ? "var(--accent)" : undefined,
                  background: on ? "color-mix(in srgb, var(--accent) 10%, transparent)" : undefined,
                }}>{j[0]}</button>
            );
          })}
        </div>

        <div className="pf-glass pf-glass--thick" style={{ padding: "clamp(14px, 1.4vw, 20px)" }}>
          <div style={{ position: "relative", width: "100%", borderRadius: 16, overflow: "hidden", border: "1px solid var(--pf-border)", background: theme === "dark" ? "#0E1218" : "#F3F5F9" }}>
            <iframe ref={frameRef} title="Nyla V1 interactive prototype" src={bootSrc} loading="lazy"
              onLoad={function () {
                const ifr = frameRef.current; if (!ifr) return;
                try { if (ifr.contentWindow.nylaSetTheme) ifr.contentWindow.nylaSetTheme(theme); } catch (e) {}
              }}
              style={{ display: "block", width: "100%", height: "min(84vh, 900px)", border: 0, background: "transparent", colorScheme: theme }} />
          </div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 16, marginTop: 16 }}>
            <p className="pf-body" style={{ margin: 0, maxWidth: 560, fontSize: 14 }}>
              Runs entirely in the browser, and follows this site's light/dark setting. Desktop-first, and responsive down to mobile. Narrow the window to see the create-and-switch layout.
            </p>
            <a href={PROTO_SRC} target="_blank" rel="noopener noreferrer" className="pf-btn pf-btn--primary gv-lift" style={{ textDecoration: "none" }}>
              Open full screen
              <i data-lucide="arrow-up-right" style={{ width: 16, height: 16, opacity: 0.8 }} />
            </a>
          </div>
        </div>

        <hr className="pf-rule" style={{ margin: "4px 0" }} />
        <H3Block title="What to try, in the order that makes the idea land"
          sub="Each of these is a designed flow rather than a screen: the point of the prototype is what changes between them." />
        <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(300px, 100%), 1fr))" }}>
          {[
            ["Switch the self, keep the idea", "In Studio, tap SOCIAL-SELF and change it. The memories in play, the framing, and the language all move together, and the panel tells you what changed and why.", "the signature interaction"],
            ["Switch the platform, keep the self", "Change CONTEXT from LinkedIn to RedNote. Same person, different room: structure and intimacy adjust; identity does not.", "context ≠ identity"],
            ["Watch memory stay separate", "Open Memory and pick a self. It states how many memories belong to other selves and stay invisible here. Share the Kyoto note with Industry Voice, then write that idea through it; the draft stops being hollow.", "the trust model"],
            ["Let a self learn from you", "In Studio with Industry Voice, cut the promotional close. On the third time Nyla notices the pattern and asks whether the self should change; you decide.", "evolution through use"],
            ["Branch a related self", "Open Industry Voice and branch it. Three columns show what is inherited, what changed, and what stays behind. Memory separates from that moment on.", "related, not identical"],
          ].map(function (r) {
            return (
              <div key={r[0]} className="pf-glass nmc-card">
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 10, flexWrap: "wrap" }}>
                  <div className="nmc-idx" style={{ marginBottom: 10 }}>{r[2]}</div>
                </div>
                <h4>{r[0]}</h4>
                <p>{r[1]}</p>
              </div>
            );
          })}
        </div>

        <div className="pf-glass nmc-card">
          <div className="nmc-idx">Prototype boundaries</div>
          <p>
            This is a product prototype, not a running service: there is no account, no server, and no model behind
            it. Every generated draft is written by hand so the differences between selves and contexts are real
            differences in framing and language rather than a change in word count, and the recommendation panel,
            memory counts, and learn-from-edits signals run on local sample data. State lives for the session and
            resets on reload, deliberately, so each visitor gets the same starting point. Everything else is real:
            navigation, switching selves and platforms, editing, keep and discard, memory move/share/remove with the
            conflict case, branching, reshaping with live voice preview, and the three starting states.
          </p>
        </div>
      </div>
    );
  }

  /* ---------- register ---------- */
  window.CASE_PANELS = window.CASE_PANELS || {};
  const reg = window.CASE_PANELS["nyla"] = window.CASE_PANELS["nyla"] || {};
  reg.Opening = OpeningPanel;
  reg.Research = ResearchPanel;
  reg.Ideation = IdeationPanel;
  reg.Testing = TestingPanel;
  reg.Iterations = IterationsPanel;
  reg.Prototype = PrototypePanel;
  reg.Outcome = OutcomePanel;
})();
