// === Portfolio overview — first screen, all 11 brands ===

const PortfolioPage = ({ onOpenBrand }) => {
  const groups = {
    'Flagship & Group': window.BRANDS.filter(b => ['admiral','admiral-group'].includes(b.id)),
    'Specialist motor sub-brands': window.BRANDS.filter(b => ['bell','diamond','elephant','veygo'].includes(b.id)),
    'Commercial & adjacencies': window.BRANDS.filter(b => ['gladiator','admiral-business','morethan'].includes(b.id)),
    'Finance & ventures': window.BRANDS.filter(b => ['admiral-money','admiral-pioneer'].includes(b.id)),
  };

  const totalQueries = 1284;
  const portfolioSov = 17.4;

  return (
    <div className="body">
      {/* Hero strip */}
      <div className="card" style={{padding: 0, overflow: 'hidden'}}>
        <div style={{padding: '20px 22px', display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 24, alignItems: 'center', borderBottom: '1px solid var(--line)'}}>
          <div>
            <div className="eyebrow">Portfolio brief · week of 4 May</div>
            <h1 className="section-title" style={{marginTop: 6, fontSize: 28, lineHeight: 1.2, maxWidth: 540}}>
              Across <em>11 brands</em> and 24 verticals, Admiral's share of LLM voice held at <span style={{color: 'var(--navy)'}}>17.4%</span> — but Direct Line widened its lead this week.
            </h1>
          </div>
          <div className="stack-4">
            <div className="eyebrow">Portfolio SoV</div>
            <div className="hero-num">17.4<span style={{fontSize: 18, color: 'var(--ink-3)'}}>%</span></div>
            <div className="row" style={{fontSize: 11.5, color: 'var(--ink-3)'}}>
              <Delta d="+0.4"/> vs last week
            </div>
            <Sparkline data={trend(7, 14, 16, 2)} color="var(--navy)" w={140} h={28} fill dotLast/>
          </div>
          <div className="stack-4">
            <div className="eyebrow">Tracked queries</div>
            <div className="hero-num">{totalQueries.toLocaleString()}</div>
            <div className="row" style={{fontSize: 11.5, color: 'var(--ink-3)'}}>
              <Delta d="+38"/> this week
            </div>
            <Sparkline data={trend(11, 14, 60, 6)} color="var(--violet)" w={140} h={28} fill dotLast/>
          </div>
          <div className="stack-4">
            <div className="eyebrow">Critical anomalies</div>
            <div className="hero-num" style={{color: 'var(--coral)'}}>7</div>
            <div className="row" style={{fontSize: 11.5, color: 'var(--ink-3)'}}>
              4 rising threats · 3 rank drops
            </div>
            <Sparkline data={[3,4,3,5,4,6,5,7,6,5,7,6,7,7]} color="var(--coral)" w={140} h={28} fill dotLast/>
          </div>
        </div>

        {/* Provider strip */}
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: '0'}}>
          {[
            {k: 'claude', name: 'Claude', sov: 19.2, d: '+1.2', rank: 2},
            {k: 'gpt', name: 'ChatGPT', sov: 16.8, d: '−0.8', rank: 3},
            {k: 'gemini', name: 'Gemini', sov: 15.1, d: '+0.3', rank: 3},
            {k: 'perplex', name: 'Perplexity', sov: 18.5, d: '+0.6', rank: 2},
          ].map(p => (
            <div key={p.k} style={{padding: '14px 18px', borderRight: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 12}}>
              <LLMDot k={p.k}/>
              <div style={{flex: 1}}>
                <div style={{fontSize: 11.5, color: 'var(--ink-3)'}}>{p.name}</div>
                <div className="row" style={{gap: 6}}>
                  <span className="mono" style={{fontSize: 14, fontWeight: 600}}>{p.sov}%</span>
                  <Delta d={p.d}/>
                </div>
              </div>
              <div className="stack-2" style={{textAlign: 'right'}}>
                <div style={{fontSize: 10, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '.06em'}}>Avg rank</div>
                <div className="mono" style={{fontSize: 13, fontWeight: 600}}>#{p.rank}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Brand grids */}
      {Object.entries(groups).map(([label, brands]) => (
        <div key={label}>
          <div className="row" style={{justifyContent: 'space-between', marginBottom: 10}}>
            <div className="row" style={{gap: 10}}>
              <h2 className="section-title" style={{fontSize: 18}}>{label}</h2>
              <span className="muted mono" style={{fontSize: 11}}>{brands.length} brands</span>
            </div>
          </div>
          <div className="grid-4">
            {brands.map(b => <BrandCard key={b.id} b={b} onClick={() => onOpenBrand(b)}/>)}
          </div>
        </div>
      ))}

      {/* Bottom feed: anomalies */}
      <div className="grid-2" style={{gridTemplateColumns: '1.4fr 1fr'}}>
        <div className="card">
          <div className="card-head">
            <h3>Live anomalies</h3>
            <span className="sub">across the portfolio</span>
            <div className="grow"/>
            <Btn ghost sm>View all <Icon name="chevronR" size={11}/></Btn>
          </div>
          <div className="divide-y">
            {window.ANOMALIES.map((a, i) => (
              <div key={i} style={{display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 12, padding: '10px 14px', alignItems: 'center'}}>
                <Pill tone={a.sev === 'high' ? 'coral' : a.sev === 'med' ? 'gold' : ''}>{a.kind}</Pill>
                <div>
                  <div style={{fontSize: 12.5}}>{a.text}</div>
                </div>
                <div className="muted mono" style={{fontSize: 11}}>{a.when}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>Top movers</h3>
            <span className="sub">competitor heat</span>
          </div>
          <div className="divide-y">
            {[
              {n: 'Direct Line', d: '+3', score: 88, init: 'DL'},
              {n: 'Hastings Direct', d: '+4', score: 58, init: 'HD'},
              {n: 'esure', d: '+5', score: 41, init: 'ES'},
              {n: 'Aviva', d: '+1', score: 81, init: 'AV'},
              {n: 'Churchill', d: '−2', score: 64, init: 'CH'},
              {n: 'MoreThan', d: '−3', score: 49, init: 'MT'},
            ].map((m, i) => (
              <div key={i} style={{display: 'grid', gridTemplateColumns: 'auto 1fr auto auto', gap: 10, padding: '10px 14px', alignItems: 'center'}}>
                <Fav init={m.init}/>
                <div style={{fontSize: 12.5}}>{m.n}</div>
                <Sparkline data={trend(i+3, 12, m.score, 6)} color={m.d.startsWith('+') ? 'var(--coral)' : 'var(--ink-4)'} w={50} h={16}/>
                <Delta d={m.d}/>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

const BrandCard = ({ b, onClick }) => {
  const verts = window.VERTICALS[b.id] || window.VERTICALS_DEFAULT;
  return (
    <div className="brand-card" onClick={onClick}>
      <div className="head">
        <Fav init={b.initial} size="lg"/>
        <div style={{flex: 1, minWidth: 0}}>
          <h4>{b.name}</h4>
          <div className="muted mono" style={{fontSize: 10.5}}>{b.domain}</div>
        </div>
        <HealthRing value={b.health}/>
      </div>
      <div className="desc">{b.desc}</div>
      <div className="row" style={{gap: 4, flexWrap: 'wrap'}}>
        {verts.slice(0, 4).map(v => (
          <Pill key={v.id}>
            <span style={{color: 'var(--ink-3)'}}>{v.name}</span>
            <span className="mono" style={{fontSize: 9.5, color: 'var(--ink-4)', marginLeft: 4}}>#{v.rank}</span>
          </Pill>
        ))}
        {verts.length > 4 && <Pill>+{verts.length - 4}</Pill>}
      </div>
      <div className="stat-row">
        <div className="stat">
          <div className="v">#{b.rank} <Delta d={b.delta}/></div>
          <div className="l">Avg rank</div>
        </div>
        <div className="stat">
          <div className="v">{verts.reduce((s, v) => s + (v.queries || 0), 0)}</div>
          <div className="l">Queries</div>
        </div>
        <div className="stat">
          <div className="v" style={{color: b.health >= 70 ? 'var(--green)' : b.health >= 55 ? 'var(--gold)' : 'var(--coral)'}}>{b.health}</div>
          <div className="l">Health</div>
        </div>
      </div>
    </div>
  );
};

window.PortfolioPage = PortfolioPage;