// StatCard, PlayerTable, CampSummaryRow + HomePage composition
const STAT_ICON = {
  reg:   (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>),
  rev:   (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>),
  fill:  (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>),
  nps:   (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="12 2 15 8.5 22 9.3 17 14 18.2 21 12 17.8 5.8 21 7 14 2 9.3 9 8.5 12 2"/></svg>),
};

const StatCard = ({ icon, label, value, trend, up = true }) => (
  <div className="cp-card cp-stat">
    <div className="ico">{icon}</div>
    <div className="label">{label}</div>
    <div className="value">{value}</div>
    {trend && <div className={`trend ${up ? "" : "down"}`}><span>{up ? "↑" : "↓"}</span><span>{trend}</span></div>}
  </div>
);

const PLAYERS = [
  { name: "Maya Lin",      camp: "Fairhope Soccer Camp", age: "U12", status: "Confirmed",    balance: "$0" },
  { name: "Jules Okafor",  camp: "Atlanta GK Intensive", age: "U14", status: "Waitlist",     balance: "$0" },
  { name: "Theo Park",     camp: "Tampa Skills Camp",    age: "U10", status: "Confirmed",    balance: "$0" },
  { name: "Riya Patel",    camp: "Boulder Mountain",     age: "U12", status: "Confirmed",    balance: "$0" },
  { name: "Sam Brennan",   camp: "Brooklyn Futsal",      age: "U8",  status: "Payment due",  balance: "$219" },
  { name: "Avery Lefèvre", camp: "Fairhope Soccer Camp", age: "U14", status: "Confirmed",    balance: "$0" },
];

const PlayerTable = () => (
  <div className="cp-card" style={{ padding: 0, overflow: "hidden" }}>
    <div style={{ padding: "18px 20px", display: "flex", alignItems: "center", justifyContent: "space-between", borderBottom: "1px solid var(--bee-border)" }}>
      <h3 style={{ margin: 0, fontFamily: "var(--bee-font-body)", fontWeight: 700, fontSize: 16 }}>Recent Registrations</h3>
      <div style={{ display: "flex", gap: 8 }}>
        <button style={{ background: "transparent", border: "1.5px solid var(--bee-gray-300)", borderRadius: 999, padding: "6px 14px", fontFamily: "var(--bee-font-body)", fontWeight: 700, fontSize: 12, cursor: "pointer" }}>Export</button>
        <button style={{ background: "linear-gradient(180deg,#FFBB00,#FFD700)", border: 0, borderRadius: 999, padding: "6px 14px", fontFamily: "var(--bee-font-body)", fontWeight: 700, fontSize: 12, cursor: "pointer", color: "var(--bee-ink)" }}>+ Add Player</button>
      </div>
    </div>
    <table className="cp-table">
      <thead><tr>
        <th>Player</th><th>Camp</th><th>Age</th><th>Status</th><th>Balance</th>
      </tr></thead>
      <tbody>
        {PLAYERS.map((p) => {
          const initials = p.name.split(" ").map((s) => s[0]).slice(0, 2).join("");
          const statusClr =
            p.status === "Confirmed" ? { bg: "#E6F8EE", fg: "#1E9E5A" } :
            p.status === "Waitlist"  ? { bg: "#FEE2E2", fg: "#D80027" } :
                                       { bg: "#FFF6CC", fg: "#7A5A00" };
          return (
            <tr key={p.name}>
              <td><span className="av-sm">{initials}</span>{p.name}</td>
              <td>{p.camp}</td>
              <td>{p.age}</td>
              <td><span style={{ background: statusClr.bg, color: statusClr.fg, padding: "4px 10px", borderRadius: 999, fontWeight: 700, fontSize: 11 }}>{p.status}</span></td>
              <td style={{ fontWeight: p.balance === "$0" ? 400 : 700, color: p.balance === "$0" ? "var(--bee-fg-muted)" : "var(--bee-danger)" }}>{p.balance}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  </div>
);

const UPCOMING = [
  { name: "Fairhope Soccer Camp", date: "Jun 24–28", spots: "18 / 24" },
  { name: "Atlanta GK Intensive", date: "Jul 22–26", spots: "12 / 16" },
  { name: "Boulder Mountain Camp", date: "Aug 5–9",  spots: "22 / 28" },
  { name: "Austin Champion Camp", date: "Aug 19–23", spots: "9 / 20" },
];

const UpcomingCamps = () => (
  <div className="cp-card cp-side-card">
    <h3>Upcoming Camps</h3>
    {UPCOMING.map((c) => (
      <div className="row" key={c.name}>
        <div className="thumb" />
        <div className="text">
          <span className="ttl">{c.name}</span>
          <span className="sub">{c.date}</span>
        </div>
        <span className="count">{c.spots}</span>
      </div>
    ))}
    <button style={{ marginTop: 14, width: "100%", background: "transparent", border: "1.5px solid var(--bee-gray-300)", borderRadius: 999, padding: "10px 14px", fontFamily: "var(--bee-font-body)", fontWeight: 700, fontSize: 12, cursor: "pointer" }}>View All Camps →</button>
  </div>
);

const HomePage = () => (
  <div className="cp-page">
    <div className="cp-page-head">
      <div>
        <h1>Good morning, Diego</h1>
        <div className="sub">Summer '26 registration is open — your club has 12 active camps.</div>
      </div>
      <div style={{ display: "flex", gap: 10 }}>
        <button style={{ background: "transparent", border: "1.5px solid var(--bee-gray-300)", borderRadius: 999, padding: "10px 18px", fontFamily: "var(--bee-font-body)", fontWeight: 700, fontSize: 12, cursor: "pointer" }}>Reports</button>
        <button style={{ background: "linear-gradient(180deg,#FFBB00,#FFD700)", border: 0, borderRadius: 999, padding: "10px 18px", fontFamily: "var(--bee-font-body)", fontWeight: 700, fontSize: 12, cursor: "pointer", color: "var(--bee-ink)" }}>+ New Camp</button>
      </div>
    </div>
    <div className="cp-grid">
      <StatCard icon={STAT_ICON.reg}  label="REGISTRATIONS"  value="248" trend="34% vs last summer" up />
      <StatCard icon={STAT_ICON.rev}  label="REVENUE"        value="$58.2K" trend="12% MoM" up />
      <StatCard icon={STAT_ICON.fill} label="FILL RATE"      value="86%" trend="3 pts" up />
      <StatCard icon={STAT_ICON.nps}  label="PARENT NPS"     value="71" trend="2 pts" up={false} />
    </div>
    <div className="cp-row2">
      <PlayerTable />
      <UpcomingCamps />
    </div>
  </div>
);

window.HomePage = HomePage;