/* hermon-dashboard.jsx — faithful recreation of the real Hermon product UI.
   globals: Icon, CountUp. Exports HermonDashboard, LeaderboardReal, CommissionReal, WorkQueueReal. */

/* ---------- smooth SVG path helper ---------- */
function smoothPath(pts) {
  if (pts.length < 2) return "";
  let d = `M${pts[0][0]},${pts[0][1]}`;
  for (let i = 0; i < pts.length - 1; i++) {
    const p0 = pts[i - 1] || pts[i],p1 = pts[i],p2 = pts[i + 1],p3 = pts[i + 2] || p2,t = 0.16;
    const c1x = p1[0] + (p2[0] - p0[0]) * t,c1y = p1[1] + (p2[1] - p0[1]) * t;
    const c2x = p2[0] - (p3[0] - p1[0]) * t,c2y = p2[1] - (p3[1] - p1[1]) * t;
    d += ` C${c1x.toFixed(1)},${c1y.toFixed(1)} ${c2x.toFixed(1)},${c2y.toFixed(1)} ${p2[0]},${p2[1]}`;
  }
  return d;
}

/* ---------- KPI data (from the real dashboard) ---------- */
const KPIS = [
{ label: "New Leads", to: 401, fmt: "int", trend: "+12.64%", dir: "up", desc: "Total number of new leads created within the period, based on lead…" },
{ label: "Booking Rate", to: 77.31, fmt: "pct", dec: 2, trend: "+20.72%", dir: "up", desc: "calls_booked ÷ new_leads × 100." },
{ label: "Booked Calls", to: 310, fmt: "int", trend: "+35.96%", dir: "up", desc: "Unique leads with at least one appointment (any outcome) in the period." },
{ label: "Scheduled Calls", to: 188, fmt: "int", trend: "+8.67%", dir: "up", desc: "Unique leads whose latest appointment is NOT cancelled or rescheduled." },
{ label: "Calls Taken", to: 168, fmt: "int", trend: "+16.67%", dir: "up", desc: "Unique leads whose latest past appointment has a completed outcome." },
{ label: "No Show", to: 15, fmt: "int", trend: "-51.61%", dir: "down", desc: "Unique leads whose latest past appointment is marked no-show or has…" },
{ label: "Contracts Signed", to: 93, fmt: "int", trend: "+9.41%", dir: "up", desc: "Number of contracts with status SIGNED and signed_at within the period." },
{ label: "Cash Collected", to: 453400, fmt: "eur", trend: "+16.53%", dir: "up", desc: "Sum of PAID payments in the period minus any associated succeeded…" },
{ label: "Close Rate (Taken)", to: 55.36, fmt: "pct", dec: 2, trend: "-6.22%", dir: "down", desc: "contract_signed ÷ calls_taken × 100." },
{ label: "Show Rate (Booked)", to: 54.19, fmt: "pct", dec: 2, trend: "-14.2%", dir: "down", desc: "calls_taken ÷ calls_booked × 100." }];

