/* global React */
const { useEffect, useRef, useState } = React;

// =================================================================
// §2 LIVE DASHBOARD
// =================================================================
const NICHES = [
  { id: "clinics", label: "Clinics",       count: 24 },
  { id: "home",    label: "Home Services", count: 29 },
  { id: "agency",  label: "Agencies",      count: 4 },
  { id: "coaches", label: "Coaches",       count: 3 },
  { id: "ecom",    label: "E-com",         count: 3 },
];

// Per-niche column config — ecom shows Sales/Revenue/ROAS, others show Leads/Bookings/CPL/Revenue
const COLUMNS = {
  clinics: [
    { key: "spend",   label: "Spend" },
    { key: "leads",   label: "Leads" },
    { key: "bk",      label: "Bookings" },
    { key: "cpl",     label: "CPL" },
    { key: "ctr",     label: "CTR" },
    { key: "revenue", label: "Revenue" },
  ],
  home: [
    { key: "spend",   label: "Spend" },
    { key: "leads",   label: "Leads" },
    { key: "bk",      label: "Bookings" },
    { key: "cpl",     label: "CPL" },
    { key: "ctr",     label: "CTR" },
    { key: "revenue", label: "Revenue" },
  ],
  agency: [
    { key: "spend",   label: "Spend" },
    { key: "leads",   label: "Leads" },
    { key: "bk",      label: "Bookings" },
    { key: "cpl",     label: "CPL" },
    { key: "ctr",     label: "CTR" },
    { key: "revenue", label: "Revenue" },
  ],
  coaches: [
    { key: "spend",   label: "Spend" },
    { key: "leads",   label: "Leads" },
    { key: "bk",      label: "Bookings" },
    { key: "cpl",     label: "CPL" },
    { key: "ctr",     label: "CTR" },
    { key: "revenue", label: "Revenue" },
  ],
  ecom: [
    { key: "spend",   label: "Spend" },
    { key: "sales",   label: "Sales" },
    { key: "revenue", label: "Revenue" },
    { key: "roas",    label: "ROAS" },
    { key: "ctr",     label: "CTR" },
    { key: "reach",   label: "Reach" },
  ],
};

