// === Competitor detail page ===

const CompetitorPage = ({ competitor: c, onBack }) => {
  return (
    <div className="body">
      {/* Hero */}
      <div className="card" style={{padding: 0}}>
        <div style={{padding: '20px 22px', display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 22, alignItems: 'center'}}>
          <Fav init={c.init} size="xl"/>
          <div className="stack-4">
            <div className="row" style={{gap: 10}}>
              <h1 className="section-title" style={{fontSize: 26}}>{c.name}</h1>
              <span className="muted mono" style={{fontSize: 12}}>{c.domain}</span>
              {c.rising && <Pill tone="coral"><span className="dot"/> rising threat</Pill>}
              {c.threat === 'high' && <Pill tone="coral">tier-1 threat</Pill>}
            </div>
            <div className="muted" style={{fontSize: 12.5, maxWidth: 720}}>
              Outranks Admiral on <strong style={{color: 'var(--ink-1)'}}>11 queries</strong> across car insurance.
              Strongest on <strong style={{color: 'var(--ink-1)'}}>Claude</strong> and <strong style={{color: 'var(--ink-1)'}}>Perplexity</strong>.
              Has gained <strong style={{color: 'var(--coral)'}}>+3 average rank</strong> this month.
            </div>
          </div>
          <div className="row" style={{gap: 8}}>
            <Btn ghost><Icon name="bell" size={11}/> Watch</Btn>
            <Btn ghost><Icon name="external" size={11}/> Visit site</Btn>
            <Btn primary>Set as benchmark</Btn>
          </div>
        </div>

        {/* KPI strip */}
        <div className="kpi-grid" style={{borderRadius: 0, borderLeft: 0, borderRight: 0, borderTop: '1px solid var(--line)'}}>
          <div className="kpi">
            <div className="label">Bloxx score</div>
            <div className="value">{c.score}<span className="unit">/ 100</span></div>
            <div className="delta-row"><Delta d={c.delta}/> vs last week</div>
            <Sparkline data={trend(c.score, 14, c.score, 6)} color="var(--coral)" w={120} h={20}/>
          </div>
          <div className="kpi">
            <div className="label">Avg rank</div>
            <div className="value">#{Math.round((c.claude + c.gpt + (c.gemini||5) + (c.perplex||5))/4)}</div>
            <div className="delta-row"><Delta d="+1"/> 30-day</div>
          </div>
          <div className="kpi">
            <div className="label">Coverage</div>
            <div className="value">{c.coverage}<span className="unit">/ 142</span></div>
            <div className="delta-row">{Math.round(c.coverage/142*100)}% of tracked queries</div>
          </div>
          <div className="kpi">
            <div className="label">SoV</div>
            <div className="value">{c.sov}<span className="unit">%</span></div>
            <div className="delta-row"><Delta d={c.delta}/> share trend</div>
          </div>
          <div className="kpi">
            <div className="label">Citations</div>
            <div className="value">{c.citations}</div>
            <div className="delta-row"><Delta d="+18"/> this week</div>
          </div>
          <div className="kpi" style={{background: 'var(--coral-soft)'}}>
            <div className="label" style={{color: 'var(--coral)'}}>Vs Admiral</div>
            <div className="value" style={{color: 'var(--coral)'}}>+11</div>
            <div className="delta-row" style={{color: 'var(--coral)'}}>queries where they win</div>
          </div>
        </div>
      </div>

      {/* Provider breakdown */}
      <div className="grid-2" style={{gridTemplateColumns: '1.4fr 1fr', alignItems: 'flex-start'}}>
        <div className="card">
          <div className="card-head">
            <h3>Head-to-head by provider</h3>
            <span className="sub">{c.name} vs Admiral</span>
          </div>
          <div className="card-body">
            <div className="stack-12">
              {[
                {k: 'claude', name: 'Claude', them: c.claude, you: 2},
                {k: 'gpt', name: 'ChatGPT', them: c.gpt, you: 4},
                {k: 'gemini', name: 'Gemini', them: c.gemini, you: 3},
                {k: 'perplex', name: 'Perplexity', them: c.perplex, you: 2},
              ].map(p => {
                const themBetter = p.them && p.them < p.you;
                return (
                  <div key={p.k}>
                    <div className="row" style={{justifyContent: 'space-between', marginBottom: 6}}>
                      <div className="row" style={{gap: 8}}>
                        <LLMDot k={p.k}/>
                        <span style={{fontWeight: 500}}>{p.name}</span>
                      </div>
                      <div className="row" style={{gap: 8, fontSize: 12}}>
                        <span className="mono"><span className="muted">{c.name}:</span> {p.them ? `#${p.them}` : '—'}</span>
                        <span className="mono"><span className="muted">Admiral:</span> #{p.you}</span>
                        {themBetter && <Pill tone="coral">they win</Pill>}
                        {!themBetter && p.them && <Pill tone="green">you win</Pill>}
                      </div>
                    </div>
                    <div style={{position: 'relative', height: 28, background: 'var(--surface-2)', borderRadius: 6, overflow: 'hidden'}}>
                      {/* You */}
                      <div style={{position: 'absolute', left: 0, top: 0, height: '100%', width: `${(11 - p.you) * 9}%`, background: 'var(--navy)', opacity: 0.15}}/>
                      <div style={{position: 'absolute', left: `${(11 - p.you) * 9 - 1}%`, top: 0, height: '100%', width: 2, background: 'var(--navy)'}}/>
                      <div style={{position: 'absolute', left: 8, top: '50%', transform: 'translateY(-50%)', fontSize: 10, color: 'var(--navy)', fontWeight: 600}}>Admiral #{p.you}</div>

                      {/* Them */}
                      {p.them && (
                        <>
                          <div style={{position: 'absolute', right: 0, top: 0, height: '100%', width: `${(11 - p.them) * 9}%`, background: 'var(--coral)', opacity: 0.15}}/>
                          <div style={{position: 'absolute', right: `${(11 - p.them) * 9 - 1}%`, top: 0, height: '100%', width: 2, background: 'var(--coral)'}}/>
                          <div style={{position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)', fontSize: 10, color: 'var(--coral)', fontWeight: 600}}>{c.name} #{p.them}</div>
                        </>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>Their citation sources</h3>
            <span className="sub">where {c.name} gets cited</span>
          </div>
          <div className="divide-y">
            {[
              {d: 'moneysavingexpert.com', n: 38, sent: 'positive', share: 0.42},
              {d: 'which.co.uk', n: 31, sent: 'neutral', share: 0.34},
              {d: 'directline.com', n: 28, sent: 'self-owned', share: 1.0, self: true},
              {d: 'reddit.com', n: 19, sent: 'mixed', share: 0.18},
              {d: 'theguardian.com', n: 14, sent: 'neutral', share: 0.12},
              {d: 'gocompare.com', n: 12, sent: 'neutral', share: 0.34},
            ].map((s, i) => (
              <div key={i} style={{display: 'grid', gridTemplateColumns: 'auto 1fr auto auto', gap: 10, padding: '10px 14px', alignItems: 'center'}}>
                <Fav init={s.d[0].toUpperCase()}/>
                <div style={{fontSize: 12.5, overflow: 'hidden', textOverflow: 'ellipsis'}}>
                  {s.d}
                  {s.self && <span className="pill green" style={{marginLeft: 6, fontSize: 9.5, padding: '1px 5px'}}>self</span>}
                </div>
                <Pill tone={s.sent === 'positive' ? 'green' : s.sent === 'mixed' ? 'gold' : ''}>{s.sent}</Pill>
                <div className="num" style={{fontWeight: 600, width: 30, textAlign: 'right'}}>{s.n}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Where they outrank you */}
      <div className="card">
        <div className="card-head">
          <h3>Queries where {c.name} outranks Admiral</h3>
          <span className="sub">prioritized by volume × gap</span>
          <div className="grow"/>
          <Btn ghost sm><Icon name="download" size={11}/> CSV</Btn>
        </div>
        <table className="tbl">
          <thead>
            <tr>
              <th>Prompt</th>
              <th className="center">Their rank</th>
              <th className="center">Your rank</th>
              <th className="center">Gap</th>
              <th>Top cited source</th>
              <th className="right">Volume</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {[
              {q: 'Best car insurance UK 2026', them: 1, you: 2, src: 'moneysavingexpert.com', v: 'high'},
              {q: 'Cheapest car insurance for new drivers', them: 2, you: 5, src: 'which.co.uk', v: 'high'},
              {q: 'Best car insurance with breakdown cover', them: 1, you: 6, src: 'directline.com', v: 'med'},
              {q: 'Comprehensive vs third-party UK', them: 2, you: 4, src: 'gocompare.com', v: 'high'},
              {q: 'Black box insurance for young drivers', them: 1, you: 3, src: 'moneysavingexpert.com', v: 'med'},
              {q: 'Car insurance for electric vehicles UK', them: 3, you: 7, src: 'forbes.com/advisor/uk', v: 'med'},
              {q: 'Admiral vs Direct Line', them: 1, you: 2, src: 'reddit.com', v: 'med'},
            ].map((q, i) => (
              <tr key={i}>
                <td style={{fontWeight: 500}}>{q.q}</td>
                <td className="center"><Pill tone="coral" solid>#{q.them}</Pill></td>
                <td className="center"><Pill>#{q.you}</Pill></td>
                <td className="center"><span className="mono" style={{color: 'var(--coral)', fontWeight: 600}}>+{q.you - q.them}</span></td>
                <td>
                  <span className="row" style={{gap: 6, fontSize: 12}}>
                    <Fav init={q.src[0].toUpperCase()}/>
                    {q.src}
                  </span>
                </td>
                <td className="right"><Pill tone={q.v === 'high' ? 'gold' : ''}>{q.v}</Pill></td>
                <td className="right"><Icon name="chevronR" size={12}/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Sample LLM responses */}
      <div className="card">
        <div className="card-head">
          <h3>How LLMs describe {c.name}</h3>
          <span className="sub">recent response excerpts</span>
        </div>
        <div className="card-body">
          <div className="grid-2" style={{gridTemplateColumns: '1fr 1fr 1fr', gridGap: 14}}>
            {[
              {k: 'claude', q: 'Best car insurance UK 2026',
                t: `${c.name} consistently ranks in the top recommendations, particularly for households seeking transparent pricing and strong claims handling. Frequently cited alongside Aviva and Admiral.`},
              {k: 'gpt', q: 'Cheapest car insurance for new drivers',
                t: `${c.name} is mentioned as competitive for new drivers, with telematics options that can reduce premiums by up to 30%.`},
              {k: 'perplex', q: 'Black box insurance for young drivers',
                t: `${c.name}'s telematics product is well-reviewed; MoneySavingExpert highlights it among top three providers for under-25s.`},
            ].map((s, i) => (
              <div key={i} style={{padding: 14, background: 'var(--surface-2)', borderRadius: 8, fontSize: 12, lineHeight: 1.55, color: 'var(--ink-2)', border: '1px solid var(--line)'}}>
                <div className="row" style={{gap: 6, marginBottom: 8}}>
                  <LLMDot k={s.k}/>
                  <span className="mono muted" style={{fontSize: 10.5}}>{s.q}</span>
                </div>
                <div>"{s.t}"</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Trend over time */}
      <div className="card">
        <div className="card-head">
          <h3>Trend vs Admiral</h3>
          <span className="sub">last 90 days · avg rank</span>
        </div>
        <div className="card-body">
          <BigChart/>
        </div>
      </div>
    </div>
  );
};

window.CompetitorPage = CompetitorPage;