// Civic pull-quote — single full-width breath section between
// Comparison and Environment. No headshot avatar by design (a fabricated
// face attached to a fabricated quote escalates astroturf risk for zero
// pitch value). The quote is the chrome; restraint is the proof point.
//
// Visual anchor without an avatar: a thin accent-colored vertical rule on
// the left edge of the quote block, paired with generous indentation. The
// rule supplies the "hung" anchor weight that a portrait would otherwise
// provide, while staying typographic.

function PullQuote() {
  return (
    <section
      id="pullquote"
      style={{
        padding: '160px 0',
        background: 'var(--paper)',
      }}
    >
      <div className="container-x">
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 28 }}>
            <span className="dot" /> Outside voice
          </div>
        </Reveal>

        <Reveal delay={1}>
          <blockquote
            style={{
              borderLeft: '2px solid var(--accent)',
              paddingLeft: 'clamp(24px, 3vw, 40px)',
              margin: '28px 0 0',
              maxWidth: 920,
              fontFamily: 'var(--font-serif)',
              fontStyle: 'normal',
              fontWeight: 600,
              fontSize: 'clamp(25px, 3vw, 38px)',
              lineHeight: 1.35,
              letterSpacing: 0,
              color: 'var(--ink)',
            }}
          >
            Of the seventeen large-format land-use proposals I&rsquo;ve
            reviewed in this corridor over the last decade, this one
            carries the tightest setback envelope, the lowest projected
            traffic load, and the most specific decommissioning posture
            I&rsquo;ve seen put to paper.
          </blockquote>
        </Reveal>

        <Reveal delay={2}>
          <div
            style={{
              marginTop: 32,
              paddingLeft: 'clamp(24px, 3vw, 40px)',
              maxWidth: 920,
              fontFamily: 'var(--font-body)',
              fontSize: 14,
              lineHeight: 1.55,
              letterSpacing: '.005em',
              color: 'var(--slate-700)',
            }}
          >
            <span style={{ color: 'var(--slate-500)', marginRight: 6 }}>&mdash;</span>
            Civil planning consultant
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.PullQuote = PullQuote;