// Voices — qualitative interview quotes woven by theme + a filterable explorer
const { useState: vS, useMemo: vM, useRef: vR } = React;

// Single quote card. Verbatim quotes get quotation styling; paraphrases are
// clearly marked as summaries and never wrapped in quotation marks.
function QuoteCard({ q, compact }) {
  const attribution = titleCase(q.country);
  const flag = flagEmoji(COUNTRY_META[q.country]?.iso || '');
  if (q.paraphrase) {
    return (
      <figure style={{ breakInside: 'avoid', margin: 0, padding: compact ? '18px 20px' : '22px 24px', background: 'var(--surface)', border: '1px solid var(--rule)', borderLeft: '3px solid var(--accent-neutral)' }}>
        <div className="sans" style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 9.5, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 10 }}>Summarized from an interview</div>
        <p style={{ fontFamily: 'Inter Tight, sans-serif', fontSize: compact ? 15 : 16, lineHeight: 1.5, color: 'var(--ink-2)', margin: 0 }}>{q.text}</p>
        <figcaption className="sans" style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '.04em', color: 'var(--muted)', marginTop: 14 }}>{flag} &nbsp;{attribution}</figcaption>
      </figure>);
  }
  return (
    <figure style={{ breakInside: 'avoid', margin: 0, padding: compact ? '18px 20px' : '22px 24px', background: 'var(--surface)', border: '1px solid var(--rule)', borderLeft: '3px solid var(--brand)' }}>
      <blockquote style={{ margin: 0, fontFamily: 'Source Serif 4, serif', fontSize: compact ? 17 : 19, lineHeight: 1.4, letterSpacing: '-0.01em', color: 'var(--fg)' }}>
        <span style={{ color: 'var(--brand)' }}>&ldquo;</span>{q.text}<span style={{ color: 'var(--brand)' }}>&rdquo;</span>
      </blockquote>
      <figcaption className="sans" style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '.04em', color: 'var(--muted)', marginTop: 16 }}>{flag} &nbsp;{attribution}</figcaption>
    </figure>);
}

// A compact strip of quotes for a specific country (used in the Country Explorer)
function CountryVoices({ quotes, country }) {
  const list = (quotes?.quotes || []).filter((q) => q.country === country);
  if (!list.length) return null;
  const show = list.slice(0, 4);
  return (
    <section className="section" style={{ paddingTop: 8, paddingBottom: 32 }}>
      <div className="container">
        <div className="eyebrow sans" style={{ marginBottom: 14 }}>Voices from {titleCase(country)}</div>
        <p style={{ fontFamily: 'Inter Tight, sans-serif', fontSize: 14, color: 'var(--ink-2)', maxWidth: '70ch', marginTop: 0, marginBottom: 20 }}>
          {quotes.countryContext?.[country]}
        </p>
        <div style={{ columns: show.length > 1 ? 2 : 1, columnGap: 20 }}>
          {show.map((q, i) => (
            <div key={i} style={{ marginBottom: 20 }}><QuoteCard q={q} compact /></div>
          ))}
        </div>
      </div>
    </section>);
}

function VoicesPage({ data, setRoute }) {
  const quotes = data.quotes || { themes: [], quotes: [], countryContext: {} };
  const all = quotes.quotes || [];
  const [theme, setTheme] = vS('all');

  const filtered = all.filter((q) => (theme === 'all' || q.theme === theme));

  // For each theme, a couple of representative verbatim quotes (fallback to any)
  const quotesForTheme = (tid) => {
    const inTheme = all.filter((q) => q.theme === tid);
    const verbatim = inTheme.filter((q) => !q.paraphrase);
    return (verbatim.length ? verbatim : inTheme).slice(0, 3);
  };

  return (
    <>
      <section className="section" style={{ paddingTop: 56, paddingBottom: 8 }}>
        <div className="container">
          <div className="eyebrow sans" style={{ marginBottom: 8 }}>Voices</div>
          <h1 style={{ maxWidth: '20ch', marginBottom: 16 }}>The people behind the numbers.</h1>
          <p className="sans" style={{ fontFamily: 'Inter Tight, sans-serif', fontSize: 17, color: 'var(--ink-2)', maxWidth: '64ch', marginBottom: 8 }}>
            Alongside the survey, the study gathered in-depth interviews with bitcoin owners,
            builders, educators, and skeptics around the world. Their words put the human
            &ldquo;why&rdquo; behind the statistics — read them by theme below, or explore the full
            collection.
          </p>
          <p className="sans" style={{ fontFamily: 'Inter Tight, sans-serif', fontSize: 12.5, color: 'var(--muted)', maxWidth: '64ch', fontStyle: 'italic' }}>
            To protect interviewees, quotes are attributed by country only. A few entries,
            marked as summaries, paraphrase interview notes rather than quote them directly.
          </p>
        </div>
      </section>

      {/* Themes — the narrative spine */}
      {quotes.themes.map((t, i) => (
        <section key={t.id} className={i % 2 === 1 ? 'narrative' : 'section'} style={{ paddingTop: 40, paddingBottom: 40 }}>
          <div className="container">
            <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: 40, alignItems: 'start' }}>
              <div>
                <div className="eyebrow sans" style={{ marginBottom: 10, color: 'var(--brand)' }}>Theme {String(i + 1).padStart(2, '0')}</div>
                <h2 style={{ margin: 0, fontSize: 28, maxWidth: '16ch' }}>{t.title}</h2>
                <p style={{ fontFamily: 'Inter Tight, sans-serif', fontSize: 14.5, color: 'var(--ink-2)', lineHeight: 1.55, marginTop: 16 }}>{t.framing}</p>
              </div>
              <div style={{ display: 'grid', gap: 16 }}>
                {quotesForTheme(t.id).map((q, qi) => <QuoteCard key={qi} q={q} />)}
              </div>
            </div>
          </div>
        </section>
      ))}

      {/* Explorer */}
      <section className="section" style={{ paddingTop: 48, paddingBottom: 64, borderTop: '1px solid var(--rule)' }}>
        <div className="container">
          <div className="eyebrow sans" style={{ marginBottom: 8 }}>Explore every voice</div>
          <h2 style={{ marginTop: 0, marginBottom: 8 }}>The Full Collection.</h2>
          <p className="sans" style={{ fontFamily: 'Inter Tight, sans-serif', fontSize: 15, color: 'var(--ink-2)', maxWidth: '60ch', marginBottom: 24 }}>
            Filter by theme to read what interviewees said in their own words.
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 24, marginBottom: 28 }}>
            <div>
              <div className="eyebrow sans" style={{ marginBottom: 6 }}>Theme</div>
              <select className="pill-select sans" value={theme} onChange={(e) => setTheme(e.target.value)}>
                <option value="all">All themes</option>
                {quotes.themes.map((t) => <option key={t.id} value={t.id}>{t.title}</option>)}
              </select>
            </div>
            <div style={{ alignSelf: 'flex-end', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.1em', paddingBottom: 10 }}>
              {filtered.length} {filtered.length === 1 ? 'voice' : 'voices'}
            </div>
          </div>
          <div style={{ columns: 3, columnGap: 20 }}>
            {filtered.map((q, i) => (
              <div key={i} style={{ marginBottom: 20 }}><QuoteCard q={q} compact /></div>
            ))}
          </div>
          {filtered.length === 0 && (
            <p style={{ fontFamily: 'Inter Tight, sans-serif', color: 'var(--muted)' }}>No voices match that combination.</p>
          )}
        </div>
      </section>
    </>);
}

Object.assign(window, { VoicesPage, QuoteCard, CountryVoices });