// View A — "Cover / Takeaways"
// Scrolling long-form summary organized around 10 analytical findings.
// Bold poster palette: blue (primary), yellow (highlight), red (emphasis).
// Full export — n=290 of ~700, fielded April 6 – June 19, 2026.
// Percentages are computed among respondents who answered each item.

function ViewA({ data }) {
  const { agg } = data;

  // ---------- Helpers ----------
  const PaletteBand = ({ color = THEME.blue, label, children, tone = 'light', tall = false }) => {
    const bg = tone === 'dark' ? THEME.ink : tone === 'blue' ? THEME.blue : tone === 'red' ? THEME.red : tone === 'yellow' ? THEME.yellow : THEME.paper;
    const fg = tone === 'dark' || tone === 'blue' || tone === 'red' ? THEME.paper : THEME.ink;
    return (
      <section style={{ background: bg, color: fg, padding: tall ? '80px 0' : '56px 0' }}>
        <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 56px' }}>
          {children}
        </div>
      </section>
    );
  };

  const Chapter = ({ num, kicker, color = THEME.blue }) => (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 20 }}>
      <span style={{
        fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 2, color,
        padding: '3px 8px', border: `1.5px solid ${color}`, textTransform: 'uppercase',
      }}>§ Finding {num}</span>
      <span style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: 'currentColor', opacity: 0.6, textTransform: 'uppercase' }}>{kicker}</span>
    </div>
  );

  const HeadlineSerif = ({ children, size = 56, color, italic = false }) => (
    <h2 style={{
      fontFamily: FONT_DISPLAY, fontWeight: 700, fontSize: size,
      lineHeight: 1.0, letterSpacing: -1.5, margin: 0,
      color: color || 'inherit', fontStyle: italic ? 'italic' : 'normal',
    }}>{children}</h2>
  );

  const Lede = ({ children, color }) => (
    <p style={{
      fontFamily: FONT_DISPLAY, fontSize: 22, lineHeight: 1.4, margin: '20px 0 0',
      color: color || 'inherit', maxWidth: 760, fontWeight: 400,
    }}>{children}</p>
  );

  const Body = ({ children, color }) => (
    <p style={{
      fontFamily: FONT_BODY, fontSize: 15.5, lineHeight: 1.6, margin: '14px 0 0',
      color: color || 'inherit', maxWidth: 680,
    }}>{children}</p>
  );

  // BIG NUMBER with label
  const Stat = ({ value, unit, label, color = THEME.red, inverse = false }) => (
    <div>
      <div style={{
        fontFamily: FONT_DISPLAY, fontWeight: 700, fontSize: 96,
        lineHeight: 0.88, letterSpacing: -3, color,
      }}>
        {value}{unit && <span style={{ fontSize: 40, fontWeight: 600, letterSpacing: -1, marginLeft: 2, color: inverse ? 'rgba(244,237,224,0.5)' : 'rgba(26,26,26,0.5)' }}>{unit}</span>}
      </div>
      {label && <div style={{ fontFamily: FONT_BODY, fontSize: 13, lineHeight: 1.4, marginTop: 10, color: inverse ? 'rgba(244,237,224,0.8)' : THEME.inkSoft, maxWidth: 280, fontWeight: 500 }}>{label}</div>}
    </div>
  );

  // Reason rank plot
  const ReasonRank = () => (
    <div>
      {agg.reasonPoints.slice(0, 8).map(([k, v], i) => {
        const rank1Count = (agg.rank1.find(r => r[0] === k) || [0, 0])[1];
        const max = agg.reasonPoints[0][1];
        return (
          <div key={k} style={{ display: 'grid', gridTemplateColumns: '24px 1fr 80px', gap: 12, alignItems: 'center', marginBottom: 10, padding: '6px 0', borderBottom: `1px solid ${THEME.rule}` }}>
            <span style={{ fontFamily: FONT_MONO, fontSize: 11, color: i < 3 ? THEME.red : THEME.inkMute, fontWeight: 700 }}>#{String(i+1).padStart(2,'0')}</span>
            <div>
              <div style={{ fontSize: 13, color: THEME.ink, marginBottom: 4, fontFamily: FONT_BODY }}>{k}</div>
              <div style={{ height: 6, background: i < 3 ? THEME.blue : `${THEME.blue}80`, width: `${(v/max)*100}%` }} />
            </div>
            <div style={{ textAlign: 'right', fontFamily: FONT_MONO, fontSize: 11, color: THEME.inkMute }}>
              <span style={{ color: THEME.red, fontWeight: 600 }}>{rank1Count}</span> #1s · {v}pt
            </div>
          </div>
        );
      })}
    </div>
  );

  return (
    <div style={{
      width: '100%', minHeight: '100%',
      background: THEME.paper, color: THEME.ink, fontFamily: FONT_BODY,
    }}>

      {/* ========== HERO ========== */}
      <PaletteBand tone="paper" tall>
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 20, marginBottom: 40, flexWrap: 'wrap' }}>
          <div style={{ fontFamily: FONT_MONO, fontSize: 17, fontWeight: 600, letterSpacing: 2.5, color: THEME.blue, textTransform: 'uppercase' }}>
            Field Lead Survey · Findings
          </div>
          <Stamp color={THEME.red} rotate={-4} style={{ fontSize: 15, fontWeight: 700, padding: '6px 12px', letterSpacing: 1.5 }}>
            Full export · n=290 of ~700
          </Stamp>
        </div>

        <h1 style={{
          fontFamily: FONT_DISPLAY, fontWeight: 800, fontSize: 96, lineHeight: 0.95, letterSpacing: -3,
          margin: 0, color: THEME.ink, maxWidth: 1080,
        }}>
          Who were the <span style={{ color: THEME.red }}>core volunteers</span> for Zohran,<br/>
          <span style={{ fontStyle: 'italic', color: THEME.blue }}>and what was their experience on the campaign?</span>
        </h1>

        <div style={{ maxWidth: 820, marginTop: 40, fontFamily: FONT_DISPLAY, fontSize: 24, lineHeight: 1.35, color: THEME.inkSoft }}>
          The full set of 290 responses to a survey of the field leads and volunteers who canvassed, led, and organized for Zohran Mamdani's 2025 NYC mayoral campaign. <span style={{ color: THEME.red, fontWeight: 600 }}>Ten findings</span> about mobilization, the canvassing experience, and what gets built when a campaign is also a site of leadership development.
        </div>

        <div style={{
          marginTop: 44, padding: '20px 24px', background: THEME.yellow,
          borderLeft: `6px solid ${THEME.ink}`,
          display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 20, alignItems: 'center',
        }}>
          <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.ink, fontWeight: 700 }}>
            READ ME<br/>FIRST
          </div>
          <div style={{ fontFamily: FONT_BODY, fontSize: 14, lineHeight: 1.5, color: THEME.ink }}>
            This report now reflects the <b>full survey export</b>: 290 of roughly 700 invited volunteers responded between April 6 and June 19, 2026 (a ~41% response rate); 207 completed the full instrument. Respondents who answer a long post-campaign survey still skew toward the most engaged end of the volunteer base — 97% of those asked were field leads — so the numbers below are a portrait of the committed core, not of every person who ever knocked a door. Percentages are computed among respondents who answered each item.
          </div>
        </div>

        <div style={{
          marginTop: 44, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24,
          borderTop: `2px solid ${THEME.ink}`, paddingTop: 32,
        }}>
          <Stat value="290" unit="/~700" label="Survey respondents" color={THEME.ink} />
          <Stat value="31" label="Median age of respondents" color={THEME.blue} />
          <Stat value="95" unit="%" label="Of respondents are DSA-affiliated (members at some point, or participants)" color={THEME.red} />
          <Stat value="66" unit="%" label="Reported their involvement increased substantially over the course of the campaign" color={THEME.blue} />
        </div>

        {/* Pointer to the supplementary analysis */}
        <a
          href="analysis/"
          style={{
            marginTop: 40, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            gap: 24, flexWrap: 'wrap', textDecoration: 'none',
            background: THEME.ink, color: THEME.paper, padding: '20px 26px',
            borderLeft: `6px solid ${THEME.yellow}`,
          }}
        >
          <span>
            <span style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.yellow, textTransform: 'uppercase' }}>
              Supplementary analysis
            </span>
            <span style={{ display: 'block', fontFamily: FONT_DISPLAY, fontSize: 22, fontWeight: 600, marginTop: 6, lineHeight: 1.2 }}>
              Personal recruitment and volunteer outcomes
            </span>
            <span style={{ display: 'block', fontFamily: FONT_BODY, fontSize: 13, marginTop: 6, color: 'rgba(244,237,224,0.8)', maxWidth: 640 }}>
              Recruitment rates at three linked stages, and how personally recruited respondents compare with the rest on every measured outcome, with significance tests.
            </span>
          </span>
          <span style={{ fontFamily: FONT_MONO, fontSize: 12, letterSpacing: 1.5, color: THEME.yellow, textTransform: 'uppercase', whiteSpace: 'nowrap' }}>
            Read it →
          </span>
        </a>
      </PaletteBand>

      {/* ========== FINDING 01 ========== */}
      <PaletteBand tone="blue">
        <Chapter num="01" kicker="Reframing the question" color={THEME.yellow} />
        <HeadlineSerif size={72} italic color={THEME.paper}>
          Less a <span style={{ color: THEME.yellow }}>mobilization</span> story<br/>
          than a <span style={{ color: THEME.yellow }}>deepening</span> one.
        </HeadlineSerif>

        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, marginTop: 40 }}>
          <Body color="rgba(244,237,224,0.9)">
            Only <b style={{ color: THEME.yellow }}>2%</b> of respondents reported no prior political involvement. 92% had previously attended a protest or rally, 81% had signed a petition, and <b style={{ color: THEME.yellow }}>72% had already volunteered on a prior campaign</b>. For this set of respondents, the Mamdani campaign does not appear to have been a point of initial political entry. The more productive question may be what the campaign <i>added</i> on top of an already-engaged base (skill development, escalation, identity, and durable organizational ties), which shifts the analytic frame from "how campaigns mobilize people" toward <b style={{ color: THEME.yellow }}>how campaigns develop people who are already in motion</b>.
          </Body>

          <div>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.yellow, marginBottom: 16 }}>SHARE WHO HAD ALREADY…</div>
            {[
              ['Attended a protest or rally', 92],
              ['Posted political content online', 87],
              ['Donated to a campaign or cause', 84],
              ['Signed a petition', 81],
              ['Contacted elected officials', 80],
              ['Volunteered for a campaign', 72],
              ['Been a member of a political organization', 55],
              ['Been a union member', 26],
            ].map(([label, pct]) => (
              <div key={label} style={{ marginBottom: 8 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: FONT_BODY, fontSize: 12, color: 'rgba(244,237,224,0.9)', marginBottom: 3 }}>
                  <span>{label}</span>
                  <span style={{ fontFamily: FONT_MONO, color: THEME.yellow, fontWeight: 600 }}>{pct}%</span>
                </div>
                <div style={{ height: 5, background: 'rgba(244,237,224,0.15)' }}>
                  <div style={{ height: '100%', width: `${pct}%`, background: THEME.yellow }} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </PaletteBand>

      {/* ========== FINDING 02 ========== */}
      <PaletteBand tone="paper">
        <Chapter num="02" kicker="The headline pattern" color={THEME.red} />
        <HeadlineSerif size={72} color={THEME.ink}>
          A <span style={{ color: THEME.red }}>leadership-development ratchet</span>.
        </HeadlineSerif>
        <Lede color={THEME.inkSoft}>
          Volunteer attrition is the norm in most campaigns that have been studied. Among these respondents, <b>85% reported that their involvement increased over time</b>, and two out of three said it increased <i>substantially</i>.
        </Lede>

        <div style={{ marginTop: 44, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
          {/* Giant stacked ratchet bar */}
          <div>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.inkMute, marginBottom: 16 }}>HOW INVOLVEMENT CHANGED OVER TIME</div>
            <div style={{ border: `2px solid ${THEME.ink}`, padding: 3, display: 'flex', height: 90 }}>
              {[
                { label: 'Increased substantially', pct: 66, color: THEME.red },
                { label: 'Increased somewhat', pct: 19, color: '#f59b67' },
                { label: 'Stayed same', pct: 9, color: THEME.neutral },
                { label: 'Decreased', pct: 5, color: THEME.blue },
              ].map(b => (
                <div key={b.label} style={{ width: `${b.pct}%`, background: b.color, display: 'flex', alignItems: 'flex-end', padding: 6, color: b.pct > 15 ? THEME.paper : 'transparent', fontSize: 11, fontFamily: FONT_MONO, fontWeight: 700 }}>
                  {b.pct}%
                </div>
              ))}
            </div>
            <div style={{ marginTop: 10, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, fontSize: 11, fontFamily: FONT_BODY, color: THEME.inkSoft }}>
              <div><span style={{ display: 'inline-block', width: 10, height: 10, background: THEME.red, marginRight: 6 }} />Substantially (66%)</div>
              <div><span style={{ display: 'inline-block', width: 10, height: 10, background: '#f59b67', marginRight: 6 }} />Somewhat (19%)</div>
              <div><span style={{ display: 'inline-block', width: 10, height: 10, background: THEME.neutral, marginRight: 6 }} />Same (9%)</div>
              <div><span style={{ display: 'inline-block', width: 10, height: 10, background: THEME.blue, marginRight: 6 }} />Decreased (5%)</div>
            </div>

            <Body color={THEME.inkSoft}>
              Something about this campaign's model appears to have <b>pulled respondents deeper rather than burning them out</b>. That pattern is the thing worth trying to explain.
            </Body>
          </div>

          <div>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.inkMute, marginBottom: 16 }}>WHY THEY KEPT COMING BACK</div>
            {[
              { label: 'Commitment to the mission', pct: 92, color: THEME.red },
              { label: 'Enjoyed the experience', pct: 85, color: THEME.red },
              { label: 'Felt the work mattered', pct: 82, color: THEME.red },
              { label: 'It became routine', pct: 69, color: THEME.blue },
              { label: 'Relationships with other volunteers', pct: 67, color: THEME.blue },
              { label: 'Wanted more leadership', pct: 67, color: THEME.blue },
              { label: 'Responsibility to the team', pct: 65, color: THEME.blue },
            ].map(r => (
              <div key={r.label} style={{ marginBottom: 10 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, fontFamily: FONT_BODY, color: THEME.ink, marginBottom: 3 }}>
                  <span>{r.label}</span>
                  <span style={{ fontFamily: FONT_MONO, color: r.color, fontWeight: 700 }}>{r.pct}%</span>
                </div>
                <div style={{ height: 6, background: 'rgba(26,26,26,0.06)' }}>
                  <div style={{ height: '100%', width: `${r.pct}%`, background: r.color }} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </PaletteBand>

      {/* ========== FINDING 03 — LEADERSHIP DEVELOPMENT (Q7) ========== */}
      <PaletteBand tone="dark" tall>
        <Chapter num="03" kicker="Leadership development · §Q7" color={THEME.yellow} />
        <HeadlineSerif size={72} color={THEME.paper}>
          Nearly three-quarters were<br/>
          <span style={{ color: THEME.yellow, fontStyle: 'italic' }}>personally asked</span> to lead.<br/>
          A majority went on to <span style={{ color: THEME.yellow, fontStyle: 'italic' }}>make the same ask</span>.
        </HeadlineSerif>
        <Lede color="rgba(244,237,224,0.9)">
          Becoming a field lead was rarely a form you filled out. In the survey's leadership-development section, respondents describe it as a <b style={{ color: THEME.yellow }}>social interaction</b>: someone watched them work, named them as a potential leader, and asked — often more than once. And the scouting was designed, not spontaneous: field leads report being explicitly told to scope out canvassers who might make good leads themselves.
        </Lede>

        <div style={{ marginTop: 44, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 36 }}>
          <div style={{ padding: 28, border: `2px solid ${THEME.yellow}` }}>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.yellow, marginBottom: 10 }}>
              "DID ANYONE PERSONALLY ASK YOU TO TAKE ON GREATER RESPONSIBILITY?"
            </div>
            <div style={{ fontFamily: FONT_DISPLAY, fontSize: 96, fontWeight: 700, lineHeight: 0.88, letterSpacing: -3, color: THEME.yellow }}>
              71<span style={{ fontSize: 40, color: 'rgba(244,237,224,0.5)' }}>%</span>
            </div>
            <div style={{ fontFamily: FONT_BODY, fontSize: 13, lineHeight: 1.4, marginTop: 10, color: 'rgba(244,237,224,0.8)' }}>
              said <b>yes</b> — 152 of the 214 who answered.
            </div>
          </div>
          <div style={{ padding: 28, border: `1px solid rgba(244,237,224,0.25)` }}>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.yellow, marginBottom: 10 }}>
              "DID YOU PERSONALLY ASK ANYONE TO TAKE ON GREATER RESPONSIBILITY?"
            </div>
            <div style={{ fontFamily: FONT_DISPLAY, fontSize: 96, fontWeight: 700, lineHeight: 0.88, letterSpacing: -3, color: THEME.paper }}>
              56<span style={{ fontSize: 40, color: 'rgba(244,237,224,0.5)' }}>%</span>
            </div>
            <div style={{ fontFamily: FONT_BODY, fontSize: 13, lineHeight: 1.4, marginTop: 10, color: 'rgba(244,237,224,0.8)' }}>
              said <b>yes</b> — 118 of the 212 who answered. The asked became the askers.
            </div>
          </div>
        </div>

        {/* How the ask worked — themes from Q7.4 */}
        <div style={{ marginTop: 56 }}>
          <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.yellow, marginBottom: 18 }}>
            HOW THE ASK WORKED · IN THEIR WORDS (Q7.4)
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
            {[
              {
                theme: 'The early ask — talent-spotting on first contact',
                quotes: [
                  '"During my first canvassing shift the field lead encouraged me to become a field lead."',
                  '"I had come by the office to drop off petitions in March and she asked then and there if I would be willing to."',
                ],
              },
              {
                theme: 'Persistence converting hesitation',
                quotes: [
                  '"I was a bit skeptical to take on the responsibility, but she kept following up with me!"',
                  '"I was asked if I wanted to field lead like 3 or four times and the 4th time I was like sure why not."',
                  '"Being asked multiple times really worked. I had no excuse not to say yes!"',
                ],
              },
              {
                theme: 'The ask as recognition',
                quotes: [
                  '"Every time I was asked, I took on the responsibility because I felt like I was appreciated and my skills were being recognized."',
                  '"It made me more invested in the campaign and excited that I was identified as a potential leader."',
                  '"My lead on my first shift immediately recommended I apply to be a lead, and I balked... I didn’t know I was a good fit (I was.)"',
                ],
              },
              {
                theme: 'Strategic, targeted asks',
                quotes: [
                  '"Mo — the lead for Muslim community organizing — asked me to become a field lead to have more Muslim / South Asian representation... This direct recruitment helped me understand that I can make a difference there."',
                  '"They called on me to be a field lead in Brownsville where Zohran had lost the primary... Brownsville saw a roughly 30 point swing towards Zohran between the Primary and General election which I felt great pride and a little bit of ownership about."',
                ],
              },
            ].map(block => (
              <div key={block.theme} style={{ borderTop: `2px solid ${THEME.yellow}`, paddingTop: 14 }}>
                <div style={{ fontFamily: FONT_DISPLAY, fontSize: 19, fontWeight: 600, color: THEME.paper, marginBottom: 10, letterSpacing: -0.3 }}>
                  {block.theme}
                </div>
                {block.quotes.map((q, i) => (
                  <p key={i} style={{ fontFamily: FONT_DISPLAY, fontSize: 14.5, fontStyle: 'italic', lineHeight: 1.45, color: 'rgba(244,237,224,0.85)', margin: '0 0 10px' }}>
                    {q}
                  </p>
                ))}
              </div>
            ))}
          </div>
        </div>

        {/* The ladder, in one voice */}
        <div style={{ marginTop: 44, background: THEME.blue, padding: '28px 32px', borderLeft: `6px solid ${THEME.yellow}` }}>
          <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.yellow, marginBottom: 10 }}>THE FULL LADDER, IN ONE VOICE</div>
          <p style={{ fontFamily: FONT_DISPLAY, fontSize: 20, fontStyle: 'italic', lineHeight: 1.45, color: THEME.paper, margin: 0 }}>
            "I was asked and took on more responsibilities many times during the campaign including when I first became a field lead, when I started volunteering at the office, when I became a field coordinator, and when I became a staging captain for election day."
          </p>
          <p style={{ fontFamily: FONT_DISPLAY, fontSize: 15, fontStyle: 'italic', lineHeight: 1.5, color: 'rgba(244,237,224,0.85)', margin: '14px 0 0' }}>
            "Before I became a field lead, I had just signed up to canvass. After the first day of canvassing, I mentioned to my field lead that I wanted to do more and be more involved. He sent me information about field lead training, which I immediately signed up for." <span style={{ fontFamily: FONT_MONO, fontStyle: 'normal', fontSize: 11, color: THEME.yellow }}>— Chase</span>
          </p>
        </div>

        {/* The scouting side — Q7.6 */}
        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 36 }}>
          <div>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.yellow, marginBottom: 14 }}>
              THE SCOUTING WAS DESIGNED, NOT SPONTANEOUS (Q7.6)
            </div>
            <p style={{ fontFamily: FONT_DISPLAY, fontSize: 17, fontStyle: 'italic', lineHeight: 1.5, color: THEME.paper, margin: '0 0 12px' }}>
              "We were told as Field Leads to <b style={{ color: THEME.yellow, fontStyle: 'normal' }}>scope out volunteers who might make good leads themselves</b>."
            </p>
            <p style={{ fontFamily: FONT_DISPLAY, fontSize: 15, fontStyle: 'italic', lineHeight: 1.5, color: 'rgba(244,237,224,0.85)', margin: '0 0 12px' }}>
              "Anytime a canvasser showed noticeable excitement, a certain level of engagement with the campaign, and showed up more than once or twice I always asked them to be a field lead... It usually took 2–3 conversations with the same person."
            </p>
            <p style={{ fontFamily: FONT_DISPLAY, fontSize: 15, fontStyle: 'italic', lineHeight: 1.5, color: 'rgba(244,237,224,0.85)', margin: 0 }}>
              "We would ask our stronger or more reliable canvassers to consider becoming field leads." · "They were nervous at first but with support agreed."
            </p>
          </div>
          <div>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.yellow, marginBottom: 14 }}>
              MULTIPLICATION &amp; DOWNSTREAM OUTCOMES (Q7.6)
            </div>
            <p style={{ fontFamily: FONT_DISPLAY, fontSize: 15, fontStyle: 'italic', lineHeight: 1.5, color: 'rgba(244,237,224,0.85)', margin: '0 0 12px' }}>
              "I probably recruited like 16 field leads some in neighborhoods with not a lot of field leads."
            </p>
            <p style={{ fontFamily: FONT_DISPLAY, fontSize: 15, fontStyle: 'italic', lineHeight: 1.5, color: 'rgba(244,237,224,0.85)', margin: '0 0 12px' }}>
              "Close to all of them said yes and felt happy to have been seen as someone who could handle more responsibility, became amazing leads, and some went on to become coordinators. One went on to get hired by the Mamdani Administration."
            </p>
            <p style={{ fontFamily: FONT_DISPLAY, fontSize: 15, fontStyle: 'italic', lineHeight: 1.5, color: 'rgba(244,237,224,0.85)', margin: 0 }}>
              "An interested volunteer I met on the subway, I asked him to come help pack materials... he then became a regular office volunteer and is now very active in DSA too."
            </p>
          </div>
        </div>

        {/* Thesis quote */}
        <div style={{ marginTop: 48, background: THEME.red, color: THEME.paper, padding: '36px 40px' }}>
          <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.yellow, marginBottom: 12 }}>THE THESIS, IN A RESPONDENT'S OWN WORDS</div>
          <p style={{ fontFamily: FONT_DISPLAY, fontSize: 26, fontStyle: 'italic', lineHeight: 1.35, margin: 0 }}>
            "One of the field directors asked if I would join in with other field leads to help run trainings for new field leads so that they could be led entirely by volunteers instead of other staff. So I helped train probably 150 new field leads for the general election. It was amazing to be part of the process of <b style={{ color: THEME.yellow, fontStyle: 'normal' }}>replicating our capacity</b>."
          </p>
        </div>

        <Body color="rgba(244,237,224,0.85)">
          Read alongside Finding 02, this suggests a mechanism for the ratchet: involvement deepened because <b style={{ color: THEME.yellow }}>someone was assigned to notice people and ask</b>. More of these responses are collected under the <i>"Asked to lead"</i> and <i>"Making the ask"</i> threads in the Quote Atlas.
        </Body>
      </PaletteBand>

      {/* ========== FINDING 04 ========== */}
      <PaletteBand tone="paper">
        <Chapter num="04" kicker="Who the respondents are" color={THEME.blue} />
        <HeadlineSerif size={64} color={THEME.ink}>
          Largely a study of the <span style={{ color: THEME.blue }}>DSA pipeline</span>.
        </HeadlineSerif>
        <Lede color={THEME.inkSoft}>
          95% of respondents report a DSA affiliation — as members at some point, or as non-member participants. More than four in ten were members before the campaign began; another third joined <i>during</i> it. Other endorsing organizations appear much less frequently in respondent profiles.
        </Lede>

        <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24 }}>
          <div style={{ background: THEME.blue, color: THEME.paper, padding: 24 }}>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, opacity: 0.8, marginBottom: 6 }}>MEMBERS BEFORE</div>
            <div style={{ fontFamily: FONT_DISPLAY, fontSize: 72, fontWeight: 700, lineHeight: 0.9, letterSpacing: -2 }}>43<span style={{ fontSize: 32 }}>%</span></div>
            <div style={{ fontSize: 12, fontFamily: FONT_BODY, opacity: 0.85, marginTop: 12, lineHeight: 1.4 }}>Already NYC-DSA members when they started volunteering.</div>
          </div>
          <div style={{ background: THEME.yellow, color: THEME.ink, padding: 24 }}>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, opacity: 0.7, marginBottom: 6 }}>JOINED DURING</div>
            <div style={{ fontFamily: FONT_DISPLAY, fontSize: 72, fontWeight: 700, lineHeight: 0.9, letterSpacing: -2 }}>35<span style={{ fontSize: 32 }}>%</span></div>
            <div style={{ fontSize: 12, fontFamily: FONT_BODY, marginTop: 12, lineHeight: 1.4 }}>Reported joining NYC-DSA over the course of the campaign (recruited through the canvass).</div>
          </div>
          <div style={{ background: THEME.red, color: THEME.paper, padding: 24 }}>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, opacity: 0.8, marginBottom: 6 }}>JOINED AFTER / NEVER</div>
            <div style={{ fontFamily: FONT_DISPLAY, fontSize: 72, fontWeight: 700, lineHeight: 0.9, letterSpacing: -2 }}>22<span style={{ fontSize: 32 }}>%</span></div>
            <div style={{ fontSize: 12, fontFamily: FONT_BODY, opacity: 0.85, marginTop: 12, lineHeight: 1.4 }}>10% joined DSA after the campaign, 7% participate without membership, and just 5% report no DSA involvement at all.</div>
          </div>
        </div>

        <Body color={THEME.inkSoft}>
          This respondent pool is therefore not a cross-section of NYC campaign volunteers. It is closer to a study of <b>the DSA-aligned volunteer pipeline</b> on a particular high-profile campaign. That framing is not a flaw in the data, but it does scope the claims: what follows describes patterns among DSA-aligned respondents and should not be read as generalizable to the full volunteer base.
        </Body>
      </PaletteBand>

      {/* ========== FINDING 05 ========== */}
      <PaletteBand tone="dark">
        <Chapter num="05" kicker="At the door" color={THEME.yellow} />
        <HeadlineSerif size={68} italic color={THEME.paper}>
          Canvassing may have worked <span style={{ color: THEME.yellow }}>because</span><br/>it was hard (not despite it).
        </HeadlineSerif>
        <Lede color="rgba(244,237,224,0.8)">
          71% of respondents reported feeling anxious or somewhat anxious before their first shift. Once canvassing, 89% reported feeling confident "often" or "always," and 94% reported feeling supported. The more notable pattern is a tension in how respondents characterize the activity itself: 71% agreed that canvassing felt <b style={{ color: THEME.yellow }}>easy and natural</b>, and roughly the same share (74%) agreed that it <b style={{ color: THEME.yellow }}>pushed them outside their comfort zone</b>.
        </Lede>

        <div style={{ marginTop: 44, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
          <div style={{ padding: 24, border: `1px solid rgba(244,237,224,0.2)` }}>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.yellow, marginBottom: 10 }}>BEFORE FIRST CANVASS</div>
            <div style={{ fontFamily: FONT_DISPLAY, fontSize: 48, fontWeight: 700, lineHeight: 0.9, color: THEME.paper, letterSpacing: -1.5 }}>
              71<span style={{ fontSize: 22, opacity: 0.5 }}>%</span>
            </div>
            <div style={{ fontSize: 13, fontFamily: FONT_BODY, color: 'rgba(244,237,224,0.8)', marginTop: 8 }}>felt anxious or somewhat anxious.</div>
          </div>
          <div style={{ padding: 24, border: `1px solid ${THEME.yellow}` }}>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.yellow, marginBottom: 10 }}>DURING CANVASSING</div>
            <div style={{ display: 'flex', gap: 20, alignItems: 'flex-end' }}>
              <div>
                <div style={{ fontFamily: FONT_DISPLAY, fontSize: 48, fontWeight: 700, color: THEME.yellow, letterSpacing: -1.5, lineHeight: 0.9 }}>89<span style={{ fontSize: 22, opacity: 0.8 }}>%</span></div>
                <div style={{ fontSize: 12, color: 'rgba(244,237,224,0.8)', marginTop: 4 }}>confident</div>
              </div>
              <div>
                <div style={{ fontFamily: FONT_DISPLAY, fontSize: 48, fontWeight: 700, color: THEME.yellow, letterSpacing: -1.5, lineHeight: 0.9 }}>90<span style={{ fontSize: 22, opacity: 0.8 }}>%</span></div>
                <div style={{ fontSize: 12, color: 'rgba(244,237,224,0.8)', marginTop: 4 }}>energized</div>
              </div>
              <div>
                <div style={{ fontFamily: FONT_DISPLAY, fontSize: 48, fontWeight: 700, color: THEME.yellow, letterSpacing: -1.5, lineHeight: 0.9 }}>94<span style={{ fontSize: 22, opacity: 0.8 }}>%</span></div>
                <div style={{ fontSize: 12, color: 'rgba(244,237,224,0.8)', marginTop: 4 }}>supported</div>
              </div>
            </div>
          </div>
        </div>

        {/* the both/and callout */}
        <div style={{ marginTop: 44, background: THEME.red, color: THEME.paper, padding: '32px 36px', display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 32, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: 'rgba(244,237,224,0.75)', marginBottom: 8 }}>71% AGREE</div>
            <div style={{ fontFamily: FONT_DISPLAY, fontSize: 22, fontStyle: 'italic', lineHeight: 1.2 }}>"Canvassing felt easy and natural."</div>
          </div>
          <div style={{ fontFamily: FONT_DISPLAY, fontSize: 40, fontWeight: 700, fontStyle: 'italic', color: THEME.yellow }}>+</div>
          <div>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: 'rgba(244,237,224,0.75)', marginBottom: 8 }}>74% AGREE</div>
            <div style={{ fontFamily: FONT_DISPLAY, fontSize: 22, fontStyle: 'italic', lineHeight: 1.2 }}>"It pushed me outside my comfort zone."</div>
          </div>
        </div>

        <Body color="rgba(244,237,224,0.85)">
          93% of respondents agreed that canvassing made them feel they could influence politics, 90% that it helped them develop new organizing skills, and 87% that it made them more confident talking about politics. Taken together, these patterns are consistent with the view that <b style={{ color: THEME.yellow }}>the canvass functioned as a site of political development, not solely as a voter-contact operation</b>, though a causal reading would require further work.
        </Body>
      </PaletteBand>

      {/* ========== FINDING 06 ========== */}
      <PaletteBand tone="yellow">
        <Chapter num="06" kicker="Why respondents did not quit" color={THEME.red} />
        <HeadlineSerif size={68} color={THEME.ink}>
          <span style={{ color: THEME.red }}>54%</span> considered quitting.<br/>
          <span style={{ fontStyle: 'italic' }}>Relationships appear to have kept them in.</span>
        </HeadlineSerif>
        <Lede color={THEME.ink}>
          The attrition pressure was real among respondents. What appears to have kept it from turning into actual attrition is the <b>relational infrastructure</b> around the canvass.
        </Lede>

        <div style={{ marginTop: 44, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 36 }}>
          <div style={{ background: THEME.paper, padding: 24, border: `2px solid ${THEME.ink}` }}>
            <Stat value="92" unit="%" label="Reported making a friend on the campaign" color={THEME.red} />
          </div>
          <div style={{ background: THEME.paper, padding: 24, border: `2px solid ${THEME.ink}` }}>
            <Stat value="91" unit="%" label="Made concrete commitments to show up (with other volunteers)" color={THEME.blue} />
          </div>
          <div style={{ background: THEME.paper, padding: 24, border: `2px solid ${THEME.ink}` }}>
            <Stat value="89" unit="%" label="Had someone follow up to hold them accountable" color={THEME.red} />
          </div>
          <div style={{ background: THEME.paper, padding: 24, border: `2px solid ${THEME.ink}` }}>
            <Stat value="74" unit="%" label="Someone else's expectations influenced whether they showed up" color={THEME.blue} />
          </div>
        </div>

        <div style={{ marginTop: 36, padding: '20px 24px', background: THEME.ink, color: THEME.paper, borderLeft: `6px solid ${THEME.red}` }}>
          <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.yellow, marginBottom: 8 }}>A TENTATIVE READING</div>
          <div style={{ fontFamily: FONT_DISPLAY, fontSize: 18, lineHeight: 1.45, fontStyle: 'italic' }}>
            Mutual commitments, follow-ups, and social accountability may be mechanisms through which volunteers remained engaged when they wanted to leave.
          </div>
        </div>
      </PaletteBand>

      {/* ========== FINDING 07 ========== */}
      <PaletteBand tone="blue">
        <Chapter num="07" kicker="Something larger" color={THEME.yellow} />
        <HeadlineSerif size={72} italic color={THEME.paper}>
          <span style={{ color: THEME.yellow }}>Ours</span>, not his.
        </HeadlineSerif>
        <Lede color="rgba(244,237,224,0.9)">
          On the collective-identity items, respondent agreement clusters unusually hard at <i>strongly agree</i>, at levels that appear high relative to what the published campaign-volunteer literature typically reports. These items are not satisfaction measures. They are standard markers of <b style={{ color: THEME.yellow }}>collective identity formation</b>, which the literature treats as difficult to produce.
        </Lede>

        <div style={{ marginTop: 44, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
          {[
            { label: '"The campaign was building something larger than a single election"', strong: 84, total: 95 },
            { label: '"The campaign felt like ours, not just something I volunteered for"', strong: 80, total: 95 },
            { label: '"I felt a shared sense of struggle with other volunteers"', strong: 79, total: 95 },
            { label: '"I felt personally responsible for the campaign\'s success"', strong: 60, total: 89 },
          ].map(r => (
            <div key={r.label}>
              <div style={{ fontFamily: FONT_DISPLAY, fontSize: 16, fontStyle: 'italic', color: THEME.paper, marginBottom: 10, lineHeight: 1.4 }}>
                {r.label}
              </div>
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 10 }}>
                <div style={{ fontFamily: FONT_DISPLAY, fontSize: 64, fontWeight: 700, color: THEME.yellow, letterSpacing: -2, lineHeight: 0.9 }}>
                  {r.strong}<span style={{ fontSize: 28, opacity: 0.8 }}>%</span>
                </div>
                <div style={{ fontFamily: FONT_BODY, fontSize: 11, color: 'rgba(244,237,224,0.75)', paddingBottom: 10 }}>
                  strongly agree<br/>
                  <span style={{ color: 'rgba(244,237,224,0.5)' }}>({r.total}% agree net)</span>
                </div>
              </div>
              <div style={{ marginTop: 6, display: 'flex', height: 6 }}>
                <div style={{ width: `${r.strong}%`, background: THEME.yellow }} />
                <div style={{ width: `${r.total - r.strong}%`, background: 'rgba(254,168,6,0.35)' }} />
                <div style={{ width: `${100 - r.total}%`, background: 'rgba(244,237,224,0.1)' }} />
              </div>
            </div>
          ))}
        </div>
      </PaletteBand>

      {/* ========== FINDING 08 ========== */}
      <PaletteBand tone="paper">
        <Chapter num="08" kicker="Composition" color={THEME.blue} />
        <HeadlineSerif size={60} color={THEME.ink}>
          The respondent pool does not look<br/>like the voter <span style={{ color: THEME.red }}>coalition</span>.
        </HeadlineSerif>
        <Lede color={THEME.inkSoft}>
          Among respondents: median age 31, 86% college-educated, 63% white, 53% residing in Brooklyn. Mamdani's electoral base (heavily South Asian, immigrant, outer-borough) looks quite different from the composition of this respondent set. That gap is itself worth noting.
        </Lede>

        <div style={{ marginTop: 44, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 24 }}>
          <div>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.inkMute, marginBottom: 10 }}>BOROUGH</div>
            {agg.borough.map(([k, v]) => (
              <div key={k} style={{ marginBottom: 6 }}>
                <div style={{ fontSize: 12, fontFamily: FONT_BODY, color: THEME.ink, display: 'flex', justifyContent: 'space-between', marginBottom: 3 }}>
                  <span>{k}</span>
                  <span style={{ fontFamily: FONT_MONO, color: THEME.blue, fontWeight: 600 }}>{Math.round(v/agg.n*100)}%</span>
                </div>
                <div style={{ height: 5, background: 'rgba(26,26,26,0.08)' }}>
                  <div style={{ height: '100%', width: `${v/agg.n*100}%`, background: THEME.blue }} />
                </div>
              </div>
            ))}
          </div>
          <div>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.inkMute, marginBottom: 10 }}>AGE</div>
            {agg.ageDist.map(d => (
              <div key={d.label} style={{ marginBottom: 6 }}>
                <div style={{ fontSize: 12, fontFamily: FONT_BODY, color: THEME.ink, display: 'flex', justifyContent: 'space-between', marginBottom: 3 }}>
                  <span>{d.label}</span>
                  <span style={{ fontFamily: FONT_MONO, color: THEME.red, fontWeight: 600 }}>{Math.round(d.count/agg.n*100)}%</span>
                </div>
                <div style={{ height: 5, background: 'rgba(26,26,26,0.08)' }}>
                  <div style={{ height: '100%', width: `${d.count/agg.n*100}%`, background: THEME.red }} />
                </div>
              </div>
            ))}
          </div>
          <div>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.inkMute, marginBottom: 10 }}>RACE / ETHNICITY</div>
            {[
              ['White', 63], ['Asian', 18], ['Hispanic/Latino', 13], ['Black', 4], ['Other', 2],
            ].map(([k, v]) => (
              <div key={k} style={{ marginBottom: 6 }}>
                <div style={{ fontSize: 12, fontFamily: FONT_BODY, color: THEME.ink, display: 'flex', justifyContent: 'space-between', marginBottom: 3 }}>
                  <span>{k}</span>
                  <span style={{ fontFamily: FONT_MONO, color: THEME.blue, fontWeight: 600 }}>{v}%</span>
                </div>
                <div style={{ height: 5, background: 'rgba(26,26,26,0.08)' }}>
                  <div style={{ height: '100%', width: `${v}%`, background: THEME.blue }} />
                </div>
              </div>
            ))}
          </div>
          <div>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.inkMute, marginBottom: 10 }}>TENURE IN NYC</div>
            {[
              ['Born & raised in NYC', 23],
              ['10+ year residents', 33],
              ['5–10 years', 16],
              ['<5 years', 27],
            ].map(([k, v]) => (
              <div key={k} style={{ marginBottom: 6 }}>
                <div style={{ fontSize: 12, fontFamily: FONT_BODY, color: THEME.ink, display: 'flex', justifyContent: 'space-between', marginBottom: 3 }}>
                  <span>{k}</span>
                  <span style={{ fontFamily: FONT_MONO, color: THEME.red, fontWeight: 600 }}>{v}%</span>
                </div>
                <div style={{ height: 5, background: 'rgba(26,26,26,0.08)' }}>
                  <div style={{ height: '100%', width: `${v}%`, background: THEME.red }} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </PaletteBand>

      {/* ========== FINDING 09 ========== */}
      <PaletteBand tone="red">
        <Chapter num="09" kicker="A central caveat" color={THEME.yellow} />
        <HeadlineSerif size={64} color={THEME.paper}>
          <span style={{ color: THEME.yellow }}>290 of ~700</span> is still the<br/>
          central caveat.
        </HeadlineSerif>
        <Lede color="rgba(244,237,224,0.9)">
          The survey fielded from April 6 to June 19, 2026, and closed with 290 of roughly 700 invited volunteers responding — a ~41% response rate, with 207 completing the full instrument. That is a strong response for a long post-campaign survey, but the people who answer one still skew toward the <b style={{ color: THEME.yellow }}>more committed end of the volunteer distribution</b>: 97% of respondents who answered were field leads.
        </Lede>

        <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 36 }}>
          <div style={{ padding: 24, background: 'rgba(244,237,224,0.08)', border: `1px solid rgba(244,237,224,0.2)` }}>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.yellow, marginBottom: 8 }}>LIKELY UNDER-REPRESENTED</div>
            <ul style={{ fontFamily: FONT_BODY, fontSize: 14, lineHeight: 1.6, color: THEME.paper, margin: 0, paddingLeft: 20 }}>
              <li>One-shift volunteers who drifted away</li>
              <li>Volunteers who burned out mid-primary</li>
              <li>Respondents who ended the campaign disillusioned</li>
              <li>The ~410 invited volunteers who never responded</li>
            </ul>
          </div>
          <div style={{ padding: 24, background: 'rgba(244,237,224,0.08)', border: `1px solid rgba(244,237,224,0.2)` }}>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.yellow, marginBottom: 8 }}>HOW TO READ THESE FINDINGS</div>
            <ul style={{ fontFamily: FONT_BODY, fontSize: 14, lineHeight: 1.6, color: THEME.paper, margin: 0, paddingLeft: 20 }}>
              <li>Results describe the <b>respondents</b> — the committed core, not every volunteer</li>
              <li>Claims should be scoped to this subset (not to the full invited sample)</li>
              <li>Percentages are among those who answered each item (item n ≈ 200–265)</li>
              <li>83 partial responses mean later-section items have smaller ns</li>
            </ul>
          </div>
        </div>
      </PaletteBand>

      {/* ========== FINDING 10 ========== */}
      <PaletteBand tone="paper">
        <Chapter num="10" kicker="A possible implication" color={THEME.blue} />
        <HeadlineSerif size={64} color={THEME.ink}>
          Evidence, for respondents, of<br/>
          <span style={{ color: THEME.red }}>durable political formation</span><br/>
          <span style={{ fontStyle: 'italic' }}>beyond election-day turnout.</span>
        </HeadlineSerif>
        <Lede color={THEME.inkSoft}>
          For arguments that campaigns can function as sites of democratic capacity-building (in addition to vehicles for winning elections), the post-campaign items offer suggestive evidence among these respondents.
        </Lede>

        <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
          <div>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.inkMute, marginBottom: 16 }}>SINCE THE CAMPAIGN ENDED</div>
            {[
              ['Donated to political causes', 86, THEME.red],
              ['Volunteered for another campaign or org', 82, THEME.red],
              ['Joined a political organization', 61, THEME.blue],
              ['Joined DSA', 58, THEME.blue],
              ['Volunteered for Our Time', 50, THEME.blue],
              ['Assumed a formal leadership role', 48, THEME.blue],
              ['Took a job in politics, organizing, or public service', 25, THEME.red],
            ].map(([k, v, c]) => (
              <div key={k} style={{ marginBottom: 10 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, fontFamily: FONT_BODY, color: THEME.ink, marginBottom: 4 }}>
                  <span>{k}</span>
                  <span style={{ fontFamily: FONT_MONO, color: c, fontWeight: 700 }}>{v}%</span>
                </div>
                <div style={{ height: 6, background: 'rgba(26,26,26,0.06)' }}>
                  <div style={{ height: '100%', width: `${v}%`, background: c }} />
                </div>
              </div>
            ))}
          </div>
          <div>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.inkMute, marginBottom: 16 }}>LASTING CHANGES (SELF-REPORTED)</div>
            {[
              ['Feel more connected to NYC', 92],
              ['Pay more attention to local government', 85],
              ['Encouraged someone else to get involved', 83],
              ['Follow local politics more closely', 75],
              ['Talk politics with people I wouldn\'t have before', 62],
              ['Took on a political role I wouldn\'t have before', 60],
              ['Consider myself part of a broader political movement', 59],
            ].map(([k, v]) => (
              <div key={k} style={{ marginBottom: 10 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, fontFamily: FONT_BODY, color: THEME.ink, marginBottom: 4 }}>
                  <span>{k}</span>
                  <span style={{ fontFamily: FONT_MONO, color: THEME.blue, fontWeight: 700 }}>{v}%</span>
                </div>
                <div style={{ height: 6, background: 'rgba(26,26,26,0.06)' }}>
                  <div style={{ height: '100%', width: `${v}%`, background: THEME.blue }} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </PaletteBand>

      {/* ========== CLOSE ========== */}
      <PaletteBand tone="dark">
        <div style={{ display: 'flex', gap: 40, alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}>
          <div>
            <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 2, color: THEME.yellow, textTransform: 'uppercase', marginBottom: 10 }}>Keep reading</div>
            <div style={{ fontFamily: FONT_DISPLAY, fontSize: 32, fontWeight: 700, color: THEME.paper, lineHeight: 1.1, letterSpacing: -0.5 }}>
              Three more ways to read the data →
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16, maxWidth: 760 }}>
            <a href="analysis/" style={{ padding: 18, background: THEME.yellow, color: THEME.ink, textDecoration: 'none', display: 'block' }}>
              <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.red }}>SUPPLEMENT</div>
              <div style={{ fontFamily: FONT_DISPLAY, fontSize: 20, fontWeight: 600, marginTop: 6, lineHeight: 1.1 }}>Recruitment analysis →</div>
              <div style={{ fontFamily: FONT_BODY, fontSize: 12, marginTop: 8, lineHeight: 1.4 }}>Personally recruited respondents compared with the rest on every outcome, with significance tests.</div>
            </a>
            <div style={{ padding: 18, background: THEME.blue, color: THEME.paper }}>
              <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.yellow }}>TAB 2</div>
              <div style={{ fontFamily: FONT_DISPLAY, fontSize: 20, fontWeight: 600, marginTop: 6, lineHeight: 1.1 }}>Cohort Explorer</div>
              <div style={{ fontFamily: FONT_BODY, fontSize: 12, opacity: 0.8, marginTop: 8, lineHeight: 1.4 }}>Filter respondents by borough, age, ideology, and entry point. Runs on respondent-level data — contact the research team for access.</div>
            </div>
            <div style={{ padding: 18, background: THEME.red, color: THEME.paper }}>
              <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: 1.5, color: THEME.yellow }}>TAB 3</div>
              <div style={{ fontFamily: FONT_DISPLAY, fontSize: 20, fontWeight: 600, marginTop: 6, lineHeight: 1.1 }}>Quote Atlas</div>
              <div style={{ fontFamily: FONT_BODY, fontSize: 12, opacity: 0.8, marginTop: 8, lineHeight: 1.4 }}>A curated selection of the most notable long-form responses, organized by theme.</div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 40, display: 'flex', justifyContent: 'center' }}>
          <a
            href="mailto:dnapsha@hks.harvard.edu?subject=Mamdani%20Field%20Lead%20Survey%20%E2%80%94%20research%20team"
            style={{
              display: 'inline-block', textDecoration: 'none',
              background: THEME.yellow, color: THEME.ink,
              fontFamily: FONT_MONO, fontSize: 12, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase',
              padding: '14px 28px', border: `2px solid ${THEME.paper}`,
              boxShadow: '4px 4px 0 rgba(0,0,0,0.4)',
            }}
          >
            ✉ Contact the research team
          </a>
        </div>

        <div style={{ marginTop: 48, paddingTop: 24, borderTop: `1px solid rgba(244,237,224,0.2)`, display: 'flex', justifyContent: 'space-between', fontFamily: FONT_MONO, fontSize: 11, color: 'rgba(244,237,224,0.5)', letterSpacing: 1 }}>
          <span>Methodology: Qualtrics field-lead survey · fielded April 6 – June 19, 2026 · n=290 of ~700 · response rate ≈41% · 207 complete · percentages among item respondents</span>
          <span>§ ∞</span>
        </div>
      </PaletteBand>
    </div>
  );
}

window.ViewA = ViewA;