import React from 'react';

export function AccountDirectoryApp() {
  return (
    <div className="app">
      <div className="header"><h1>Account Directory</h1><p>Manage company accounts</p></div>
      <div className="account-grid">
        <AccountCard name="Acme Corp" contacts={45} deals={12} revenue="$125,000" />
        <AccountCard name="TechStart Inc" contacts={23} deals={5} revenue="$67,500" />
        <AccountCard name="Global Solutions" contacts={78} deals={20} revenue="$250,000" />
      </div>
    </div>
  );
}

function AccountCard({ name, contacts, deals, revenue }: any) {
  return <div className="account-card"><h3>{name}</h3><p>{contacts} contacts • {deals} deals</p><p style={{color:'#10b981',fontWeight:'bold',marginTop:'10px'}}>{revenue}</p></div>;
}