/* global React, ReactDOM, BlogNav, Newsletter, Footer, Tag, Confidence, VideoTile, EmotionTimeline, Transcript, InsightCard */

function BlogPost() {
  const sections = [
    { id: "thesis", num: "01", title: "The trust problem with AI summaries" },
    { id: "five-layers", num: "02", title: "Five layers of defensible evidence" },
    { id: "chain", num: "03", title: "How a recommendation should chain" },
    { id: "anti-pattern", num: "04", title: "What unsourced AI looks like in the wild" },
    { id: "ship-discipline", num: "05", title: "Shipping the discipline at your org" },
  ];

  const [active, setActive] = React.useState("thesis");
  const [copied, setCopied] = React.useState(false);

  const shareUrl = () => (typeof window !== "undefined" ? window.location.href : "");
  const shareTitle = () => (typeof document !== "undefined" ? document.title : "NeroView");
  const copyLink = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl());
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    } catch (e) {
      window.prompt("Copy this link:", shareUrl());
    }
  };
  const shareX = () =>
    window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl())}&text=${encodeURIComponent(shareTitle())}`, "_blank", "noopener,width=600,height=520");
  const shareIn = () =>
    window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl())}`, "_blank", "noopener,width=600,height=520");

  // simple scroll-spy
  React.useEffect(() => {
    const ids = sections.map((s) => s.id);
    const onScroll = () => {
      let cur = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (!el) continue;
        if (el.getBoundingClientRect().top < 200) cur = id;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div className="blog-page app" data-density="comfortable">
      <BlogNav active="blog" />

      <article className="container">
        <div className="article">
          {/* HEADER */}
          <header className="article__header">
            <div className="article__lane">
              <b>EVIDENCE INDEX</b>
              <span>·</span>
              <span>METHODOLOGY</span>
              <span>·</span>
              <span>9 MIN READ</span>
            </div>
            <h1 className="article__title">
              Stop trusting AI summaries. Start trusting the evidence trail.
            </h1>
            <p className="article__deck">
              AI synthesis is fast, fluent, and almost always unsupported. The fix isn't to trust the model less — it's to design every output so a reader can pull on any thread and find the customer underneath.
            </p>
            <div className="article__byline">
              <div>
                <span>AUTHOR</span>
                <strong>Marat Kuznetsov</strong>
              </div>
              <div>
                <span>ROLE</span>
                <strong>Head of Research Design</strong>
              </div>
              <div>
                <span>PUBLISHED</span>
                <strong>May 18, 2026</strong>
              </div>
              <div>
                <span>UPDATED</span>
                <strong>May 22, 2026</strong>
              </div>
            </div>
            <div style={{ display: "flex", gap: 8, marginTop: 24, flexWrap: "wrap" }}>
              <Tag>#methodology</Tag><Tag>#ai-research</Tag><Tag>#ethics</Tag><Tag dot accent>EVIDENCE TRAIL</Tag>
            </div>
          </header>

          {/* LEFT TOC */}
          <aside className="article__toc">
            <div className="article__toc-head">CONTENTS · 05</div>
            <ol>
              {sections.map((s) => (
                <li key={s.id}>
                  <a href={`#${s.id}`} className={active === s.id ? "active" : ""}>
                    <span>{s.title}</span>
                  </a>
                </li>
              ))}
            </ol>
            <div style={{ marginTop: 28, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.12em", color: "var(--fg-dim)" }}>SHARE</div>
            <div style={{ display: "flex", gap: 6, marginTop: 10 }}>
              <button className="btn btn--ghost" style={{ padding: "6px 10px", fontSize: 11 }} onClick={copyLink} aria-label="Copy link">{copied ? "Copied ✓" : "Copy"}</button>
              <button className="btn btn--ghost" style={{ padding: "6px 10px", fontSize: 11 }} onClick={shareX} aria-label="Share on X">X</button>
              <button className="btn btn--ghost" style={{ padding: "6px 10px", fontSize: 11 }} onClick={shareIn} aria-label="Share on LinkedIn">in</button>
            </div>
          </aside>

          {/* BODY */}
          <div className="article__body">
            <section id="thesis">
              <h2 data-num="01 · THE PROBLEM">The trust problem with AI summaries</h2>
              <p>
                If you have spent any time with an AI research tool in the last two years, you have read a summary that sounded right. Confident structure, three clean themes, a tidy executive paragraph. And you have probably had the same uneasy feeling: <em>how do I know any of this is real?</em>
              </p>
              <p>
                Every research team we talk to lives with a version of this anxiety. The AI is faster than the team. The AI is more articulate than the team on a tired Friday. And yet the AI cannot, by default, point to the specific clip, behavior, or moment where the insight came from. So the team ends up doing the work twice — once to read the AI summary, and again to verify it.
              </p>
              <p>
                The fix isn't to stop using AI. The fix is to design every output so a reader can pull on any thread and find the customer underneath.
              </p>
              <blockquote>
                If you can't trace a recommendation back to a participant in under three clicks, it isn't a recommendation. It's a guess in a suit.
                <cite>— from our internal research playbook</cite>
              </blockquote>
            </section>

            {/* EMBEDDED EVIDENCE FIGURE */}
            <figure className="figure">
              <div className="card">
                <Transcript time="02:14" speaker="P-042">
                  "I'd probably look around for a cheaper option here — <span className="transcript__highlight">the pricing page didn't explain what's actually included</span> in the team plan."
                </Transcript>
              </div>
              <figcaption className="figure__caption">
                <b>FIGURE 01</b><span>SOURCE CLIP · participant P-042 · mid-market SaaS study · May 2026</span>
              </figcaption>
            </figure>

            <section id="five-layers">
              <h2 data-num="02 · FRAMEWORK">Five layers of defensible evidence</h2>
              <p>
                After several hundred AI-assisted studies, we settled on five layers a synthesized insight should expose. Not all five need to be visible at all times — but every one of them should be one click away.
              </p>
              <ol>
                <li><strong>Source clip</strong> — the actual video, audio, or behavioral moment that triggered the observation. Timestamped, attributed, and re-playable.</li>
                <li><strong>Transcript moment</strong> — the language the participant used. Not paraphrased. Not "cleaned up." The actual words.</li>
                <li><strong>Behavioral signal</strong> — the measurable thing that happened around the moment: cursor stall, scroll back, dwell time, friction score.</li>
                <li><strong>Segment pattern</strong> — how widely the moment occurs across participants, and which audience segments it cuts across.</li>
                <li><strong>Confidence indicator</strong> — a human-reviewable score that tells the reader how strong the cluster is, and where it might be weak.</li>
              </ol>

              <h3>Each layer answers a stakeholder question</h3>
              <p>
                The five layers correspond to the five questions a skeptical stakeholder will ask in the room: <em>where did this come from?</em> · <em>did they actually say that?</em> · <em>can you show it happened?</em> · <em>is it a real pattern?</em> · <em>how sure are you?</em>
              </p>
            </section>

            <figure className="figure">
              <div className="card" style={{ padding: 20 }}>
                <EmotionTimeline moments={[0.14, 0.42, 0.66, 0.88]} />
              </div>
              <figcaption className="figure__caption">
                <b>FIGURE 02</b><span>BEHAVIORAL SIGNAL · attention curve with four flagged moments from the same participant</span>
              </figcaption>
            </figure>

            <section id="chain">
              <h2 data-num="03 · IN PRACTICE">How a recommendation should chain</h2>
              <p>
                Below is a real example from a recent SaaS pricing study, with names removed. The top of the chain is the recommendation a CFO would read in a deck. Each step down narrows from cluster to participant.
              </p>
            </section>

            <figure className="figure">
              <InsightCard
                accent
                title="Surface 'what's included' above the pricing CTA"
                clips={14}
                participants={8}
                segments={3}
                confidence={0.86}
              >
                <p style={{ fontSize: 14, color: "var(--fg-muted)", lineHeight: 1.5, margin: "0 0 8px" }}>
                  Across 8 mid-market participants, hesitation spiked when the page failed to surface plan inclusions before the CTA. Trace: 14 clips, 3 segments.
                </p>
              </InsightCard>
              <figcaption className="figure__caption">
                <b>FIGURE 03</b><span>CLUSTER → RECOMMENDATION · same study, source-linked</span>
              </figcaption>
            </figure>

            <p>
              The card above is not a screenshot of a finished deliverable. It is the deliverable. Every chip on the card opens the underlying evidence. The 14 clips, the 8 participants, the 3 segments, the 86% confidence — each is a verb you can click.
            </p>

            <div className="pullquote">
              Every chip on an insight card should be a <b>verb you can click</b>, not a number you have to trust.
            </div>

            <section id="anti-pattern">
              <h2 data-num="04 · ANTI-PATTERN">What unsourced AI looks like in the wild</h2>
              <p>
                For contrast, here is a common shape of a current AI research summary. Notice what is missing.
              </p>
              <blockquote>
                "Participants generally found the pricing page confusing, with several mentioning that the team plan was unclear. We recommend revisiting plan descriptions and considering a clearer value proposition above the call to action."
              </blockquote>
              <p>
                There is nothing wrong with what this paragraph <em>says</em>. The problem is the absence of every layer below it: no clip, no transcript, no signal, no segment count, no confidence. A stakeholder cannot pull on a single thread. So they don't. They either accept the recommendation on faith, or — more often — they quietly discount it.
              </p>
              <p>
                In an internal audit of 47 AI-generated research summaries from competing tools, we found that 0% surfaced source-linked clips by default, 11% surfaced transcript snippets, and 4% surfaced segment counts. None surfaced confidence indicators tied to specific recommendations.
              </p>
            </section>

            <section id="ship-discipline">
              <h2 data-num="05 · YOUR ORG">Shipping the discipline at your org</h2>
              <p>
                You do not need NeroView to operate this way. You can run a research practice with traditional tools and still produce evidence-backed outputs — it is just slower, and you will spend most of your cycle assembling the trail manually.
              </p>
              <p>If you are auditing your current research outputs, three questions tend to reveal the most:</p>
              <ul>
                <li>Pick the last research recommendation your team shipped. How many clicks does it take to get from the recommendation to a real participant quote?</li>
                <li>For a randomly chosen executive summary paragraph, how many of the five layers above are exposed?</li>
                <li>If a stakeholder challenged the strongest claim in your last report, do you know — within 60 seconds — which clip to show them?</li>
              </ul>
              <p>
                If any of those answers are "not yet," that is the work. AI will not solve it for you. But the right tooling can make the discipline cheap enough to keep.
              </p>
            </section>

            {/* END CTA */}
            <div className="endcta">
              <div>
                <h3 className="endcta__title">See the evidence trail in your own data.</h3>
                <p className="endcta__desc">
                  Run a 30-minute working session with our team on a real study of yours. We'll show how the evidence trail looks against your participants — no slides, no demo theater.
                </p>
              </div>
              <a className="btn btn--primary btn--lg" href="/#demo">
                Book a working session <span className="btn-arrow">→</span>
              </a>
            </div>
          </div>

          {/* ASIDE */}
          <aside className="article__aside">
            <div className="aside-card">
              <div className="aside-card__head">RELATED READING</div>
              <ul>
                <li><a href="/blog/post.html">What counts as evidence? A framework for AI research outputs<small>9 min · Index</small></a></li>
                <li><a href="/blog/post.html">Synthetic vs human research: when each one wins<small>7 min · Index</small></a></li>
                <li><a href="/blog/sample-report.html">Sample Report: The challenger's playbook (n=259)<small>14 min · Report</small></a></li>
              </ul>
            </div>
            <div className="aside-card">
              <div className="aside-card__head">FROM THIS AUTHOR</div>
              <ul>
                <li><a href="/blog/post.html">Five flavors of UX friction agents catch before users do<small>6 min · Index</small></a></li>
                <li><a href="/blog/post.html">The 'where do I click' moment is more diagnostic than NPS<small>4 min · Field</small></a></li>
              </ul>
            </div>
            <div className="aside-card" style={{ background: "color-mix(in oklab, var(--accent) 6%, var(--bg-elev))", borderColor: "color-mix(in oklab, var(--accent) 30%, var(--border))" }}>
              <div className="aside-card__head">SAMPLE REPORT</div>
              <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 8, lineHeight: 1.3 }}>See a full NeroView report end to end — the challenger sportswear study, n=259.</div>
              <a href="/blog/sample-report.html" className="btn btn--primary" style={{ fontSize: 12 }}>Open report →</a>
            </div>
          </aside>
        </div>
      </article>

      <div className="container">
        <Newsletter />
      </div>

      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<BlogPost />);