const CLIENTS = {
  clinics: [
    // Chiropractic
    { nm: "Dr. Joey Alcantara",         av: "JA", type: "chiro",   niche: "Chiropractic · Calgary, AB",      spend: "$1,524",  leads: 324,  bk: 113, cpl: "$4.70",  ctr: "4.86%", revenue: "$33,000",  trend: "up" },
    { nm: "C&J Health Centre",          av: "CJ", type: "chiro",   niche: "Chiropractic · Ontario",          spend: "$1,389",  leads: 107,  bk: 31,  cpl: "$12.98", ctr: "4.54%", revenue: "$20,833",  trend: "up" },
    { nm: "Buena Vida Chiropractic",    av: "BV", type: "chiro",   niche: "Chiropractic · San Diego, CA",    spend: "$1,517",  leads: 117,  bk: 41,  cpl: "$12.97", ctr: "4.21%", revenue: "$15,200",  trend: "up" },
    // Physiotherapy
    { nm: "Ascension Physio",           av: "AP", type: "physio",  niche: "Physiotherapy · Edmonton, AB",    spend: "$2,245",  leads: 149,  bk: 26,  cpl: "$15.07", ctr: "4.52%", revenue: "$9,733",   trend: "up" },
    { nm: "Physioactif",                av: "PA", type: "physio",  niche: "Physiotherapy · 6 Locations",     spend: "$3,333",  leads: 222,  bk: 88,  cpl: "$15.01", ctr: "4.28%", revenue: "$33,333",  trend: "up" },
    { nm: "The Fitness Clinic AU",      av: "FC", type: "physio",  niche: "Physiotherapy · Australia",       spend: "$1,800",  leads: 120,  bk: 47,  cpl: "$15.00", ctr: "4.67%", revenue: "$19,700",  trend: "up" },
    // Dental
    { nm: "Berkeley Dental",            av: "BD", type: "dental",  niche: "Dental · Calgary, AB",            spend: "$1,550",  leads: 71,   bk: 22,  cpl: "$21.83", ctr: "3.88%", revenue: "$22,000",  trend: "up" },
    { nm: "Northern Upstream Dental",   av: "NU", type: "dental",  niche: "Dental · Canada",                 spend: "$3,057",  leads: 134,  bk: 44,  cpl: "$22.82", ctr: "3.71%", revenue: "$16,857",  trend: "up" },
    { nm: "Gerdan Lamorell Dental",     av: "GL", type: "dental",  niche: "Dental · Trinidad",               spend: "$2,560",  leads: 116,  bk: 37,  cpl: "$22.07", ctr: "3.61%", revenue: "$13,400",  trend: "up" },
    // Mental Health
    { nm: "Canadian Counselling Centre",av: "CC", type: "mental",  niche: "Mental Health · Canada",          spend: "$11,545", leads: 1091, bk: 207, cpl: "$10.58", ctr: "5.44%", revenue: "$75,636",  trend: "up" },
    { nm: "Psych For Me",               av: "PF", type: "mental",  niche: "Mental Health · Ontario",         spend: "$327",    leads: 100,  bk: 33,  cpl: "$2.90",  ctr: "6.10%", revenue: "$12,000",  trend: "up" },
    { nm: "Medical Center Plus",        av: "MC", type: "mental",  niche: "Mental Health · Multi-Physician", spend: "$1,500",  leads: 150,  bk: 60,  cpl: "$10.00", ctr: "5.33%", revenue: "$50,000",  trend: "up" },
    // Med Spa
    { nm: "Boca Laser Med Spa",         av: "BL", type: "medspa",  niche: "Med Spa · Florida",               spend: "$2,550",  leads: 170,  bk: 51,  cpl: "$15.00", ctr: "4.71%", revenue: "$42,100",  trend: "up" },
    { nm: "Revive Medical Spa",         av: "RM", type: "medspa",  niche: "Med Spa · Canada",                spend: "$6,183",  leads: 415,  bk: 114, cpl: "$14.90", ctr: "4.88%", revenue: "$35,583",  trend: "up" },
    { nm: "Revamp Medi Spa",            av: "RS", type: "medspa",  niche: "Med Spa · Canada",                spend: "$5,414",  leads: 291,  bk: 100, cpl: "$18.60", ctr: "4.82%", revenue: "$26,571",  trend: "up" },
    // Weight Loss
    { nm: "Delphi Clinic",              av: "DC", type: "weight",  niche: "Medical Weight Loss · GLP-1",     spend: "$3,340",  leads: 353,  bk: 54,  cpl: "$9.46",  ctr: "3.85%", revenue: "$88,000",  trend: "up" },
    { nm: "Triple B Wellness",          av: "TB", type: "weight",  niche: "Medical Weight Loss · Canada",    spend: "$3,550",  leads: 222,  bk: 57,  cpl: "$15.99", ctr: "3.91%", revenue: "$22,000",  trend: "up" },
    { nm: "Vivitality",                 av: "VV", type: "weight",  niche: "Medical Weight Loss · Canada",    spend: "$3,543",  leads: 180,  bk: 57,  cpl: "$19.68", ctr: "4.12%", revenue: "$20,857",  trend: "up" },
    // Regenerative Medicine
    { nm: "Renuva Pain Centers",        av: "RP", type: "regen",   niche: "Regenerative Medicine · 4 Locations", spend: "$21,918", leads: 1185, bk: 412, cpl: "$18.50", ctr: "3.94%", revenue: "$233,000", trend: "up" },
    { nm: "Infinity Health Regen",      av: "IH", type: "regen",   niche: "Regenerative Medicine · Canada",  spend: "$2,378",  leads: 108,  bk: 24,  cpl: "$22.02", ctr: "3.44%", revenue: "$18,444",  trend: "up" },
    { nm: "Bluegrass Bone & Joint",     av: "BB", type: "regen",   niche: "Regenerative Medicine · Kentucky",spend: "$4,667",  leads: 212,  bk: 46,  cpl: "$22.02", ctr: "3.61%", revenue: "$20,333",  trend: "up" },
    // Massage / RMT
    { nm: "Synergy Health Associates",  av: "SH", type: "massage", niche: "Massage / RMT · BC",              spend: "$1,872",  leads: 125,  bk: 52,  cpl: "$14.98", ctr: "4.56%", revenue: "$8,000",   trend: "up" },
    { nm: "Discovery Massage",          av: "DM", type: "massage", niche: "Massage / RMT · Canada",          spend: "$490",    leads: 33,   bk: 14,  cpl: "$14.85", ctr: "4.56%", revenue: "$13,600",  trend: "up" },
    { nm: "OCEANS TRANQUILITY",         av: "OT", type: "massage", niche: "Wellness Spa · Caribbean",        spend: "$3,675",  leads: 245,  bk: 102, cpl: "$15.00", ctr: "4.73%", revenue: "$22,000",  trend: "up" },
  ],
  home: [
    // HVAC
    { nm: "Alanis Air",             av: "AA", type: "hvac",        niche: "HVAC · Dallas TX",              spend: "$2,140",  leads: 84,  bk: 29,  cpl: "$25.48", ctr: "4.12%", revenue: "$35,900",  trend: "up" },
    { nm: "Quality Air",            av: "QA", type: "hvac",        niche: "HVAC · Multi-Market",           spend: "$3,210",  leads: 293, bk: 97,  cpl: "$10.96", ctr: "5.18%", revenue: "$70,600", trend: "up" },
    { nm: "Arctic Air Solutions",   av: "AR", type: "hvac",        niche: "HVAC · Houston TX",             spend: "$2,580",  leads: 103, bk: 34,  cpl: "$25.05", ctr: "4.22%", revenue: "$51,000",  trend: "up" },
    { nm: "Comfort Masters",        av: "CM", type: "hvac",        niche: "HVAC · Nashville TN",           spend: "$1,890",  leads: 76,  bk: 25,  cpl: "$24.87", ctr: "4.08%", revenue: "$30,900",  trend: "up" },
    // Roofing
    { nm: "5 Star Roofing",         av: "5S", type: "roofing",     niche: "Roofing · Multi-Market",        spend: "$4,980",  leads: 166, bk: 62,  cpl: "$30.00", ctr: "3.94%", revenue: "$99,600", trend: "up" },
    { nm: "Peak Roofing Co.",       av: "PR", type: "roofing",     niche: "Roofing · Colorado",            spend: "$3,750",  leads: 125, bk: 44,  cpl: "$30.00", ctr: "3.87%", revenue: "$71,300", trend: "up" },
    { nm: "Storm Shield Roofing",   av: "SS", type: "roofing",     niche: "Roofing · Texas",               spend: "$5,200",  leads: 173, bk: 62,  cpl: "$30.06", ctr: "3.91%", revenue: "$104,000", trend: "up" },
    { nm: "Apex Roof Solutions",    av: "AP", type: "roofing",     niche: "Roofing · Florida",             spend: "$2,940",  leads: 98,  bk: 33,  cpl: "$30.00", ctr: "3.79%", revenue: "$54,400",  trend: "up" },
    // Solar
    { nm: "Apricot Solar",          av: "AS", type: "solar",       niche: "Solar · California",            spend: "$1,249",  leads: 66,  bk: 22,  cpl: "$18.93", ctr: "3.81%", revenue: "$27,500",  trend: "up" },
    { nm: "SunPath Solar",          av: "SP", type: "solar",       niche: "Solar · Arizona",               spend: "$2,100",  leads: 75,  bk: 25,  cpl: "$28.00", ctr: "3.94%", revenue: "$46,200",  trend: "up" },
    { nm: "GridFree Energy",        av: "GF", type: "solar",       niche: "Solar · Nevada",                spend: "$1,680",  leads: 60,  bk: 20,  cpl: "$28.00", ctr: "3.77%", revenue: "$37,000",  trend: "up" },
    { nm: "BrightFuture Solar",     av: "BF", type: "solar",       niche: "Solar · Texas",                 spend: "$3,360",  leads: 120, bk: 40,  cpl: "$28.00", ctr: "4.02%", revenue: "$73,900", trend: "up" },
    // Plumbing
    { nm: "ProGuard Plumbing",      av: "PG", type: "plumbing",    niche: "Plumbing · Denver CO",          spend: "$2,860",  leads: 130, bk: 49,  cpl: "$22.00", ctr: "4.55%", revenue: "$21,350",  trend: "up" },
    { nm: "FlowRight Plumbing",     av: "FR", type: "plumbing",    niche: "Plumbing · Seattle WA",         spend: "$2,200",  leads: 100, bk: 38,  cpl: "$22.00", ctr: "4.61%", revenue: "$16,570",  trend: "up" },
    { nm: "AquaFix Plumbing",       av: "AF", type: "plumbing",    niche: "Plumbing · Phoenix AZ",         spend: "$1,760",  leads: 80,  bk: 29,  cpl: "$22.00", ctr: "4.44%", revenue: "$12,640",  trend: "up" },
    // Electrical
    { nm: "Bright Electric",        av: "BE", type: "electrical",  niche: "Electrical · Atlanta GA",       spend: "$1,920",  leads: 96,  bk: 35,  cpl: "$20.00", ctr: "4.40%", revenue: "$30,450",  trend: "up" },
    { nm: "PowerPro Electric",      av: "PP", type: "electrical",  niche: "Electrical · Chicago IL",       spend: "$2,400",  leads: 120, bk: 44,  cpl: "$20.00", ctr: "4.52%", revenue: "$38,280",  trend: "up" },
    { nm: "Volt Masters Electric",  av: "VM", type: "electrical",  niche: "Electrical · Miami FL",         spend: "$1,600",  leads: 80,  bk: 29,  cpl: "$20.00", ctr: "4.31%", revenue: "$25,230",  trend: "up" },
    // Landscaping
    { nm: "Summit Landscapes",      av: "SL", type: "landscaping", niche: "Landscaping · Phoenix AZ",      spend: "$1,680",  leads: 84,  bk: 26,  cpl: "$20.00", ctr: "4.31%", revenue: "$27,560",  trend: "up" },
    { nm: "GreenEdge Landscaping",  av: "GE", type: "landscaping", niche: "Landscaping · Dallas TX",       spend: "$1,980",  leads: 99,  bk: 31,  cpl: "$20.00", ctr: "4.28%", revenue: "$32,860",  trend: "up" },
    { nm: "ProLawn Services",       av: "PL", type: "landscaping", niche: "Landscaping · San Diego CA",    spend: "$1,420",  leads: 71,  bk: 22,  cpl: "$20.00", ctr: "4.19%", revenue: "$23,320",  trend: "up" },
    // Permanent Lighting
    { nm: "Permanent Lights",       av: "PM", type: "lighting",    niche: "Permanent Lighting · Calgary",  spend: "$1,948",  leads: 201, bk: 80,  cpl: "$9.69",  ctr: "5.42%", revenue: "$50,600", trend: "up" },
    { nm: "LightUp Outdoors",       av: "LU", type: "lighting",    niche: "Perm. Lighting · Denver CO",    spend: "$1,600",  leads: 89,  bk: 32,  cpl: "$17.98", ctr: "5.31%", revenue: "$72,000",  trend: "up" },
    { nm: "Stellar Lights Co.",     av: "SC", type: "lighting",    niche: "Perm. Lighting · Edmonton AB",  spend: "$1,320",  leads: 73,  bk: 27,  cpl: "$18.08", ctr: "5.24%", revenue: "$58,100",  trend: "up" },
    // Epoxy
    { nm: "Pacific Epoxy Co.",      av: "PE", type: "epoxy",       niche: "Epoxy Flooring · Oregon",       spend: "$2,250",  leads: 90,  bk: 25,  cpl: "$25.00", ctr: "4.07%", revenue: "$37,500",  trend: "up" },
    { nm: "EliteFloor Epoxy",       av: "EF", type: "epoxy",       niche: "Epoxy Flooring · Texas",        spend: "$1,980",  leads: 79,  bk: 22,  cpl: "$25.06", ctr: "4.12%", revenue: "$33,000",  trend: "up" },
    { nm: "CoatPro Floors",         av: "CF", type: "epoxy",       niche: "Epoxy Flooring · California",   spend: "$1,575",  leads: 63,  bk: 18,  cpl: "$25.00", ctr: "3.99%", revenue: "$27,000",  trend: "up" },
    // Garage Doors
    { nm: "Overhead Experts",       av: "OE", type: "garage",      niche: "Garage Doors · Las Vegas NV",   spend: "$1,440",  leads: 96,  bk: 32,  cpl: "$15.00", ctr: "5.01%", revenue: "$22,960",  trend: "up" },
    { nm: "DoorPro Solutions",      av: "DP", type: "garage",      niche: "Garage Doors · Dallas TX",      spend: "$1,260",  leads: 84,  bk: 28,  cpl: "$15.00", ctr: "5.11%", revenue: "$20,090",  trend: "up" },
    { nm: "FastLift Garage",        av: "FL", type: "garage",      niche: "Garage Doors · Phoenix AZ",     spend: "$1,035",  leads: 69,  bk: 23,  cpl: "$15.00", ctr: "4.97%", revenue: "$16,510",  trend: "up" },
    // Cleaning
    { nm: "Urbina Cleaning",        av: "UC", type: "cleaning",    niche: "Residential Cleaning · Edmonton AB", spend: "$1,180", leads: 118, bk: 41,  cpl: "$10.00", ctr: "4.88%", revenue: "$14,200",  trend: "up" },
    { nm: "Tidy Touch",             av: "TT", type: "cleaning",    niche: "Residential Cleaning · Calgary AB",  spend: "$6,855", leads: 199, bk: 143, cpl: "$34",    ctr: "15.26%", revenue: "$27,885",  trend: "up" },
    { nm: "Fresh & Clean Co.",      av: "FC", type: "cleaning",    niche: "Residential Cleaning · Austin TX",   spend: "$1,420", leads: 140, bk: 49,  cpl: "$10.14", ctr: "4.95%", revenue: "$16,950",  trend: "up" },
  ],
  agency: [
    { nm: "Elara Media",          av: "EM", niche: "Marketing Agency",           spend: "$3,182",  leads: 530,    bk: 95,  cpl: "$6.00",  ctr: "2.84%", revenue: "$56,000",  trend: "up" },
    { nm: "Amplify Marketing",    av: "AM", niche: "Marketing Agency",           spend: "$1,750",  leads: 350,    bk: 60,  cpl: "$5.00",  ctr: "3.02%", revenue: "$22,000",  trend: "up" },
    { nm: "Push Media",           av: "PM", niche: "Performance Agency",         spend: "$2,860",  leads: 358,    bk: 64,  cpl: "$8.00",  ctr: "4.47%", revenue: "$78,000",  trend: "up" },
    { nm: "Simply Intense",       av: "SI", niche: "Marketing Agency",           spend: "$10,000", leads: 2000,   bk: 320, cpl: "$5.00",  ctr: "4.21%", revenue: "$95,000",  trend: "up" },
  ],
  coaches: [
    { nm: "Tim Tebow Summit",     av: "TT", niche: "Live Event · Faith",         spend: "$10,015", leads: "200+", bk: 187, cpl: "$0.52",  ctr: "6.18%", revenue: "$93,500",  trend: "up" },
    { nm: "Miss Carrie June",     av: "CJ", niche: "Personal Brand · Music",     spend: "$22,900", leads: 1240,   bk: 372, cpl: "$18.52", ctr: "4.64%", revenue: "$127,000", trend: "up" },
    { nm: "AmCham TT",            av: "AC", niche: "B2B Conference · Energy",    spend: "$2,548",  leads: 320,    bk: 300, cpl: "$7.96",  ctr: "5.84%", revenue: "$120,000", trend: "up" },
  ],
  ecom: [
    { nm: "Bentley Trike",        av: "BT", niche: "Licensed E-bike",            spend: "$24,150", sales: 172,  revenue: "$430,594", roas: "17.83×", ctr: "3.21%", reach: "412,800", trend: "up" },
    { nm: "Skull Shaver",         av: "SS", niche: "DTC Grooming",               spend: "$48,720", sales: 2440, revenue: "$195,200", roas: "4.01×",  ctr: "4.08%", reach: "894,200", trend: "up" },
    { nm: "Tinye Swim",           av: "TS", niche: "DTC Swimwear",               spend: "$10,695", sales: 480,  revenue: "$42,000",  roas: "3.93×",  ctr: "3.74%", reach: "186,420", trend: "up" },
  ],
};

