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

function BlogSampleReport() {
  const [cite, setCite] = React.useState(null); // which citation is open
  const cites = {
    c1: { ref: "STUDY · COMFORT MANDATE · 92% OF RESPONDENTS", body: "\"It has to be comfortable, number one… if it's not comfortable, then I will not wear it [even if it's a major brand].\" — Participant verbatim, comfort-driver theme. Comfort was the single most-cited deal-breaker across 259 buyers." },
    c2: { ref: "STUDY · SOCIAL PROOF · 73% OF RESPONDENTS", body: "\"I would look online first to check out the reviews… I like to go for the higher review. Even if the item costs more… I would lean towards that product.\" — Participant verbatim, trust theme. 73% trust a stranger's review over a major brand's ad campaign." },
  };

  const personas = [
    { share: "30–35%", tag: "MAIN PERSONA", name: "The Comfort Convert", quote: "I don't care what brand it is as long as it's comfortable and it looks good. If it feels right, I'm buying it.", about: "Buys from the Giants out of habit, not love — zero emotional loyalty to a logo. Win them once on hand-feel and you keep them." },
    { share: "15–20%", tag: "EASY WIN", name: "The Smart-Money Buyer", quote: "I look for quality, prices, and how long it lasts. I don't care about the brand, I care about getting my money's worth.", about: "Knows the manufacturing game and the \"logo tax.\" Wants the same technical specs without the markup; judges on substance, not hype." },
    { share: "15–20%", tag: "GIANT SLAYER", name: "The Feature Detective", quote: "I look for specific features… breathability, durability… I check the reviews to see if it holds up over time.", about: "Ignores marketing gloss and heads straight for the 1-star reviews. If your specs survive scrutiny, you win their trust." },
    { share: "10–15%", tag: "GIANT SLAYER", name: "The Underserved Fit-Seeker", quote: "It would be easier if they offered more sizes. Being a plus-size woman, it's very challenging to find comfortable, good-looking items.", about: "41% of women feel alienated by the Giants' sizing. A loyal, hungry market — once you fit them, switching risk keeps them." },
    { share: "5–10%", tag: "GIANT SLAYER", name: "The Anti-Brand Skeptic", quote: "I'm not a follower… I stick to what I like and what I know — not what these people are getting paid to endorse.", about: "Immune to celebrity endorsement. Levels the playing field: you don't need a celebrity budget to earn their trust." },
  ];

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

      {/* HERO */}
      <header className="rpt-hero">
        <div className="container">
          <div className="rpt-hero__grid">
            <div>
              <div className="article__lane">
                <b>SAMPLE REPORT</b>
                <span>·</span>
                <span>CONSUMER / SPORTSWEAR</span>
                <span>·</span>
                <span>FIELDED OCT 2025</span>
              </div>
              <h1 className="rpt-hero__title">
                The challenger's playbook: beating the Giants in sportswear.
              </h1>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 4 }}>
                <Tag dot accent>SOURCE-LINKED</Tag>
                <Tag>ANONYMIZED</Tag>
                <Tag>n = 259</Tag>
                <Tag>US MARKET</Tag>
              </div>
            </div>

            <dl className="rpt-hero__meta">
              <div><dt>METHOD</dt><dd>AI-moderated interviews + video testing</dd></div>
              <div><dt>SAMPLE</dt><dd>259 usable (1,217 screened)</dd></div>
              <div><dt>AUDIENCE</dt><dd>US buyers, 4+ purchases / year</dd></div>
              <div><dt>SPLIT</dt><dd>52% male · 47% female · ages 25–54</dd></div>
              <div><dt>BUDGET</dt><dd>$50–$300 per purchase</dd></div>
              <div><dt>SHIPPED</dt><dd>1 week, brief to verdict</dd></div>
            </dl>
          </div>
        </div>
      </header>

      {/* EXECUTIVE SUMMARY */}
      <section className="rpt-summary">
        <div className="container">
          <div className="eyebrow">EXECUTIVE SUMMARY · OPEN</div>
          <p className="rpt-summary__lead" style={{ marginTop: 20 }}>
            Across 259 US sportswear buyers, the market has shifted from brand worship to proven value. For 92% of shoppers, comfort — not the logo — is the ultimate deal-breaker{" "}
            <button className={"report-open__cite" + (cite === "c1" ? " is-open" : "")} onClick={() => setCite(cite === "c1" ? null : "c1")} aria-expanded={cite === "c1"}>[COMFORT 92%]</button>,{" "}
            and 73% now trust a stranger's review over an incumbent's ad campaign{" "}
            <button className={"report-open__cite" + (cite === "c2" ? " is-open" : "")} onClick={() => setCite(cite === "c2" ? null : "c2")} aria-expanded={cite === "c2"}>[TRUST 73%]</button>.{" "}
            While the Giants fight over status, the consumer is begging for substance — and that gap is the challenger's opening.
          </p>
          {cite && (
            <div className="report-open__evidence">
              <div className="report-open__evidence-ref">{cites[cite].ref}</div>
              <div className="report-open__evidence-body">{cites[cite].body}</div>
            </div>
          )}

          <div className="rpt-summary__stats">
            {[
              { v: "92%", l: "comfort is the ultimate deal-breaker" },
              { v: "73%", l: "trust peer reviews over big-brand ads" },
              { v: "68%", l: "see through celebrity endorsements" },
              { v: "259", l: "qualified buyers interviewed" },
            ].map((s) => (
              <div key={s.l} className="rpt-summary__stat">
                <div className="rpt-summary__stat-value">{s.v}</div>
                <div className="rpt-summary__stat-label">{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* KEY FINDINGS */}
      <section className="rpt-findings">
        <div className="container">
          <div className="eyebrow">KEY FINDINGS · OPEN</div>
          <h2 style={{ fontSize: 36, fontWeight: 500, letterSpacing: "-0.025em", marginTop: 16, marginBottom: 8, maxWidth: "26ch", lineHeight: 1.05 }}>
            Five findings — the Giants' blind spots, ranked.
          </h2>
          <p style={{ fontSize: 16, color: "var(--fg-muted)", maxWidth: "60ch", lineHeight: 1.5 }}>
            Each finding links to its source evidence — verbatim quotes, behavioral signals, and the share of respondents who voiced it. The full evidence layer ships in the downloadable report.
          </p>

          <div className="rpt-findings__grid">
            <article className="rpt-finding rpt-finding--hi">
              <div className="rpt-finding__head"><span className="rpt-finding__num">FINDING 01</span><Tag dot accent>HIGH IMPACT</Tag></div>
              <h3 className="rpt-finding__title">The Comfort Mandate — feel beats logo</h3>
              <p className="rpt-finding__quote">"It has to be comfortable, number one… if it's not comfortable, then I will not wear it."</p>
              <div className="rpt-finding__meta"><span>92% of respondents</span><span>top deal-breaker</span><span>loyalty weakest here</span></div>
              <EmotionTimeline moments={[0.12, 0.34, 0.58, 0.81]} />
            </article>

            <article className="rpt-finding">
              <div className="rpt-finding__head"><span className="rpt-finding__num">FINDING 02</span><Tag dot accent>HIGH IMPACT</Tag></div>
              <h3 className="rpt-finding__title">The Authenticity Gap — trust people, not billboards</h3>
              <p className="rpt-finding__quote">"I would look online first to check out the reviews… I'd lean towards the higher-reviewed product even if it costs more."</p>
              <div className="rpt-finding__meta"><span>73% of respondents</span><span>peer &gt; ad</span></div>
              <Confidence pct={0.73} label="SHARE OF RESPONDENTS" />
            </article>

            <article className="rpt-finding">
              <div className="rpt-finding__head"><span className="rpt-finding__num">FINDING 03</span><Tag>MED IMPACT</Tag></div>
              <h3 className="rpt-finding__title">Celebrity Fatigue — endorsements are wasted spend</h3>
              <p className="rpt-finding__quote">"I know they're being paid to say it… I stick to what resonates with me, not what these people are getting paid to endorse."</p>
              <div className="rpt-finding__meta"><span>68% of respondents</span><span>authenticity is free</span></div>
              <Confidence pct={0.68} label="SHARE OF RESPONDENTS" />
            </article>

            <article className="rpt-finding">
              <div className="rpt-finding__head"><span className="rpt-finding__num">FINDING 04</span><Tag>MED IMPACT</Tag></div>
              <h3 className="rpt-finding__title">Sizing Failure — the Giants' supply-chain weakness</h3>
              <p className="rpt-finding__quote">"I wish when you shop online they told you exactly how the sizing may fit… just more information."</p>
              <div className="rpt-finding__meta"><span>47% of respondents</span><span>precision wins</span></div>
              <Confidence pct={0.47} label="SHARE OF RESPONDENTS" />
            </article>

            <article className="rpt-finding">
              <div className="rpt-finding__head"><span className="rpt-finding__num">FINDING 05</span><Tag>LOW IMPACT</Tag></div>
              <h3 className="rpt-finding__title">Value Seekers — the "brand tax" backlash</h3>
              <p className="rpt-finding__quote">"I don't have brand loyalty. Whoever has a good deal going on, that's who I go with — especially if I like how it feels."</p>
              <div className="rpt-finding__meta"><span>38% of respondents</span><span>transparent quality</span></div>
              <Confidence pct={0.38} label="SHARE OF RESPONDENTS" />
            </article>
          </div>

          <div style={{ marginTop: 32 }}>
            <h3 style={{ fontSize: 19, fontWeight: 500, letterSpacing: "-0.01em" }}>Lead recommendation surfaced from Finding 01</h3>
            <div className="card card--accent" style={{ marginTop: 14 }}>
              <div className="card__label"><span className="card__label-dot" /> RECOMMENDATION · DEFENSIBLE</div>
              <p style={{ fontSize: 19, fontWeight: 500, letterSpacing: "-0.005em", marginTop: 6, marginBottom: 12 }}>
                Own "Radical Comfort." Stop selling the sport — sell the feeling. Lead with sensory language ("buttery soft," "no-pinch"), back it with a comfort guarantee, and attack the functional friction the Giants ignore.
              </p>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                <Tag dot accent>92% COMFORT-LED</Tag>
                <Tag>ANTI-CELEBRITY UGC</Tag>
                <Tag>TRANSPARENT VALUE</Tag>
                <Tag>259 PARTICIPANTS</Tag>
              </div>
              <Confidence pct={0.92} label="EVIDENCE STRENGTH" />
            </div>
          </div>
        </div>
      </section>

      {/* SAMPLE OF EVIDENCE */}
      <section className="rpt-findings">
        <div className="container">
          <div className="eyebrow">EVIDENCE PREVIEW · OPEN</div>
          <h2 style={{ fontSize: 28, fontWeight: 500, letterSpacing: "-0.02em", marginTop: 16, marginBottom: 24, maxWidth: "30ch" }}>
            One verbatim behind the value theme.
          </h2>
          <div className="card" style={{ maxWidth: 760 }}>
            <Transcript time="—" speaker="VALUE THEME · 85%">
              "I'd rather pay extra for better durability because I know <span className="transcript__highlight">they're gonna last a lot longer</span>… I won't go back and buy cheap stuff."
            </Transcript>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 12 }}>
              <Tag dot accent>DURABILITY · 85%</Tag>
              <Tag>THEME · VALUE</Tag>
              <Tag>FINDING 05</Tag>
            </div>
          </div>
        </div>
      </section>

      {/* PERSONAS */}
      <section className="rpt-findings">
        <div className="container">
          <div className="eyebrow">PERSONAS · OPEN</div>
          <h2 style={{ fontSize: 28, fontWeight: 500, letterSpacing: "-0.02em", marginTop: 16, marginBottom: 8, maxWidth: "32ch" }}>
            Five challenger personas — who you can steal from the Giants.
          </h2>
          <p style={{ fontSize: 16, color: "var(--fg-muted)", maxWidth: "60ch", lineHeight: 1.5, marginBottom: 24 }}>
            Segmented from interview behavior and verbatim language, each with its share of the sample and the line that defines it.
          </p>
          <div className="rpt-findings__grid">
            {personas.map((p) => (
              <article key={p.name} className="rpt-finding">
                <div className="rpt-finding__head"><span className="rpt-finding__num">{p.share}</span><Tag dot={p.tag === "MAIN PERSONA"} accent={p.tag === "MAIN PERSONA"}>{p.tag}</Tag></div>
                <h3 className="rpt-finding__title">{p.name}</h3>
                <p className="rpt-finding__quote">"{p.quote}"</p>
                <p style={{ fontSize: 14, color: "var(--fg-muted)", lineHeight: 1.5, margin: 0 }}>{p.about}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* GATE → get your own study (we don't share client reports; routes to the demo) */}
      <section className="rpt-gate" style={{ background: "color-mix(in oklab, var(--accent) 4%, var(--bg))" }}>
        <div className="rpt-gate__fade" />
        <div className="container" style={{ maxWidth: 720 }}>
          <div className="rpt-gate__eyebrow">YOUR STUDY, YOUR CUSTOMERS</div>
          <h2 className="rpt-gate__title">
            This is one real study, anonymized. The next one could be about your customers.
          </h2>
          <p className="rpt-gate__desc">
            We don't share client reports — but we'll run a study like this one on your audience and hand you the
            full evidence trail: every finding traceable to a clip, a transcript, and a segment. Book a 30-minute
            working session and we'll scope it against a real question of yours.
          </p>
          <div style={{ marginTop: 8 }}>
            <a className="btn btn--primary btn--lg" href="/#demo">Get a demo <span className="btn-arrow">&rarr;</span></a>
          </div>
        </div>
      </section>

      {/* RELATED */}
      <section className="related">
        <div className="container">
          <div className="related__title">RELATED REPORTS · SAME LANE</div>
          <div className="related__grid">
            <a className="postcard postcard--report" href="/blog/food-ad-emotion-test.html">
              <div className="postcard__lane"><span><b>REPORT</b> · 12 min</span><span>Feb 2025</span></div>
              <h3 className="postcard__title">Two ad creatives, 244 faces — what emotion data said before launch</h3>
              <p className="postcard__excerpt">A national food brand A/B-tested two pre-roll cuts with video emotion capture. The signal was a Surprise spike invisible in the aggregate.</p>
              <div className="postcard__meta"><strong>NeroView Research</strong><span>CPG</span></div>
            </a>
            <a className="postcard postcard--report" href="/blog/consumer-product-reaction.html">
              <div className="postcard__lane"><span><b>REPORT</b> · 11 min</span><span>Jun 2025</span></div>
              <h3 className="postcard__title">A consumer-product reaction study, frame by frame</h3>
              <p className="postcard__excerpt">89 of 112 rated interest 8-plus, but faces stayed mild — and the top blocker was price ambiguity.</p>
              <div className="postcard__meta"><strong>NeroView Research</strong><span>CPG</span></div>
            </a>
            <a className="postcard" href="/blog/synthetic-vs-human.html">
              <div className="postcard__lane"><span><b>INDEX</b> · 7 min</span><span>May 6</span></div>
              <h3 className="postcard__title">Synthetic vs. human research: when each one wins</h3>
              <p className="postcard__excerpt">A decision matrix: where synthetic respondents earn the call, and where they quietly mislead.</p>
              <div className="postcard__meta"><strong>NeroView Research</strong><span>Methodology</span></div>
            </a>
          </div>
        </div>
      </section>

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

      <Footer />
    </div>
  );
}

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