// ==================== Analytics, Kanban, Ask-DB, Settings ====================

function Analytics({ leads }) {
  // Quick derived stats
  const total = leads.length;
  const candidates = leads.filter(l => l.outcome === "candidate").length;
  const complicated = leads.filter(l => l.outcome === "complicated").length;
  const notfit = leads.filter(l => l.outcome === "notfit").length;
  const avgScore = Math.round(leads.reduce((a,l) => a + l.score, 0) / total);

  return (
    <div className="analytics">
      <div style={{display:"flex", alignItems:"flex-end", gap:16, marginBottom:16}}>
        <div>
          <div className="pagehead__title display">Analytics</div>
          <div style={{color:"var(--ink-500)", fontSize:12}}>April 2026 · updated 14s ago</div>
        </div>
        <div style={{marginLeft:"auto", display:"flex", gap:6}}>
          <div className="filter">Range <span className="filter__val">Last 30d</span><Icon name="down" size={11}/></div>
          <button className="btn btn--sm"><Icon name="download" size={11}/> Export PDF</button>
        </div>
      </div>

      <div className="stat-grid">
        <Stat label="Leads this month" value={total} delta="+18% MoM" up />
        <Stat label="Candidates" value={candidates} delta={`${Math.round(candidates/total*100)}% of total`} />
        <Stat label="Complicated" value={complicated} delta={`${Math.round(complicated/total*100)}% of total`} />
        <Stat label="Not a fit" value={notfit} delta={`${Math.round(notfit/total*100)}% of total`} />
        <Stat label="Avg Quiz 2 score" value={avgScore} delta="+3 vs prior" up />
        <Stat label="Time to 1st contact" value="4.2h" delta="-32m vs prior" up small />
      </div>

      <div className="widget-grid">
        <div className="card widget" style={{gridColumn:"span 12"}}>
          <div className="card__head">
            <div className="card__title">Conversion funnel</div>
            <span className="card__meta">Submitted → Reviewed → Contacted → Qualified → Engaged</span>
          </div>
          <div className="funnel">
            {[
              { label: "Submitted",  n: 128, rate: "100%" },
              { label: "Reviewed",   n: 104, rate: "81%" },
              { label: "Contacted",  n: 72,  rate: "69%" },
              { label: "Qualified",  n: 38,  rate: "53%" },
              { label: "Engaged",    n: 14,  rate: "37%" },
            ].map((s,i) => (
              <div key={i} className="funnel__step">
                <div className="funnel__bar">
                  <span style={{fontSize:20}}>{s.n}</span>
                </div>
                <div className="funnel__label">{s.label}</div>
                <div className="funnel__rate">{s.rate}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="card widget">
          <div className="card__head"><div className="card__title">Avg Quiz 2 score — weekly</div></div>
          <div className="card__body">
            <SparkLine data={[44,48,46,52,49,55,58,54,60,62,59,63]} />
          </div>
        </div>

        <div className="card widget">
          <div className="card__head"><div className="card__title">Outcome distribution</div></div>
          <div className="card__body" style={{display:"flex", gap:18, alignItems:"center"}}>
            <Donut slices={[
              { label: "Candidate",   value: candidates,  color: "var(--go-700)" },
              { label: "Complicated", value: complicated, color: "var(--gold-600)" },
              { label: "Not a fit",   value: notfit,      color: "var(--stop-700)" },
            ]}/>
            <div style={{flex:1, fontSize:12.5}}>
              {[
                { l: "Candidate",   n: candidates,  c: "var(--go-700)" },
                { l: "Complicated", n: complicated, c: "var(--gold-600)" },
                { l: "Not a fit",   n: notfit,      c: "var(--stop-700)" },
              ].map(r => (
                <div key={r.l} style={{display:"flex", alignItems:"center", gap:8, padding:"4px 0"}}>
                  <span style={{width:10, height:10, borderRadius:2, background:r.c}}/>
                  <span style={{flex:1}}>{r.l}</span>
                  <span className="mono">{r.n}</span>
                  <span style={{color:"var(--ink-400)", width:42, textAlign:"right"}}>{Math.round(r.n/total*100)}%</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="card widget">
          <div className="card__head"><div className="card__title">Score distribution</div></div>
          <div className="card__body"><Histogram leads={leads}/></div>
        </div>

        <div className="card widget">
          <div className="card__head"><div className="card__title">Red-flag sources (Part 2)</div></div>
          <div className="card__body">
            <BarChart rows={[
              ["Ownership < 10%", 14],
              ["Unwilling 183+ days", 11],
              ["Active state dispute", 9],
              ["Prior IRS exam", 7],
              ["Spouse unwilling", 6],
              ["Cannot relocate ops", 5],
              ["W-2 non-portable", 4],
            ]} />
          </div>
        </div>

        <div className="card widget" style={{gridColumn:"span 12"}}>
          <div className="card__head"><div className="card__title">Apollo firmographic breakdown</div></div>
          <div className="card__body" style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:28}}>
            <FirmoList title="Industry" rows={[["SaaS",12],["Private Equity",6],["Family Office",4],["Biotech",3],["Law",3],["Other",6]]} />
            <FirmoList title="Company size" rows={[["1–10",4],["11–50",13],["51–200",9],["201–500",6],["500+",2]]} />
            <FirmoList title="Revenue band" rows={[["<$10M",11],["$10–50M",10],["$50–200M",8],["$200M+",5]]} />
          </div>
        </div>
      </div>
    </div>
  );
}

function Stat({ label, value, delta, up, small }) {
  return (
    <div className="stat">
      <div className="stat__label">{label}</div>
      <div className="stat__value" style={small ? {fontSize:22} : undefined}>{value}</div>
      <div className={cx("stat__delta", up && "stat__delta--up")}>{delta}</div>
    </div>
  );
}

function SparkLine({ data }) {
  const w = 300, h = 120, pad = 10;
  const max = Math.max(...data), min = Math.min(...data);
  const step = (w - pad*2) / (data.length - 1);
  const pts = data.map((v,i) => [pad + i*step, h - pad - ((v-min)/(max-min)) * (h - pad*2)]);
  const path = pts.map((p,i) => (i === 0 ? "M" : "L") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" ");
  const area = path + ` L ${pts[pts.length-1][0]} ${h-pad} L ${pad} ${h-pad} Z`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} className="sparkline" preserveAspectRatio="none">
      <path d={area} fill="var(--gold-050)" />
      <path d={path} fill="none" stroke="var(--gold-600)" strokeWidth="1.8"/>
      {pts.map((p,i) => <circle key={i} cx={p[0]} cy={p[1]} r="2.2" fill="var(--gold-600)"/>)}
    </svg>
  );
}

function Donut({ slices }) {
  const total = slices.reduce((a,s) => a + s.value, 0);
  let acc = 0;
  const r = 46, cx = 60, cy = 60;
  return (
    <svg width="120" height="120" viewBox="0 0 120 120">
      {slices.map((s,i) => {
        const start = acc / total * Math.PI * 2 - Math.PI/2;
        acc += s.value;
        const end = acc / total * Math.PI * 2 - Math.PI/2;
        const large = (end - start) > Math.PI ? 1 : 0;
        const x1 = cx + r * Math.cos(start), y1 = cy + r * Math.sin(start);
        const x2 = cx + r * Math.cos(end),   y2 = cy + r * Math.sin(end);
        return <path key={i} d={`M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`} fill={s.color}/>;
      })}
      <circle cx={cx} cy={cy} r="26" fill="var(--panel)"/>
      <text x={cx} y={cy+4} textAnchor="middle" fontSize="18" fontWeight="600" fill="var(--navy-900)">{total}</text>
    </svg>
  );
}

function Histogram({ leads }) {
  const bins = Array.from({length:10}, () => 0);
  leads.forEach(l => { bins[Math.min(9, Math.floor(l.score/10))]++; });
  const max = Math.max(...bins);
  const w = 300, h = 140, pad = 14;
  const bw = (w - pad*2) / bins.length - 3;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} className="histogram" preserveAspectRatio="none">
      {bins.map((n,i) => {
        const bh = n/max * (h - pad*2);
        const x = pad + i * ((w-pad*2)/bins.length) + 1.5;
        const y = h - pad - bh;
        const color = i < 3 ? "var(--stop-700)" : i < 6 ? "var(--gold-600)" : "var(--go-700)";
        return (
          <g key={i}>
            <rect x={x} y={y} width={bw} height={bh} fill={color} opacity="0.85" rx="1"/>
            <text x={x + bw/2} y={h-2} textAnchor="middle" fontSize="9" fill="var(--ink-500)">{i*10}</text>
          </g>
        );
      })}
    </svg>
  );
}