const SPARK_PATHS = [
  "M0 22 L13 19 L26 20 L40 14 L53 16 L66 10 L80 4",
  "M0 20 L13 17 L26 18 L40 11 L53 13 L66 7 L80 3",
  "M0 19 L13 21 L26 15 L40 17 L53 11 L66 9 L80 5",
  "M0 21 L13 18 L26 19 L40 13 L53 15 L66 8 L80 6",
  "M0 23 L13 20 L26 17 L40 18 L53 12 L66 11 L80 4",
];
function pickPath(seed) {
  let h = 0;
  for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
  return SPARK_PATHS[h % SPARK_PATHS.length];
}
function Sparkline({ trend = "up", seed = "" }) {
  const path = seed ? pickPath(seed) : SPARK_PATHS[0];
  const fill = path + " L80 24 L0 24 Z";
  return (
    <svg className="spark" viewBox="0 0 80 24">
      <path className="fill" d={fill} />
      <path className="line" d={path} />
    </svg>
  );
}

const CLINIC_TYPES = [
  { id: "chiro",  label: "Chiropractic" },
  { id: "physio", label: "Physiotherapy" },
  { id: "dental", label: "Dental" },
  { id: "mental", label: "Mental Health" },
  { id: "medspa", label: "Med Spa" },
  { id: "weight", label: "Weight Loss" },
  { id: "regen",  label: "Regenerative" },
  { id: "massage",label: "Massage / RMT" },
];

