// Automations page
(function () {

const { useState: useStateAP } = React;

function AutomationsPage() {
  const D = window.MAX_DATA;
  const { font, fg, muted, border, cardBg, STAGES, AUTOMATIONS_DATA } = D;
  const [selectedStage, setSelectedStage] = useStateAP("all");
  const [selectedStatus, setSelectedStatus] = useStateAP("all");
  const [searchQuery, setSearchQuery] = useStateAP("");
  const [showCatalog, setShowCatalog] = useStateAP(false);

  const getDisplayStatus = (status) => status === "active" ? "active" : "inactive";
  const activeCount = AUTOMATIONS_DATA.filter(a => a.status === "active").length;
  const inactiveCount = AUTOMATIONS_DATA.length - activeCount;

  const filtered = AUTOMATIONS_DATA.filter(a => {
    if (selectedStage !== "all" && a.stage !== selectedStage) return false;
    if (selectedStatus !== "all" && getDisplayStatus(a.status) !== selectedStatus) return false;
    if (searchQuery && !a.name.toLowerCase().includes(searchQuery.toLowerCase()) && !a.description.toLowerCase().includes(searchQuery.toLowerCase())) return false;
    return true;
  });
  const grouped = {};
  STAGES.forEach(s => { grouped[s.id] = []; });
  filtered.forEach(a => { if (grouped[a.stage]) grouped[a.stage].push(a); });

  const funnelSteps = [
    { step: "Lead Generated", detail: "AI Ads, MP Campaign, or Outbound AI Agent", total: 1247, ai: 848, pct: 68, color: "#2563eb", benchmark: 82 },
    { step: "Job Booked", detail: "AI Call or SMS Agent", total: 842, ai: 489, pct: 58, color: "#7c3aed", benchmark: 74 },
    { step: "Job Dispatched", detail: "Dispatch Pro AI", total: 824, ai: 643, pct: 78, color: "#0891b2", benchmark: 88 },
    { step: "Job Recorded", detail: "Field Pro AI", total: 816, ai: 726, pct: 89, color: "#059669", benchmark: 92 },
    { step: "Estimate Created", detail: "AI Estimate Generator", total: 724, ai: 253, pct: 35, color: "#059669", bottleneck: true, benchmark: 78 },
    { step: "Payment Collected", detail: "AI Collections Agent", total: 782, ai: 508, pct: 65, color: "#d97706", benchmark: 84 },
  ];

  const recommendations = [
    { name: "AI Estimate Generator (Good/Better/Best)", status: "inactive", stage: "In the Field", impact: "+22%", impactDetail: "Fully automated jobs would increase from 23% → 45%", reason: "Estimate Creation is the #1 bottleneck at 35% AI adoption. Turning this on would nearly double your fully automated job rate.", product: "Field Pro", effort: "Low" },
    { name: "AI SMS Agent — Inbound Booking", status: "pilot", stage: "Book the Job", impact: "+8%", impactDetail: "Booking AI adoption would increase from 58% → 66%", reason: "312 inbound SMS per week are partially handled by AI. Full activation would capture an additional 38 bookings/week.", product: "Calls", effort: "Low" },
    { name: "Payment Collection SMS", status: "active", stage: "Get Paid", impact: "+5%", impactDetail: "Collection AI adoption would increase from 65% → 70%", reason: "Currently active but only covers invoices >$500. Lowering threshold to $200 would capture 34 more invoices/month.", product: "Accounting", effort: "Config change" },
    { name: "Unsold Estimate Follow-up — Expand to 120 Days", status: "active", stage: "Generate Demand", impact: "+4%", impactDetail: "47 additional estimates worth $142K would be contacted", reason: "Follow-up window is set to 60 days. 47 estimates from 60-120 days ago haven't been touched.", product: "Marketing Pro", effort: "Config change" },
  ];

  return (
    <div style={{ padding: "24px 28px", maxWidth: 1300, margin: "0 auto" }}>
      <div style={{ marginBottom: 20 }}>
        <h1 style={{ fontSize: 24, fontWeight: 700, color: fg, fontFamily: font, margin: 0 }}>Automations</h1>
        <p style={{ fontSize: 13, color: muted, fontFamily: font, marginTop: 2 }}>Maximize fully automated jobs by identifying and closing gaps in the AI pipeline</p>
      </div>

      <div style={{ display: "flex", gap: 16, marginBottom: 16 }}>
        <div style={{ width: 300, flexShrink: 0, background: "linear-gradient(135deg, #0f1f3d 0%, #141414 100%)", borderRadius: 12, padding: "20px 22px", position: "relative", overflow: "hidden" }}>
          <div style={{ position: "absolute", top: -40, right: -40, width: 180, height: 180, borderRadius: "50%", background: "rgba(120,187,250,0.06)", filter: "blur(20px)" }} />
          <div style={{ position: "relative" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}>
              <div style={{ background: "rgba(120,187,250,0.15)", borderRadius: 10, padding: 10, border: "1px solid rgba(120,187,250,0.25)" }}><window.Icon name="Zap" size={18} color="#78bbfa" /></div>
              <div>
                <div style={{ fontSize: 10, color: "rgba(255,255,255,0.4)", fontFamily: font, fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.8, marginBottom: 2 }}>North star · Last 30 days</div>
                <span style={{ fontSize: 16, fontWeight: 800, color: "white", fontFamily: font, letterSpacing: -0.3 }}>Fully Automated Jobs</span>
              </div>
            </div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginBottom: 4 }}>
              <div style={{ fontSize: 64, fontWeight: 800, color: "#78bbfa", fontFamily: font, lineHeight: 0.95, letterSpacing: -2 }}>23%</div>
              <div style={{ display: "inline-flex", alignItems: "center", gap: 4, padding: "4px 8px", background: "rgba(74,222,128,0.12)", border: "1px solid rgba(74,222,128,0.25)", borderRadius: 6 }}>
                <window.Icon name="TrendingUp" size={11} color="#4ade80" />
                <span style={{ fontSize: 11, fontWeight: 700, color: "#4ade80", fontFamily: font }}>+8%</span>
                <span style={{ fontSize: 10, color: "rgba(255,255,255,0.55)", fontFamily: font, fontWeight: 500 }}>vs last month</span>
              </div>
            </div>
            <div style={{ fontSize: 11, color: "rgba(255,255,255,0.5)", fontFamily: font, marginBottom: 12 }}>of completed jobs handled end-to-end by AI</div>
            {/* Benchmark bar */}
            <div style={{ position: "relative", height: 5, background: "rgba(255,255,255,0.1)", borderRadius: 99, marginBottom: 6 }}>
              <div style={{ position: "absolute", left: 0, top: 0, width: `${(23 / 54) * 100}%`, height: "100%", background: "#f59e0b", borderRadius: 99, opacity: 0.85 }} />
              <div style={{ position: "absolute", top: -3, left: `${(45 / 54) * 100}%`, transform: "translateX(-50%)", width: 2, height: 11, background: "rgba(255,255,255,0.6)", borderRadius: 1 }} />
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 20 }}>
              <span style={{ fontSize: 9, color: "rgba(255,255,255,0.4)", fontFamily: font }}>Top performers: <strong style={{ color: "rgba(255,255,255,0.7)" }}>45%</strong></span>
              <span style={{ fontSize: 9, fontWeight: 700, color: "#f59e0b", fontFamily: font }}>-22 pts</span>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {[
                { label: "Fully Automated", value: "189 jobs", color: "#78bbfa" },
                { label: "AI Revenue", value: "$52.4K", color: "#4ade80" },
                { label: "Avg Close Time", value: "2.1 days", color: "white" },
                { label: "vs. Manual", value: "4.8 days", color: "rgba(255,255,255,0.4)" },
              ].map((s, i) => (
                <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span style={{ fontSize: 10, color: "rgba(255,255,255,0.4)", fontFamily: font }}>{s.label}</span>
                  <span style={{ fontSize: 12, fontWeight: 700, color: s.color, fontFamily: font }}>{s.value}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div style={{ flex: 1, background: "linear-gradient(135deg, #0f1f3d 0%, #141414 100%)", borderRadius: 12, padding: "20px 22px", position: "relative", overflow: "hidden" }}>
          <div style={{ position: "absolute", top: -40, right: -40, width: 200, height: 200, borderRadius: "50%", background: "rgba(120,187,250,0.05)", filter: "blur(20px)" }} />
          <div style={{ position: "relative" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <div style={{ background: "rgba(251,191,36,0.15)", borderRadius: 10, padding: 10, border: "1px solid rgba(251,191,36,0.25)" }}><window.Icon name="BarChart3" size={18} color="#fbbf24" /></div>
                <div>
                  <div style={{ fontSize: 10, color: "rgba(255,255,255,0.4)", fontFamily: font, fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.8, marginBottom: 2 }}>Where the funnel breaks</div>
                  <span style={{ fontSize: 16, fontWeight: 800, color: "white", fontFamily: font, letterSpacing: -0.3 }}>AI Automation Funnel</span>
                </div>
              </div>
              <span style={{ fontSize: 10, color: "rgba(255,255,255,0.35)", fontFamily: font, fontWeight: 600 }}>Jobs on the fully automated path</span>
            </div>
            {(() => {
              const maxTotal = funnelSteps[0].total;
              return funnelSteps.map((s, i) => {
                const totalW = (s.total / maxTotal) * 100;
                const aiW = (s.ai / maxTotal) * 100;
                const benchmarkW = (s.benchmark / 100) * totalW;
                const prevTotal = i > 0 ? funnelSteps[i-1].total : s.total;
                const prevW = (prevTotal / maxTotal) * 100;
                const stageDropPct = i > 0 ? Math.round((1 - s.total / prevTotal) * 100) : 0;
                const health = s.bottleneck ? "bottleneck" : s.pct >= 75 ? "strong" : s.pct >= 50 ? "ok" : "weak";
                const healthColor = { strong: "#4ade80", ok: "#78bbfa", weak: "#fb923c", bottleneck: "#fbbf24" }[health];
                const healthLabel = { strong: "✓ Strong", ok: null, weak: "↓ Weak", bottleneck: "⚠ Bottleneck" }[health];
                const gap = s.pct - s.benchmark;
                const gapColor = gap >= 0 ? "#4ade80" : Math.abs(gap) <= 10 ? "#f59e0b" : "#fb923c";
                return (
                  <div key={i} style={{ marginBottom: 0 }}>
                    {/* Stage drop-off connector (between rows) */}
                    {i > 0 && (
                      <div style={{ display: "flex", alignItems: "center", gap: 12, paddingLeft: 152, marginBottom: 4, marginTop: 4 }}>
                        <div style={{ width: 1, height: 8, background: "rgba(255,255,255,0.15)" }} />
                        <span style={{ fontSize: 9, color: stageDropPct >= 30 ? "#fbbf24" : "rgba(255,255,255,0.45)", fontFamily: font, fontWeight: 600 }}>
                          {stageDropPct > 0 ? `↓ ${stageDropPct}% drop · ${(prevTotal - s.total).toLocaleString()} jobs lost` : `↑ ${Math.abs(stageDropPct)}% — re-entry from rescheduled jobs`}
                        </span>
                      </div>
                    )}
                    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                      <span style={{ fontSize: 11, fontWeight: 600, color: health === "bottleneck" || health === "weak" ? healthColor : "rgba(255,255,255,0.85)", fontFamily: font, width: 140, flexShrink: 0 }}>
                        {s.step}
                        <div style={{ fontSize: 9, color: "rgba(255,255,255,0.4)", fontWeight: 500, marginTop: 1 }}>{s.detail}</div>
                      </span>
                      <div style={{ flex: 1, position: "relative", height: 32 }}>
                        {/* Faint previous-stage marker */}
                        {i > 0 && (
                          <div style={{ position: "absolute", top: 0, left: 0, width: `${prevW}%`, height: "100%", border: "1px dashed rgba(255,255,255,0.18)", borderRadius: 4 }} />
                        )}
                        {/* Total bar */}
                        <div style={{ position: "absolute", top: 0, left: 0, width: `${totalW}%`, height: "100%", background: "rgba(255,255,255,0.12)", border: "1px solid rgba(255,255,255,0.16)", borderRadius: 4 }} />
                        {/* AI bar */}
                        <div style={{ position: "absolute", top: 0, left: 0, width: `${aiW}%`, height: "100%", background: healthColor, opacity: health === "bottleneck" ? 0.55 : 0.5, borderRadius: 4, border: health === "bottleneck" ? `1.5px solid ${healthColor}` : "none", transition: "width 0.4s" }} />
                        {/* Benchmark marker line */}
                        <div style={{ position: "absolute", top: 2, left: `${benchmarkW}%`, transform: "translateX(-50%)", width: 2, height: 28, background: "rgba(255,255,255,0.55)", borderRadius: 1 }} />
                        {/* Inline volume label */}
                        <div style={{ position: "absolute", top: 0, left: 10, height: "100%", display: "flex", alignItems: "center", gap: 4 }}>
                          <span style={{ fontSize: 11, fontWeight: 700, color: "white", fontFamily: font }}>{s.total.toLocaleString()}</span>
                          <span style={{ fontSize: 9, color: "rgba(255,255,255,0.55)", fontFamily: font }}>jobs</span>
                          <span style={{ fontSize: 9, color: "rgba(255,255,255,0.4)", fontFamily: font, marginLeft: 6 }}>· AI: {s.ai.toLocaleString()}</span>
                        </div>
                      </div>
                      {/* AI adoption % + benchmark */}
                      <div style={{ width: 74, textAlign: "right", flexShrink: 0 }}>
                        <span style={{ fontSize: 17, fontWeight: 800, color: healthColor, fontFamily: font, lineHeight: 1 }}>{s.pct}%</span>
                        <div style={{ fontSize: 8, color: "rgba(255,255,255,0.4)", fontFamily: font, fontWeight: 600, textTransform: "uppercase", letterSpacing: 0.4, marginTop: 1 }}>AI adoption</div>
                        <div style={{ fontSize: 8, fontWeight: 700, color: gapColor, fontFamily: font, marginTop: 2 }}>
                          {gap >= 0 ? `✓ +${gap} vs top` : `${gap} vs top ${s.benchmark}%`}
                        </div>
                      </div>
                      {/* Health tag */}
                      <div style={{ width: 96, flexShrink: 0 }}>
                        {healthLabel && (
                          <span style={{ fontSize: 9, fontWeight: 700, color: healthColor, background: health === "bottleneck" ? "rgba(251,191,36,0.15)" : "transparent", padding: health === "bottleneck" ? "3px 8px" : "0", borderRadius: 4, fontFamily: font, border: health === "bottleneck" ? `1px solid ${healthColor}55` : "none" }}>{healthLabel}</span>
                        )}
                      </div>
                    </div>
                  </div>
                );
              });
            })()}
            <p style={{ fontSize: 10, color: "rgba(255,255,255,0.3)", fontFamily: font, marginTop: 10, lineHeight: 1.5 }}>
              Biggest opportunity: <strong style={{ color: "#fbbf24" }}>Estimate Creation at 35%</strong> — turning on AI estimates would nearly double fully automated jobs from 23% → 45%.
            </p>
          </div>
        </div>
      </div>

      {/* Recommended Next — hero #1 + secondary list */}
      <div style={{ marginBottom: 16 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
          <div style={{ background: "#fef3c7", borderRadius: 6, padding: 5 }}><window.Icon name="Sparkles" size={14} color="#d97706" /></div>
          <div>
            <span style={{ fontSize: 14, fontWeight: 700, color: fg, fontFamily: font }}>Recommended Next</span>
            <span style={{ fontSize: 11, color: muted, fontFamily: font, marginLeft: 8 }}>Ranked by impact on fully automated jobs</span>
          </div>
        </div>

        {/* Hero recommendation #1 */}
        {(() => {
          const rec = recommendations[0];
          return (
            <div style={{ background: cardBg, border: `1px solid ${border}`, borderRadius: 12, padding: "20px 22px", marginBottom: 10, position: "relative", overflow: "hidden" }}>
              <div style={{ position: "absolute", top: 0, left: 0, width: 4, height: "100%", background: "linear-gradient(180deg, #d97706 0%, #fbbf24 100%)" }} />
              <div style={{ display: "grid", gridTemplateColumns: "1fr 280px", gap: 28, alignItems: "center" }}>
                <div>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
                    <span style={{ fontSize: 9, fontWeight: 800, color: "#92400e", background: "#fef3c7", padding: "3px 8px", borderRadius: 4, fontFamily: font, textTransform: "uppercase", letterSpacing: 0.5 }}>★ Highest Impact</span>
                    <span style={{ fontSize: 11, color: muted, fontFamily: font }}>{rec.stage} · {rec.product}</span>
                    <span style={{ fontSize: 11, color: muted, fontFamily: font }}>·</span>
                    <span style={{ fontSize: 11, fontWeight: 700, color: "#16a34a", fontFamily: font }}>{rec.effort} effort</span>
                  </div>
                  <h3 style={{ fontSize: 19, fontWeight: 800, color: fg, fontFamily: font, margin: "0 0 8px 0", letterSpacing: -0.3 }}>{rec.name}</h3>
                  <p style={{ fontSize: 13, color: muted, fontFamily: font, lineHeight: 1.55, margin: "0 0 14px 0", maxWidth: 620 }}>{rec.reason}</p>
                  <div style={{ display: "flex", gap: 10 }}>
                    <button style={{ padding: "9px 18px", borderRadius: 7, background: "#2563eb", color: "white", border: "none", cursor: "pointer", fontSize: 12, fontWeight: 700, fontFamily: font, display: "flex", alignItems: "center", gap: 6 }}>
                      <window.Icon name="Zap" size={13} color="white" /> Turn On
                    </button>
                    <button style={{ padding: "9px 16px", borderRadius: 7, background: "transparent", color: fg, border: `1px solid ${border}`, cursor: "pointer", fontSize: 12, fontWeight: 600, fontFamily: font }}>
                      Learn more
                    </button>
                  </div>
                </div>
                {/* From → To visual */}
                <div style={{ background: "linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%)", borderRadius: 10, padding: "16px 18px", border: "1px solid #fde68a" }}>
                  <div style={{ fontSize: 9, fontWeight: 800, color: "#92400e", fontFamily: font, textTransform: "uppercase", letterSpacing: 0.6, marginBottom: 10 }}>Projected impact</div>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 8 }}>
                    <span style={{ fontSize: 13, fontWeight: 700, color: "#9ca3af", fontFamily: font, textDecoration: "line-through" }}>23%</span>
                    <window.Icon name="ArrowRight" size={14} color="#92400e" />
                    <span style={{ fontSize: 36, fontWeight: 800, color: "#d97706", fontFamily: font, lineHeight: 1, letterSpacing: -0.8 }}>45%</span>
                    <span style={{ fontSize: 12, fontWeight: 700, color: "#92400e", fontFamily: font }}>{rec.impact}</span>
                  </div>
                  <div style={{ height: 8, background: "rgba(217,119,6,0.15)", borderRadius: 4, overflow: "hidden", marginBottom: 6 }}>
                    <div style={{ width: "23%", height: "100%", background: "#9ca3af", borderRadius: "4px 0 0 4px", display: "inline-block" }} />
                    <div style={{ width: "22%", height: "100%", background: "#d97706", display: "inline-block", marginLeft: -4 }} />
                  </div>
                  <div style={{ fontSize: 10, color: "#78350f", fontFamily: font, lineHeight: 1.4 }}>
                    Nearly doubles your fully automated job rate.
                  </div>
                </div>
              </div>
            </div>
          );
        })()}

        {/* Secondary recommendations — densified */}
        <div style={{ background: cardBg, border: `1px solid ${border}`, borderRadius: 12, overflow: "hidden" }}>
          {recommendations.slice(1).map((rec, idx) => {
            const i = idx + 1;
            const isLast = i === recommendations.length - 1;
            return (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 90px 100px 110px", gap: 14, alignItems: "center", padding: "12px 18px", borderBottom: isLast ? "none" : `1px solid ${border}` }}>
                <div>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 2 }}>
                    <span style={{ fontSize: 13, fontWeight: 700, color: fg, fontFamily: font }}>{rec.name}</span>
                    <span style={{ fontSize: 10, color: muted, fontFamily: font }}>{rec.stage} · {rec.product}</span>
                  </div>
                  <p style={{ fontSize: 11, color: muted, fontFamily: font, lineHeight: 1.45, margin: 0 }}>{rec.impactDetail}</p>
                </div>
                <div style={{ textAlign: "center" }}>
                  <div style={{ fontSize: 16, fontWeight: 800, color: "#16a34a", fontFamily: font, lineHeight: 1 }}>{rec.impact}</div>
                  <div style={{ fontSize: 9, color: muted, fontFamily: font, marginTop: 2 }}>fully auto</div>
                </div>
                <div style={{ textAlign: "center" }}>
                  <span style={{ fontSize: 10, fontWeight: 600, color: rec.effort === "Low" || rec.effort === "Config change" ? "#16a34a" : "#d97706", fontFamily: font, padding: "3px 8px", background: rec.effort === "Low" || rec.effort === "Config change" ? "#f0fdf4" : "#fffbeb", border: `1px solid ${rec.effort === "Low" || rec.effort === "Config change" ? "#bbf7d0" : "#fde68a"}`, borderRadius: 99 }}>{rec.effort}</span>
                </div>
                <div style={{ textAlign: "right" }}>
                  <button style={{ padding: "6px 14px", borderRadius: 6, background: "transparent", color: fg, border: `1px solid ${border}`, cursor: "pointer", fontSize: 11, fontWeight: 700, fontFamily: font }}>
                    {rec.status === "active" ? "Configure" : "Turn On"}
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* All Automations preview tile (D) */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 16 }}>
        {/* Health summary */}
        <div style={{ background: cardBg, border: `1px solid ${border}`, borderRadius: 12, padding: "16px 18px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
            <window.Icon name="Activity" size={14} color="#16a34a" />
            <span style={{ fontSize: 13, fontWeight: 700, color: fg, fontFamily: font }}>Active automation health</span>
            <span style={{ fontSize: 10, color: muted, fontFamily: font, marginLeft: "auto" }}>Last 7 days</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10, marginBottom: 12 }}>
            {[
              { label: "Running well", value: activeCount - 3, color: "#16a34a", bg: "#f0fdf4" },
              { label: "Underperforming", value: 2, color: "#d97706", bg: "#fffbeb" },
              { label: "Errors", value: 1, color: "#dc2626", bg: "#fef2f2" },
            ].map((s, i) => (
              <div key={i} style={{ background: s.bg, borderRadius: 8, padding: "10px 12px", border: `1px solid ${s.color}22` }}>
                <div style={{ fontSize: 22, fontWeight: 800, color: s.color, fontFamily: font, lineHeight: 1 }}>{s.value}</div>
                <div style={{ fontSize: 10, fontWeight: 600, color: s.color, fontFamily: font, marginTop: 4 }}>{s.label}</div>
              </div>
            ))}
          </div>
          <div style={{ fontSize: 11, color: muted, fontFamily: font, lineHeight: 1.5 }}>
            <strong style={{ color: "#dc2626" }}>1 automation</strong> stopped running after a config change Tuesday. <span style={{ color: "#2563eb", textDecoration: "underline", cursor: "pointer", fontWeight: 600 }}>Review now →</span>
          </div>
        </div>

        {/* Catalog summary / browse */}
        <div style={{ background: cardBg, border: `1px solid ${border}`, borderRadius: 12, padding: "16px 18px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
            <window.Icon name="LayoutGrid" size={14} color="#2563eb" />
            <span style={{ fontSize: 13, fontWeight: 700, color: fg, fontFamily: font }}>All automations</span>
            <span style={{ fontSize: 10, color: muted, fontFamily: font, marginLeft: "auto" }}>{AUTOMATIONS_DATA.length} available</span>
          </div>
          {/* Active vs inactive bar */}
          <div style={{ display: "flex", height: 8, borderRadius: 4, overflow: "hidden", marginBottom: 10, border: `1px solid ${border}` }}>
            <div style={{ width: `${(activeCount / AUTOMATIONS_DATA.length) * 100}%`, background: "#22c55e" }} />
            <div style={{ flex: 1, background: "#e5e7eb" }} />
          </div>
          <div style={{ display: "flex", gap: 16, marginBottom: 14 }}>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <span style={{ width: 8, height: 8, borderRadius: 99, background: "#22c55e" }} />
                <span style={{ fontSize: 18, fontWeight: 800, color: fg, fontFamily: font }}>{activeCount}</span>
                <span style={{ fontSize: 11, color: muted, fontFamily: font }}>active</span>
              </div>
            </div>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <span style={{ width: 8, height: 8, borderRadius: 99, background: "#9ca3af" }} />
                <span style={{ fontSize: 18, fontWeight: 800, color: fg, fontFamily: font }}>{inactiveCount}</span>
                <span style={{ fontSize: 11, color: muted, fontFamily: font }}>inactive</span>
              </div>
            </div>
            <div style={{ marginLeft: "auto" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <span style={{ fontSize: 18, fontWeight: 800, color: "#d97706", fontFamily: font }}>4</span>
                <span style={{ fontSize: 11, color: muted, fontFamily: font }}>candidates worth turning on</span>
              </div>
            </div>
          </div>
          <button onClick={() => setShowCatalog(!showCatalog)} style={{ width: "100%", padding: "8px 14px", borderRadius: 7, background: "transparent", color: "#2563eb", border: "1px solid #bfdbfe", cursor: "pointer", fontSize: 12, fontWeight: 700, fontFamily: font, display: "flex", alignItems: "center", justifyContent: "center", gap: 6 }}>
            {showCatalog ? "Hide catalog" : "Browse all automations"}
            <window.Icon name={showCatalog ? "ChevronUp" : "ChevronDown"} size={13} color="#2563eb" />
          </button>
        </div>
      </div>

      {/* All Automations Catalog (collapsible) */}
      {showCatalog && (
      <div style={{ background: cardBg, borderRadius: 12, border: `1px solid ${border}`, overflow: "hidden", marginBottom: 16 }}>
        <div style={{ padding: "12px 18px", borderBottom: `1px solid ${border}`, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ fontSize: 13, fontWeight: 700, color: fg, fontFamily: font }}>Automations catalog</span>
          <button onClick={() => setShowCatalog(false)} style={{ fontSize: 11, color: muted, fontFamily: font, background: "transparent", border: "none", cursor: "pointer" }}>Close ↑</button>
        </div>
        <div>
            <div style={{ display: "flex", gap: 8, padding: "12px 20px", borderBottom: `1px solid ${border}`, alignItems: "center", background: "#f9fafb" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 6, background: cardBg, border: "1px solid #d1d5db", borderRadius: 8, padding: "5px 10px", width: 200 }}>
                <window.Icon name="Search" size={13} color="#9ca3af" />
                <input value={searchQuery} onChange={e => setSearchQuery(e.target.value)} placeholder="Search automations..." style={{ border: "none", outline: "none", fontSize: 12, fontFamily: font, color: fg, width: "100%", background: "transparent" }} />
              </div>
              <select value={selectedStage} onChange={e => setSelectedStage(e.target.value)} style={{ background: cardBg, border: "1px solid #d1d5db", borderRadius: 8, padding: "5px 10px", fontSize: 12, fontFamily: font, color: fg }}>
                <option value="all">All Stages</option>
                {STAGES.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
              </select>
              <select value={selectedStatus} onChange={e => setSelectedStatus(e.target.value)} style={{ background: cardBg, border: "1px solid #d1d5db", borderRadius: 8, padding: "5px 10px", fontSize: 12, fontFamily: font, color: fg }}>
                <option value="all">All Statuses</option>
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
              <span style={{ fontSize: 11, color: muted, fontFamily: font }}>{filtered.length} automations</span>
            </div>

            {STAGES.map(stage => {
              const items = grouped[stage.id];
              if (!items || items.length === 0) return null;
              return (
                <div key={stage.id}>
                  <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "10px 20px", background: "#f9fafb", borderBottom: `1px solid ${border}` }}>
                    <div style={{ width: 22, height: 22, borderRadius: 5, background: `${stage.color}12`, display: "flex", alignItems: "center", justifyContent: "center" }}>
                      <window.Icon name={stage.icon} size={11} color={stage.color} strokeWidth={2} />
                    </div>
                    <span style={{ fontSize: 12, fontWeight: 700, color: fg, fontFamily: font }}>{stage.label}</span>
                    <span style={{ fontSize: 10, color: "#9ca3af", fontFamily: font }}>{items.length}</span>
                  </div>
                  {items.map(a => {
                    const isActive = a.status === "active";
                    return (
                      <div key={a.id} style={{ display: "grid", gridTemplateColumns: "1fr 80px 100px 120px", alignItems: "center", gap: 10, padding: "10px 20px", background: cardBg, borderBottom: `1px solid ${border}`, opacity: isActive ? 1 : 0.85 }}>
                        <div>
                          <div style={{ fontSize: 12, fontWeight: 600, color: fg, fontFamily: font }}>{a.name}</div>
                          <div style={{ fontSize: 10, color: muted, fontFamily: font, marginTop: 1 }}>{a.description}</div>
                        </div>
                        <span style={{ fontSize: 10, fontWeight: 700, padding: "2px 8px", borderRadius: 99, fontFamily: font, display: "inline-flex", alignItems: "center", gap: 4, background: isActive ? "#dcfce7" : "#f3f4f6", color: isActive ? "#166534" : "#4b5563" }}>
                          <span style={{ width: 5, height: 5, borderRadius: 99, background: isActive ? "#22c55e" : "#9ca3af" }} />
                          {isActive ? "Active" : "Inactive"}
                        </span>
                        <span style={{ fontSize: 10, color: muted, fontFamily: font }}>{a.product}</span>
                        {isActive ? (
                          <span style={{ fontSize: 10, color: fg, fontFamily: font, fontWeight: 600 }}>{a.metricValue}</span>
                        ) : (
                          <button style={{ display: "flex", alignItems: "center", gap: 4, fontSize: 11, fontWeight: 600, fontFamily: font, color: "#2563eb", background: "#eff6ff", border: "1px solid #bfdbfe", borderRadius: 6, padding: "4px 10px", cursor: "pointer", justifySelf: "start" }}>
                            <window.Icon name="ExternalLink" size={10} /> Turn On
                          </button>
                        )}
                      </div>
                    );
                  })}
                </div>
              );
            })}
          </div>
      </div>
      )}
    </div>
  );
}

window.AutomationsPage = AutomationsPage;
})();