import React from 'react';

export function ScoreDashboardApp() {
  return (
    <div className="app">
      <div className="header"><h1>Score Dashboard</h1><p>View lead and contact scoring</p></div>
      <div className="score-grid">
        <ScoreCard name="High-Value Leads" score={87} category="hot" />
        <ScoreCard name="Engaged Contacts" score={62} category="warm" />
        <ScoreCard name="New Subscribers" score={34} category="cold" />
      </div>
    </div>
  );
}

function ScoreCard({ name, score, category }: any) {
  const color = category === 'hot' ? '#84cc16' : category === 'warm' ? '#f59e0b' : '#6b7280';
  return <div className="score-card"><h3>{name}</h3><div className="score-circle" style={{background:color}}>{score}</div><p>{category}</p></div>;
}