const HOME_TYPES = [
  { id: "hvac",        label: "HVAC" },
  { id: "roofing",     label: "Roofing" },
  { id: "solar",       label: "Solar" },
  { id: "plumbing",    label: "Plumbing" },
  { id: "electrical",  label: "Electrical" },
  { id: "landscaping", label: "Landscaping" },
  { id: "lighting",    label: "Perm. Lighting" },
  { id: "epoxy",       label: "Epoxy" },
  { id: "garage",      label: "Garage Doors" },
  { id: "cleaning",    label: "Cleaning" },
];

// Jitter leads, bookings, spend, CTR slightly on each 47s refresh
function jitterRows(rows) {
  return rows.map(r => {
    if (typeof r.leads !== 'number') return r;
    const dl = Math.floor(Math.random() * 3);          // 0–2 new leads
    const db = Math.random() > 0.7 ? 1 : 0;            // 30% chance +1 booking
    const spendNum = parseInt(r.spend.replace(/[$,]/g, ''));
    const dSpend = Math.floor((Math.random() - 0.35) * 50); // mostly +, tiny -
    const newSpend = '$' + Math.max(500, spendNum + dSpend).toLocaleString();
    const ctrNum = parseFloat(r.ctr);
    const dCtr = (Math.random() - 0.5) * 0.06;         // ±0.03%
    const newCtr = Math.max(0.1, ctrNum + dCtr).toFixed(2) + '%';
    return { ...r, leads: r.leads + dl, bk: r.bk + db, spend: newSpend, ctr: newCtr };
  });
}