function KpiValue({ k }) {
  if (k.fmt === "eur") return <span>€<CountUp to={k.to} dur={1500} /></span>;
  if (k.fmt === "pct") return <span><CountUp to={k.to} dur={1300} decimals={k.dec} />%</span>;
  return <CountUp to={k.to} dur={1200} />;
}
function Spark({ dir }) {
  const up = dir === "up";
  const d = up ? "M2,16 L10,12 L18,13 L26,7 L34,9 L40,3" : "M2,4 L10,8 L18,6 L26,12 L34,10 L40,16";
  const c = up ? "var(--hd-green)" : "var(--hd-red)";
  return (
    <svg className="hd-kpi__spark" viewBox="0 0 42 19" fill="none">
      <path d={d} stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}
function KpiCard({ k }) {
  return (
    <div className="hd-kpi">
      <div className="hd-kpi__top">
        <span className="hd-kpi__label">{k.label}</span>
        <span className={"hd-trend " + k.dir}>{k.dir === "up" ? <Icon.arrowUR /> : <Icon.arrowUR style={{ transform: "scaleY(-1)" }} />}{k.trend}</span>
      </div>
      <div className="hd-kpi__val"><KpiValue k={k} /></div>
      <div className="hd-kpi__foot">
        <div className="hd-kpi__txt">
          <div className="hd-kpi__desc">{k.desc}</div>
        </div>
        <Spark dir={k.dir} />
      </div>
    </div>);

}

/* ---------- Revenue area chart ---------- */
function RevenueChart({ h = 190 }) {
  const W = 620,top = 22,bot = h - 26;
  const cash = [0.52, 0.26, 0.60, 0.86, 0.40, 0.22, 0.40]; // purple — Total Cash Collected
  const rev = [0.56, 0.08, 0.52, 0.66, 0.26, 0.12, 0.36]; // orange — Revenue
  const dates = ["May 30", "May 31", "Jun 01", "Jun 02", "Jun 03", "Jun 04", "Jun 05"];
  const n = cash.length, step = (W - 32) / (n - 1);
  const xs = cash.map((_, i) => 16 + i * step);
  const toPts = (arr) => arr.map((v, i) => [xs[i], bot - v * (bot - top)]);
  const cashP = toPts(cash),revP = toPts(rev);
  const area = (pts) => smoothPath(pts) + ` L${pts[pts.length - 1][0]},${bot} L${pts[0][0]},${bot} Z`;
  const eur = (v, scale) => Math.round(v * scale / 100) * 100;
  const cashEur = cash.map((v) => eur(v, 26000)), revEur = rev.map((v) => eur(v, 24000));

  const ref = React.useRef(null);
  const [hi, setHi] = React.useState(null);
  const onMove = (e) => {
    const r = ref.current.getBoundingClientRect();
    const f = (e.clientX - r.left) / r.width;
    setHi(Math.max(0, Math.min(n - 1, Math.round((f * W - 16) / step))));
  };
  const fmt = (v) => "€" + v.toLocaleString("en-US");
  const tipLeft = hi == null ? 0 : Math.max(16, Math.min(84, (xs[hi] / W) * 100));

  return (
    <div className="hd-chart" ref={ref} onMouseMove={onMove} onMouseLeave={() => setHi(null)}>
      <svg viewBox={`0 0 ${W} ${h}`} preserveAspectRatio="none">
        <defs>
          <linearGradient id="gCash" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="var(--hd-purple)" stopOpacity="0.26" />
            <stop offset="1" stopColor="var(--hd-purple)" stopOpacity="0" />
          </linearGradient>
          <linearGradient id="gRev" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="var(--hd-orange)" stopOpacity="0.24" />
            <stop offset="1" stopColor="var(--hd-orange)" stopOpacity="0" />
          </linearGradient>
        </defs>
        {[0, 1, 2, 3].map((i) => <line key={i} x1="0" x2={W} y1={top + i * ((bot - top) / 3)} y2={top + i * ((bot - top) / 3)} stroke="var(--hd-line)" strokeWidth="1" />)}
        <path d={area(revP)} fill="url(#gRev)" />
        <path d={area(cashP)} fill="url(#gCash)" />
        <path d={smoothPath(revP)} fill="none" stroke="var(--hd-orange)" strokeWidth="2.4" strokeLinecap="round" />
        <path d={smoothPath(cashP)} fill="none" stroke="var(--hd-purple)" strokeWidth="2.4" strokeLinecap="round" />
        {hi != null &&
          <g>
            <line x1={xs[hi]} x2={xs[hi]} y1={top - 6} y2={bot} stroke="var(--hd-line-2)" strokeWidth="1" strokeDasharray="3 3" />
            <circle cx={revP[hi][0]} cy={revP[hi][1]} r="3.5" fill="var(--hd-orange)" stroke="#fff" strokeWidth="2" />
            <circle cx={cashP[hi][0]} cy={cashP[hi][1]} r="3.5" fill="var(--hd-purple)" stroke="#fff" strokeWidth="2" />
          </g>}
        {hi == null && <circle cx={cashP[3][0]} cy={cashP[3][1]} r="3.5" fill="var(--hd-purple)" stroke="#fff" strokeWidth="2" />}
      </svg>
      {hi != null &&
        <div className="hd-tip" style={{ left: tipLeft + "%" }}>
          <div className="hd-tip__d">{dates[hi]}</div>
          <div className="hd-tip__r"><span className="dot" style={{ background: "var(--hd-purple)" }}></span>Cash Collected <b>{fmt(cashEur[hi])}</b></div>
          <div className="hd-tip__r"><span className="dot" style={{ background: "var(--hd-orange)" }}></span>Revenue <b>{fmt(revEur[hi])}</b></div>
        </div>}
      <div className="hd-xaxis">
        {dates.map((d, i) => <span key={i} className={hi === i ? "on" : ""}>{d}</span>)}
      </div>
    </div>);

}

/* ---------- Call distribution pie ---------- */
function CallPie() {
  const bg = "conic-gradient(var(--hd-purple) 0 82%, color-mix(in oklab,var(--hd-purple),#000 28%) 82% 89%, color-mix(in oklab,var(--hd-purple),#fff 32%) 89% 95%, color-mix(in oklab,var(--hd-purple),#fff 62%) 95% 100%)";
  return (
    <div className="hd-pie-wrap">
      <div className="hd-pie" style={{ borderRadius: "50%", background: bg, boxShadow: "0 8px 20px -8px rgba(109,74,230,.45)" }}></div>
      <div className="hd-pie-c"><b><CountUp to={336} dur={1400} /> Calls</b><span>Total Booking</span></div>
    </div>);

}

/* ---------- Calendar availability ---------- */
function CalendarAvail() {
  const levels = ["l2", "l1", "l2", "l0", "l1", "l2", "l2", "l1", "l0", "l2", "l1", "l2", "l2", "orange"];
  return (
    <div className="hd-cal">
      <div className="hd-cal__row">
        <div><div className="hd-cal__k">Open slots</div><div className="hd-cal__v"><CountUp to={37} dur={1100} /> <small>/ 62</small></div></div>
        <div style={{ textAlign: "right" }}><div className="hd-cal__k">Available</div><div className="hd-cal__v pl"><CountUp to={59.68} dur={1300} decimals={2} />%</div></div>
      </div>
      <div className="hd-heat">
        {levels.map((l, i) => <i key={i} className={l}></i>)}
      </div>
      <div className="hd-risk">
        <div className="k">Revenue at Risk</div>
        <div className="v">€<CountUp to={9615.35} dur={1500} decimals={2} /></div>
      </div>
    </div>);

}

/* ---------- Sidebar ---------- */
const NAV = [
{ i: "grid", t: "Dashboard", on: true }, { i: "users", t: "Leads" }, { i: "calendar", t: "Appointment" },
{ i: "contract", t: "Contracts" }, { i: "card", t: "Payments" }, { i: "layers", t: "Programs" },
{ i: "target", t: "Status & Outcome" }, { i: "gear", t: "Settings", chev: true }];

function Sidebar() {
  return (
    <aside className="hdash__side">
      <div className="hd-logo">
        <span className="mk"><img src="assets/hermon-icon.png" alt="Hermon"/></span>
        <img src="assets/hermon-logo.png" alt="herMon" />
      </div>
      <div className="hd-navhead">Platform</div>
      {NAV.map((n, idx) => {const Ic = Icon[n.i];
        return <div className={"hd-navitem" + (n.on ? " on" : "")} key={idx}><Ic /><span>{n.t}</span>{n.chev && <Icon.chevR className="chev" />}</div>;
      })}
      <div className="hd-side-sp"></div>
      <div className="hd-user">
        <span className="av">AJ</span>
        <div style={{ minWidth: 0 }}><div className="nm">Abel Jansen</div><div className="rl">Owner</div></div>
        <Icon.chevUpDown className="chev" />
      </div>
    </aside>);

}

/* ---------- Full dashboard (hero) ---------- */
function HermonDashboard() {
  return (
    <div className="hdash">
      <div className="hdash__shell">
        <Sidebar />
        <div className="hdash__main">
          <div className="hd-appbar">
            <div className="crumb"><Icon.panelLeft /> Dashboard</div>
            <div className="ws">
              <span className="wsmk">CA</span>
              <div style={{ minWidth: 0 }}><div className="nm">Coaching Academy</div><div className="sub">coaching-academy</div></div>
              <Icon.chevUpDown className="chev" />
            </div>
          </div>
          <div className="hd-body">
            <div className="hd-head">
              <div className="hd-h1">Dashboard</div>
              <div className="r"><span className="hd-dd">All Team Members <Icon.chevDown /></span></div>
            </div>
            <div className="hd-controls">
              <span className="hd-pill"><Icon.calendar /> May 01, 2026 - May 31, 2026 <Icon.x className="x" width={11} height={11} /></span>
              <span className="hd-pill"><Icon.filter /> Filters</span>
              <span style={{ marginLeft: "auto" }} className="hd-dd">Metrics (31) <Icon.chevDown /></span>
            </div>
            <div className="hd-kpis">{KPIS.map((k, i) => <KpiCard k={k} key={i} />)}</div>
            <div style={{ display: "flex", justifyContent: "center" }}>
              <span className="hd-showmore">Show 21 More Metrics <Icon.chevDown /></span>
            </div>
            <div className="hd-row3">
              <div className="hd-card">
                <div className="hd-card__h">
                  <div><div className="hd-card__t">Revenue</div><div className="hd-card__sub">Estimated revenue trends</div></div>
                  <span className="hd-pill r"><Icon.calendar /> May 29 - Jun 05 <Icon.x className="x" width={11} height={11} /></span>
                </div>
                <div className="hd-legend">
                  <span><i style={{ background: "var(--hd-purple)" }}></i>Total Cash Collected <b>€97,000</b></span>
                  <span><i style={{ background: "var(--hd-orange)" }}></i>Revenue <b>€90,000</b></span>
                </div>
                <RevenueChart />
              </div>
              <div className="hd-card">
                <div className="hd-card__h"><div className="hd-card__t">Call Distribution By Call</div><span className="hd-pill r"><Icon.filter /> Filters</span></div>
                <CallPie />
              </div>
              <div className="hd-card">
                <div className="hd-card__h"><div className="hd-card__t">Calendar Availability <span className="hd-badge-high">High</span></div><span className="hd-pill r"><Icon.filter /> 1</span></div>
                <CalendarAvail />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>);

}

/* ---------- Leaderboard (real table) ---------- */
const LB_REAL = [
{ rk: 1, g: "g1", nm: "Marcus Vale", rl: "Closer", mk: "MV", c: "#6D4AE6", deals: 44, contracted: "€205,800", cash: "€216,100", close: "49.4%", show: "91.8%" },
{ rk: 2, g: "g2", nm: "Theo Park", rl: "Closer", mk: "TP", c: "#7C5CFF", deals: 34, contracted: "€168,800", cash: "€168,800", close: "57.6%", show: "90.8%" },
{ rk: 3, g: "g3", nm: "Dylan Shaw", rl: "Closer", mk: "DS", c: "#5B6CFF", deals: 13, contracted: "€58,500", cash: "€56,000", close: "72.2%", show: "90.0%" },
{ rk: 4, g: "plain", nm: "Sienna Voss", rl: "Closer", mk: "SV", c: "#C2417E", deals: 11, contracted: "€49,200", cash: "€47,500", close: "61.0%", show: "88.4%" },
{ rk: 5, g: "plain", nm: "Liam Brooks", rl: "Closer", mk: "LB", c: "#1F9D6B", deals: 9, contracted: "€41,000", cash: "€39,800", close: "58.3%", show: "85.1%" }];

function LeaderboardReal({ rows = 5, compact = false }) {
  return (
    <div className="hdash" style={{ background: "transparent" }}>
      <div className="hd-roletabs">
        <span className="hd-tab">Setter <span className="ct">3</span></span>
        <span className="hd-tab">Triager <span className="ct">1</span></span>
        <span className="hd-tab on">Closer <span className="ct">6</span></span>
      </div>
      <div className="hd-tablewrap">
        <table className="hd-table">
          <thead><tr>
            <th>Rank</th><th>Team Member</th><th className="num">Deals</th>{!compact && <th className="num">Contracted</th>}
            <th className="num">Cash Collected</th><th className="num">Close Rate</th><th className="num">Show Rate</th>
          </tr></thead>
          <tbody>
            {LB_REAL.slice(0, rows).map((r, i) =>
            <tr key={i}>
                <td><span className={"hd-rank " + r.g}>{r.rk}</span></td>
                <td><div className="hd-member"><span className="av" style={{ background: r.c }}>{r.mk}</span><div><div className="nm">{r.nm}</div><div className="rl">{r.rl}</div></div></div></td>
                <td className="num hd-strong">{r.deals}</td>
                {!compact && <td className="num">{r.contracted}</td>}
                <td className="num hd-strong">{r.cash}</td>
                <td className="num">{r.close}</td>
                <td className="num">{r.show}</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>);

}

/* ---------- Commission / earnings (real columns styled) ---------- */
const COMM = [
{ nm: "Marcus Vale", mk: "MV", c: "#6D4AE6", deals: "44 deals", contracted: "€205,800", cash: "€216,100", refunded: "€5,000" },
{ nm: "Theo Park", mk: "TP", c: "#7C5CFF", deals: "34 deals", contracted: "€168,800", cash: "€168,800", refunded: "€0" },
{ nm: "Dylan Shaw", mk: "DS", c: "#5B6CFF", deals: "13 deals", contracted: "€58,500", cash: "€56,000", refunded: "€0" }];

function CommissionReal() {
  return (
    <div className="hdash hd-compact" style={{ background: "transparent" }}>
      <div className="hd-tablewrap">
        <table className="hd-table">
          <thead><tr><th>Closer</th><th className="num">Cash Collected</th><th className="num">Refunded</th></tr></thead>
          <tbody>
            {COMM.map((r, i) =>
            <tr key={i}>
                <td><div className="hd-member"><span className="av" style={{ background: r.c }}>{r.mk}</span><div><div className="nm">{r.nm}</div><div className="rl">{r.deals}</div></div></div></td>
                <td className="num hd-strong">{r.cash}</td>
                <td className="num" style={{ color: r.refunded === "€0" ? "var(--hd-muted)" : "var(--hd-red)" }}>{r.refunded}</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>);

}

/* ---------- Saved Views (custom CRM views) ---------- */
const VIEWS_SHARED = [
  { ic: "filter", nm: "New Leads", ct: "401" },
  { ic: "phoneCall", nm: "Three times called", ct: "38" },
  { ic: "phoneCall", nm: "Two times called", ct: "52" },
  { ic: "phoneCall", nm: "Call back request", ct: "19" },
];
function ViewsReal() {
  return (
    <div className="hdash hd-compact" style={{ background: "transparent" }}>
      <div className="hd-views__top">
        <span style={{ fontSize: "13px", fontWeight: 800, color: "var(--hd-ink)" }}>Saved Views</span>
        <span className="hd-views__new"><Icon.bookmark /> New view</span>
      </div>
      <div className="hd-views__group">Shared</div>
      {VIEWS_SHARED.map((v, i) => { const Ic = Icon[v.ic];
        return (
          <div className="hd-view" key={i}>
            <span className="hd-view__ic"><Ic /></span>
            <span className="hd-view__nm">{v.nm}</span>
            <span className="hd-view__ct">{v.ct}</span>
          </div>);
      })}
      <div className="hd-views__group">Personal</div>
      <div className="hd-view on">
        <span className="hd-view__ic"><Icon.flame /></span>
        <span className="hd-view__nm">Financially Qualified</span>
        <span className="hd-view__ct">24</span>
      </div>
    </div>);
}

/* ---------- AI notes & outcomes (Log outcome) ---------- */
const AI_OUTCOMES = [
  { t: "Canceled", c: "#DB4B53", bg: "#FBEBEC" },
  { t: "Deposit", c: "#C98A1E", bg: "#F8EFDD" },
  { t: "No Sale - Follow Up", c: "#D6457E", bg: "#FBE9F1", ai: true },
  { t: "No Sale - Lost", c: "#D6457E", bg: "#FBE9F1" },
  { t: "No Show", c: "#C98A1E", bg: "#F8EFDD" },
];
function AINotesReal() {
  return (
    <div className="hdash hd-compact" style={{ background: "transparent" }}>
      <div className="hd-ai__intro">Record the status &amp; outcome for the appointment with <b>Evelien</b>.</div>
      <div className="hd-ai__label">Status &amp; outcome</div>
      <div className="hd-optlist">
        {AI_OUTCOMES.map((o, i) =>
          <div className={"hd-opt" + (o.ai ? " sel" : "")} key={i}>
            <span className="hd-otag" style={{ color: o.c, background: o.bg }}><i style={{ background: o.c }}></i>{o.t}</span>
            {o.ai && <span className="hd-aisug"><Icon.sparkle /> AI Suggested</span>}
          </div>
        )}
      </div>
      <div className="hd-ai__note"><Icon.sparkle /><div><b>AI note:</b> Evelien is keen but needs ~2 weeks to arrange financing. Suggested next step: follow-up call once funds are confirmed.</div></div>
      <div className="hd-ai__btnrow"><span className="hd-btn-ghost">Cancel</span><span className="hd-btn-primary"><Icon.check /> Log outcome</span></div>
    </div>);
}

/* ---------- Work queue (Missing Outcomes) ---------- */
const WQ_APPTS = [
{ mk: "SF", c: "#8A8494", nm: "Sean Foley", em: "sean.foley@example.com", date: "Jun 27, 2026", at: "8:00 AM", host: "Marcus Vale", setter: "—", cat: "Sales Call", type: "Qualification Call", join: true, st: "canceled", stt: "Canceled" },
{ mk: "FC", c: "#6D4AE6", nm: "Fernando Castle", em: "f.castle@example.com", date: "Jun 27, 2026", at: "9:00 AM", host: "Marcus Vale", setter: "Sam Ellis", cat: "Sales Call", type: "Strategy Call", join: true, st: "booked", stt: "Call Booked" },
{ mk: "WC", c: "#1F9D6B", nm: "Walter Croft", em: "walter.croft@example.com", date: "Jun 27, 2026", at: "10:00 AM", host: "Dylan Shaw", setter: "—", cat: "Sales Call", type: "Discovery Call", join: true, st: "booked", stt: "Call Booked" },
{ mk: "RT", c: "#C2417E", nm: "Ryan Tucker", em: "ryan.tucker@example.com", date: "Jun 27, 2026", at: "10:00 AM", host: "Marcus Vale", setter: "—", cat: "Sales Call", type: "Qualification Call", join: false, st: "canceled", stt: "Canceled" },
{ mk: "CB", c: "#F5972A", nm: "Cameron Blake", em: "cameron.blake@example.com", date: "Jun 27, 2026", at: "11:00 AM", host: "Theo Park", setter: "—", cat: "Sales Call", type: "Qualification Call", join: false, st: "canceled", stt: "Canceled" }];

const WQ_FOLLOW = [
{ mk: "A", c: "#8A8494", nm: "Anthony Green", em: "anthony.green@example.com", phone: "US +1 (415) 555-0182", st: "lost", stt: "No Sale - Lost", note: "Canceled via Calendly", type: "Follow Up Call", next: "Jun 24, 2026 - 10:30 AM", due: "3 days overdue", dst: "over" },
{ mk: "U", c: "#8A8494", nm: "Ulf Sandberg", em: "ulf@example.com", phone: "SE +46 70 123 4567", st: "lost", stt: "No Sale - Lost", note: "Limited English, callback later", type: "Follow Up Call", next: "Jun 26, 2026 - 1:00 PM", due: "1 day overdue", dst: "over" },
{ mk: "W", c: "#8A8494", nm: "William Barker", em: "w.barker@example.com", phone: "UK +44 7700 900145", st: "won", stt: "Won", note: "Contract signed - updated status", type: "Follow Up Call", next: "Jun 27, 2026 - 2:00 PM", due: "Today", dst: "today" },
{ mk: "E", c: "#8A8494", nm: "Emily Bishop", em: "emily.bishop@example.com", phone: "NL +31 6 1220 0022", st: "lost", stt: "No Sale - Lost", note: "Came in unprepared on the call", type: "Follow Up Call", next: "Jun 28, 2026 - 11:30 AM", due: "Tomorrow", dst: "soon" },
{ mk: "M", c: "#8A8494", nm: "Michael Doyle", em: "m.doyle@example.com", phone: "DE +49 151 2345 6789", st: "lost", stt: "No Sale - Lost", note: "Financial situation changed", type: "Follow Up Call", next: "Jun 30, 2026 - 2:00 PM", due: "in 3 days", dst: "soon" }];

const WQ_PAY = [
{ mk: "ET", c: "#8A8494", nm: "Eric Tanner", em: "eric.tanner@example.com", amt: "€2,500", type: "First Payment", state: "Failed", due: "Jun 25, 2026", tl: "Card declined", st: "failed", stt: "Failed" },
{ mk: "MD", c: "#8A8494", nm: "Martin Dekker", em: "martin.dekker@example.com", amt: "€2,200", type: "Deposit", state: "Overdue", due: "Jun 20, 2026", tl: "7 days overdue", st: "pending", stt: "Pending" },
{ mk: "DL", c: "#8A8494", nm: "Diana Lowell", em: "diana.lowell@example.com", amt: "€1,800", type: "Installment", state: "Overdue", due: "Jun 24, 2026", tl: "3 days overdue", st: "pending", stt: "Pending" },
{ mk: "RK", c: "#8A8494", nm: "Raymond Kessler", em: "raymond.k@example.com", amt: "€5,000", type: "First Payment", state: "Upcoming", due: "Jun 28, 2026", tl: "Due tomorrow", st: "scheduled", stt: "Scheduled" },
{ mk: "DV", c: "#8A8494", nm: "Diane Voss", em: "diane.voss@example.com", amt: "€4,800", type: "Installment", state: "Upcoming", due: "Jun 29, 2026", tl: "In 2 days", st: "scheduled", stt: "Scheduled" }];

const WQ_SIGN = [
{ mk: "RS", c: "#8A8494", nm: "Robert Shaw", prog: "Premium Program", val: "€5,000", sent: "Jun 24", ago: "3 days ago", st: "pending", stt: "Pending" },
{ mk: "MA", c: "#8A8494", nm: "Marcus Allen", prog: "Premium Program", val: "€5,000", sent: "Jun 25", ago: "2 days ago", st: "viewed", stt: "Viewed" },
{ mk: "MW", c: "#8A8494", nm: "Mark Walters", prog: "Premium Program", val: "€5,000", sent: "Jun 25", ago: "2 days ago", st: "pending", stt: "Pending" },
{ mk: "RS", c: "#8A8494", nm: "Robert Shaw", prog: "Premium Program", val: "€5,000", sent: "Jun 26", ago: "1 day ago", st: "viewed", stt: "Viewed" },
{ mk: "MC", c: "#8A8494", nm: "Miguel Costa", prog: "Accelerator", val: "€3,000", sent: "Jun 26", ago: "1 day ago", st: "pending", stt: "Pending" }];

const WQ_OUTCOMES = [
{ mk: "CW", c: "#6D4AE6", nm: "Caroline West", em: "caroline.west@example.com", date: "Jun 27, 2026", at: "9:00 AM", host: "Marcus Vale", setter: "Sam Ellis", cat: "Sales Call", type: "Strategy Call", join: true, st: "booked", stt: "Call Booked" },
{ mk: "GB", c: "#C2417E", nm: "Gavin Boyd", em: "gavin.boyd@example.com", date: "Jun 27, 2026", at: "10:00 AM", host: "Theo Park", setter: "—", cat: "Sales Call", type: "Qualification Call", join: true, st: "booked", stt: "Call Booked" },
{ mk: "MD", c: "#1F9D6B", nm: "Marco Diaz", em: "marco.diaz@example.com", date: "Jun 27, 2026", at: "12:00 PM", host: "Marcus Vale", setter: "—", cat: "Sales Call", type: "Discovery Call", join: true, st: "resched", stt: "Rescheduled" },
{ mk: "LH", c: "#F5972A", nm: "Lena Hart", em: "lena.hart@example.com", date: "Jun 26, 2026", at: "8:00 PM", host: "Marcus Vale", setter: "—", cat: "Sales Call", type: "Qualification Call", join: true, st: "booked", stt: "Call Booked" },
{ mk: "OP", c: "#5B6CFF", nm: "Owen Pierce", em: "owen.pierce@example.com", date: "Jun 26, 2026", at: "5:00 PM", host: "Dylan Shaw", setter: "—", cat: "Sales Call", type: "Qualification Call", join: true, st: "booked", stt: "Call Booked" }];

const WQ_TABS = [
  { id: "appts",    label: "Today's Appointments", ct: 13, showing: "1 to 5 of 13", pages: 3 },
  { id: "follow",   label: "Follow-ups",            ct: 75, showing: "1 to 5 of 76", pages: 16 },
  { id: "pay",      label: "Payments at Risk",      ct: 5,  showing: "1 to 5 of 5",  pages: 1 },
  { id: "sign",     label: "Awaiting Signature",    ct: 11, showing: "1 to 5 of 11", pages: 3 },
  { id: "outcomes", label: "Missing Outcomes",      ct: 27, showing: "1 to 5 of 27", pages: 6 },
];

function WqLead({ r }) {
  return (
    <div className="hd-member">
      <span className="av" style={{ background: r.c }}>{r.mk}</span>
      <div><div className="nm">{r.nm}</div>{r.em && <div className="rl">{r.em}</div>}</div>
    </div>);
}

function WorkQueueReal() {
  const [tab, setTab] = React.useState("appts");
  const meta = WQ_TABS.find((t) => t.id === tab);

  const head = {
    appts:    ["Lead", "Scheduled", "Host/Closer", "Setter", "Meeting URL", "Call Category", "Appointment Type", "Outcome"],
    outcomes: ["Lead", "Scheduled", "Host/Closer", "Setter", "Meeting URL", "Call Category", "Appointment Type", "Outcome"],
    follow:   ["Lead", "Phone Number", "Status", "Notes", "Type", "Next Touchpoint", "Due"],
    pay:      ["Lead", "Amount", "Type", "Due Date", "Timeline", "Reason", "Status"],
    sign:     ["Lead", "Program", "Value", "Sent", "Status"],
  }[tab];

  const apptRows = (rows) => rows.map((r, i) =>
    <tr key={i}>
      <td><WqLead r={r} /></td>
      <td><div className="hd-2line"><div className="a">{r.date}</div><div className="b">{r.at}</div></div></td>
      <td>{r.host}</td>
      <td>{r.setter}</td>
      <td>{r.join ? <span className="hd-link"><Icon.external /> Join</span> : <span style={{ color: "var(--hd-faint)" }}>—</span>}</td>
      <td>{r.cat}</td>
      <td>{r.type}</td>
      <td><span className={"hd-badge hd-badge--" + r.st}><i></i>{r.stt}</span></td>
    </tr>);

  return (
    <div className="hdash hd-compact" style={{ background: "transparent" }}>
      <div className="hd-qtabs" role="tablist">
        {WQ_TABS.map((t) =>
          <button key={t.id} type="button" role="tab" aria-selected={tab === t.id}
            className={"hd-qtab" + (tab === t.id ? " on" : "")} onClick={() => setTab(t.id)}>
            {t.label} <span className="ct">{t.ct}</span>
          </button>
        )}
      </div>

      <div className="hd-qhead">
        <div className="hd-qhead__t">{meta.label}</div>
        {tab === "follow" &&
          <div className="hd-qhead__r"><span className="hd-overdue"><Icon.alert /> 2 Overdue</span><span className="hd-qhead__total">76 TOTAL</span></div>}
        {tab === "pay" &&
          <div className="hd-qhead__stats">
            <div><span className="k">Failed</span><b className="red">€2,500</b></div>
            <div><span className="k">Overdue</span><b className="orange">€4,000</b></div>
            <div><span className="k">Upcoming</span><b className="purple">€9,800</b></div>
          </div>}
      </div>

      <div className="hd-tablewrap">
        <table className="hd-table">
          <thead><tr>{head.map((h, i) => <th key={i}>{h}</th>)}</tr></thead>
          <tbody>
            {tab === "appts" && apptRows(WQ_APPTS)}
            {tab === "outcomes" && apptRows(WQ_OUTCOMES)}

            {tab === "follow" && WQ_FOLLOW.map((r, i) =>
              <tr key={i}>
                <td><div className="hd-fllead"><span className="hd-fcheck"><Icon.checkCircle /></span><WqLead r={r} /></div></td>
                <td>{r.phone}</td>
                <td><span className="hd-statsel"><span className={"hd-badge hd-badge--" + r.st}><i></i>{r.stt}</span><Icon.chevUpDown /></span></td>
                <td><span className="hd-note">{r.note}</span></td>
                <td>{r.type}</td>
                <td><span className="hd-tpbox">{r.next}</span></td>
                <td><span className={"hd-due hd-due--" + r.dst}>{r.due}</span></td>
              </tr>)}

            {tab === "pay" && WQ_PAY.map((r, i) =>
              <tr key={i}>
                <td><WqLead r={r} /></td>
                <td className="hd-strong">{r.amt}</td>
                <td><div className="hd-2line"><div className="a">{r.type}</div><div className={"b hd-state hd-state--" + r.st}>{r.state}</div></div></td>
                <td>{r.due}</td>
                <td><span className={"hd-tl hd-tl--" + r.st}>{r.tl}</span></td>
                <td><span style={{ color: "var(--hd-faint)" }}>—</span></td>
                <td><span className={"hd-badge hd-badge--" + r.st}><i></i>{r.stt}</span></td>
              </tr>)}

            {tab === "sign" && WQ_SIGN.map((r, i) =>
              <tr key={i}>
                <td><WqLead r={r} /></td>
                <td>{r.prog}</td>
                <td className="hd-strong">{r.val}</td>
                <td><div className="hd-2line"><div className="a">{r.sent}</div><div className="b">{r.ago}</div></div></td>
                <td><span className={"hd-badge hd-badge--" + r.st}><i></i>{r.stt}</span></td>
              </tr>)}
          </tbody>
        </table>
      </div>

      <div className="hd-pgbar">
        <span>Showing <b>{meta.showing.split(" of ")[0]}</b> of <b>{meta.showing.split(" of ")[1]}</b> Entries</span>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span>Page <b>1</b> of {meta.pages}</span>
          <div className="hd-pgbtns"><span><Icon.dangleL /></span><span><Icon.angleL /></span><span><Icon.angleR /></span><span><Icon.dangleR /></span></div>
        </div>
      </div>
    </div>);

}

/* ---------- compact dashboard for the "Dashboards & metrics" feature card ---------- */
function FeatureDash() {
  return (
    <div className="hdash" style={{ background: "transparent" }}>
      <div className="hd-kpiscroll">
        {KPIS.map((k, i) => <KpiCard k={k} key={i} />)}
      </div>
      <div className="hd-card" style={{ marginTop: 10 }}>
        <div className="hd-card__h"><div><div className="hd-card__t">Revenue</div><div className="hd-card__sub">Estimated revenue trends</div></div></div>
        <div className="hd-legend">
          <span><i style={{ background: "var(--hd-purple)" }}></i>Cash Collected <b>€97,000</b></span>
          <span><i style={{ background: "var(--hd-orange)" }}></i>Revenue <b>€90,000</b></span>
        </div>
        <RevenueChart h={150} />
      </div>
    </div>);

}

/* ---------- browser-chrome wrapper used in the hero ---------- */
function DashboardApp() {
  return (
    <div className="app">
      <div className="app__bar">
        <div className="app__dots"><i></i><i></i><i></i></div>
        <div className="app__url"><Icon.lock className="lock" /> app.hermon.io/dashboard</div>
        <span className="app__bartag">Live</span>
      </div>
      <HermonDashboard />
    </div>);

}

Object.assign(window, { HermonDashboard, DashboardApp, FeatureDash, RevenueChart, CallPie, CalendarAvail, KpiCard, KPIS, LeaderboardReal, CommissionReal, ViewsReal, AINotesReal, WorkQueueReal });