function BarChart({ rows }) {
  const max = Math.max(...rows.map(r => r[1]));
  return (
    <div style={{display:"flex", flexDirection:"column", gap:6}}>
      {rows.map(([label, n]) => (
        <div key={label} style={{display:"grid", gridTemplateColumns:"160px 1fr 28px", alignItems:"center", gap:8, fontSize:12}}>
          <div style={{color:"var(--ink-700)"}}>{label}</div>
          <div style={{height:10, background:"var(--cream-200)", borderRadius:2, overflow:"hidden"}}>
            <div style={{height:"100%", width:`${n/max*100}%`, background:"var(--navy-500)"}}/>
          </div>
          <div className="mono" style={{color:"var(--ink-700)", textAlign:"right"}}>{n}</div>
        </div>
      ))}
    </div>
  );
}

function FirmoList({ title, rows }) {
  const total = rows.reduce((a,r) => a+r[1], 0);
  return (
    <div>
      <div className="ai-section__label" style={{marginBottom:8}}>{title}</div>
      {rows.map(([l,n]) => (
        <div key={l} style={{display:"grid", gridTemplateColumns:"1fr 1fr 38px", gap:8, alignItems:"center", padding:"4px 0", fontSize:12.5, borderBottom:"1px dotted var(--border-soft)"}}>
          <div>{l}</div>
          <div className="meter-bar"><span className="meter-bar__fill" style={{width:`${n/total*100}%`}}/></div>
          <div className="mono" style={{color:"var(--ink-500)", textAlign:"right"}}>{n}</div>
        </div>
      ))}
    </div>
  );
}

