// pro-kontra-card.jsx — Symmetric Pro/Kontra split card (sharewise USP).
// Two columns: Pro (left, green) vs Kontra (right, red). Each item has a count + label.
// Replaces the flat "Top arguments" list with something symmetrical and stronger.

function ProKontraCard({ t, ticker = 'AMZN', pros, kontras, totalRatings, onRate }) {
  return (
    <div style={{
      background: t.surface, borderRadius: 18,
      border: `0.5px solid ${t.border}`, overflow: 'hidden',
    }}>
      {/* Header */}
      <div style={{
        padding: '14px 16px 12px', display: 'flex',
        alignItems: 'baseline', justifyContent: 'space-between',
        borderBottom: `0.5px solid ${t.border}`,
      }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em' }}>
            Was spricht für & gegen {ticker}
          </div>
          <div style={{ fontSize: 11, color: t.textDim, marginTop: 2 }}>
            aus {totalRatings} Bewertungen der Community
          </div>
        </div>
        {Icon.users(t.textDim, 16)}
      </div>

      {/* Split body */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
        {/* Pro column */}
        <div style={{
          background: t.upSoft,
          padding: '12px 12px 14px',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
            <div style={{ width: 18, height: 18, borderRadius: 5, background: t.up,
              display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              {Icon.check('#fff', 12)}
            </div>
            <span style={{ fontSize: 11.5, fontWeight: 700, color: t.up,
              letterSpacing: '0.04em', textTransform: 'uppercase' }}>Pro</span>
            <span style={{ marginLeft: 'auto', fontFamily: SW_MONO, fontSize: 11.5,
              color: t.up, fontWeight: 700 }}>
              {pros.reduce((s, p) => s + p.n, 0)}
            </span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {pros.map((p, i) => (
              <ProKontraItem key={i} t={t} item={p} kind="pro" />
            ))}
          </div>
        </div>

        {/* Kontra column */}
        <div style={{
          background: t.downSoft,
          padding: '12px 12px 14px',
          borderLeft: `0.5px solid ${t.border}`,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
            <div style={{ width: 18, height: 18, borderRadius: 5, background: t.down,
              display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round">
                <path d="M6 6 L18 18 M18 6 L6 18" />
              </svg>
            </div>
            <span style={{ fontSize: 11.5, fontWeight: 700, color: t.down,
              letterSpacing: '0.04em', textTransform: 'uppercase' }}>Kontra</span>
            <span style={{ marginLeft: 'auto', fontFamily: SW_MONO, fontSize: 11.5,
              color: t.down, fontWeight: 700 }}>
              {kontras.reduce((s, k) => s + k.n, 0)}
            </span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {kontras.map((k, i) => (
              <ProKontraItem key={i} t={t} item={k} kind="kontra" />
            ))}
          </div>
        </div>
      </div>

      {/* Footer CTA */}
      <div style={{
        padding: '12px 16px', display: 'flex',
        alignItems: 'center', gap: 10,
        borderTop: `0.5px solid ${t.border}`,
        background: t.bgSubtle,
      }}>
        <div style={{
          width: 26, height: 26, borderRadius: 7, background: t.chip,
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
          fontFamily: SW_MONO, fontWeight: 700, fontSize: 10, color: t.text,
        }}>++</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: '-0.005em' }}>
            Was meinst du zu {ticker}?
          </div>
          <div style={{ fontSize: 10.5, color: t.textMuted, marginTop: 1 }}>
            Bewerte mit ++ / + / ? / − / −−
          </div>
        </div>
        <span style={{ color: t.accent, fontSize: 12, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 2 }}>
          Bewerten {Icon.chevR(t.accent, 14)}
        </span>
      </div>
    </div>
  );
}

// One row inside Pro or Kontra column
function ProKontraItem({ t, item, kind }) {
  const c = kind === 'pro' ? t.up : t.down;
  return (
    <div style={{
      display: 'flex', flexDirection: 'column', gap: 5,
      padding: '8px 10px', borderRadius: 9,
      background: t.surface,
      border: `0.5px solid ${kind === 'pro' ? 'rgba(0,184,92,0.15)' : 'rgba(229,52,42,0.15)'}`,
    }}>
      <div style={{ fontSize: 12, fontWeight: 600, color: t.text, lineHeight: 1.35, letterSpacing: '-0.005em' }}>
        {item.label}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <div style={{ flex: 1, height: 3, background: t.chip, borderRadius: 2, overflow: 'hidden' }}>
          <div style={{
            width: `${Math.min(100, item.pct)}%`, height: '100%', background: c,
            borderRadius: 2,
          }} />
        </div>
        <span style={{ fontFamily: SW_MONO, fontSize: 10.5, fontWeight: 700, color: c, minWidth: 22, textAlign: 'right' }}>
          {item.n}
        </span>
      </div>
    </div>
  );
}

// Sample data for AMZN
const PROKONTRA_AMZN = {
  totalRatings: 232,
  pros: [
    { label: 'Lohnende Investition > 10% / Jahr', n: 24, pct: 100 },
    { label: 'Marktführer oder Top 3', n: 11, pct: 46 },
    { label: 'Zukunftsfähiges Geschäftsmodell', n: 11, pct: 46 },
    { label: 'Starke Marke', n: 8, pct: 33 },
  ],
  kontras: [
    { label: 'Niedrige Dividendenrendite erwartet', n: 4, pct: 100 },
    { label: 'Hoher Streubesitz', n: 3, pct: 75 },
    { label: 'Bewertung zu hoch', n: 2, pct: 50 },
    { label: 'Nachhaltigkeit wenig wichtig', n: 1, pct: 25 },
  ],
};

Object.assign(window, { ProKontraCard, ProKontraItem, PROKONTRA_AMZN });