/* ============================================================
   MySubaru AI Driving Assistant: case chapters, laid out
   natively in the portfolio's design language.

   Source: Genevieve's own case narrative, plus the interview
   deck's own interactive builds in assets/subaru/embeds. The
   diagrams here are drawn natively rather than embedded as
   slide exports.

   Seven chapters, one arc:
     Opening     the behavioral question, not the feature question
     Research    a five-moment simulation instead of a feature test
     Ideation    three modes, three different rights to interrupt
     Testing     passive against proactive, read as a curve
     Iterations  what the engineering constraint changed
     Prototype   the three modes inside the running app  (hero)
     Outcome     calibrated proactivity, stated honestly

   The prototype is embeds/phone-fh.html, the app state deck
   slide 38 used, driven by the deck's own scenarios s38-a
   (maintenance) and s38-b (trip). Memory mode is shown
   undriven, because waiting is its behavior.

   Registers into window.CASE_PANELS["subaru-agentic-ai"],
   overriding the single Testing panel in subaru.jsx. Must be
   loaded after subaru.jsx.
   ============================================================ */
(function () {
  const K = window.CSKit;
  const SectionHead = K.SectionHead;
  const Eyebrow = K.Eyebrow;

  const EMB = "assets/subaru/embeds/";
  const PP = window.PPKit;
  const FIGMA = "https://trial-handle-00777350.figma.site";

  /* ---------- small shared bits ---------- */
  const H3S = { margin: "0 0 16px", fontSize: "clamp(19px, 2vw, 26px)", fontWeight: 300, maxWidth: 900 };

  function Head3(props) {
    return (
      <div>
        {props.kicker ? <Eyebrow style={{ marginBottom: 14 }}>{props.kicker}</Eyebrow> : null}
        <h3 className="pf-h2" style={H3S}>{props.title}</h3>
        {props.sub ? <p className="nmc-sub">{props.sub}</p> : null}
      </div>
    );
  }

  function Badge(props) {
    return <span className={"nmc-badge" + (props.val ? " val" : "") + (props.hyp ? " hyp" : "")}>{props.children}</span>;
  }

  function BadgeRow(props) {
    return <div style={{ display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center" }}>{props.children}</div>;
  }

  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>
    );
  }

  /* A native diagram: reason above, caption below, consequence after. */
  function Dia(props) {
    return (
      <figure style={{ margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
        {props.intro ? <p className="nmc-sub">{props.intro}</p> : null}
        <div className="pf-glass pf-glass--thick" style={{ padding: "clamp(18px, 2vw, 30px)" }}>
          {props.children}
        </div>
        {props.caption ? (
          <figcaption className="nmc-ev" style={{ borderTop: 0, paddingTop: 0, marginTop: 0 }}>{props.caption}</figcaption>
        ) : null}
        {props.after ? <p className="nmc-sub" style={{ fontSize: 14.5 }}>{props.after}</p> : null}
      </figure>
    );
  }

  /* The five moments as a timeline. The bar under each stop carries the
     direction of the response, so the shape of the curve is visible in the
     sequence itself rather than only in the chart further down. */
  function MomentTrack(props) {
    const TONE = {
      "Welcomed": { c: "var(--accent)", w: "88%" },
      "Less welcome": { c: "var(--label-tertiary)", w: "44%" },
      "Wait to be visited": { c: "var(--label-tertiary)", w: "22%" },
    };
    return (
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: "clamp(14px, 1.6vw, 22px)" }}>
        {props.moments.map(function (m) {
          const tone = TONE[m.r] || TONE["Welcomed"];
          return (
            <div key={m.n} style={{ display: "flex", flexDirection: "column", gap: 10, minWidth: 0 }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                <span className="pf-num" style={{ fontSize: 22, fontWeight: 200, lineHeight: 1, color: "var(--label-tertiary)" }}>{m.n}</span>
                <span style={{ fontSize: 13, lineHeight: 1.35, color: "var(--label-primary)" }}>{m.t}</span>
              </div>
              <div className="nmc-bar" aria-hidden="true">
                <i style={{ width: tone.w, background: tone.c }} />
              </div>
              <div style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: tone.c === "var(--accent)" ? "var(--accent)" : "var(--label-tertiary)" }}>
                {m.r}
              </div>
            </div>
          );
        })}
      </div>
    );
  }

  /* Interruption right, assigned by consequence rather than by feature. */
  const RIGHTS = [
    {
      mode: "Maintenance", right: "Interrupt", tone: "hi",
      because: "High consequence, and a deadline the owner did not choose",
      does: "Explains why context changes the risk, recommends the action, helps schedule it, confirms it is resolved.",
    },
    {
      mode: "Trip", right: "Invite", tone: "mid",
      because: "Real potential value, no urgency",
      does: "Makes the opportunity visible and offers help, with a Maybe later that actually defers it.",
    },
    {
      mode: "Memory", right: "Wait", tone: "lo",
      because: "Value is retrospective, and the moment belongs to the owner",
      does: "Assembles the record and holds it until the owner comes back for it.",
    },
  ];

  function RightsModel() {
    const C = { hi: "var(--accent)", mid: "var(--label-secondary)", lo: "var(--label-tertiary)" };
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {RIGHTS.map(function (m) {
          return (
            <div key={m.mode} className="pf-glass" style={{ padding: "clamp(16px, 1.7vw, 22px)", display: "grid", gridTemplateColumns: "minmax(0, 1fr) auto", gap: "14px 18px", alignItems: "start" }}>
              <div style={{ minWidth: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                <div className="nmc-idx" style={{ marginBottom: 0, color: C[m.tone] }}>{m.mode} mode</div>
                <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.55, color: "var(--label-secondary)" }}>{m.does}</p>
                <div className="nmc-ev" style={{ marginTop: 2 }}>Because: {m.because}</div>
              </div>
              <div style={{
                justifySelf: "end", whiteSpace: "nowrap",
                padding: "9px 16px", borderRadius: 999,
                border: "1px solid " + C[m.tone], color: C[m.tone],
                background: m.tone === "hi" ? "var(--fill-tertiary)" : "transparent",
                fontSize: 11.5, letterSpacing: "0.12em", textTransform: "uppercase",
              }}>{m.right}</div>
            </div>
          );
        })}
      </div>
    );
  }

  /* A short flow as numbered panels, each carrying what its screen is for. */
  function Storyboard(props) {
    return (
      <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" }}>
        {props.steps.map(function (s) {
          return (
            <div key={s.k} className="pf-glass nmc-card" style={{ gap: 10 }}>
              <div className="nmc-idx" style={{ marginBottom: 0 }}>{s.k}</div>
              <h4 style={{ margin: 0 }}>{s.t}</h4>
              <p>{s.p}</p>
            </div>
          );
        })}
      </div>
    );
  }

  /* An A-to-B row, reusing the nyla evidence-row vocabulary. */
  function EvRow(props) {
    return (
      <div className="nmc-evrow">
        <div className="pf-glass" style={{ padding: "15px 18px", display: "flex", flexDirection: "column", gap: 5, justifyContent: "center" }}>
          <div className="nmc-idx" style={{ marginBottom: 0 }}>{props.aLabel}</div>
          <div style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--label-secondary)" }}>{props.a}</div>
        </div>
        <div className="ar">&rarr;</div>
        <div className="pf-glass" style={{ padding: "15px 18px", display: "flex", flexDirection: "column", gap: 5, justifyContent: "center" }}>
          <div className="nmc-idx" style={{ marginBottom: 0, color: "var(--label-tertiary)" }}>{props.bLabel}</div>
          <div style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--label-primary)" }}>{props.b}</div>
        </div>
      </div>
    );
  }

  /* Question / Method / Result / Design consequence. */
  function QMRC(props) {
    return (
      <div className="pf-glass nmc-card">
        <div className="nmc-idx">{props.k}</div>
        <h4>{props.t}</h4>
        <div className="nmc-blk"><b>Question</b>{props.q}</div>
        <div className="nmc-blk"><b>Method</b>{props.m}</div>
        <div className="nmc-blk dec"><b>Result</b>{props.r}</div>
        <div className="nmc-blk trade"><b>Design consequence</b>{props.c}</div>
      </div>
    );
  }

  /* ============================================================
     OPENING
     ============================================================ */
  function MetaCell(props) {
    return (
      <div className="pf-glass" style={{ gridColumn: "span 3", padding: "clamp(20px, 2vw, 28px)" }}>
        <div className="pf-eyebrow" style={{ marginBottom: 12 }}>{props.label}</div>
        <div className="pf-h3" style={{ fontSize: 17 }}>{props.value}</div>
      </div>
    );
  }

  const FRAMES = [
    {
      k: "The domain",
      t: "A vehicle companion works in loaded moments",
      p: "Safety, travel, personal routines, communication, and attention. A wrong call here is not a cosmetic error: it either leaves an owner unprepared for a real risk, or it takes attention from a moment that belonged to them.",
    },
    {
      k: "Both ends fail",
      t: "Too little reads as unintelligent, too much reads as intrusive",
      p: "An assistant that never intervenes wastes what the vehicle already knows. One that intervenes constantly turns a car into a notification surface. Optimizing toward either end produces a worse product, which means the target is not a level of automation at all.",
    },
    {
      k: "The reframe",
      t: "So I made initiative the design variable",
      p: "I focused the AI concept on a behavioral question rather than a feature list: how much initiative should the system take at different points in the ownership journey, and what has to be true before it takes any?",
    },
  ];

  function OpeningPanel(props) {
    const c = props.case;
    return (
      <div className="nmc cs-tab">
        <div style={{ maxWidth: 860 }}>
          <h2 className="pf-h2" style={{ margin: 0, fontSize: "clamp(21px, 2.2vw, 30px)" }}>{c.title}</h2>
          <p className="pf-lead" style={{ margin: "16px 0 0" }}>
            Designing an assistant that knows when to act, and when to stay out of the way.
          </p>
          <p className="nmc-sub" style={{ marginTop: 18 }}>
            The broader MySubaru redesign established a strong opportunity for preemptive guidance: owners responded well
            when the system surfaced useful context before they knew where to look. Making a product proactive, though,
            creates a new problem. More assistance is not always better.
          </p>
          <div style={{ marginTop: 22 }}>
            <BadgeRow>
              <Badge val>Validated concept</Badge>
              <Badge>Future experience</Badge>
              <Badge hyp>Simulation study, not a shipped feature</Badge>
            </BadgeRow>
          </div>
        </div>

        <div className="pf-bento" style={{ gridAutoRows: "auto" }}>
          <MetaCell label="Role" value={c.role} />
          <MetaCell label="Platform" value={c.platform} />
          <MetaCell label="Year" value={c.year} />
          <MetaCell 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>

        <section className="pf-glass pf-glass--thick" style={{ padding: "clamp(30px, 4.5vw, 58px)" }}>
          <div className="pf-eyebrow" style={{ marginBottom: 20, color: "var(--accent)" }}>The framing</div>
          <p className="pf-h2" style={{ margin: 0, maxWidth: 880, fontSize: "clamp(18px, 2vw, 26px)", fontWeight: 300, lineHeight: 1.35 }}>
            The design challenge was not: how do we add AI to MySubaru? It was: when should an intelligent vehicle
            companion <span style={{ color: "var(--accent)" }}>interrupt</span>,{" "}
            <span style={{ color: "var(--accent)" }}>ask permission</span>, or{" "}
            <span style={{ color: "var(--accent)" }}>remain silent</span>?
          </p>
        </section>

        <section className="nmc" style={{ gap: 22 }}>
          <Head3 kicker="Why that question" title="Three reasons the feature question was the wrong one" />
          <div className="nmc-grid">
            {FRAMES.map(function (f) {
              return (
                <div key={f.k} className="pf-glass nmc-card">
                  <div className="nmc-idx">{f.k}</div>
                  <h4>{f.t}</h4>
                  <p>{f.p}</p>
                </div>
              );
            })}
          </div>
        </section>

        <section className="nmc" style={{ gap: 18 }}>
          <Head3 kicker="How this case runs" title="One question, carried through six chapters"
            sub="Each chapter answers the previous one. The prototype is where the model has to survive contact with screens." />
          <div className="pf-glass nmc-map">
            <Chain nodes={[
              { t: "Research", s: "five-moment simulation" },
              { t: "Ideation", s: "three interruption rights" },
              { t: "Testing", s: "passive against proactive" },
              { t: "Iterations", s: "the constraint reframe" },
              { t: "Prototype", s: "the modes, running" },
              { t: "Outcome", s: "calibrated proactivity" },
            ]} />
            <div className="nmc-loop">
              Context in one line: the vehicle, trip, service, and guidance system this assistant sits on top of is the
              subject of the MySubaru Experience Redesign case. This case does not repeat it.
            </div>
          </div>
        </section>
      </div>
    );
  }

  /* ============================================================
     RESEARCH
     ============================================================ */
  const MOMENTS = [
    {
      n: "01",
      t: "Preparing for the trip",
      p: "The proactive version prepared the route, the vehicle, and the schedule before departure. Preparation is where the assistant has the most room to work: nothing has happened yet, and effort saved here is effort the owner never spends.",
      r: "Welcomed",
    },
    {
      n: "02",
      t: "Discovering low tire pressure",
      p: "A condition with a real safety consequence, surfaced before it mattered rather than after. The proactive version explained the risk and moved toward resolving it instead of reporting a value.",
      r: "Welcomed",
    },
    {
      n: "03",
      t: "Receiving a change of plan",
      p: "Plans moved mid-journey. The proactive version absorbed the change: rescheduling, coordinating, and communicating on the owner's behalf while they were occupied with the trip itself.",
      r: "Welcomed",
    },
    {
      n: "04",
      t: "Arriving at the destination",
      p: "The same level of intervention continued after arrival. Here it became less welcome. The owner had reached the thing they came for, and the assistant was still working.",
      r: "Less welcome",
    },
    {
      n: "05",
      t: "Revisiting the trip afterward",
      p: "The trip resolved into something to look back on. The value was real, but it was retrospective: it belonged to the owner returning to it, not to the system delivering it.",
      r: "Wait to be visited",
    },
  ];

  function ResearchPanel() {
    return (
      <div className="nmc cs-tab">
        <SectionHead kicker="Research" title="I tested autonomy as a journey, not as a feature"
          lead="A conventional feature test would have shown owners individual AI concepts and asked whether they liked them. That would have told me which concepts sounded appealing. It would not have told me when proactivity becomes useful, or when it becomes intrusive. So I built a narrative simulation instead." />

        <section className="nmc" style={{ gap: 22 }}>
          <Head3 kicker="Method" title="A private chauffeur, accompanying one trip to Maine"
            sub="Participants imagined MySubaru as a private chauffeur travelling with them. One version behaved primarily as a passive assistant, waiting to be asked. The other introduced proactive and autonomous behaviors: planning, maintenance support, communication, and trip documentation. Both ran the same five moments, in the same order." />
          <Dia
            caption="The five moments of the simulation, in the order participants met them: preparation, a maintenance discovery, a change of plan, arrival, and looking back afterward. The bar under each stop is the direction of the response at that moment, not a score."
            after="Running one arc twice, rather than one concept per screen, made time the variable. At each moment participants rated their emotional response, so the question stopped being which version they preferred overall, and became where each version stopped helping."
          >
            <MomentTrack moments={MOMENTS} />
          </Dia>
        </section>

        <section className="nmc" style={{ gap: 22 }}>
          <Head3 kicker="The five moments" title="What the proactive version did, and how each moment landed"
            sub="The labels below report the direction of the response at each moment, taken from the session ratings. They are not scores." />
          <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(196px, 1fr))" }}>
            {MOMENTS.map(function (m) {
              return (
                <div key={m.n} className="pf-glass nmc-card" style={{ gap: 12 }}>
                  <div className="nmc-idx" style={{ marginBottom: 0 }}>{m.n}</div>
                  <h4 style={{ margin: 0 }}>{m.t}</h4>
                  <p>{m.p}</p>
                  <div className="nmc-ev" style={{ marginTop: "auto" }}>
                    <Badge val={m.r === "Welcomed"}>{m.r}</Badge>
                  </div>
                </div>
              );
            })}
          </div>
        </section>

        <section className="nmc" style={{ gap: 22 }}>
          <Head3 kicker="Finding" title="The value of proactivity changed with context"
            sub="The result was not that users like AI. The response curve was far more useful than the preference." />
          <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))" }}>
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">Where it helped</div>
              <h4>Preparing, resolving, scheduling, coordinating</h4>
              <p>
                Proactivity was welcomed when it helped people prepare a trip, resolve a maintenance issue, schedule an
                action, or coordinate during travel. In each of those moments the owner still had a decision ahead of
                them, and the system was reducing the cost of making it.
              </p>
            </div>
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">Where it stopped helping</div>
              <h4>After the owner reached the destination</h4>
              <p>
                The same level of intervention became less welcome once the trip was complete. Nothing about the
                assistant changed: only the moment did. The experience had crossed from assistance into intrusion.
              </p>
            </div>
          </div>
          <p className="nmc-sub">
            Over 80% of participants said they would use the service again and would be willing to pay for it. That
            number says the concept is wanted. It does not say how the assistant should behave, and the behavioral
            finding underneath it mattered more: an intelligent assistant should not maximize automation. It should
            calibrate its right to intervene.
          </p>
        </section>

        <section className="pf-glass pf-glass--thick" style={{ padding: "clamp(30px, 4.5vw, 58px)" }}>
          <div className="pf-eyebrow" style={{ marginBottom: 18, color: "var(--accent)" }}>The principle this produced</div>
          <p className="pf-h2" style={{ margin: 0, maxWidth: 860, fontSize: "clamp(18px, 2vw, 26px)", fontWeight: 300, lineHeight: 1.35 }}>
            <span style={{ color: "var(--accent)" }}>Calibrated proactivity:</span> the system earns its right to
            intervene from the moment it is in, not from the capability it happens to have.
          </p>
        </section>
      </div>
    );
  }

  /* ============================================================
     IDEATION
     ============================================================ */
  const MODES = [
    {
      k: "Maintenance",
      badge: "Interruptive",
      t: "A high-consequence condition can justify interruption",
      p: "The vehicle detects extreme low tire pressure before tomorrow's trip, while heavy rain is forecast. The assistant should not stop at “Low tire pressure.” It can explain why the context changes the risk, recommend the next action, help schedule service, and confirm resolution.",
      ev: "The consequence is what earns the stronger interruption right. An alert that only reports a value spends the interruption without repaying it.",
    },
    {
      k: "Trip",
      badge: "Invitational",
      t: "Planning support is useful, but rarely urgent",
      p: "The assistant can notice that an upcoming trip has not been prepared and offer help: “You haven't planned your long-weekend route yet. Want help?” The key interaction is not the suggestion. It is the presence of a real Maybe later.",
      ev: "The system makes the opportunity visible without treating its own inference as permission. Inference is a reason to ask, never a reason to proceed.",
    },
    {
      k: "Memory",
      badge: "Passive",
      t: "Once the trip is complete, intervention loses its value",
      p: "After arrival, acting is more likely to interrupt a personal moment than to help with one. The assistant can still assemble trip information and memories, but it waits for the owner to visit rather than demanding attention.",
      ev: "Value created without an interruption is the cheapest value the system can produce. Memory is the mode that proves the model is not simply pro-automation.",
    },
  ];

  const FACTORS = [
    ["Consequence", "How much is at stake if the owner never sees this."],
    ["Urgency", "Whether the window to act is closing."],
    ["Context", "Whether something outside the vehicle changes the severity."],
    ["Confidence", "How sure the inference is before it is allowed to interrupt."],
    ["Reversibility", "Whether a wrong call can be undone, which decides act against ask."],
    ["Timing", "Where the owner is in the journey right now."],
    ["Proximity to destination", "How close arrival is, which turned out to move the answer most."],
  ];

  function IdeationPanel() {
    return (
      <div className="nmc cs-tab">
        <SectionHead kicker="Ideation" title="Three modes, three different rights to demand attention"
          lead="I translated the research into three behavioral modes. They are not three feature categories. They represent three different levels of permission to demand attention, and which one answers is decided by the moment, not by the catalogue of things the vehicle can do." />

        <section className="nmc" style={{ gap: 20 }}>
          <Head3 kicker="The model" title="Interruption right increases with consequence and urgency"
            sub="Each mode, what it does, and the reason it is granted the right it has." />
          <Dia caption="Interruption right increases with consequence and urgency. The right is assigned by what is at stake in the moment, not by which feature happens to be involved.">
            <RightsModel />
          </Dia>
          <p className="nmc-sub" style={{ fontSize: 14.5 }}>
            The rule underneath: high consequence, interrupt. Potential value, invite. Low urgency or retrospective
            value, wait. This is a system governing autonomous behavior, not a set of three AI features that happened to
            ship together.
          </p>
        </section>

        <section className="nmc" style={{ gap: 22 }}>
          <Head3 kicker="The three modes" title="What each mode is for, and what it is allowed to cost the owner" />
          <div className="nmc-grid">
            {MODES.map(function (m) {
              return (
                <div key={m.k} className="pf-glass nmc-card">
                  <div className="nmc-idx">{m.k}</div>
                  <div style={{ marginBottom: 12 }}><Badge val={m.k === "Maintenance"}>{m.badge}</Badge></div>
                  <h4>{m.t}</h4>
                  <p>{m.p}</p>
                  <div className="nmc-ev">{m.ev}</div>
                </div>
              );
            })}
          </div>
        </section>

        <section className="nmc" style={{ gap: 20 }}>
          <Head3 kicker="Maintenance, in full" title="The only mode allowed to interrupt carries the burden of proof" />
          <Dia
            intro="If maintenance is the one mode that can interrupt, it has to finish what it starts. Handing the owner a warning and leaving them to work out the rest turns an interruption into a research task."
            caption="What each of the three screens is responsible for. The interruption is spent on the first one, so the other two exist to repay it."
            after="The alert is not the deliverable: the resolved appointment is. That is what makes the interruption defensible, and it is why the flow ends in a confirmation rather than in a status page."
          >
            <Storyboard steps={[
              {
                k: "01", t: "The alert names the risk and the reason",
                p: "Not a value, a consequence. Low tire pressure, heavy rain forecast for tomorrow's 9:00 AM trip, and the effect on traction, hydroplaning, and stopping distance against that specific journey.",
              },
              {
                k: "02", t: "The recommended action is already assembled",
                p: "A nearby service station with available times, so the decision left to the owner is which slot, not what to do or where to go.",
              },
              {
                k: "03", t: "It closes the loop and confirms",
                p: "A booked appointment with a reminder thirty minutes before. The condition is resolved rather than reported.",
              },
            ]} />
          </Dia>
        </section>

        <section className="nmc" style={{ gap: 20 }}>
          <Head3 kicker="What decides the mode" title="Seven factors, and what each one settles"
            sub="Which mode answers a given moment is not a fixed mapping from feature to behavior. It is a judgement the system makes from these, every time." />
          <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))" }}>
            {FACTORS.map(function (f) {
              return (
                <div key={f[0]} className="pf-glass" style={{ padding: "16px 18px", display: "flex", flexDirection: "column", gap: 6 }}>
                  <div className="nmc-idx" style={{ marginBottom: 0 }}>{f[0]}</div>
                  <div style={{ fontSize: 13.5, lineHeight: 1.6, color: "var(--label-secondary)" }}>{f[1]}</div>
                </div>
              );
            })}
          </div>
        </section>

        <section className="nmc" style={{ gap: 20 }}>
          <Head3 kicker="The constraint" title="When real-time prediction became infeasible, I preserved the value rather than the technology" />
          <div className="pf-glass nmc-card" style={{ maxWidth: 820 }}>
            <div className="nmc-idx">Design decision</div>
            <div className="nmc-blk">
              <b>Question</b>
              The original concept assumed a more predictive experience built on live vehicle information. Engineering
              identified a significant constraint: continuously refreshing and modeling real-time vehicle data was too
              expensive to scale. Do I abandon the concept, or pretend the constraint does not exist?
            </div>
            <div className="nmc-blk dec">
              <b>Decision</b>
              Neither. I asked what users actually valued about prediction: confidence, reassurance, timely help, and
              fewer decisions under stress. None of those required a speculative real-time architecture. I reframed the
              system around inference from signals already available or feasible.
            </div>
            <div className="nmc-blk trade">
              <b>Trade-off</b>
              The technical ambition became smaller. The user-facing promise remained. What I gave up is genuine
              real-time prediction. What I kept is the behavior owners were actually responding to. The full revision,
              including the signals the reframed system reads, is in Iterations.
            </div>
          </div>
        </section>
      </div>
    );
  }

  /* ============================================================
     TESTING
     ============================================================ */
  const CURVE_M = ["01 Prepare", "02 Tire pressure", "03 Change of plan", "04 Arrival", "05 Afterward"];
  const CURVE_PRO = [80, 88, 85, 58, 50];
  const CURVE_PAS = [44, 42, 46, 48, 48];

  function AdvantageChart() {
    const W = 900, H = 380, L = 34, R = 26, T = 40, B = 76;
    const pw = W - L - R, ph = H - T - B;
    const x = function (i) { return L + (pw / 4) * i; };
    const y = function (v) { return T + ph - (v / 100) * ph; };
    const line = function (d) {
      return d.map(function (v, i) { return x(i) + "," + y(v); }).join(" ");
    };
    const band = line(CURVE_PRO) + " " + CURVE_PAS.slice().reverse().map(function (v, i) {
      return x(4 - i) + "," + y(v);
    }).join(" ");
    const grid = [20, 40, 60, 80];
    return (
      <div className="pf-glass" style={{ padding: "clamp(26px, 3vw, 44px) clamp(16px, 2vw, 30px)", maxWidth: 820, margin: "0 auto" }} data-om-raster="true">
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12, marginBottom: 14 }}>
          <div className="pf-eyebrow">Reported welcome for system initiative, across the five moments</div>
          <div style={{ display: "flex", gap: 16, fontSize: 12, color: "var(--label-tertiary)" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}>
              <span style={{ width: 16, height: 1.6, background: "var(--accent)", display: "inline-block" }} />Proactive
            </span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}>
              <span style={{ width: 16, height: 0, borderTop: "1.2px dashed var(--label-tertiary)", display: "inline-block" }} />Passive
            </span>
          </div>
        </div>
        <svg viewBox={"0 0 " + W + " " + H} width="100%" role="img"
          aria-label="Two lines across five simulated moments: the proactive version sits well above the passive one before and during travel, and the gap narrows sharply after arrival"
          style={{ display: "block", overflow: "visible" }}>
          {grid.map(function (g) {
            return <line key={g} x1={L} x2={W - R} y1={y(g)} y2={y(g)} stroke="var(--pf-hairline)" strokeWidth="1" />;
          })}
          <polygon points={band} fill="var(--accent)" opacity="0.10" />
          <polyline points={line(CURVE_PAS)} fill="none" stroke="var(--label-tertiary)" strokeWidth="1.2" strokeDasharray="5 5" strokeLinejoin="round" opacity="0.75" />
          <polyline points={line(CURVE_PRO)} fill="none" stroke="var(--accent)" strokeWidth="1.7" strokeLinejoin="round" />
          {CURVE_PAS.map(function (v, i) {
            return <circle key={"p" + i} cx={x(i)} cy={y(v)} r="2.4" fill="none" stroke="var(--label-tertiary)" strokeWidth="1" opacity="0.75" />;
          })}
          {CURVE_PRO.map(function (v, i) {
            return <circle key={"a" + i} cx={x(i)} cy={y(v)} r="2.8" fill="var(--accent)" />;
          })}
          <line x1={x(3)} x2={x(3)} y1={T - 14} y2={T + ph} stroke="var(--accent)" strokeWidth="1" strokeDasharray="3 4" opacity="0.55" />
          <text x={x(3)} y={T - 20} textAnchor="middle" fontSize="10.5" fontWeight="400" fill="var(--accent)">the turn: arrival</text>
          <text x={L} y={T - 20} textAnchor="start" fontSize="10" fontWeight="300" fill="var(--label-tertiary)">higher is more welcome</text>
          {CURVE_M.map(function (m, i) {
            const words = m.split(" ");
            return (
              <text key={m} x={x(i)} y={H - B + 26} textAnchor="middle" fontSize="10" fontWeight="300" fill="var(--label-tertiary)">
                {words.map(function (w, wi) { return <tspan key={wi} x={x(i)} dy={wi === 0 ? 0 : 13}>{w}</tspan>; })}
              </text>
            );
          })}
        </svg>
        <p className="pf-body" style={{ margin: "14px 0 0", fontSize: 12.5, fontWeight: 300, color: "var(--label-tertiary)" }}>
          Shape, not scores. The direction of each line and the position of the turning point are what the per-moment
          session ratings established. The underlying rating values are not published here, and the vertical axis
          carries no scale.
        </p>
      </div>
    );
  }

  function TestingPanel() {
    return (
      <div className="nmc cs-tab">
        <SectionHead kicker="Testing" title="Passive assistance against proactive assistance, over the same arc"
          lead="Research explains why the simulation was built as a journey. This chapter is the comparison itself: how the two levels of initiative were run against each other, what the ratings showed, and the design variable that fell out of it." />

        <BadgeRow>
          <Badge val>Validated concept</Badge>
          <Badge>Simulation study</Badge>
          <Badge hyp>Not a production A/B test</Badge>
        </BadgeRow>

        <section className="nmc" style={{ gap: 22 }}>
          <div className="nmc-qgrid">
            <QMRC
              k="Test 01"
              t="Passive assistance against proactive assistance"
              q="How proactive should the assistant be?"
              m="Participants progressed through the same simulated trip arc while experiencing two different levels of system initiative. One version behaved primarily as a passive assistant. The other added planning, maintenance support, communication, and trip documentation. The evaluation deliberately did not rely on end-of-session preference alone: at each stage participants rated their emotional response, so the two versions could be compared as curves rather than as totals."
              r="The proactive experience performed strongly before and during travel. Its advantage decreased after arrival, where autonomous behavior increasingly felt unnecessary. Over 80% said they would use the service again and would be willing to pay for it."
              c="The assistant's optimal behavior is contextual rather than consistently proactive. A version tuned to maximize automation would have tested well through moment three and then made the product worse in exactly the moment the owner cared about most."
            />
            <QMRC
              k="Test 02"
              t="The design variable was timing"
              q="Which parts of the journey benefit from earlier assistance, and which do not?"
              m="Reading the same sessions by moment rather than by version. Trip planning, safety, maintenance, scheduling, and communication were compared against post-arrival memory."
              r="Trip planning, safety, maintenance, scheduling, and communication all benefited from earlier assistance. Post-arrival memory did not benefit from the same level of intervention."
              c="Temporal context, and particularly proximity to arrival, became a design variable rather than an implementation detail. It is now one of the seven factors that decide which mode answers a moment."
            />
          </div>
        </section>

        <section className="nmc" style={{ gap: 22 }}>
          <Head3 kicker="The result" title="Read as one score it looks like a preference, read across moments it looks like a rule"
            sub="This is the reason the study was built as a journey. A single end-of-session number would have reported that people liked the proactive version, and would have hidden the point where liking it stopped." />
          <AdvantageChart />
          <p className="nmc-sub" style={{ fontSize: 14.5 }}>
            The turning point sits at arrival. Everything before it is assistance: the owner still has a decision ahead
            of them and the system reduces its cost. Everything after it competes with the moment the owner is actually
            in. That is the boundary the three modes are built around.
          </p>
        </section>

        <section className="nmc" style={{ gap: 20 }}>
          <Head3 kicker="What the study changed" title="The question itself moved" />
          <div className="nmc-stack" style={{ gap: 12, maxWidth: 900 }}>
            <EvRow
              aLabel="Before the study"
              a="How proactive should the AI be? A question about a level of automation, answered once and applied everywhere."
              bLabel="After the study"
              b="When has the assistant earned the right to act? A question about a moment, answered every time."
            />
          </div>
          <div className="pf-glass pf-glass--thick" style={{ padding: "clamp(26px, 3.4vw, 44px)", display: "flex", flexDirection: "column", gap: 16, maxWidth: 900 }}>
            <div className="pf-num" style={{ fontSize: "clamp(30px, 3.4vw, 46px)", fontWeight: 300, lineHeight: 1, color: "var(--accent)" }}>&gt;80%</div>
            <p className="pf-h3" style={{ margin: 0, fontSize: "clamp(16px, 1.5vw, 20px)", fontWeight: 300 }}>
              of participants said they would use the tested service again and would be willing to pay for it.
            </p>
            <p className="pf-body" style={{ margin: 0, fontSize: 13.5, color: "var(--label-tertiary)" }}>
              Reported willingness inside a simulation study, from participants who had just experienced the concept.
              It establishes appetite for an intelligent vehicle companion. It is not a purchase, a conversion rate, or
              a claim about the shipped MySubaru product.
            </p>
          </div>
        </section>
      </div>
    );
  }

  /* ============================================================
     ITERATIONS
     ============================================================ */
  const SIGNALS = [
    ["Tire pressure", "Is there a condition with a safety consequence right now?", "Maintenance"],
    ["Weather", "Does today's context change how severe a known condition is?", "Maintenance"],
    ["Service intervals", "Is something due, and can it be handled before it becomes urgent?", "Maintenance"],
    ["Fuel level", "Can the planned trip be completed without an unplanned stop?", "Trip"],
    ["Location", "Is the owner still somewhere that help would be useful?", "Trip"],
    ["Timing", "How close is departure, and how close is arrival?", "All three"],
  ];

  function IterationsPanel() {
    return (
      <div className="nmc cs-tab">
        <SectionHead kicker="Iterations" title="What changed when the concept met the constraint"
          lead="The first version of this system assumed live vehicle information and continuous modeling. That version did not survive engineering review. This chapter is the revision: what was removed, what replaced it, and why the experience the research validated stayed intact through the change." />

        <section className="nmc" style={{ gap: 20 }}>
          <Head3 kicker="Architecture" title="One layer was removed, and the promise was not"
            sub="The cost that killed the original approach was not the intelligence. It was keeping a live model of every vehicle continuously fresh, at the scale of a connected fleet." />
          <div className="pf-glass nmc-map">
            <div className="pf-eyebrow" style={{ marginBottom: 14 }}>Version one: predictive, and too expensive to scale</div>
            <Chain nodes={[
              { t: "Continuous vehicle telemetry", s: "refreshed constantly", cut: true },
              { t: "Real-time model", s: "per vehicle", cut: true },
              { t: "Predictive assistant" },
            ]} />
            <div style={{ height: 22 }} />
            <div className="pf-eyebrow" style={{ marginBottom: 14, color: "var(--accent)" }}>Version two: inference at decision points</div>
            <Chain nodes={[
              { t: "Signals already available", s: "vehicle, weather, calendar" },
              { t: "Inference at decision points", s: "only when a moment asks" },
              { t: "Calibrated assistant", s: "three interruption rights" },
            ]} />
            <div className="nmc-loop">
              The user-facing promise is identical in both rows: confidence, reassurance, timely help, and fewer
              decisions under stress. Only the machinery behind it changed.
            </div>
          </div>
        </section>

        <section className="nmc" style={{ gap: 22 }}>
          <Head3 kicker="Signals" title="What the reframed system reads instead"
            sub="Each of these already exists in the connected-vehicle ecosystem or is feasible to obtain. None of them requires a speculative real-time architecture, and each one answers a question that a mode actually needs answered." />
          <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))" }}>
            {SIGNALS.map(function (s) {
              return (
                <div key={s[0]} className="pf-glass nmc-card">
                  <div className="nmc-idx">{s[0]}</div>
                  <p>{s[1]}</p>
                  <div className="nmc-ev">Reads into: {s[2]}</div>
                </div>
              );
            })}
          </div>
          <p className="nmc-sub" style={{ fontSize: 14.5 }}>
            The point of the list is what is missing from it. There is no continuously refreshed vehicle model, and no
            behavior in the concept depends on one. Prediction was the implementation. Preparedness was the value.
          </p>
        </section>

        <section className="nmc" style={{ gap: 20 }}>
          <Head3 kicker="What the revision protects" title="Three consequences of reasoning from inference rather than a live model"
            sub="Once the system is inferring rather than observing, the factors from Ideation stop being abstract. Three of them do most of the work." />
          <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))" }}>
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">Confidence</div>
              <h4>An inference is a reason to ask, not a reason to interrupt</h4>
              <p>
                A live model can justify acting on what it currently observes. An inference cannot. Confidence therefore
                sits between the signal and the mode: the less certain the read, the further the system moves down the
                interruption scale, from interrupt to invite to wait.
              </p>
            </div>
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">Reversibility</div>
              <h4>Act where a wrong call is cheap, ask where it is not</h4>
              <p>
                Scheduling a service appointment is reversible and low cost if the inference was wrong. Interrupting a
                moment is not: attention taken cannot be given back. Reversibility is what separates the behaviors the
                assistant may perform from the behaviors it must propose.
              </p>
            </div>
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">Proximity to destination</div>
              <h4>The same behavior changes value as arrival approaches</h4>
              <p>
                This is the factor the study surfaced and the one an architecture diagram would never have produced. It
                is also cheap to compute from signals the system already has, which is why it survived the reframe
                intact while real-time prediction did not.
              </p>
            </div>
          </div>
        </section>

        <section className="nmc" style={{ gap: 16 }}>
          <BadgeRow>
            <Badge val>Reframed under engineering constraint</Badge>
            <Badge>Proposed architecture</Badge>
          </BadgeRow>
          <p className="nmc-sub">
            This revision is the part of the case I would defend hardest. The easy responses were to keep the ambitious
            architecture in the deck and let it fail later, or to drop the concept because its first implementation was
            unaffordable. Separating the value from the mechanism was what let the concept keep going.
          </p>
        </section>
      </div>
    );
  }

  /* ============================================================
     PROTOTYPE (hero)
     ============================================================ */
  const WAYFIND = [
    ["Home", "The assistant card at the top: “Safety Alert: Take Actions Now.” This is maintenance mode, interrupting."],
    ["Service", "The full safety alert: current PSI against recommended, the trip it affects, and the weather that changes the risk."],
    ["Location", "The map, then the Trip Planning card. The trip assistant sits at the top of that screen, asking rather than starting."],
    ["Trip Planning, lower", "The Maine trip summary, and Plan a new trip. This is memory mode: value waiting to be visited."],
  ];

  const INVITE = [
    {
      k: "Accept",
      t: "The owner says yes",
      p: "The assistant takes the work it offered and the owner stays in the flow they were already in. This is the easy path, and it is the only one most invitation patterns are designed for.",
    },
    {
      k: "Defer",
      t: "The owner says Maybe later",
      p: "The opportunity stays available and the system does not re-ask on a timer. Deferral has to be a genuine third outcome with its own behavior, not a dismissal that quietly resets and returns.",
    },
    {
      k: "Ignore",
      t: "The owner does nothing",
      p: "Doing nothing has to be safe. An invitation that escalates when it is ignored is an interruption wearing a question mark, and it costs the trust that maintenance mode needs in order to be allowed to interrupt at all.",
    },
  ];

  function PrototypePanel() {
    return (
      <div className="nmc cs-tab">
        <SectionHead kicker="Prototype" title="The three modes, inside the running app"
          lead="A behavioral model is only real once it survives contact with screens. This is the MySubaru app state the concept was built into: one interactive build, three assistant behaviors, each with a different right to demand attention. It is a concept build, not shipped software: the vehicle data, the trip, and the service booking are scripted." />

        <section className="nmc" style={{ gap: 22 }}>
          <Head3 kicker="Explore it" title="The build, with the three modes reachable from the bottom navigation"
            sub="It runs live below. There is no deep linking into a mode, so the map here tells you where each behavior lives." />
          <PP.Solo src="phone-fh.html" title="MySubaru AI driving assistant prototype"
            badge="The build, yours to drive"
            note="Nothing is driving this one. All three behaviors live in this single app state, reachable from the bottom navigation, so the difference between them reads as a difference in permission rather than as three separate demos." />
          <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))" }}>
            {WAYFIND.map(function (w) {
              return (
                <div key={w[0]} className="pf-glass" style={{ padding: "16px 18px", display: "flex", flexDirection: "column", gap: 6 }}>
                  <div className="nmc-idx" style={{ marginBottom: 0 }}>{w[0]}</div>
                  <div style={{ fontSize: 13.5, lineHeight: 1.6, color: "var(--label-secondary)" }}>{w[1]}</div>
                </div>
              );
            })}
          </div>
          <p className="nmc-sub" style={{ fontSize: 14.5 }}>
            One build carries all three behaviors on purpose. If the modes lived in separate demos, the model would look
            like three features. Sitting in the same app, the difference between them is visibly a difference in
            permission: what each one is willing to cost the owner.
          </p>
        </section>

        <hr className="pf-rule" style={{ margin: 0 }} />

        <section className="nmc" style={{ gap: 22 }}>
          <Head3 kicker="Mode 01, Maintenance" title="Interruptive: safety consequence" />
          <BadgeRow>
            <Badge val>Validated concept</Badge>
            <Badge>Interruption right: highest</Badge>
          </BadgeRow>
          <p className="nmc-sub">
            The maintenance assistant earns attention by responding to a condition with meaningful safety consequences.
            Extreme low tire pressure, before tomorrow morning's trip, with heavy rain forecast. The experience moves
            from alert, to explanation, to recommended action, to service resolution: the interruption is only
            defensible if it ends somewhere.
          </p>
          <div className="pf-glass nmc-map">
            <div className="pf-eyebrow" style={{ marginBottom: 14, color: "var(--accent)" }}>In the prototype</div>
            <Chain nodes={[
              { t: "Home", s: "safety alert card" },
              { t: "Take Actions" },
              { t: "Service Alert", s: "risk, PSI, trip conditions" },
              { t: "Schedule Service", s: "station and time" },
              { t: "Confirmed", s: "reminder set" },
            ]} />
          </div>
          <PP.Solo src="phone-fh.html" demo="s38-a" badge="Maintenance mode, running"
            title="Maintenance mode, from the alert through to a confirmed appointment"
            note="The mode completing its own errand: it opens the alert, takes the recommended action, picks a service time, confirms the appointment, and finishes. It is the one behavior allowed to start a conversation, so it is the one that has to end it. Hover to take over." />
          <p className="nmc-sub" style={{ fontSize: 14.5 }}>
            Every screen after the first exists to repay the interruption. The design test for this mode is simple: if
            the owner has to go and work out what to do next, the assistant should not have interrupted them.
          </p>
        </section>

        <hr className="pf-rule" style={{ margin: 0 }} />

        <section className="nmc" style={{ gap: 22 }}>
          <Head3 kicker="Mode 02, Trip" title="Invitational: planning opportunity" />
          <BadgeRow>
            <Badge val>Validated concept</Badge>
            <Badge>Interruption right: conditional</Badge>
          </BadgeRow>
          <p className="nmc-sub">
            The trip assistant recognizes an opportunity but does not assume permission. In the build it appears at the
            top of Trip Planning, telling the owner the Riverside trip starts tomorrow at 9:00 AM and everything is
            mapped, then asking whether to start it now. The owner can accept the help or leave it, without losing
            control of the experience.
          </p>
          <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))" }}>
            {INVITE.map(function (v) {
              return (
                <div key={v.k} className="pf-glass nmc-card">
                  <div className="nmc-idx">{v.k}</div>
                  <h4>{v.t}</h4>
                  <p>{v.p}</p>
                </div>
              );
            })}
          </div>
          <PP.Solo src="phone-fh.html" demo="s38-b" badge="Trip mode, running"
            title="Trip mode, offering help and waiting to be accepted"
            note="The invitation being accepted: the trip card, Start Trip, then adding a route and choosing a destination before returning home. The owner drives every step. Nothing here happens because the system inferred permission. Hover to take over." />
          <div className="pf-glass nmc-card" style={{ maxWidth: 860 }}>
            <div className="nmc-idx">Prototype boundary</div>
            <p>
              The card in this build offers the accept path and a secondary route into managing the trip, and it can be
              hidden. The genuine Maybe later, a deferral with its own behavior that keeps the opportunity visible and
              does not re-ask, is specified in the model and is the interaction this mode exists to protect. Calling it
              out honestly matters more than pretending the build already ships it: a decorative secondary button is
              precisely the failure this mode was designed against.
            </p>
          </div>
        </section>

        <hr className="pf-rule" style={{ margin: 0 }} />

        <section className="nmc" style={{ gap: 22 }}>
          <Head3 kicker="Mode 03, Memory" title="Passive: retrospective value" />
          <BadgeRow>
            <Badge val>Validated concept</Badge>
            <Badge>Interruption right: none</Badge>
          </BadgeRow>
          <p className="nmc-sub">
            Memory demonstrates the opposite side of the system. The assistant can create value after the journey
            without demanding attention at the moment the owner is most likely to want the product to disappear. In the
            build, the completed Maine trip has already resolved into a summary: three destinations, 950 miles, total
            cost, average efficiency. Nothing announces it. It is simply there when the owner comes back.
          </p>
          <div className="nmc-stack" style={{ gap: 12, maxWidth: 900 }}>
            <EvRow
              aLabel="What the research showed"
              a="After arrival, the same level of intervention became less welcome. The value of the trip record was real, but it belonged to the owner returning to it."
              bLabel="What the design does"
              b="The assistant assembles the record and then waits. The trip summary sits below the planning screen, above Plan a new trip, where a returning owner will find it."
            />
          </div>
          <PP.Solo src="phone-fh.html" badge="Memory mode, waiting" status="not driven, deliberately"
            title="Memory mode, which does not come to you"
            note="The other two prototypes on this page demonstrate themselves. This one will not, and that is the mode working correctly: the summary is already assembled below Trip Planning, and reaching it is the reader's move to make. An animation here would contradict the finding it is built on." />
          <p className="nmc-sub" style={{ fontSize: 14.5 }}>
            This is the mode that proves the model is not simply an argument for more automation. A system that only
            knew how to be helpful would have pushed the summary the moment the trip ended, and that is exactly where
            the study said the experience crossed into intrusion.
          </p>
        </section>

        <hr className="pf-rule" style={{ margin: 0 }} />

        <section className="nmc" style={{ gap: 22 }}>
          <Head3 kicker="Also published" title="The concept prototype, hosted on its own site"
            sub="The same concept in its presentation form, published from Figma Sites. It is useful for walking the narrative end to end. It lives on its own domain rather than inside this page, so it opens in a new tab." />
          <div className="pf-glass" style={{ padding: "clamp(20px, 2vw, 28px)", display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 18 }}>
            <div style={{ minWidth: 0 }}>
              <div className="nmc-idx" style={{ marginBottom: 8 }}>Published prototype</div>
              <p className="pf-body" style={{ margin: 0, maxWidth: 560, fontSize: 13.5 }}>
                The presentation build of the assistant concept. Externally hosted, so it is linked rather than
                embedded here.
              </p>
            </div>
            <a href={FIGMA} target="_blank" rel="noopener noreferrer" className="pf-btn pf-btn--primary gv-lift" style={{ flex: "none", textDecoration: "none" }}>
              Open prototype
              <i data-lucide="arrow-up-right" style={{ width: 16, height: 16, opacity: 0.8 }} />
            </a>
          </div>
        </section>
      </div>
    );
  }

  /* ============================================================
     OUTCOME
     ============================================================ */
  function OutcomePanel() {
    return (
      <div className="nmc cs-tab">
        <SectionHead kicker="Outcome" title="The outcome was a behavioral framework, not more AI"
          lead="The work validated that owners were receptive to an intelligent vehicle companion. The more durable result was a way of deciding how that companion should behave, which outlasts any particular feature it was tested with." />

        <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))" }}>
          <div className="pf-glass pf-glass--thick nmc-card" style={{ justifyContent: "center" }}>
            <div className="pf-num" style={{ fontSize: "clamp(26px, 2.6vw, 34px)", fontWeight: 300, lineHeight: 1, color: "var(--accent)" }}>&gt;80%</div>
            <p className="pf-h3" style={{ margin: "18px 0 0", fontSize: "clamp(15px, 1.4vw, 18px)", fontWeight: 300, color: "var(--label-primary)" }}>
              of participants indicated they would use the tested service again and would be willing to pay for it.
            </p>
          </div>
          <div className="pf-glass pf-glass--thick nmc-card" style={{ justifyContent: "center" }}>
            <div className="pf-num" style={{ fontSize: "clamp(26px, 2.6vw, 34px)", fontWeight: 300, lineHeight: 1, color: "var(--accent)" }}>3</div>
            <p className="pf-h3" style={{ margin: "18px 0 0", fontSize: "clamp(15px, 1.4vw, 18px)", fontWeight: 300, color: "var(--label-primary)" }}>
              interruption rights, decided by consequence and moment: interrupt, invite, wait.
            </p>
          </div>
          <div className="pf-glass pf-glass--thick nmc-card" style={{ justifyContent: "center" }}>
            <div className="pf-num" style={{ fontSize: "clamp(26px, 2.6vw, 34px)", fontWeight: 300, lineHeight: 1, color: "var(--accent)" }}>7</div>
            <p className="pf-h3" style={{ margin: "18px 0 0", fontSize: "clamp(15px, 1.4vw, 18px)", fontWeight: 300, color: "var(--label-primary)" }}>
              factors the system weighs before it decides which mode answers a moment.
            </p>
          </div>
        </div>

        <section className="nmc" style={{ gap: 22 }}>
          <Head3 kicker="The finding that lasts" title="Autonomy is valuable when consequence, urgency, and context justify it"
            sub="And it is intrusive when the system keeps acting after the value of intervention has fallen. That sentence is the whole framework, and it is what the five-moment simulation was built to produce." />
          <div className="pf-glass pf-glass--thick" style={{ padding: "clamp(30px, 4.5vw, 58px)" }}>
            <div className="pf-eyebrow" style={{ marginBottom: 18, color: "var(--accent)" }}>Calibrated proactivity</div>
            <p className="pf-h2" style={{ margin: 0, maxWidth: 880, fontSize: "clamp(18px, 2vw, 26px)", fontWeight: 300, lineHeight: 1.35 }}>
              Use intelligence to reduce effort and uncertainty, while preserving a clear boundary around user attention
              and control.
            </p>
          </div>
        </section>

        <section className="nmc" style={{ gap: 22 }}>
          <Head3 kicker="What transferred" title="A product principle I now use well beyond automotive AI" />
          <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))" }}>
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">Principle</div>
              <h4>Preserve the user value, not the technical solution</h4>
              <p>
                The goal is not to defend the most advanced architecture in the deck. It is to keep the value intact
                when technical reality changes. Real-time prediction was unaffordable. Confidence, reassurance, timely
                help, and fewer decisions under stress were not, once I stopped treating them as properties of the
                architecture.
              </p>
            </div>
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">Method</div>
              <h4>Test the journey when the variable is behavior</h4>
              <p>
                A feature test would have returned a preference. Running one arc twice, and rating each moment inside
                it, returned a rule. When the design question is about initiative, timing, or attention, the study has
                to have time in it.
              </p>
            </div>
          </div>
        </section>

        <section className="nmc" style={{ gap: 16 }}>
          <Head3 kicker="Status and attribution" title="What this is, stated plainly" />
          <BadgeRow>
            <Badge val>Validated concept</Badge>
            <Badge>Future experience</Badge>
            <Badge hyp>Not production software</Badge>
          </BadgeRow>
          <div className="pf-glass nmc-card" style={{ maxWidth: 880 }}>
            <p>
              This assistant is a concept validated in a simulation study and prototyped as a working app state. It is
              not a shipped MySubaru feature, and it was not launched to owners. The retention, enrollment, and usage
              numbers reported in the MySubaru cases come from the staged rollout of the redesign and the onboarding
              work: none of them are attributable to this assistant, and this case makes no claim on them.
            </p>
          </div>
        </section>

        <section className="pf-glass pf-glass--thick" style={{ padding: "clamp(26px, 3.4vw, 44px)", display: "flex", flexDirection: "column", gap: 12 }}>
          <div className="pf-eyebrow" style={{ color: "var(--accent)" }}>Related case</div>
          <p className="pf-h3" style={{ margin: 0, fontSize: "clamp(16px, 1.5vw, 20px)", fontWeight: 300, maxWidth: 820 }}>
            MySubaru Experience Redesign: the vehicle, trip, service, and guidance system that made this assistant
            possible.
          </p>
          <p className="pf-body" style={{ margin: 0, fontSize: 13.5, color: "var(--label-tertiary)" }}>
            That case covers the homepage, the information architecture, and the retention work this concept sits on top
            of. Open it from All Work, or from the case paging at the foot of this page.
          </p>
        </section>
      </div>
    );
  }

  /* ---------- register ---------- */
  window.CASE_PANELS = window.CASE_PANELS || {};
  const reg = window.CASE_PANELS["subaru-agentic-ai"] = window.CASE_PANELS["subaru-agentic-ai"] || {};

  reg.Opening = OpeningPanel;
  reg.Research = ResearchPanel;
  reg.Ideation = IdeationPanel;
  reg.Testing = TestingPanel;
  reg.Iterations = IterationsPanel;
  reg.Prototype = PrototypePanel;
  reg.Outcome = OutcomePanel;
})();
