<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Burton Method — GHL Dashboard</title>
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-card: #16161f;
  --bg-card-hover: #1c1c28;
  --border: #2a2a3a;
  --text-primary: #e8e8f0;
  --text-secondary: #8888a0;
  --text-muted: #5a5a70;
  --blue: #3b82f6;
  --blue-dim: rgba(59,130,246,0.15);
  --green: #10b981;
  --green-dim: rgba(16,185,129,0.15);
  --amber: #f59e0b;
  --amber-dim: rgba(245,158,11,0.15);
  --rose: #f43f5e;
  --rose-dim: rgba(244,63,94,0.15);
  --purple: #8b5cf6;
  --purple-dim: rgba(139,92,246,0.15);
  --teal: #14b8a6;
  --teal-dim: rgba(20,184,166,0.15);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.header h1 {
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header .subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 4px;
}

.header .live-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--green-dim);
  color: var(--green);
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
}

.header .live-dot {
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse 2s ease infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.2s ease;
}

.stat-card:hover {
  background: var(--bg-card-hover);
  transform: translateY(-2px);
}

.stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
}

.stat-change {
  font-size: 13px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-change.up { color: var(--green); }
.stat-change.down { color: var(--rose); }
.stat-change.neutral { color: var(--text-muted); }

/* Section */
.section {
  margin-bottom: 32px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.section-badge {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 100px;
  font-weight: 600;
}

/* Two-column layout */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 768px) {
  .two-col { grid-template-columns: 1fr; }
}

/* Pipeline */
.pipeline {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}

.pipeline-stage {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.pipeline-stage:last-child { border-bottom: none; }

.pipeline-stage-name {
  font-weight: 600;
  font-size: 15px;
}

.pipeline-stage-count {
  font-size: 24px;
  font-weight: 800;
  color: var(--blue);
}

/* Workflow list */
.workflow-list {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  max-height: 500px;
  overflow-y: auto;
}

.workflow-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(42,42,58,0.5);
}

.workflow-item:last-child { border-bottom: none; }

.workflow-name {
  font-size: 14px;
  color: var(--text-primary);
  flex: 1;
  margin-right: 12px;
}

.workflow-status {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 100px;
  font-weight: 600;
  white-space: nowrap;
}

.workflow-status.published {
  background: var(--green-dim);
  color: var(--green);
}

.workflow-status.draft {
  background: var(--amber-dim);
  color: var(--amber);
}

/* Source bars */
.source-bar-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}

.source-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.source-bar:last-child { margin-bottom: 0; }

.source-label {
  font-size: 13px;
  color: var(--text-secondary);
  width: 180px;
  flex-shrink: 0;
}

