// upprofiler — /audience (ICP audit)

function PageAudience({ onNavigate, score: globalScore }) {
  const segments = [
    { name: 'Founders & business owners · 1-50 employees', pct: 29, kind: 'IDEAL', match: 96 },
    { name: 'Solo consultants & coaches', pct: 19, kind: 'IDEAL', match: 92 },
    { name: 'C-Suite / corporate leaders', pct: 11, kind: 'TIER 2', match: 74 },
    { name: 'Ghostwriters & content agencies', pct: 9, kind: 'TIER 2', match: 68 },
    { name: 'Marketing leads · SaaS', pct: 7, kind: 'TIER 2', match: 56 },
    { name: 'Students & early-career', pct: 13, kind: 'NOISE', match: 18 },
    { name: 'MLM / drop-ship adjacent', pct: 7, kind: 'NOISE', match: 6 },
    { name: 'Recruiters · in-house', pct: 5, kind: 'NOISE', match: 22 },
  ];

  const idealPct = segments.filter(s => s.kind === 'IDEAL').reduce((a, s) => a + s.pct, 0);

  const findings = [
    { kind: 'IDEAL', text: '"DM-to-sale script" pulled 73% Ideal-tier audience. Your highest match-rate post this quarter — and the one that signed three Builder-tier members.' },
    { kind: 'NOISE', text: 'Bosnia & lifestyle posts pulled 64% Noise. They\'re fun. They also dilute your buyer composition. Save them for stories, not the feed.' },
    { kind: 'IDEAL', text: 'Carousels on storytelling mechanics consistently pull Ideal segments. Double down here — your audience can\'t get enough.' },
    { kind: 'NOISE', text: '"Hot take" and "unpopular opinion" framing pulls students and early-career replies. Lowers your ICP density. Drop the cliché.' },
  ];

  return (
    <div>
      <Nav current="/audience" onNavigate={onNavigate} score={globalScore} delta={9} />
      <div className="page">
        <PageHeader
          id="/audience"
          name="ICP audit"
          sub="What percentage of your audience are actual buyers? Pulled from your last 5,000 profile-viewers and engagers. The honest answer might sting — that’s the point."
          tag={{ kind: 'pink', label: 'Builder tier' }}
          right={<span className="label-mono">Sample · 4,927 profiles</span>}
        />

        {/* Hero strip */}
        <div className="card" style={{ background: 'var(--gradient-hero)', padding: 40, marginBottom: 32 }}>
          <div className="row between" style={{ alignItems: 'flex-end' }}>
            <div>
              <div className="label-mono">Ideal-tier audience match</div>
              <div className="row gap-12" style={{ alignItems: 'baseline', marginTop: 8 }}>
                <span style={{ fontSize: 96, fontWeight: 800, color: 'var(--pink)', letterSpacing: '-0.04em', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>
                  {idealPct}%
                </span>
                <span style={{ fontSize: 22, color: 'var(--ink-soft)', fontWeight: 500 }}>of your audience are buyers</span>
              </div>
              <div style={{ color: 'var(--ink-soft)', marginTop: 12, fontSize: 15, maxWidth: '60ch' }}>
                Up from 41% last quarter. Mostly because you stopped posting Bosnia content during work hours.
                Cohort benchmark for your tier sits at 38%. You're well above. Don't slow down.
              </div>
            </div>
            {/* segmented donut */}
            <div style={{ width: 200, height: 200, position: 'relative', flexShrink: 0 }}>
              <svg viewBox="0 0 200 200" width="200" height="200">
                {(() => {
                  const total = segments.reduce((a, s) => a + s.pct, 0);
                  let acc = 0;
                  const r = 78;
                  const cx = 100, cy = 100;
                  const colors = { IDEAL: '#14B8A6', 'TIER 2': '#F59E0B', NOISE: '#E2E8F0' };
                  return segments.map((s, i) => {
                    const start = (acc / total) * 2 * Math.PI - Math.PI / 2;
                    acc += s.pct;
                    const end = (acc / total) * 2 * Math.PI - Math.PI / 2;
                    const large = end - start > Math.PI ? 1 : 0;
                    const x1 = cx + r * Math.cos(start);
                    const y1 = cy + r * Math.sin(start);
                    const x2 = cx + r * Math.cos(end);
                    const y2 = cy + r * Math.sin(end);
                    return (
                      <path key={i}
                        d={`M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`}
                        fill={colors[s.kind]}
                        stroke="white"
                        strokeWidth="2"
                      />
                    );
                  });
                })()}
                <circle cx="100" cy="100" r="42" fill="white" />
              </svg>
              <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' }}>
                <div className="label-mono">Total</div>
                <div style={{ fontWeight: 800, fontSize: 22 }}>4,927</div>
              </div>
            </div>
          </div>
        </div>

        {/* segments table */}
        <Card id="/audience.segments" title="Audience segments" tag={{ label: 'Ranked by match' }}>
          <div className="col" style={{ marginTop: 8 }}>
            {segments.map((s, i) => (
              <div key={i} className="row" style={{
                padding: '16px 0',
                borderBottom: i < segments.length - 1 ? '1px solid var(--line)' : 'none',
                gap: 20,
              }}>
                <div style={{ width: 40, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mute)' }}>{String(i + 1).padStart(2, '0')}</div>
                <div style={{ flex: 1, fontWeight: 600, letterSpacing: '-0.01em' }}>{s.name}</div>
                <div style={{ width: 100 }}>
                  <span className={`tag ${s.kind === 'IDEAL' ? 'pink' : s.kind === 'TIER 2' ? 'warn' : ''}`}>{s.kind}</span>
                </div>
                <div style={{ width: 280 }}>
                  <div className="row between" style={{ marginBottom: 4 }}>
                    <span className="label-mono">{s.pct}% of audience</span>
                    <span className="label-mono">{s.match}% match</span>
                  </div>
                  <div style={{ height: 4, background: 'var(--bg)', borderRadius: 100, overflow: 'hidden' }}>
                    <div style={{
                      height: '100%',
                      width: `${s.match}%`,
                      background: s.kind === 'NOISE' ? 'var(--line)' : s.kind === 'TIER 2' ? 'var(--warn)' : 'var(--pink)',
                    }} />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </Card>

        {/* Findings */}
        <Card id="/audience.findings" title="Pattern findings" tag={{ label: 'Plain text · no charts' }} style={{ marginTop: 24 }}>
          <div className="col gap-12" style={{ marginTop: 8 }}>
            {findings.map((f, i) => (
              <div key={i} className="row" style={{
                padding: 16,
                borderRadius: 8,
                border: '1px solid var(--line)',
                background: f.kind === 'IDEAL' ? 'rgba(236,75,138,0.04)' : 'rgba(244,165,43,0.04)',
                gap: 16,
              }}>
                <span className={`tag ${f.kind === 'IDEAL' ? 'pink' : 'warn'}`} style={{ alignSelf: 'flex-start', marginTop: 2 }}>{f.kind}</span>
                <div style={{ fontSize: 15, color: 'var(--ink)', lineHeight: 1.5, fontWeight: 500 }}>{f.text}</div>
              </div>
            ))}
          </div>
        </Card>
      </div>
      <Footer />
    </div>
  );
}

window.PageAudience = PageAudience;