/* ── ANIMATED DASHBOARD PREVIEW ────────────────────────────────────── */

function AnimatedDashboard({ compact = false }) {
  const [leads, setLeads] = useState(248);
  const [winRate, setWinRate] = useState(68);
  const [newWeek, setNewWeek] = useState(42);
  const [pulseCol, setPulseCol] = useState(0); // which column gets a new card
  const [flash, setFlash] = useState(false);

  // tick counters
  useEffect(() => {
    const t = setInterval(() => {
      setLeads(v => v + Math.floor(Math.random() * 3));
      setNewWeek(v => v + (Math.random() > 0.6 ? 1 : 0));
      setWinRate(v => Math.max(54, Math.min(78, v + (Math.random() - 0.5) * 1.2)));
      setPulseCol(c => (c + 1) % 3);
      setFlash(true);
      setTimeout(() => setFlash(false), 600);
    }, 2400);
    return () => clearInterval(t);
  }, []);

  const colors = ["#3b82f6", "#8b5cf6", "#10b981"];
  const statBg = [
    "linear-gradient(135deg,#3b82f6,#1d4ed8)",
    "linear-gradient(135deg,#8b5cf6,#6d28d9)",
    "linear-gradient(135deg,#10b981,#047857)",
  ];

  // Sparkline path animates between two values
  const sparkPath = "M 10 70 L 60 50 L 110 60 L 160 30 L 210 38 L 260 18 L 320 42 L 350 30";
  const sparkArea = "M 10 70 L 60 50 L 110 60 L 160 30 L 210 38 L 260 18 L 320 42 L 350 30 L 350 95 L 10 95 Z";
  const dashedPath = "M 10 82 L 60 78 L 110 80 L 160 70 L 210 64 L 260 56 L 320 48 L 350 44";

  return (
    <div style={{
      borderRadius: 24, background: "#fff",
      border: "1px solid var(--line-2)", overflow: "hidden",
      boxShadow: "0 36px 90px -22px rgba(15,23,42,.32), 0 8px 24px -10px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.5)",
      position: "relative",
    }}>
      {/* window chrome */}
      <div style={{ height: 36, background: "#f8fafc", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", padding: "0 14px", gap: 6 }}>
        <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#ff6058" }} />
        <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#ffbd2e" }} />
        <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#27c93f" }} />
        <span style={{ marginLeft: 16, fontSize: 11, fontWeight: 600, color: "#94a3b8" }} className="mono">app.kredoo.io / dashboard</span>
        <span style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 6, fontSize: 10, fontWeight: 700, color: "var(--muted)" }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--emerald)" }} className="kr-pulse-dot" />
          LIVE
        </span>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "84px 1fr", minHeight: compact ? 380 : 460 }}>
        {/* sidebar */}
        <div style={{ background: "#060e1c", padding: "12px 10px", display: "flex", flexDirection: "column", gap: 6 }}>
          <div style={{
            width: 44, height: 44, borderRadius: 12,
            background: "linear-gradient(135deg,#0d2a5e,#3b82f6)",
            display: "grid", placeItems: "center", marginBottom: 8,
            boxShadow: "0 6px 14px -2px rgba(59,130,246,.4)",
          }}>
            <svg width="24" height="24" viewBox="0 0 56 56">
              <path d="M14 30 C8 30 5 25 5 20 C5 15 8 10 14 10 C18 10 21 12 23 15 L25 15 C27 12 30 10 34 10 C40 10 43 15 43 20 C43 25 40 30 34 30 C30 30 27 28 25 25 L23 25 C21 28 18 30 14 30 Z M14 16 C11 16 9 18 9 20 C9 22 11 24 14 24 C17 24 19 22 19 20 C19 18 17 16 14 16 Z M34 16 C31 16 29 18 29 20 C29 22 31 24 34 24 C37 24 39 22 39 20 C39 18 37 16 34 16 Z"
                fill="#7CB7FF" transform="translate(2 8)" />
            </svg>
          </div>
          {[
            { l: "Pipeline", active: true, color: "#3b82f6" },
            { l: "Leads", color: "#fff" },
            { l: "Inbox", color: "#fff" },
            { l: "Flows", color: "#fff" },
            { l: "Reports", color: "#fff" },
          ].map((it, i) => (
            <div key={i} style={{
              height: 32, borderRadius: 8, padding: "0 8px",
              display: "flex", alignItems: "center", gap: 8,
              background: it.active ? "rgba(59,130,246,.16)" : "transparent",
              color: it.active ? "#fff" : "rgba(255,255,255,.45)",
              fontSize: 11, fontWeight: 700,
            }}>
              {it.active && <span style={{ width: 2, height: 14, borderRadius: 2, background: "#3b82f6" }} />}
              {it.l}
            </div>
          ))}
          <div style={{ flex: 1 }} />
          <div style={{
            height: 36, borderRadius: 10, padding: "0 8px",
            display: "flex", alignItems: "center", gap: 8,
            background: "rgba(201,162,39,.14)",
            border: "1px solid rgba(201,162,39,.3)",
          }}>
            <span style={{ width: 18, height: 18, borderRadius: 5, background: "var(--gold)", display: "grid", placeItems: "center", color: "#0a0e1a", fontWeight: 900, fontSize: 10 }}>A</span>
            <div style={{ fontSize: 10, color: "#fff", fontWeight: 700, lineHeight: 1.2 }}>
              Alex M.
              <div style={{ fontSize: 8, color: "rgba(255,255,255,.55)", fontWeight: 600 }}>Pro plan</div>
            </div>
          </div>
        </div>

        {/* main */}
        <div style={{ padding: 18, background: "#f8fafc", position: "relative" }}>
          {/* header */}
          <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 14 }}>
            <div>
              <p style={{ margin: 0, fontSize: 14, fontWeight: 800, color: "var(--ink)" }} className="display">Good afternoon, Alex 👋</p>
              <p style={{ margin: "2px 0 0", fontSize: 11, fontWeight: 600, color: "var(--muted-2)" }}>Pipeline overview · last 7 days</p>
            </div>
            <div style={{ display: "flex", gap: 6 }}>
              <div style={{ height: 26, padding: "0 10px", borderRadius: 8, background: "#fff", border: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 6, fontSize: 10, fontWeight: 700, color: "var(--muted)" }}>
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--emerald)" }} className="kr-pulse-dot" />
                {leads} leads
              </div>
            </div>
          </div>

          {/* stat row */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 10, marginBottom: 12 }}>
            {[
              { v: leads, l: "Total leads" },
              { v: newWeek, l: "New / week" },
              { v: Math.round(winRate) + "%", l: "Win rate" },
            ].map((s, i) => (
              <div key={i} style={{
                position: "relative", borderRadius: 14, padding: 12,
                background: statBg[i], color: "#fff", overflow: "hidden",
                boxShadow: `0 10px 24px -10px ${colors[i]}66`,
              }}>
                <div style={{ position: "absolute", right: -8, top: -8, width: 44, height: 44, borderRadius: "50%", background: "rgba(255,255,255,.1)" }} />
                <div key={s.v} style={{ fontSize: 22, fontWeight: 800, lineHeight: 1, animation: "kr-count .5s var(--ease)" }} className="display">{s.v}</div>
                <div style={{ fontSize: 10, color: "rgba(255,255,255,.75)", fontWeight: 600, marginTop: 4 }}>{s.l}</div>
                {/* sparkline */}
                <svg viewBox="0 0 80 24" style={{ position: "absolute", bottom: 6, right: 6, width: 56, height: 18, opacity: .7 }} preserveAspectRatio="none">
                  <path d={`M 0 ${18 - i * 3} L 15 ${14 - i * 2} L 30 ${17 - i * 3} L 45 ${10 - i * 2} L 60 ${12 - i * 3} L 80 ${4 + i * 1}`} stroke="#fff" strokeWidth="1.5" fill="none" strokeLinecap="round" />
                </svg>
              </div>
            ))}
          </div>

          {/* inflow chart */}
          <div style={{ background: "#fff", borderRadius: 14, border: "1px solid var(--line)", padding: 12, marginBottom: 10 }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6 }}>
              <p style={{ margin: 0, fontSize: 11, fontWeight: 800, color: "var(--ink)" }}>Lead inflow · 7d</p>
              <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 9, fontWeight: 600, color: "var(--muted)" }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}><span style={{ width: 7, height: 7, background: "#3b82f6", borderRadius: 2 }} />New</span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}><span style={{ width: 7, height: 7, background: "#10b981", borderRadius: 2 }} />Closed</span>
              </div>
            </div>
            <svg viewBox="0 0 360 100" preserveAspectRatio="none" style={{ width: "100%", height: 96 }}>
              <defs>
                <linearGradient id="hb" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0" stopColor="#3b82f6" stopOpacity=".28" />
                  <stop offset="1" stopColor="#3b82f6" stopOpacity="0" />
                </linearGradient>
              </defs>
              <path d={sparkArea} fill="url(#hb)" />
              <path d={sparkPath} fill="none" stroke="#3b82f6" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"
                style={{ strokeDasharray: 1000, strokeDashoffset: 0, animation: "kr-draw 2.4s var(--ease)" }} />
              <path d={dashedPath} fill="none" stroke="#10b981" strokeWidth="1.6" strokeDasharray="4 3" strokeLinecap="round" />
              {/* moving dot on the new line */}
              <circle r="3.5" fill="#fff" stroke="#3b82f6" strokeWidth="2">
                <animateMotion dur="6s" repeatCount="indefinite" path={sparkPath} />
              </circle>
            </svg>
          </div>

          {/* mini kanban */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 8 }}>
            {["New", "Qualified", "Won"].map((col, ci) => (
              <div key={col} style={{ background: "#fff", borderRadius: 12, border: "1px solid var(--line)", padding: 8, position: "relative" }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6 }}>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 9, fontWeight: 800, color: "var(--ink)", textTransform: "uppercase", letterSpacing: ".1em" }}>
                    <span style={{ width: 6, height: 6, borderRadius: "50%", background: colors[ci] }} />{col}
                  </span>
                  <span style={{ fontSize: 9, fontWeight: 700, color: "var(--muted-2)" }}>{[12, 8, 38][ci]}</span>
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                  {[0, 1].map(j => (
                    <div key={j} style={{
                      borderRadius: 6, background: "#f8fafc", border: "1px solid var(--line)",
                      padding: 6,
                      animation: pulseCol === ci && j === 0 ? "kr-pop .5s var(--ease)" : "none",
                      boxShadow: pulseCol === ci && j === 0 ? `inset 0 0 0 1.5px ${colors[ci]}` : "none",
                    }}>
                      <div style={{ fontSize: 9, fontWeight: 700, color: "var(--ink)" }}>
                        {ci === 0 ? "New enquiry" : ci === 1 ? "Demo booked" : "Deal won"}
                      </div>
                      <div style={{ fontSize: 8, fontWeight: 600, color: "var(--muted-2)", marginTop: 1 }}>
                        {ci === 0 ? "Meta Ads" : ci === 1 ? "Google · hot" : "₹4.2L · closed"}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>

          {/* flash toast */}
          {flash && (
            <div style={{
              position: "absolute", right: 12, bottom: 12,
              padding: "8px 12px", borderRadius: 12, background: "#0a0e1a", color: "#fff",
              fontSize: 11, fontWeight: 700, display: "flex", alignItems: "center", gap: 8,
              animation: "kr-pop .4s var(--ease)",
              boxShadow: "0 12px 30px -10px rgba(10,14,26,.5)",
              border: "1px solid rgba(201,162,39,.3)",
            }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--gold)" }} />
              New lead synced
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AnimatedDashboard });