function Dashboard({ defaultNiche = "clinics", clinicsOnly = false, homeOnly = false }) {
  const lockedNiche = homeOnly ? "home" : null;
  const [niche, setNiche] = useState(lockedNiche || defaultNiche);
  const [clinicType, setClinicType] = useState("chiro");
  const [homeType, setHomeType] = useState("hvac");
  const [now, setNow] = useState(new Date());
  const [seconds, setSeconds] = useState(47);
  const [liveHome, setLiveHome] = useState(() => CLIENTS.home.map(r => ({...r})));

  useEffect(() => {
    const i = setInterval(() => {
      setSeconds(s => {
        if (s <= 1) {
          setLiveHome(prev => jitterRows(prev));
          setNow(new Date());
          return 47;
        }
        setNow(new Date());
        return s - 1;
      });
    }, 1000);
    return () => clearInterval(i);
  }, []);

  const baseRows = homeOnly ? liveHome : CLIENTS[niche];
  const allRows = homeOnly ? liveHome : CLIENTS[niche];
  const rows = clinicsOnly
    ? allRows.filter(r => r.type === clinicType)
    : homeOnly
      ? liveHome.filter(r => r.type === homeType)
      : allRows;
  const cols = COLUMNS[niche];
  const ts = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });

  return (
    <section className="sec dash-wrap" id="dashboard">
      <div className="sec-inner">
        <span className="eyebrow"><span className="dot" /> WANT TO SEE RESULTS?</span>
        <h2 className="display" style={{ marginTop: 24 }}>
          Check on our LIVE clients.<br/><span className="it">Refreshed every 47 seconds.</span>
        </h2>

        <div className="dash-counters">
          <div className="dash-counter">
            <div className="num">$117M+</div>
            <div className="lab">Ad Spend Managed</div>
          </div>
          <div className="dash-counter">
            <div className="num">$480M+</div>
            <div className="lab">Client Revenue Generated</div>
          </div>
        </div>

        {clinicsOnly ? (
          <div className="dash-pills">
            {CLINIC_TYPES.map(t => (
              <button
                key={t.id}
                className={"dash-pill" + (clinicType === t.id ? " active" : "")}
                onClick={() => setClinicType(t.id)}
              >
                {t.label}
                <span className="count">{CLIENTS.clinics.filter(r => r.type === t.id).length}</span>
              </button>
            ))}
          </div>
        ) : homeOnly ? (
          <div className="dash-pills">
            {HOME_TYPES.map(t => (
              <button
                key={t.id}
                className={"dash-pill" + (homeType === t.id ? " active" : "")}
                onClick={() => setHomeType(t.id)}
              >
                {t.label}
                <span className="count">{liveHome.filter(r => r.type === t.id).length}</span>
              </button>
            ))}
          </div>
        ) : (
          <div className="dash-pills">
            {NICHES.map(n => (
              <button
                key={n.id}
                className={"dash-pill" + (niche === n.id ? " active" : "")}
                onClick={() => setNiche(n.id)}
              >
                {n.label}
                <span className="count">{n.count}</span>
              </button>
            ))}
          </div>
        )}

        <div className="dash-panel">
          <div className="dash-panel-top">
            <div className="dash-panel-l">
              <span className="live"><span className="pulse" /> LIVE</span>
              <span className="dash-panel-sep">·</span>
              <span className="dash-panel-meta">refresh in {seconds}s</span>
            </div>
            <div className="dash-panel-r">
              <span className="dash-range">PER MONTH · LAST 30 DAYS</span>
              <span className="dash-panel-sep">·</span>
              <span className="dash-panel-meta">{ts} MST</span>
              <span className="dash-panel-sep">·</span>
              <span className="dash-panel-meta">{NICHES.find(n=>n.id===niche).label}</span>
            </div>
          </div>
          <div className="dash-headers">
            <span>Client</span>
            {cols.map(c => <span key={c.key}>{c.label}</span>)}
            <span>Trend</span>
          </div>
          {rows.length === 0 ? (
            <div className="dash-empty">
              <div className="dash-empty-ico">●</div>
              <div className="dash-empty-body">
                <div className="dash-empty-ttl">Onboarding next client</div>
                <div className="dash-empty-sub">We're slot-limited — 1 business per niche per market. Reach out to claim this slot.</div>
              </div>
              <a href="#cta" className="btn btn-violet" style={{ padding: "10px 16px", fontSize: 13 }}>Claim slot →</a>
            </div>
          ) : rows.map((r, i) => (
            <div key={i} className="dash-row">
              <div className="client">
                <div className="av">{r.av}</div>
                <div className="client-id">
                  <div className="nm">{r.nm}</div>
                  <div className="niche">{r.niche}</div>
                </div>
                <span className="stat" />
              </div>
              {cols.map(c => <div key={c.key} className="num">{r[c.key]}</div>)}
              <Sparkline seed={r.nm} trend={r.trend} />
            </div>
          ))}
          <div className="dash-panel-foot">
            <span>META · GOOGLE · STRIPE · TIKTOK</span>
            <span>SOURCE: LIVE API · SYNCED {seconds}s AGO</span>
          </div>
        </div>

        <p className="dash-cap">
          Real spend. Real bookings. Real ROAS pulled live from Meta + Google + Stripe.{" "}
          <a href="#cta">Want your account on this dashboard?</a>
        </p>
        <div style={{ textAlign:"center", marginTop:16 }}>
          <a href="proof.html" className="btn btn-ghost" style={{ fontSize:13, padding:"9px 20px" }}>
            View full case studies →
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Dashboard, Sparkline });