.source-track {
  flex: 1;
  height: 28px;
  background: var(--bg-primary);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.source-fill {
  height: 100%;
  border-radius: 8px;
  transition: width 1s ease;
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-size: 12px;
  font-weight: 700;
  color: white;
}

/* Tags cloud */
.tags-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-chip {
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  transition: all 0.2s;
}

.tag-chip:hover {
  background: var(--purple-dim);
  color: var(--purple);
  border-color: var(--purple);
}

/* Recent contacts */
.contacts-table {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  overflow-x: auto;
}

.contacts-table table {
  width: 100%;
  border-collapse: collapse;
}

.contacts-table th {
  text-align: left;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.contacts-table td {
  padding: 12px;
  font-size: 14px;
  border-bottom: 1px solid rgba(42,42,58,0.3);
}

.contacts-table tr:last-child td { border-bottom: none; }

.contacts-table .email {
  color: var(--blue);
  font-size: 13px;
}

.contacts-table .date {
  color: var(--text-muted);
  font-size: 13px;
}

.contacts-table .tag-sm {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  background: var(--blue-dim);
  color: var(--blue);
  margin: 2px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">

const { useState, useEffect } = React;

// ---- DATA (pulled from GHL API on Feb 9, 2026) ----
const DATA = {
  totalContacts: 5085,
  contactsLast7d: 2,
  contactsLast30d: 13,
  contactsByMonth: [
    { month: '2026-02', count: 2 },
    { month: '2026-01', count: 13 },
    { month: '2025-12', count: 85 },
  ],
  pipeline: {
    name: 'Sales',
    stages: [
      { name: 'New Lead', count: 0 },
      { name: 'Lead Showed to Training', count: 1 },
    ],
    totalOpps: 1,
    totalValue: 0,
  },
  sources: [
    { name: 'Facebook', count: 373 },
    { name: 'Unknown', count: 15 },
    { name: 'Burt Method Opt In', count: 6 },
    { name: 'Burton Method Official', count: 4 },
    { name: 'Burton Method Colour (Haseeb)', count: 2 },
  ],
  workflows: {
    total: 120,
    published: 61,
    draft: 59,
    list: [
      { name: 'Grant Access to Course', status: 'published' },
      { name: 'Email for new leads', status: 'published' },
      { name: 'Send message after grant access to Burt Method Free', status: 'published' },
      { name: 'Logged into membership area', status: 'published' },
      { name: 'Delete Discord Invite (7 day)', status: 'published' },
      { name: 'Create Discord Invite Link', status: 'published' },
      { name: 'Invite to Discord Community', status: 'published' },
      { name: 'Joined Discord, stop follow up', status: 'published' },
      { name: 'Welcome to Burton Method grant access', status: 'published' },
      { name: 'Send login details + intro to course & community', status: 'published' },
      { name: 'Subscriber needs to join Discord', status: 'published' },
      { name: 'Subscription is overdue', status: 'published' },
      { name: 'Send drill set data to Make/CloseBot', status: 'published' },
      { name: 'ALERT: Paid Tutoring session with Brett booked', status: 'published' },
      { name: 'ALERT: Brett for new free 1 on 1', status: 'published' },
      { name: 'Webinar Promo', status: 'published' },
      { name: 'Support Confirmation', status: 'published' },
      { name: 'Responded lead', status: 'published' },
      { name: 'Send Support Message Response to ClickUp', status: 'published' },
      { name: 'New Trial → Remove role (live server)', status: 'published' },
      { name: 'Payment Made, remove from late pay reminders', status: 'published' },
      { name: 'Add Stripe customer ID', status: 'published' },
      { name: 'Add Stripe direct link', status: 'published' },
      { name: 'Got $1 course add tag', status: 'published' },
      { name: 'Drill set done / invite to tutoring', status: 'published' },
      { name: 'Cancel / Revoke Role', status: 'published' },
      { name: 'SaaS Application Notify & First Steps', status: 'draft' },
      { name: 'Last chance offer', status: 'draft' },
      { name: 'SaaS Application Step 1 - New', status: 'draft' },
      { name: 'Training Confirmation + Reminder', status: 'draft' },
      { name: '3 day reminder before remove role', status: 'draft' },
    ]
  },
  tags: {
    total: 160,
    topTags: [
      'campaign #1', 'google ads', 'lead has replied',
      'first step order form filled', 'free training registrant',
      'do not promote', 'new subscriber', 'joined discord',
      'needs to join discord', 'trial', 'paid tutoring',
      'burt method free', 'webinar registered', 'support',
    ]
  },
  calendar: {
    name: "Bradley's LSAT Consultations",
    eventsLast30d: 0,
    slotDuration: 30,
    type: 'Round Robin'
  },
  recentContacts: [
    { name: 'Rohit Ghorai', email: 'rohitghorai78@gmail.com', source: 'Facebook', date: '2026-02-07', tags: ['campaign #1', 'google ads'] },
    { name: 'Recent Lead #2', email: '***@***.com', source: 'Facebook', date: '2026-02-03', tags: ['campaign #1'] },
    { name: 'Jan Lead Batch', email: 'Multiple (13)', source: 'Mixed', date: '2026-01', tags: ['campaign #1', 'google ads'] },
  ],
  locationId: 'DZEpRd43MxUJKdtrev9t',
  lastUpdated: new Date().toLocaleString('en-US', { timeZone: 'America/New_York' }),
};

function StatCard({ label, value, change, changeType, color }) {
  return (
    <div className="stat-card">
      <div className="stat-label">{label}</div>
      <div className="stat-value" style={{ color: color || 'var(--text-primary)' }}>{value}</div>
      {change && <div className={`stat-change ${changeType || 'neutral'}`}>{change}</div>}
    </div>
  );
}

function SourceBar({ name, count, max, color }) {
  const pct = Math.max((count / max) * 100, 2);
  return (
    <div className="source-bar">
      <div className="source-label">{name}</div>
      <div className="source-track">
        <div className="source-fill" style={{ width: `${pct}%`, background: color || 'var(--blue)' }}>
          {count}
        </div>
      </div>
    </div>
  );
}

function App() {
  const d = DATA;
  const maxSource = Math.max(...d.sources.map(s => s.count));
  const sourceColors = ['var(--blue)', 'var(--text-muted)', 'var(--amber)', 'var(--purple)', 'var(--teal)'];

  return (
    <div className="dashboard">
      <div className="header">
        <div>
          <h1>Burton Method — GHL Dashboard</h1>
          <div className="subtitle">Go High Level · Location: {d.locationId} · Updated: {d.lastUpdated}</div>
        </div>
        <div className="live-badge">
          <div className="live-dot"></div>
          Live Data
        </div>
      </div>

      {/* Top-level Stats */}
      <div className="stats-grid">
        <StatCard label="Total Contacts" value={d.totalContacts.toLocaleString()} change="5,085 in database" changeType="neutral" color="var(--blue)" />
        <StatCard label="Last 7 Days" value={d.contactsLast7d} change={d.contactsLast7d > 5 ? "▲ Growing" : "▼ Low volume"} changeType={d.contactsLast7d > 5 ? "up" : "down"} color="var(--rose)" />
        <StatCard label="Last 30 Days" value={d.contactsLast30d} change="13 new contacts" changeType="neutral" color="var(--amber)" />
        <StatCard label="Workflows" value={d.workflows.total} change={`${d.workflows.published} active · ${d.workflows.draft} draft`} changeType="neutral" color="var(--green)" />
        <StatCard label="Pipeline Opps" value={d.pipeline.totalOpps} change="Sales pipeline" changeType="neutral" color="var(--purple)" />
        <StatCard label="Tags" value={d.tags.total} change="160 unique tags" changeType="neutral" color="var(--teal)" />
      </div>

      {/* Pipeline + Calendar */}
      <div className="two-col" style={{ marginBottom: 24 }}>
        <div className="section">
          <div className="section-header">
            <div className="section-title">Sales Pipeline</div>
            <span className="section-badge" style={{ background: 'var(--purple-dim)', color: 'var(--purple)' }}>
              {d.pipeline.totalOpps} opportunity
            </span>
          </div>
          <div className="pipeline">
            {d.pipeline.stages.map((s, i) => (
              <div className="pipeline-stage" key={i}>
                <span className="pipeline-stage-name">{s.name}</span>
                <span className="pipeline-stage-count">{s.count}</span>
              </div>
            ))}
            <div className="pipeline-stage" style={{ borderTop: '1px solid var(--border)', marginTop: 8, paddingTop: 16 }}>
              <span className="pipeline-stage-name" style={{ color: 'var(--text-secondary)' }}>Total Value</span>
              <span className="pipeline-stage-count" style={{ color: 'var(--green)' }}>${d.pipeline.totalValue.toLocaleString()}</span>
            </div>
          </div>
        </div>

        <div className="section">
          <div className="section-header">
            <div className="section-title">Lead Sources (Last 500)</div>
          </div>
          <div className="source-bar-container">
            {d.sources.map((s, i) => (
              <SourceBar key={i} name={s.name} count={s.count} max={maxSource} color={sourceColors[i]} />
            ))}
          </div>
        </div>
      </div>

      {/* Monthly Contacts */}
      <div className="section">
        <div className="section-header">
          <div className="section-title">Contacts by Month</div>
        </div>
        <div className="source-bar-container">
          {d.contactsByMonth.map((m, i) => (
            <SourceBar key={i} name={m.month} count={m.count} max={Math.max(...d.contactsByMonth.map(x => x.count))}
              color={i === 0 ? 'var(--blue)' : i === 1 ? 'var(--teal)' : 'var(--purple)'} />
          ))}
          <div style={{ marginTop: 16, color: 'var(--text-muted)', fontSize: 13 }}>
            ⚠ Dec 2025 had 85 new contacts. Jan dropped to 13. Feb has only 2 so far. Lead volume declining.
          </div>
        </div>
      </div>

      {/* Workflows + Tags */}
      <div className="two-col">
        <div className="section">
          <div className="section-header">
            <div className="section-title">Workflows</div>
            <span className="section-badge" style={{ background: 'var(--green-dim)', color: 'var(--green)' }}>
              {d.workflows.published} published
            </span>
          </div>
          <div className="workflow-list">
            {d.workflows.list.map((w, i) => (
              <div className="workflow-item" key={i}>
                <span className="workflow-name">{w.name}</span>
                <span className={`workflow-status ${w.status}`}>{w.status}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="section">
          <div className="section-header">
            <div className="section-title">Top Tags</div>
            <span className="section-badge" style={{ background: 'var(--teal-dim)', color: 'var(--teal)' }}>
              {d.tags.total} total
            </span>
          </div>
          <div className="tags-container">
            <div className="tag-cloud">
              {d.tags.topTags.map((t, i) => (
                <span className="tag-chip" key={i}>{t}</span>
              ))}
            </div>
            <div style={{ marginTop: 24, padding: '16px', background: 'var(--bg-primary)', borderRadius: 12 }}>
              <div style={{ fontSize: 13, color: 'var(--text-muted)', marginBottom: 8 }}>Calendar</div>
              <div style={{ fontSize: 15, fontWeight: 600 }}>{d.calendar.name}</div>
              <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginTop: 4 }}>
                {d.calendar.type} · {d.calendar.slotDuration} min slots · {d.calendar.eventsLast30d} events (30d)
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Key Insights */}
      <div className="section" style={{ marginTop: 8 }}>
        <div className="section-header">
          <div className="section-title">⚡ Key Insights</div>
        </div>
        <div style={{ background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 16, padding: 24 }}>
          <div style={{ display: 'grid', gap: 16 }}>
            <div style={{ padding: 16, background: 'var(--rose-dim)', borderRadius: 12, borderLeft: '3px solid var(--rose)' }}>
              <strong style={{ color: 'var(--rose)' }}>⬇ Lead Volume Declining</strong>
              <p style={{ color: 'var(--text-secondary)', fontSize: 14, marginTop: 4 }}>
                Dec: 85 contacts → Jan: 13 → Feb: 2 (so far). 85% drop month-over-month. Need to revive lead gen campaigns.
              </p>
            </div>
            <div style={{ padding: 16, background: 'var(--amber-dim)', borderRadius: 12, borderLeft: '3px solid var(--amber)' }}>
              <strong style={{ color: 'var(--amber)' }}>⚠ Pipeline Nearly Empty</strong>
              <p style={{ color: 'var(--text-secondary)', fontSize: 14, marginTop: 4 }}>
                Only 1 opportunity in pipeline, $0 value. Sales funnel needs attention.
              </p>
            </div>
            <div style={{ padding: 16, background: 'var(--blue-dim)', borderRadius: 12, borderLeft: '3px solid var(--blue)' }}>
              <strong style={{ color: 'var(--blue)' }}>📊 Facebook Dominates (93%)</strong>
              <p style={{ color: 'var(--text-secondary)', fontSize: 14, marginTop: 4 }}>
                373 of 400 tracked contacts from Facebook. Heavy platform dependency — diversify to Google, organic, partnerships.
              </p>
            </div>
            <div style={{ padding: 16, background: 'var(--green-dim)', borderRadius: 12, borderLeft: '3px solid var(--green)' }}>
              <strong style={{ color: 'var(--green)' }}>✅ Automation Machine</strong>
              <p style={{ color: 'var(--text-secondary)', fontSize: 14, marginTop: 4 }}>
                120 workflows (61 active). Onboarding, Discord, Stripe, support, drill sets all automated. Backend is solid.
              </p>
            </div>
            <div style={{ padding: 16, background: 'var(--purple-dim)', borderRadius: 12, borderLeft: '3px solid var(--purple)' }}>
              <strong style={{ color: 'var(--purple)' }}>📅 Zero Calendar Bookings (30d)</strong>
              <p style={{ color: 'var(--text-secondary)', fontSize: 14, marginTop: 4 }}>
                Bradley's LSAT Consultations: 0 events in last 30 days. Booking funnel may be broken or not promoted.
              </p>
            </div>
          </div>
        </div>
      </div>

      <div style={{ textAlign: 'center', color: 'var(--text-muted)', fontSize: 12, marginTop: 32, paddingTop: 16, borderTop: '1px solid var(--border)' }}>
        Powered by Buba · Data from GHL API v2 · Location {d.locationId}
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>
