// Winkz Designs 2026, animated product mockups for the moving portfolio.
// Each paints a self-contained fake UI with ambient looping animation. Sized to fill its parent.
(function () {
  const { useState, useEffect, useRef } = React;
  const Icon = window.Icon;
  const GRAD = 'linear-gradient(120deg,#F23BFE,#79BAFF,#2DE3EA)';
  const mono = 'var(--font-mono)';

  // ── shared bits ──
  const Dot = ({ c = '#2DE3A0', s = 7 }) => <span style={{ width: s, height: s, borderRadius: 999, background: c, display: 'inline-block' }} />;
  const Bar = ({ w, c = 'rgba(255,255,255,0.16)', h = 7 }) => <span style={{ display: 'block', width: w, height: h, borderRadius: 999, background: c }} />;

  function useCycle(n, ms) {
    const [i, setI] = useState(0);
    useEffect(() => { const t = setInterval(() => setI(v => (v + 1) % n), ms); return () => clearInterval(t); }, [n, ms]);
    return i;
  }

  const shell = { position: 'absolute', inset: 0, overflow: 'hidden', fontFamily: 'var(--font-body)', color: '#EEF' };

  /* 1, E-COMMERCE STORE */
  function EcommerceMock() {
    const cart = useCycle(4, 1400);
    const prods = [['#F23BFE', 'Aero Runner', '$128'], ['#79BAFF', 'Cloud Tee', '$42'], ['#2DE3EA', 'Trail Pack', '$96'], ['#FFC24B', 'Flux Cap', '$28']];
    return (
      <div style={{ ...shell, background: 'linear-gradient(180deg,#0E0E13,#08080A)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px', borderBottom: '1px solid rgba(255,255,255,0.07)' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, letterSpacing: '-0.02em' }}>NORTHWIND</span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <Icon n="Search" s={13} color="#888" /><Icon n="Heart" s={13} color="#888" />
            <span style={{ position: 'relative', display: 'inline-flex' }}>
              <Icon n="ShoppingBag" s={14} color="#fff" />
              <span style={{ position: 'absolute', top: -6, right: -7, background: '#F23BFE', color: '#fff', fontSize: 9, fontWeight: 700, borderRadius: 999, minWidth: 14, height: 14, display: 'grid', placeItems: 'center', padding: '0 3px' }}>{cart + 1}</span>
            </span>
          </div>
        </div>
        <div style={{ padding: '12px 16px' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 600, marginBottom: 10 }}>New arrivals</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {prods.map((p, i) => (
              <div key={i} style={{ borderRadius: 10, border: '1px solid rgba(255,255,255,0.08)', overflow: 'hidden', background: 'rgba(255,255,255,0.02)', transform: i === cart ? 'translateY(-3px)' : 'none', transition: 'transform .4s', boxShadow: i === cart ? '0 12px 30px -18px ' + p[0] : 'none' }}>
                <div style={{ height: 52, background: `linear-gradient(135deg, ${p[0]}44, ${p[0]}11)`, position: 'relative' }}>
                  <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(60% 80% at 50% 30%, ${p[0]}55, transparent)` }} />
                </div>
                <div style={{ padding: '7px 9px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div><div style={{ fontSize: 11, fontWeight: 600 }}>{p[1]}</div><div style={{ fontSize: 10, color: '#8ce' }}>{p[2]}</div></div>
                  <span style={{ width: 20, height: 20, borderRadius: 6, background: i === cart ? GRAD : 'rgba(255,255,255,0.08)', display: 'grid', placeItems: 'center', transition: 'background .3s' }}><Icon n="Plus" s={11} color="#fff" /></span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  /* 2, PLUMBING / LOCAL SERVICE SITE */
  function PlumbingMock() {
    return (
      <div style={{ ...shell, background: 'linear-gradient(180deg,#0B1016,#08080A)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '11px 16px', borderBottom: '1px solid rgba(255,255,255,0.07)' }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13 }}><Icon n="Wrench" s={14} color="#2DE3EA" />RIVERSIDE PLUMBING</span>
          <span style={{ fontSize: 11, fontWeight: 700, color: '#2DE3A0', display: 'flex', alignItems: 'center', gap: 4 }}><Dot /> 24/7</span>
        </div>
        <div style={{ padding: '16px 16px 0' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.03em' }}>Emergency plumbing,<br /><span style={{ color: '#79BAFF' }}>fixed fast.</span></div>
          <div style={{ fontSize: 11, color: '#9aa', marginTop: 8, lineHeight: 1.5 }}>Licensed & insured. Same-day service across the metro.</div>
          <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
            <span style={{ background: GRAD, color: '#08080A', fontWeight: 700, fontSize: 11, padding: '8px 14px', borderRadius: 8 }}>Book a visit</span>
            <span style={{ border: '1px solid rgba(255,255,255,0.16)', fontSize: 11, fontWeight: 600, padding: '8px 14px', borderRadius: 8, display: 'flex', alignItems: 'center', gap: 5 }}><Icon n="Phone" s={12} color="#2DE3EA" />Call now</span>
          </div>
          <div style={{ display: 'flex', gap: 14, marginTop: 16, paddingTop: 12, borderTop: '1px solid rgba(255,255,255,0.06)' }}>
            {[['Star', '4.9', 'rating'], ['Clock', '<45m', 'arrival'], ['ShieldCheck', '10yr', 'warranty']].map((s, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon n={s[0]} s={14} color="#79BAFF" />
                <div><div style={{ fontSize: 12, fontWeight: 700 }}>{s[1]}</div><div style={{ fontSize: 9, color: '#788' }}>{s[2]}</div></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  /* 3, CFO / FINANCE DASHBOARD (animated line chart) */
  function CFOMock() {
    const [d, setD] = useState(0);
    const [ph, setPh] = useState(0);
    useEffect(() => {
      let f; const s = Date.now();
      const loop = () => {
        const el = Date.now() - s;
        setD(1 - Math.pow(1 - Math.min(1, el / 1500), 3));
        setPh(el / 1000);
        f = requestAnimationFrame(loop);
      };
      f = requestAnimationFrame(loop);
      return () => cancelAnimationFrame(f);
    }, []);
    const base = [0.5, 0.46, 0.6, 0.55, 0.68, 0.63, 0.78, 0.9];
    const W = 250, H = 74;
    const pts = base.map((v, i) => Math.max(0.06, Math.min(0.96, v + Math.sin(ph * 0.7 + i * 0.7) * 0.03)));
    const coords = pts.map((v, i) => `${((i / (pts.length - 1)) * W).toFixed(1)},${(H - v * H).toFixed(1)}`);
    return (
      <div style={{ ...shell, background: 'linear-gradient(180deg,#0C0D12,#08080A)', padding: '14px 16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13 }}>Cash overview</div>
          <span style={{ fontFamily: mono, fontSize: 10, color: '#788' }}>FY26 · Q3</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 12 }}>
          {[['Cash on hand', '$1.84M', '#2DE3A0', '+12%'], ['Runway', '18 mo', '#79BAFF', '+3mo']].map((k, i) => (
            <div key={i} style={{ border: '1px solid rgba(255,255,255,0.07)', borderRadius: 9, padding: '8px 10px', background: 'rgba(255,255,255,0.02)' }}>
              <div style={{ fontSize: 9, color: '#788', marginBottom: 3 }}>{k[0]}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 700 }}>{k[1]}</div>
              <div style={{ fontSize: 9, color: k[2] }}>{k[3]}</div>
            </div>
          ))}
        </div>
        <div style={{ border: '1px solid rgba(255,255,255,0.07)', borderRadius: 9, padding: 10, background: 'rgba(255,255,255,0.02)' }}>
          <svg viewBox={`0 0 ${W} ${H}`} width="100%" height={H} style={{ display: 'block' }} preserveAspectRatio="none">
            <defs><linearGradient id="cfoG" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#2DE3EA" stopOpacity="0.35" /><stop offset="1" stopColor="#2DE3EA" stopOpacity="0" /></linearGradient>
              <linearGradient id="cfoL" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stopColor="#F23BFE" /><stop offset="1" stopColor="#2DE3EA" /></linearGradient></defs>
            {<polygon points={`0,${H} ${coords.join(' ')} ${W},${H}`} fill="url(#cfoG)" opacity={d} />}
            <polyline points={coords.join(' ')} fill="none" stroke="url(#cfoL)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray={`${d.toFixed(3)} 1`} />
          </svg>
        </div>
      </div>
    );
  }

  /* 4, CRM DASHBOARD (rich overview: KPIs, funnel, hot deals, live lead) */
  function CRMDashboard() {
    const [on, setOn] = useState(false);
    const [lead, setLead] = useState(false);
    useEffect(() => {
      const t = setTimeout(() => setOn(true), 120);
      const l = setInterval(() => { setLead(true); setTimeout(() => setLead(false), 2200); }, 4200);
      return () => { clearTimeout(t); clearInterval(l); };
    }, []);
    const stages = [['Leads', 0.95, '#79BAFF'], ['Qualified', 0.68, '#2DE3EA'], ['Proposal', 0.44, '#F23BFE'], ['Won', 0.27, '#2DE3A0']];
    const deals = [['NV', 'Northwind Co.', '$48k', 'Proposal', '#F23BFE'], ['ME', 'Meridian LLC', '$32k', 'Qualified', '#2DE3EA']];
    return (
      <div style={{ ...shell, background: 'linear-gradient(180deg,#0C0D12,#08080A)', padding: '13px 15px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 11 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
            <span style={{ width: 20, height: 20, borderRadius: 6, background: GRAD, display: 'grid', placeItems: 'center' }}><Icon n="Contact" s={12} color="#08080A" /></span>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13 }}>Pipeline</span>
          </div>
          <span style={{ fontFamily: mono, fontSize: 9.5, color: '#788' }}>this quarter</span>
        </div>
        {/* KPIs */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 7, marginBottom: 11 }}>
          {[['Pipeline', '$284k', '#2DE3A0', '+12%'], ['Win rate', '32%', '#79BAFF', '+4pt'], ['New leads', '48', '#F23BFE', '7 today']].map((k, i) => (
            <div key={i} style={{ border: '1px solid rgba(255,255,255,0.07)', borderRadius: 8, padding: '7px 8px', background: 'rgba(255,255,255,0.02)' }}>
              <div style={{ fontSize: 8, color: '#788' }}>{k[0]}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 700 }}>{k[1]}</div>
              <div style={{ fontSize: 8, color: k[2] }}>{k[3]}</div>
            </div>
          ))}
        </div>
        {/* funnel */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 5, marginBottom: 11 }}>
          {stages.map((s, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontSize: 9, color: '#9aa', width: 52, flexShrink: 0 }}>{s[0]}</span>
              <div style={{ flex: 1, height: 9, borderRadius: 999, background: 'rgba(255,255,255,0.05)', overflow: 'hidden' }}>
                <div style={{ height: '100%', width: on ? (s[1] * 100) + '%' : '0%', borderRadius: 999, background: `linear-gradient(90deg, ${s[2]}, ${s[2]}88)`, transition: `width .9s cubic-bezier(.16,1,.3,1) ${i * 90}ms` }} />
              </div>
            </div>
          ))}
        </div>
        {/* hot deals */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {deals.map((d, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '6px 8px', borderRadius: 8, border: '1px solid rgba(255,255,255,0.06)', background: 'rgba(255,255,255,0.02)' }}>
              <span style={{ width: 22, height: 22, borderRadius: 7, background: d[4] + '22', color: d[4], fontSize: 9, fontWeight: 700, display: 'grid', placeItems: 'center' }}>{d[0]}</span>
              <span style={{ fontSize: 11, fontWeight: 600, flex: 1 }}>{d[1]}</span>
              <span style={{ fontSize: 9, color: d[4], border: '1px solid ' + d[4] + '55', borderRadius: 999, padding: '1px 7px' }}>{d[3]}</span>
              <span style={{ fontFamily: mono, fontSize: 10, color: '#cde' }}>{d[2]}</span>
            </div>
          ))}
        </div>
        {/* live new-lead toast */}
        <div style={{ position: 'absolute', top: 44, right: 12, display: 'flex', alignItems: 'center', gap: 6, background: 'rgba(45,227,160,0.14)', border: '1px solid rgba(45,227,160,0.4)', borderRadius: 999, padding: '3px 9px', fontSize: 9.5, color: '#2DE3A0', fontFamily: mono, opacity: lead ? 1 : 0, transform: lead ? 'none' : 'translateY(-6px)', transition: 'all .4s cubic-bezier(.16,1,.3,1)' }}>
          <Dot s={5} /> new lead
        </div>
      </div>
    );
  }

  /* 5, CRM PIPELINE */
  function CRMMock() {
    const move = useCycle(3, 1500);
    const cols = [['New', '#79BAFF', 3], ['Qualified', '#F23BFE', 2], ['Won', '#2DE3A0', 2]];
    return (
      <div style={{ ...shell, background: 'linear-gradient(180deg,#0C0D12,#08080A)', padding: '14px 16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13 }}>Deals</div>
          <span style={{ fontSize: 10, color: '#788', fontFamily: mono }}>$284k open</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
          {cols.map((c, ci) => (
            <div key={ci}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginBottom: 7 }}><Dot c={c[1]} s={6} /><span style={{ fontSize: 10, fontWeight: 600, color: '#bcd' }}>{c[0]}</span></div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {Array.from({ length: c[2] }).map((_, k) => {
                  const hot = ci === move && k === 0;
                  return (
                    <div key={k} style={{ borderRadius: 8, border: '1px solid ' + (hot ? c[1] + '99' : 'rgba(255,255,255,0.08)'), background: 'rgba(255,255,255,0.02)', padding: '7px 8px', transform: hot ? 'scale(1.03)' : 'none', transition: 'all .4s', boxShadow: hot ? '0 8px 20px -12px ' + c[1] : 'none' }}>
                      <Bar w={'80%'} h={5} />
                      <div style={{ height: 5 }} />
                      <Bar w={'55%'} h={5} c="rgba(255,255,255,0.1)" />
                    </div>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  /* 6, AI SUPPORT CHAT (typing) */
  function ChatMock() {
    const [n, setN] = useState(0);
    const msgs = [
      { me: true, t: "What's your return window?" },
      { me: false, t: '30 days on unworn items, want me to start one?' },
      { me: true, t: 'Yes, order #4821' },
      { me: false, t: 'Done ✓ Label sent to your email.' },
    ];
    useEffect(() => { const t = setInterval(() => setN(v => (v >= msgs.length ? 0 : v + 1)), 1300); return () => clearInterval(t); }, []);
    return (
      <div style={{ ...shell, background: 'linear-gradient(180deg,#0C0D12,#08080A)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '11px 16px', borderBottom: '1px solid rgba(255,255,255,0.07)' }}>
          <span style={{ width: 26, height: 26, borderRadius: 999, background: GRAD, display: 'grid', placeItems: 'center' }}><Icon n="Sparkles" s={13} color="#08080A" /></span>
          <div><div style={{ fontSize: 12, fontWeight: 700 }}>Support Assistant</div><div style={{ fontSize: 9, color: '#2DE3A0', display: 'flex', alignItems: 'center', gap: 4 }}><Dot s={5} />online</div></div>
        </div>
        <div style={{ padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 8 }}>
          {msgs.slice(0, n).map((m, i) => (
            <div key={i} style={{ alignSelf: m.me ? 'flex-end' : 'flex-start', maxWidth: '78%', fontSize: 11, lineHeight: 1.4, padding: '8px 11px', borderRadius: 12, borderBottomRightRadius: m.me ? 3 : 12, borderBottomLeftRadius: m.me ? 12 : 3, background: m.me ? 'rgba(121,186,255,0.14)' : 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.07)', color: m.me ? '#cfe' : '#dde', animation: 'wz-pop .3s ease' }}>{m.t}</div>
          ))}
          {n < msgs.length && (
            <div style={{ alignSelf: msgs[n].me ? 'flex-end' : 'flex-start', display: 'flex', gap: 3, padding: '9px 12px', borderRadius: 12, background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.07)' }}>
              {[0, 1, 2].map(d => <span key={d} style={{ width: 5, height: 5, borderRadius: 999, background: '#889', animation: `wz-typing 1s ${d * 0.15}s infinite` }} />)}
            </div>
          )}
        </div>
        <style>{`@keyframes wz-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes wz-typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}`}</style>
      </div>
    );
  }

  /* 7, ANALYTICS DASHBOARD (smoothly breathing bars) */
  function DashboardMock() {
    const base = [0.5, 0.72, 0.4, 0.86, 0.6, 0.95, 0.7];
    const [on, setOn] = useState(false);
    const [ph, setPh] = useState(0);
    useEffect(() => {
      const t = setTimeout(() => setOn(true), 120);
      let f; const s = Date.now();
      const loop = () => { setPh((Date.now() - s) / 1000); f = requestAnimationFrame(loop); };
      f = requestAnimationFrame(loop);
      return () => { clearTimeout(t); cancelAnimationFrame(f); };
    }, []);
    const bars = base.map((b, i) => Math.max(0.14, Math.min(1, b + Math.sin(ph * 0.9 + i * 0.6) * 0.06)));
    return (
      <div style={{ ...shell, background: 'linear-gradient(180deg,#0C0D12,#08080A)', padding: '14px 16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13 }}>Traffic & conversions</div>
          <span style={{ fontSize: 10, color: '#2DE3A0', fontFamily: mono }}>▲ 23.4%</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8, marginBottom: 12 }}>
          {[['Visitors', '48.2k'], ['Signups', '3,104'], ['Rev', '$92k']].map((k, i) => (
            <div key={i} style={{ border: '1px solid rgba(255,255,255,0.07)', borderRadius: 8, padding: '7px 9px', background: 'rgba(255,255,255,0.02)' }}>
              <div style={{ fontSize: 8, color: '#788' }}>{k[0]}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 700 }}>{k[1]}</div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 7, height: 60, padding: '0 2px' }}>
          {bars.map((b, i) => (
            <div key={i} style={{ flex: 1, height: on ? `${b * 100}%` : '4%', borderRadius: 4, background: i === 5 ? GRAD : 'rgba(121,186,255,0.3)', transition: on ? 'height .18s linear' : 'height .8s cubic-bezier(.16,1,.3,1)' }} />
          ))}
        </div>
      </div>
    );
  }

  /* 8, AI VOICE AGENT (call + waveform + transcript) */
  function VoiceAgentMock() {
    const [t, setT] = useState(0);
    useEffect(() => { let f; const s = Date.now(); const loop = () => { setT((Date.now() - s) / 1000); f = requestAnimationFrame(loop); }; f = requestAnimationFrame(loop); return () => cancelAnimationFrame(f); }, []);
    const bars = Array.from({ length: 22 });
    const lines = [['caller', 'Hi, do you have any openings tomorrow?'], ['agent', 'We do, 9:30am or 2pm. Which works?'], ['caller', '2pm is perfect.'], ['agent', 'Booked ✓ You’ll get a text confirmation.']];
    const shown = Math.min(lines.length, 1 + Math.floor((t % 8) / 1.6));
    return (
      <div style={{ ...shell, background: 'linear-gradient(180deg,#0C0D12,#08080A)', padding: '13px 15px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 12 }}>
          <span style={{ position: 'relative', width: 30, height: 30, borderRadius: 999, background: GRAD, display: 'grid', placeItems: 'center' }}><Icon n="PhoneCall" s={14} color="#08080A" /></span>
          <div style={{ flex: 1 }}><div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13 }}>AI Voice Agent</div><div style={{ fontSize: 9.5, color: '#2DE3A0', fontFamily: mono }}>on a call · 00:{(12 + Math.floor(t % 48)).toString().padStart(2, '0')}</div></div>
          <Icon n="Mic" s={14} color="#79BAFF" />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 2, height: 30, marginBottom: 12 }}>
          {bars.map((_, i) => { const h = 20 + Math.abs(Math.sin(t * 3 + i * 0.5)) * 78; return <span key={i} style={{ flex: 1, height: h + '%', borderRadius: 2, background: i % 3 === 0 ? '#F23BFE' : i % 3 === 1 ? '#79BAFF' : '#2DE3EA', opacity: 0.85 }} />; })}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {lines.slice(0, shown).map((l, i) => (
            <div key={i} style={{ alignSelf: l[0] === 'agent' ? 'flex-end' : 'flex-start', maxWidth: '82%', fontSize: 10.5, lineHeight: 1.35, padding: '6px 10px', borderRadius: 10, borderBottomRightRadius: l[0] === 'agent' ? 3 : 10, borderBottomLeftRadius: l[0] === 'agent' ? 10 : 3, background: l[0] === 'agent' ? 'rgba(45,227,234,0.14)' : 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.07)', color: l[0] === 'agent' ? '#cff' : '#dde' }}>{l[1]}</div>
          ))}
        </div>
      </div>
    );
  }

  /* 9, COMMAND CENTER (distribution CRM dashboard, from a real build, anonymized) */
  function CommandCenter() {
    const [on, setOn] = useState(false);
    useEffect(() => { const t = setTimeout(() => setOn(true), 140); return () => clearTimeout(t); }, []);
    const kpis = [['167', 'Total leads', '#79BAFF'], ['16', 'Sourced', '#F23BFE'], ['28', 'In talks', '#2DE3EA'], ['0', 'Follow-ups', '#2DE3A0']];
    const C = 2 * Math.PI * 22;
    const segs = [['#B57BFF', 77], ['#3EA6FF', 27], ['#F23BFE', 4], ['#2DE3A0', 25], ['#4a4a58', 34]];
    let acc = 0;
    return (
      <div style={{ ...shell, background: 'radial-gradient(120% 90% at 100% 0%, #0f1526, #08080A)', padding: '13px 15px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 11 }}>
          <div><div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14 }}>Command Center</div><div style={{ fontFamily: mono, fontSize: 8.5, letterSpacing: '0.14em', color: '#667' }}>DISTRIBUTION</div></div>
          <span style={{ fontFamily: mono, fontSize: 9, color: '#2DE3A0', border: '1px solid rgba(45,227,160,0.35)', borderRadius: 999, padding: '3px 8px' }}>↻ synced</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 7, marginBottom: 11 }}>
          {kpis.map((k, i) => (
            <div key={i} style={{ border: '1px solid rgba(255,255,255,0.07)', borderRadius: 8, padding: '7px 8px', background: 'rgba(255,255,255,0.02)' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 700, color: k[2] }}>{k[0]}</div>
              <div style={{ fontSize: 8, color: '#788', marginTop: 1 }}>{k[1]}</div>
            </div>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 8 }}>
          <div style={{ border: '1px solid rgba(255,255,255,0.07)', borderRadius: 9, padding: 9, background: 'rgba(255,255,255,0.02)' }}>
            <div style={{ fontSize: 8.5, color: '#788', marginBottom: 6, fontFamily: mono }}>SOURCING ACTIVITY</div>
            <svg viewBox="0 0 150 44" width="100%" height="44" preserveAspectRatio="none" style={{ display: 'block' }}>
              <defs><linearGradient id="ccg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#3EA6FF" stopOpacity="0.4" /><stop offset="1" stopColor="#3EA6FF" stopOpacity="0" /></linearGradient></defs>
              <polygon points="6,40 6,38 40,37 60,38 78,10 96,36 112,8 128,34 144,33 144,40" fill="url(#ccg)" opacity={on ? 1 : 0} style={{ transition: 'opacity .6s' }} />
              <polyline points="6,38 40,37 60,38 78,10 96,36 112,8 128,34 144,33" fill="none" stroke="#5bc7ff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" strokeDasharray="1" strokeDashoffset={on ? 0 : 1} style={{ transition: 'stroke-dashoffset 1.1s ease' }} />
            </svg>
          </div>
          <div style={{ border: '1px solid rgba(255,255,255,0.07)', borderRadius: 9, padding: 9, background: 'rgba(255,255,255,0.02)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
            <svg width="60" height="60" viewBox="0 0 60 60">
              <g transform="rotate(-90 30 30)">
                {segs.map((s, i) => { const len = (s[1] / 167) * C; const el = <circle key={i} cx="30" cy="30" r="22" fill="none" stroke={s[0]} strokeWidth="7" strokeDasharray={`${on ? len : 0} ${C}`} strokeDashoffset={-acc} style={{ transition: 'stroke-dasharray .9s ease ' + (i * 90) + 'ms' }} />; acc += len; return el; })}
              </g>
              <text x="30" y="33" textAnchor="middle" fill="#fff" fontSize="13" fontWeight="700" fontFamily="var(--font-display)">167</text>
            </svg>
          </div>
        </div>
      </div>
    );
  }

  Object.assign(window, { EcommerceMock, PlumbingMock, CFOMock, CRMDashboard, CRMMock, ChatMock, DashboardMock, VoiceAgentMock, CommandCenter });
})();