// ==================== Attorney Kanban ====================

function Kanban({ leads, onOpen }) {
  const assignees = APP_DATA.TEAM;
  return (
    <>
      <div className="pagehead">
        <div>
          <div className="pagehead__title display">Attorney capacity</div>
          <div className="pagehead__meta">Active leads grouped by assigned attorney · SLA timer = hours since last activity</div>
        </div>
        <div className="pagehead__actions">
          <div className="filter">Show <span className="filter__val">Active only</span><Icon name="down" size={11}/></div>
          <button className="btn btn--sm">Rebalance</button>
        </div>
      </div>
      <div className="kanban">
        {assignees.map(u => {
          const col = leads.filter(l => l.assignee?.id === u.id && l.status !== "Closed Won" && l.status !== "Closed Lost" && l.status !== "Rejected");
          const load = col.length;
          const overSla = col.filter(l => l.submittedHoursAgo > 72).length;
          return (
            <div className="kcol" key={u.id}>
              <div className="kcol__head">
                <Avatar user={u} size={22}/>
                <div>
                  <div className="kcol__title">{u.name}</div>
                  <div style={{fontSize:11, color:"var(--ink-500)"}}>{u.role} · capacity {load}/12 · {overSla} over SLA</div>
                </div>
                <div className="kcol__count">{load}</div>
              </div>
              <div className="kcol__body">
                {col.map(l => (
                  <div key={l.id} className="kcard" onClick={() => onOpen(l.id)}>
                    <div className="kcard__name">{l.name}</div>
                    <div className="kcard__co">{l.company} · {l.title}</div>
                    <div className="kcard__foot">
                      <OutcomePill outcome={l.outcome}/>
                      <ScoreBar score={l.score}/>
                    </div>
                    <div style={{marginTop:6, display:"flex", alignItems:"center", gap:8, fontSize:11}}>
                      <StatusPill status={l.status}/>
                      <span className={cx("sla", l.submittedHoursAgo > 72 && "sla--over", l.submittedHoursAgo > 48 && l.submittedHoursAgo <= 72 && "sla--warn")}>
                        <Icon name="dot" size={8}/> {l.submittedHoursAgo}h since submit
                      </span>
                    </div>
                  </div>
                ))}
                {col.length === 0 && <div style={{padding:"14px 10px", fontSize:12, color:"var(--ink-400)", textAlign:"center"}}>No active leads</div>}
              </div>
            </div>
          );
        })}

        <div className="kcol">
          <div className="kcol__head">
            <span style={{width:22, height:22, borderRadius:"50%", background:"var(--cream-300)", display:"inline-flex", alignItems:"center", justifyContent:"center", fontSize:11, color:"var(--ink-500)"}}>?</span>
            <div>
              <div className="kcol__title">Unassigned</div>
              <div style={{fontSize:11, color:"var(--ink-500)"}}>Auto-routes via round-robin in 2h</div>
            </div>
            <div className="kcol__count">{leads.filter(l => !l.assignee).length}</div>
          </div>
          <div className="kcol__body">
            {leads.filter(l => !l.assignee).map(l => (
              <div key={l.id} className="kcard" onClick={() => onOpen(l.id)}>
                <div className="kcard__name">{l.name}</div>
                <div className="kcard__co">{l.company}</div>
                <div className="kcard__foot">
                  <OutcomePill outcome={l.outcome}/>
                  <ScoreBar score={l.score}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

// ==================== Ask the database ====================

function AskDb({ leads, onOpen }) {
  const [msgs, setMsgs] = React.useState([
    {
      role: "user",
      text: "Show me all candidate-tier leads from tech with scores above 70 who haven't been contacted",
    },
    {
      role: "assistant",
      interpreted: {
        outcome: "candidate",
        industryIn: ["SaaS"],
        scoreMin: 70,
        statusNotIn: ["Contacted", "Qualified", "Closed Won"],
      },
      results: leads.filter(l => l.outcome === "candidate" && ["SaaS"].includes(l.industry) && l.score >= 70 && !["Contacted","Qualified","Closed Won"].includes(l.status)),
    }
  ]);
  const [input, setInput] = React.useState("");

  const send = (text) => {
    if (!text.trim()) return;
    const out = { role: "user", text };
    // Very light heuristic parser
    const interpreted = {};
    if (/candidate/i.test(text)) interpreted.outcome = "candidate";
    if (/complicated/i.test(text)) interpreted.outcome = "complicated";
    const scoreMatch = text.match(/score[s]?\s*(?:above|over|>)\s*(\d+)/i);
    if (scoreMatch) interpreted.scoreMin = +scoreMatch[1];
    if (/not[\s-]*contacted|no contact|haven[’']?t been contacted/i.test(text)) interpreted.statusNotIn = ["Contacted","Qualified","Closed Won"];
    if (/red flag/i.test(text)) interpreted.hasRedFlags = true;
    if (/saas|tech|software/i.test(text)) interpreted.industryIn = ["SaaS"];
    if (/private equity|pe/i.test(text)) interpreted.industryIn = ["Private Equity"];
    if (/family office/i.test(text)) interpreted.industryIn = ["Family Office"];

    const results = leads.filter(l => {
      if (interpreted.outcome && l.outcome !== interpreted.outcome) return false;
      if (interpreted.scoreMin && l.score < interpreted.scoreMin) return false;
      if (interpreted.statusNotIn && interpreted.statusNotIn.includes(l.status)) return false;
      if (interpreted.hasRedFlags && l.flagCount === 0) return false;
      if (interpreted.industryIn && !interpreted.industryIn.includes(l.industry)) return false;
      return true;
    });
    setMsgs(m => [...m, out, { role: "assistant", interpreted, results }]);
    setInput("");
  };

  return (
    <div className="askdb">
      <div className="askdb__scroll">
        <div style={{display:"flex", alignItems:"center", gap:10, marginBottom:14}}>
          <Icon name="sparkle" size={18} style={{color:"var(--gold-600)"}}/>
          <div>
            <div className="display" style={{fontSize:22, color:"var(--navy-900)"}}>Ask the database</div>
            <div style={{fontSize:12, color:"var(--ink-500)"}}>Natural-language filter builder. Claude interprets your query, shows the filter, runs it against your leads.</div>
          </div>
        </div>
        {msgs.map((m,i) => (
          m.role === "user" ? (
            <div key={i} className="askdb__msg askdb__msg--user">{m.text}</div>
          ) : (
            <div key={i} className="askdb__msg">
              <div className="interpreted">
                <Icon name="sparkle" size={11} style={{color:"var(--gold-600)"}}/>
                {" Interpreted as "}
                {Object.entries(m.interpreted).map(([k,v]) => (
                  <b key={k}>{k}: {Array.isArray(v) ? v.join(", ") : String(v)}</b>
                ))}
              </div>
              <div style={{fontSize:12.5, color:"var(--ink-700)", marginBottom:10}}>Found <b>{m.results.length}</b> matching leads.</div>
              {m.results.length > 0 && (
                <div style={{border:"1px solid var(--border-soft)", borderRadius:5, overflow:"hidden"}}>
                  {m.results.slice(0,6).map(l => (
                    <div key={l.id} onClick={() => onOpen(l.id)}
                         style={{display:"grid", gridTemplateColumns:"1fr 160px 80px 40px 100px", gap:8, padding:"7px 10px", borderBottom:"1px solid var(--border-soft)", fontSize:12.5, cursor:"pointer", alignItems:"center"}}>
                      <div><b>{l.name}</b><span style={{color:"var(--ink-500)"}}> · {l.email}</span></div>
                      <div style={{color:"var(--ink-700)"}}>{l.company}</div>
                      <ScoreBar score={l.score}/>
                      <OutcomePill outcome={l.outcome}/>
                      <StatusPill status={l.status}/>
                    </div>
                  ))}
                </div>
              )}
              <div style={{display:"flex", gap:6, marginTop:10}}>
                <button className="btn btn--sm">Apply as inbox filter</button>
                <button className="btn btn--sm">Export CSV</button>
                <button className="btn btn--sm">Save as view</button>
              </div>
            </div>
          )
        ))}
      </div>

      <div>
        <div className="askdb__suggestions">
          {[
            "Unassigned leads with score above 80",
            "Complicated leads from private equity",
            "Stale leads — no activity in 72 hours",
            "Red flag count greater than 3",
          ].map(s => (
            <button key={s} className="chip" style={{cursor:"pointer"}} onClick={() => send(s)}>{s}</button>
          ))}
        </div>
        <div className="askdb__composer">
          <textarea value={input} onChange={e => setInput(e.target.value)}
                    placeholder="Ask a question like &quot;candidates from SaaS with score above 70&quot;…"
                    onKeyDown={e => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(input); } }}/>
          <button className="btn btn--primary" onClick={() => send(input)}><Icon name="sparkle" size={12}/> Run</button>
        </div>
      </div>
    </div>
  );
}

// ==================== Settings ====================

function Settings() {
  const [tab, setTab] = React.useState("team");
  return (
    <div className="settings">
      <div style={{display:"flex", alignItems:"flex-end", gap:16, marginBottom:16}}>
        <div>
          <div className="pagehead__title display">Settings</div>
          <div style={{color:"var(--ink-500)", fontSize:12}}>Admin-only · Cloudflare Access gated</div>
        </div>
      </div>
      <div className="settings-grid">
        <nav className="settings-nav">
          {[
            ["team", "Team & roles"],
            ["rules", "Assignment rules"],
            ["email", "Email templates"],
            ["quiz", "Quiz configuration"],
            ["integrations", "Integrations"],
            ["export", "Export & backup"],
          ].map(([k,l]) => (
            <div key={k} className={cx("settings-nav__item", tab === k && "settings-nav__item--active")} onClick={() => setTab(k)}>{l}</div>
          ))}
        </nav>
        <div>
          {tab === "team" && <TeamSettings/>}
          {tab === "rules" && <RulesSettings/>}
          {tab === "email" && <EmailSettings/>}
          {tab === "quiz" && <QuizSettings/>}
          {tab === "integrations" && <Integrations/>}
          {tab === "export" && <ExportSettings/>}
        </div>
      </div>
    </div>
  );
}

function TeamSettings() {
  return (
    <div className="card">
      <div className="card__head">
        <div className="card__title">Team members</div>
        <span className="card__meta">{APP_DATA.TEAM.length} members · Cloudflare Access: <span className="mono">@usvi-advisory.com</span></span>
        <div className="card__actions"><button className="btn btn--sm btn--primary"><Icon name="plus" size={11}/> Invite</button></div>
      </div>
      <table className="tbl">
        <thead><tr><th>Name</th><th>Email</th><th>Role</th><th>Last active</th><th/></tr></thead>
        <tbody>
          {APP_DATA.TEAM.map(u => (
            <tr key={u.id}>
              <td><div style={{display:"flex", alignItems:"center", gap:8}}><Avatar user={u} size={20}/>{u.name}</div></td>
              <td className="td--mute">{u.name.toLowerCase().replace(" ",".")}@usvi-advisory.com</td>
              <td><span className="chip">{u.role}</span></td>
              <td className="td--mute">Today</td>
              <td><button className="iconbtn"><Icon name="more"/></button></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function RulesSettings() {
  return (
    <div className="card">
      <div className="card__head"><div className="card__title">Assignment rules</div><span className="card__meta">Applied on lead creation, in order</span></div>
      <div className="card__body">
        {[
          { when: "score ≥ 80 AND outcome = candidate", then: "Assign → Margaret Rowan (senior)" },
          { when: "industry IN (Biotech, Healthcare)",  then: "Assign → David Hartwell (specialist)" },
          { when: "red_flag_count ≥ 3",                 then: "Assign → Sofia Peña (KYC review)" },
          { when: "otherwise",                           then: "Round-robin among Reviewers" },
        ].map((r,i) => (
          <div key={i} style={{display:"grid", gridTemplateColumns:"24px 1fr 20px 1fr 24px", alignItems:"center", gap:8, padding:"8px 0", borderBottom: i === 3 ? 0 : "1px dashed var(--border-soft)"}}>
            <span className="mono" style={{color:"var(--ink-400)"}}>{i+1}</span>
            <span className="mono" style={{fontSize:12, background:"var(--cream-050)", padding:"3px 6px", borderRadius:3}}>{r.when}</span>
            <Icon name="chevron" size={12} style={{color:"var(--ink-400)"}}/>
            <span>{r.then}</span>
            <button className="iconbtn"><Icon name="more"/></button>
          </div>
        ))}
      </div>
    </div>
  );
}

function EmailSettings() {
  return (
    <div className="card">
      <div className="card__head"><div className="card__title">Staff notification template</div><span className="card__meta">Sent to <span className="mono">staff@usvi-advisory.com</span> on every submit</span></div>
      <div className="card__body">
        <div style={{background:"var(--cream-050)", border:"1px solid var(--border-soft)", borderRadius:4, padding:12, fontSize:12.5, fontFamily:"var(--f-mono)", whiteSpace:"pre-wrap"}}>
{`Subject: New lead — {{lead.name}} · {{quiz1.outcome}} · score {{quiz2.score}}

A new qualification submission just came in.

  Name:    {{lead.name}} <{{lead.email}}>
  Company: {{apollo.org.name}} ({{apollo.org.industry}})
  Title:   {{apollo.person.title}}

  Quiz 1 outcome: {{quiz1.outcome}}
  Quiz 2 score:   {{quiz2.score}}/100
  Red flags:      {{quiz2.flag_count}}

— AI analysis —
{{ai_analysis.summary}}

Review in dashboard: {{dashboard_url}}`}
        </div>
        <div style={{display:"flex", gap:6, marginTop:10}}>
          <button className="btn btn--sm btn--primary">Save template</button>
          <button className="btn btn--sm">Send test</button>
        </div>
      </div>
    </div>
  );
}

function QuizSettings() {
  return (
    <>
      <div className="card">
        <div className="card__head"><div className="card__title">Quiz 1 — qualification (read-only)</div><span className="card__meta">6 questions · edits happen in the marketing site repo</span></div>
        <div>
          {APP_DATA.QUIZ1.map((q,i) => (
            <div key={i} style={{padding:"10px 14px", borderBottom: i === APP_DATA.QUIZ1.length-1 ? 0 : "1px solid var(--border-soft)", fontSize:12.5}}>
              <div style={{fontWeight:500, marginBottom:4}}>{i+1}. {q.q}</div>
              <div style={{display:"flex", gap:8, flexWrap:"wrap"}}>
                {q.a.map(a => <span key={a} className="chip">{a}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="card">
        <div className="card__head"><div className="card__title">Quiz 2 — detailed fit (read-only)</div><span className="card__meta">22 questions · 0–100 point scoring</span></div>
        <div style={{padding:"10px 14px", display:"grid", gridTemplateColumns:"1fr 1fr", gap:"6px 20px", fontSize:12.5}}>
          {APP_DATA.QUIZ2.map((q,i) => (
            <div key={i} style={{display:"flex", gap:8}}>
              <span className="mono" style={{color:"var(--ink-400)", width:22}}>{String(i+1).padStart(2,"0")}</span>
              <span>{q}</span>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

function Integrations() {
  return (
    <>
      <IntegrationCard title="Apollo" sub="People + Organization Enrichment API" usageLabel="This month" used={1842} limit={5000} keyMask="apol_*********k9f2" ok/>
      <IntegrationCard title="Anthropic" sub="Claude analysis + Ask-the-database" usageLabel="Tokens this month" used={2840000} limit={5000000} keyMask="sk-ant-***********a3b" ok/>
      <IntegrationCard title="Zapier" sub="Webhook relay for downstream CRMs" usageLabel="Webhooks" used={"https://hooks.zapier.com/hooks/catch/8812/a7X..."} noMeter/>
      <IntegrationCard title="Slack" sub="Channel: #leads-signal — for SLA nudges" usageLabel="Workspace" used="usvi-advisory.slack.com" noMeter/>
    </>
  );
}

function IntegrationCard({ title, sub, usageLabel, used, limit, keyMask, ok, noMeter }) {
  const pct = limit ? Math.min(100, used/limit*100) : 0;
  const warn = pct > 80;
  return (
    <div className="card">
      <div className="card__head">
        <div className="card__title">{title}</div>
        <span className="card__meta">{sub}</span>
        <div className="card__actions">
          {ok && <span className="pill pill--go"><span className="pill__dot" style={{background:"var(--go-700)"}}/> Connected</span>}
          <button className="btn btn--sm">Manage</button>
        </div>
      </div>
      <div className="card__body">
        {keyMask && (
          <div style={{display:"flex", alignItems:"center", gap:10, marginBottom:12, fontSize:12}}>
            <span style={{color:"var(--ink-500)"}}>API key</span>
            <span className="mono" style={{background:"var(--cream-050)", padding:"3px 8px", borderRadius:3}}>{keyMask}</span>
            <button className="btn btn--sm btn--ghost">Rotate</button>
          </div>
        )}
        {!noMeter ? (
          <div>
            <div style={{display:"flex", justifyContent:"space-between", fontSize:12, marginBottom:4}}>
              <span style={{color:"var(--ink-500)"}}>{usageLabel}</span>
              <span className="mono">{typeof used === "number" ? used.toLocaleString() : used} / {limit.toLocaleString()}</span>
            </div>
            <div className="usage">
              <div className="usage__bar"><div className={cx("usage__fill", warn && "usage__fill--warn")} style={{width: pct + "%"}}/></div>
              <span className="mono" style={{fontSize:11, color:"var(--ink-500)", minWidth:30, textAlign:"right"}}>{pct.toFixed(0)}%</span>
            </div>
          </div>
        ) : (
          <div style={{fontSize:12}}><span style={{color:"var(--ink-500)"}}>{usageLabel}: </span><span className="mono">{used}</span></div>
        )}
      </div>
    </div>
  );
}

function ExportSettings() {
  return (
    <div className="card">
      <div className="card__head"><div className="card__title">Export & backup</div><span className="card__meta">Full database snapshot · includes PII — handle with care</span></div>
      <div className="card__body" style={{display:"flex", gap:10, flexWrap:"wrap"}}>
        <button className="btn"><Icon name="download" size={13}/> leads.csv</button>
        <button className="btn"><Icon name="download" size={13}/> leads.json</button>
        <button className="btn"><Icon name="download" size={13}/> notes + activity.json</button>
        <button className="btn"><Icon name="download" size={13}/> D1 SQL dump</button>
        <button className="btn btn--ghost">Schedule nightly R2 snapshot…</button>
      </div>
    </div>
  );
}

Object.assign(window, { Analytics, Kanban, AskDb, Settings });