// =============================================================
// TIME TRACKING GRAPHICS — animated mocks for the overview page
// (Gfx, small, side-by-side with copy) and the feature detail
// pages (Mock, full-width, top of page). Self-contained: does not
// depend on helpers from other graphics-*.jsx files.
// =============================================================

const useTickTT = (interval = 1600) => {
  const [t, setT] = React.useState(0);
  React.useEffect(() => { const id = setInterval(() => setT(x => x + 1), interval); return () => clearInterval(id); }, [interval]);
  return t;
};

const TBar = ({ url }) => (
  <div className="mock-bar">
    <span className="dot" style={{ background: '#ff5f56' }} />
    <span className="dot" style={{ background: '#ffbd2e' }} />
    <span className="dot" style={{ background: '#27c93f' }} />
    <span style={{ flex: 1, textAlign: 'center' }}>{url}</span>
  </div>
);
const TAvatar = ({ s, color = 'var(--cyan-600)', size = 28 }) => (
  <span style={{ width: size, height: size, borderRadius: '50%', background: color, color: '#fff', display: 'inline-grid', placeItems: 'center', fontWeight: 700, fontSize: size * 0.4, flexShrink: 0 }}>{s}</span>
);

// =============================================================
// OVERVIEW "GFX" — used beside copy on the /time-tracking page
// =============================================================

// ---- 1. Keyboard/mouse activity + screenshots + all-screens ----
const ActivityCaptureGfx = () => {
  const t = useTickTT(900);
  const bars = Array.from({ length: 14 }, (_, i) => 30 + Math.abs(((i * 37 + t * 13) % 70) - 35));
  const shots = [0, 1, 2];
  return (
    <div className="mock">
      <TBar url="app.primehr.in/activity/live" />
      <div style={{ padding: 22 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <div>
            <span className="eyebrow">keyboard &amp; mouse</span>
            <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 18, marginTop: 6 }}>Input intensity — live</div>
          </div>
          <span className="chip chip--accent"><span className="chip-dot" />Recording</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 60, marginBottom: 18 }}>
          {bars.map((h, i) => (
            <div key={i} style={{ flex: 1, height: `${h}%`, borderRadius: 3, background: h > 60 ? 'var(--cyan-600)' : 'var(--cyan-500)', opacity: 0.35 + (h / 100) * 0.65, transition: 'height 0.5s ease' }} />
          ))}
        </div>
        <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 }}>Screenshots · all screens</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
          {shots.map(i => {
            const active = t % 3 === i;
            return (
              <div key={i} style={{ position: 'relative', aspectRatio: '16/10', borderRadius: 8, overflow: 'hidden', background: `linear-gradient(135deg, var(--ink-100), var(--ink-200))`, border: active ? '2px solid var(--cyan-600)' : '1px solid var(--line)' }}>
                <div style={{ position: 'absolute', inset: 0, background: '#fff', opacity: active ? 0.85 : 0, transition: 'opacity 0.3s' }} />
                <span style={{ position: 'absolute', bottom: 4, left: 6, fontSize: 9, color: 'var(--ink-500)', fontFamily: 'var(--f-mono)' }}>Screen {i + 1}</span>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

// ---- 2. Live monitoring + AI cheating deduction ----
const LiveMonitorGfx = () => {
  const t = useTickTT(1700);
  const team = [
    { n: 'Priya S.', c: 'var(--cyan-600)' },
    { n: 'Rahul K.', c: 'var(--brand-500)' },
    { n: 'Meera J.', c: 'var(--accent-500)' },
    { n: 'Anish M.', c: 'var(--warn-500)' },
  ];
  const statuses = ['Active', 'Active', 'Idle', 'Active'];
  const flagIdx = t % 4;
  return (
    <div className="mock">
      <TBar url="app.primehr.in/monitor/live" />
      <div style={{ padding: 22 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <div>
            <span className="eyebrow">live monitoring</span>
            <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 18, marginTop: 6 }}>3 active · 1 idle</div>
          </div>
          <span className="chip chip--accent"><span className="chip-dot" />Live</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 16 }}>
          {team.map((m, i) => (
            <div key={i} style={{ textAlign: 'center' }}>
              <div style={{ position: 'relative', aspectRatio: '4/3', borderRadius: 8, background: 'var(--ink-50)', border: '1px solid var(--line)', display: 'grid', placeItems: 'center', marginBottom: 6 }}>
                <TAvatar s={m.n[0]} color={m.c} size={26} />
                <span style={{ position: 'absolute', top: 5, right: 5, width: 7, height: 7, borderRadius: '50%', background: statuses[i] === 'Active' ? '#22c55e' : '#f59e0b', boxShadow: statuses[i] === 'Active' ? '0 0 0 3px rgba(34,197,94,0.25)' : 'none' }} />
              </div>
              <div style={{ fontSize: 10, fontWeight: 600 }}>{m.n}</div>
            </div>
          ))}
        </div>
        <div style={{ background: 'rgba(244,63,94,0.08)', border: '1px solid rgba(244,63,94,0.25)', borderRadius: 10, padding: 12, display: 'flex', gap: 10, alignItems: 'flex-start', opacity: 1, transition: 'all 0.4s' }} key={flagIdx}>
          <Icon name="scan" size={18} style={{ color: 'var(--rose-500)', flexShrink: 0, marginTop: 1 }} />
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--rose-500)' }}>AI cheating deduction</div>
            <div style={{ fontSize: 12, color: 'var(--ink-600)', marginTop: 2 }}>{team[flagIdx].n} — mouse-jiggle pattern flagged, marked idle automatically.</div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ---- 3. Edit time + project analytics + productivity rules ----
const ProjectAnalyticsGfx = () => {
  const t = useTickTT(1500);
  const projects = [
    { n: 'Client — Nimbus', h: 62, c: 'var(--cyan-600)' },
    { n: 'Internal — Website', h: 38, c: 'var(--brand-500)' },
    { n: 'Client — Surya', h: 51, c: 'var(--accent-500)' },
  ];
  const rules = [
    { l: 'Flag idle > 5 min', on: true },
    { l: 'Block non-work apps 9–6', on: true },
    { l: 'Screenshot every 10 min', on: t % 2 === 0 },
  ];
  return (
    <div className="mock">
      <TBar url="app.primehr.in/analytics/projects" />
      <div style={{ padding: 22 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <div>
            <span className="eyebrow">project analytics</span>
            <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 18, marginTop: 6 }}>151 hrs logged this week</div>
          </div>
          <span className="chip"><Icon name="edit" size={11} /> 1 manual edit</span>
        </div>
        <div style={{ display: 'flex', gap: 14, alignItems: 'flex-end', height: 70, marginBottom: 18 }}>
          {projects.map((p, i) => (
            <div key={i} style={{ flex: 1, textAlign: 'center' }}>
              <div style={{ height: 50, display: 'flex', alignItems: 'flex-end' }}>
                <div style={{ width: '100%', height: `${p.h}%`, borderRadius: '4px 4px 0 0', background: p.c, transition: 'height 0.6s ease' }} />
              </div>
              <div style={{ fontSize: 9, color: 'var(--ink-500)', marginTop: 6 }}>{p.n}</div>
            </div>
          ))}
        </div>
        <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>Productivity rules</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {rules.map((r, i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12, padding: '6px 2px' }}>
              <span>{r.l}</span>
              <span style={{ width: 30, height: 16, borderRadius: 999, background: r.on ? 'var(--cyan-600)' : 'var(--ink-200)', position: 'relative', transition: 'background 0.3s' }}>
                <span style={{ position: 'absolute', top: 2, left: r.on ? 16 : 2, width: 12, height: 12, borderRadius: '50%', background: '#fff', transition: 'left 0.3s' }} />
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// =============================================================
// FEATURE DETAIL "MOCK" — full-width, top of each feature page
// =============================================================

// 1. Keyboard & mouse activity
const KeyboardMouseMock = () => {
  const t = useTickTT(1400);
  const blocks = Array.from({ length: 24 }, (_, i) => {
    const v = (i * 53 + 7) % 100;
    return v > 70 ? 'high' : v > 35 ? 'mid' : 'low';
  });
  const colors = { high: '#0891b2', mid: '#67e8f9', low: 'var(--ink-100)' };
  return (
    <div className="mock">
      <TBar url="app.primehr.in/activity/priya-sharma" />
      <div style={{ padding: 22 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
          <div>
            <span className="eyebrow">activity · today</span>
            <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 20, marginTop: 6 }}>Priya Sharma — Active 6h 42m</div>
          </div>
          <span className="chip chip--accent"><span className="chip-dot" />Recording</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 5, marginBottom: 18 }}>
          {blocks.map((b, i) => (
            <div key={i} title={`${9 + Math.floor(i / 2)}:${i % 2 ? '30' : '00'}`} style={{
              aspectRatio: 1, borderRadius: 4, background: colors[b],
              transform: i === t % 24 ? 'scale(1.15)' : 'scale(1)',
              boxShadow: i === t % 24 ? '0 0 0 2px var(--cyan-600)' : 'none',
              transition: 'transform 0.3s, box-shadow 0.3s',
            }} />
          ))}
        </div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 18, fontSize: 11, color: 'var(--ink-500)' }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 9, height: 9, borderRadius: 2, background: colors.high }} /> High input</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 9, height: 9, borderRadius: 2, background: colors.mid }} /> Moderate</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 9, height: 9, borderRadius: 2, background: colors.low }} /> Idle</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
          {[{ l: 'Keystrokes', v: '6,412' }, { l: 'Mouse clicks', v: '2,180' }, { l: 'Scroll distance', v: '318 m' }].map((s, i) => (
            <div key={i} style={{ background: 'var(--ink-50)', borderRadius: 10, padding: 12 }}>
              <div style={{ fontSize: 10, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{s.l}</div>
              <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 18, color: 'var(--cyan-600)', marginTop: 2 }}>{s.v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// 2. Take screenshots
const ScreenshotsMock = () => {
  const t = useTickTT(1200);
  const shots = Array.from({ length: 6 }, (_, i) => ({
    time: `${9 + Math.floor(i / 2)}:${i % 2 ? '40' : '10'} am`,
    tone: ['linear-gradient(135deg,#e0e7ff,#c7d2fe)', 'linear-gradient(135deg,#cffafe,#a5f3fc)', 'linear-gradient(135deg,#dcfce7,#bbf7d0)'][i % 3],
  }));
  return (
    <div className="mock">
      <TBar url="app.primehr.in/screenshots" />
      <div style={{ padding: 22 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <div>
            <span className="eyebrow">take screenshots</span>
            <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 18, marginTop: 6 }}>Captured every 10 minutes</div>
          </div>
          <span className="chip"><Icon name="camera" size={11} /> Blurred by default</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
          {shots.map((s, i) => {
            const flashing = t % 6 === i;
            return (
              <div key={i} style={{ position: 'relative', aspectRatio: '16/10', borderRadius: 10, overflow: 'hidden', background: s.tone, border: '1px solid var(--line)' }}>
                <div style={{ position: 'absolute', inset: 0, background: '#fff', opacity: flashing ? 0.9 : 0, transition: 'opacity 0.35s' }} />
                {flashing && <span style={{ position: 'absolute', top: 6, right: 6, width: 8, height: 8, borderRadius: '50%', background: '#ef4444' }} />}
                <span style={{ position: 'absolute', bottom: 6, left: 8, fontSize: 10, fontFamily: 'var(--f-mono)', color: 'var(--ink-600)', background: 'rgba(255,255,255,0.7)', padding: '1px 5px', borderRadius: 4 }}>{s.time}</span>
              </div>
            );
          })}
        </div>
        <div style={{ marginTop: 14, fontSize: 12, color: 'var(--ink-500)' }}>Employees can blur or skip a capture once per day — every skip is logged for the manager.</div>
      </div>
    </div>
  );
};

// 3. Live monitoring
const LiveMonitoringMock = () => {
  const t = useTickTT(1600);
  const rows = [
    { n: 'Priya S.', app: 'Figma', base: 'Active', c: 'var(--cyan-600)' },
    { n: 'Rahul K.', app: 'VS Code', base: 'Active', c: 'var(--brand-500)' },
    { n: 'Meera J.', app: 'Away', base: 'Idle', c: 'var(--warn-500)' },
    { n: 'Anish M.', app: 'Chrome', base: 'Active', c: 'var(--rose-500)' },
    { n: 'Karthik V.', app: 'Offline', base: 'Offline', c: 'var(--ink-400)' },
  ];
  const dotColor = { Active: '#22c55e', Idle: '#f59e0b', Offline: '#94a3b8' };
  return (
    <div className="mock">
      <TBar url="app.primehr.in/monitor/live" />
      <div style={{ padding: 22 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <div>
            <span className="eyebrow">live monitoring</span>
            <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 18, marginTop: 6 }}>3 online · 1 idle · 1 offline</div>
          </div>
          <span className="chip chip--accent"><span className="chip-dot" />Live</span>
        </div>
        <div style={{ border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden' }}>
          {rows.map((r, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 0.8fr', alignItems: 'center', padding: '10px 14px', borderTop: i ? '1px solid var(--line)' : 'none', fontSize: 13 }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <TAvatar s={r.n[0]} color={r.c} size={24} />
                {r.n}
              </span>
              <span style={{ fontSize: 12, color: 'var(--ink-600)' }}>{r.app}</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, fontWeight: 600, justifySelf: 'end' }}>
                <span style={{ width: 7, height: 7, borderRadius: '50%', background: dotColor[r.base], boxShadow: r.base === 'Active' && t % 2 === i % 2 ? `0 0 0 3px ${dotColor[r.base]}33` : 'none', transition: 'box-shadow 0.4s' }} />
                {r.base}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// 4. All screens
const AllScreensMock = () => {
  const t = useTickTT(1800);
  const screens = [
    { l: 'Screen 1', app: 'VS Code — payroll.js' },
    { l: 'Screen 2', app: 'Chrome — app.primehr.in' },
    { l: 'Screen 3', app: 'Slack — #engineering' },
  ];
  return (
    <div className="mock">
      <TBar url="app.primehr.in/screens/karthik-v" />
      <div style={{ padding: 22 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <div>
            <span className="eyebrow">all screens</span>
            <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 18, marginTop: 6 }}>Karthik V. — 3 monitors</div>
          </div>
          <span className="chip"><Icon name="grid" size={11} /> Multi-monitor</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          {screens.map((s, i) => {
            const active = t % 3 === i;
            return (
              <div key={i} style={{ border: active ? '2px solid var(--cyan-600)' : '1px solid var(--line)', borderRadius: 10, overflow: 'hidden', transition: 'border 0.3s' }}>
                <div style={{ background: 'var(--ink-900)', padding: '6px 10px', display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: active ? '#ef4444' : 'var(--ink-500)', opacity: active ? 1 : 0.5 }} />
                  <span style={{ fontSize: 9, color: '#fff', opacity: 0.75 }}>{s.l}</span>
                </div>
                <div style={{ aspectRatio: '16/10', background: 'linear-gradient(160deg,#f1f5f9,#e2e8f0)', display: 'grid', placeItems: 'center', padding: 8 }}>
                  <span style={{ fontSize: 10, color: 'var(--ink-600)', textAlign: 'center' }}>{s.app}</span>
                </div>
              </div>
            );
          })}
        </div>
        <div style={{ marginTop: 14, fontSize: 12, color: 'var(--ink-500)' }}>Every connected display is captured in the same snapshot — nothing off-screen goes untracked.</div>
      </div>
    </div>
  );
};

// 5. AI cheating deduction
const AICheatDetectionMock = () => {
  const t = useTickTT(1500);
  const score = 92 - (t % 4) * 3;
  const flags = [
    { l: 'Mouse-jiggle pattern detected', sev: 'High', c: 'var(--rose-500)', time: '11:42 am' },
    { l: 'Screenshot blank 3× in a row', sev: 'Medium', c: 'var(--warn-500)', time: '2:05 pm' },
    { l: 'Keyboard silent but marked active (22m)', sev: 'Medium', c: 'var(--warn-500)', time: '4:18 pm' },
  ];
  return (
    <div className="mock">
      <TBar url="app.primehr.in/ai-insights" />
      <div style={{ padding: 22 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
          <div>
            <span className="eyebrow">ai cheating deduction</span>
            <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 18, marginTop: 6 }}>12 signals monitored in real-time</div>
          </div>
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontFamily: 'var(--f-display)', fontWeight: 800, fontSize: 24, color: score > 85 ? 'var(--accent-600)' : 'var(--warn-500)', transition: 'color 0.4s' }}>{score}%</div>
            <div style={{ fontSize: 9, color: 'var(--ink-500)', textTransform: 'uppercase' }}>Trust score</div>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {flags.map((f, i) => (
            <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'center', padding: '10px 12px', border: '1px solid var(--line)', borderRadius: 10, background: t % 3 === i ? 'rgba(244,63,94,0.05)' : '#fff', transition: 'background 0.4s' }}>
              <Icon name="scan" size={16} style={{ color: f.c, flexShrink: 0 }} />
              <span style={{ flex: 1, fontSize: 12.5 }}>{f.l}</span>
              <span className="chip" style={{ borderColor: f.c, color: f.c }}>{f.sev}</span>
              <span style={{ fontFamily: 'var(--f-mono)', fontSize: 11, color: 'var(--ink-500)' }}>{f.time}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// 6. Edit time manually
const EditTimeManuallyMock = () => {
  const t = useTickTT(1800);
  const editing = t % 2 === 1;
  return (
    <div className="mock">
      <TBar url="app.primehr.in/timesheet/edit" />
      <div style={{ padding: 22 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <div>
            <span className="eyebrow">edit time manually</span>
            <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 18, marginTop: 6 }}>Weekly timesheet — Rahul K.</div>
          </div>
          <span className="chip"><Icon name="edit" size={11} /> Audit-logged</span>
        </div>
        <div style={{ border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden', marginBottom: 14 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '0.8fr 1fr 1fr 1fr', padding: '9px 14px', background: 'var(--ink-50)', fontSize: 10, fontWeight: 700, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
            <span>Day</span><span>Clock in</span><span>Clock out</span><span>Total</span>
          </div>
          {['Mon', 'Tue', 'Wed'].map((d, i) => (
            <div key={d} style={{ display: 'grid', gridTemplateColumns: '0.8fr 1fr 1fr 1fr', padding: '10px 14px', fontSize: 13, borderTop: '1px solid var(--line)', alignItems: 'center', background: i === 1 && editing ? '#fffbeb' : '#fff', transition: 'background 0.4s' }}>
              <span>{d}</span>
              {i === 1 ? (
                <>
                  <span style={{ fontFamily: 'var(--f-mono)' }}>{editing ? '09:00' : <s style={{ opacity: 0.5 }}>09:14</s>}</span>
                  <span style={{ fontFamily: 'var(--f-mono)' }}>{editing ? '18:00' : <s style={{ opacity: 0.5 }}>18:02</s>}</span>
                  <span style={{ fontFamily: 'var(--f-mono)', fontWeight: 700 }}>{editing ? '9h 00m' : '8h 48m'}</span>
                </>
              ) : (
                <>
                  <span style={{ fontFamily: 'var(--f-mono)' }}>09:0{i}</span>
                  <span style={{ fontFamily: 'var(--f-mono)' }}>18:0{i}</span>
                  <span style={{ fontFamily: 'var(--f-mono)', fontWeight: 700 }}>8h 5{i}m</span>
                </>
              )}
            </div>
          ))}
        </div>
        <div style={{ background: 'var(--ink-50)', borderRadius: 10, padding: 12 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 8 }}>Audit log</div>
          <div style={{ fontSize: 12, color: 'var(--ink-600)', display: 'flex', gap: 8, alignItems: 'flex-start' }}>
            <Icon name="check" size={14} style={{ color: 'var(--accent-500)', flexShrink: 0, marginTop: 1 }} />
            <span>Manager <b>Meera J.</b> edited Tue 09:14→09:00, 18:02→18:00 — reason: "forgot to clock in, approved". <span style={{ color: 'var(--ink-400)' }}>Just now</span></span>
          </div>
        </div>
      </div>
    </div>
  );
};

// 7. Project analytics
const ProjectAnalyticsMock = () => {
  const t = useTickTT(1400);
  const projects = [
    { n: 'Client — Nimbus Fin', h: 42, budget: 60, c: 'var(--cyan-600)' },
    { n: 'Internal — Website', h: 18, budget: 40, c: 'var(--brand-500)' },
    { n: 'Client — Surya Pharma', h: 36, budget: 45, c: 'var(--accent-500)' },
    { n: 'Client — BlueWave', h: 55, budget: 50, c: 'var(--warn-500)' },
  ];
  return (
    <div className="mock">
      <TBar url="app.primehr.in/analytics/projects" />
      <div style={{ padding: 22 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
          <div>
            <span className="eyebrow">project analytics</span>
            <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 20, marginTop: 6 }}>151 hrs logged · 79% billable</div>
          </div>
          <span className="chip chip--accent"><Icon name="chart" size={11} /> This week</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 16 }}>
          {projects.map((p, i) => {
            const pct = Math.min(100, Math.round((p.h / p.budget) * 100));
            return (
              <div key={i}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 4 }}>
                  <span style={{ fontWeight: 600 }}>{p.n}</span>
                  <span style={{ color: 'var(--ink-500)', fontFamily: 'var(--f-mono)' }}>{p.h}h / {p.budget}h</span>
                </div>
                <div style={{ height: 8, borderRadius: 4, background: 'var(--ink-100)', overflow: 'hidden' }}>
                  <div style={{ height: '100%', width: t % 2 === 0 ? `${pct}%` : `${Math.max(pct - 4, 4)}%`, background: p.c, borderRadius: 4, transition: 'width 0.6s ease' }} />
                </div>
              </div>
            );
          })}
        </div>
        <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 8 }}>Top contributors</div>
        <div style={{ display: 'flex', gap: 14 }}>
          {[{ n: 'Priya', h: '38h', c: 'var(--cyan-600)' }, { n: 'Rahul', h: '34h', c: 'var(--brand-500)' }, { n: 'Meera', h: '29h', c: 'var(--accent-500)' }].map((c, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <TAvatar s={c.n[0]} color={c.c} size={26} />
              <div>
                <div style={{ fontSize: 12, fontWeight: 600 }}>{c.n}</div>
                <div style={{ fontSize: 10, color: 'var(--ink-500)', fontFamily: 'var(--f-mono)' }}>{c.h}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// 8. Custom productivity rules
const ProductivityRulesMock = () => {
  const t = useTickTT(1700);
  const rules = [
    { l: 'Flag idle after 5 minutes', on: true },
    { l: 'Block non-work apps 9 am – 6 pm', on: true },
    { l: 'Require screenshot every 10 min', on: t % 3 !== 0 },
    { l: 'Auto clock-out after 30 min idle', on: false },
  ];
  return (
    <div className="mock">
      <TBar url="app.primehr.in/rules" />
      <div style={{ padding: 22 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <div>
            <span className="eyebrow">productivity rules</span>
            <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 18, marginTop: 6 }}>Custom rule builder</div>
          </div>
          <button className="btn btn--ghost" style={{ padding: '6px 12px', fontSize: 12, pointerEvents: 'none' }}>+ New rule</button>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 16 }}>
          {rules.map((r, i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '11px 14px', border: '1px solid var(--line)', borderRadius: 10, fontSize: 13 }}>
              <span>{r.l}</span>
              <span style={{ width: 36, height: 20, borderRadius: 999, background: r.on ? 'var(--cyan-600)' : 'var(--ink-200)', position: 'relative', transition: 'background 0.35s', flexShrink: 0 }}>
                <span style={{ position: 'absolute', top: 2, left: r.on ? 18 : 2, width: 16, height: 16, borderRadius: '50%', background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,0.25)', transition: 'left 0.35s' }} />
              </span>
            </div>
          ))}
        </div>
        <div style={{ background: 'rgba(6,182,212,0.08)', border: '1px solid rgba(6,182,212,0.25)', borderRadius: 10, padding: 12, display: 'flex', gap: 10, alignItems: 'center' }}>
          <Icon name="bolt" size={16} style={{ color: 'var(--cyan-600)', flexShrink: 0 }} />
          <span style={{ fontSize: 12, color: 'var(--ink-700)' }}><b>Triggered just now:</b> idle 6 min — Rahul K. flagged per "Flag idle after 5 minutes".</span>
        </div>
      </div>
    </div>
  );
};

// =============================================================
// ALL-FEATURES SHOWCASE — single grid, one animated mini-preview
// per feature, all 8 visible together on the /time-tracking page.
// =============================================================
const FEATURE_CARDS = [
  { slug: 'keyboard-mouse-activity', icon: 'keyboard', t: 'Keyboard & mouse activity', d: 'Live input-intensity, minute by minute.', kind: 'activity' },
  { slug: 'screenshots', icon: 'camera', t: 'Take screenshots', d: 'Randomized, timed desktop captures.', kind: 'screenshot' },
  { slug: 'live-monitoring', icon: 'eye', t: 'Live monitoring', d: 'Active, idle or offline — right now.', kind: 'live' },
  { slug: 'all-screens', icon: 'grid', t: 'All screens', d: 'Every connected monitor, captured.', kind: 'screens' },
  { slug: 'ai-cheating-detection', icon: 'scan', t: 'AI cheating deduction', d: 'Flags idle-fraud & proxy work.', kind: 'scan' },
  { slug: 'edit-time-manually', icon: 'edit', t: 'Edit time manually', d: 'Manager overrides, audit-logged.', kind: 'edit' },
  { slug: 'project-analytics', icon: 'chart', t: 'Project analytics', d: 'Hours, budget and utilization.', kind: 'analytics' },
  { slug: 'productivity-rules', icon: 'sliders', t: 'Productivity rules', d: 'Custom idle & app-usage rules.', kind: 'rules' },
];

const MiniVisual = ({ kind, t }) => {
  switch (kind) {
    case 'activity': {
      const bars = Array.from({ length: 9 }, (_, i) => 24 + Math.abs(((i * 41 + t * 17) % 76) - 38));
      return (
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height: 40, width: '100%' }}>
          {bars.map((h, i) => <div key={i} style={{ flex: 1, height: `${h}%`, borderRadius: 2, background: 'var(--cyan-500)', opacity: 0.4 + (h / 100) * 0.6, transition: 'height 0.5s ease' }} />)}
        </div>
      );
    }
    case 'screenshot': {
      const flash = t % 3 === 0;
      return (
        <div style={{ display: 'flex', gap: 6, width: '100%' }}>
          {[0, 1, 2].map(i => (
            <div key={i} style={{ position: 'relative', flex: 1, aspectRatio: '4/3', borderRadius: 5, overflow: 'hidden', background: 'linear-gradient(135deg,var(--ink-100),var(--ink-200))' }}>
              {flash && i === t % 3 && <div style={{ position: 'absolute', inset: 0, background: '#fff', opacity: 0.85 }} />}
            </div>
          ))}
        </div>
      );
    }
    case 'live':
      return (
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 12, height: 12, borderRadius: '50%', background: '#22c55e', boxShadow: t % 2 === 0 ? '0 0 0 5px rgba(34,197,94,0.22)' : 'none', transition: 'box-shadow 0.5s' }} />
          <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink-600)', letterSpacing: '0.04em' }}>LIVE · 3 ACTIVE</span>
        </div>
      );
    case 'screens':
      return (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 5, width: '100%' }}>
          {[0, 1, 2].map(i => (
            <div key={i} style={{ aspectRatio: '4/3', borderRadius: 4, background: 'var(--ink-100)', border: t % 3 === i ? '2px solid var(--cyan-600)' : '1px solid var(--line)', transition: 'border 0.3s' }} />
          ))}
        </div>
      );
    case 'scan':
      return (
        <div style={{ position: 'relative', width: '100%', height: 40, borderRadius: 6, background: 'var(--ink-50)', overflow: 'hidden', border: '1px solid var(--line)' }}>
          <div style={{ position: 'absolute', top: 0, bottom: 0, left: `${(t * 22) % 100}%`, width: 2, background: 'var(--rose-500)', boxShadow: '0 0 8px var(--rose-500)', transition: 'left 0.6s linear' }} />
        </div>
      );
    case 'edit':
      return (
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontFamily: 'var(--f-mono)' }}>
          <span style={{ textDecoration: t % 2 === 0 ? 'none' : 'line-through', opacity: t % 2 === 0 ? 1 : 0.45, transition: 'opacity 0.3s' }}>{t % 2 === 0 ? '09:00' : '09:14'}</span>
          <Icon name="edit" size={13} style={{ color: 'var(--cyan-600)' }} />
          <span style={{ color: 'var(--ink-500)' }}>audit-logged</span>
        </div>
      );
    case 'analytics': {
      const hs = [t % 2 === 0 ? 65 : 45, 40, t % 2 === 0 ? 30 : 55];
      return (
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 40, width: '100%' }}>
          {hs.map((h, i) => <div key={i} style={{ flex: 1, height: `${h}%`, borderRadius: '3px 3px 0 0', background: [ 'var(--cyan-600)', 'var(--brand-500)', 'var(--accent-500)' ][i], transition: 'height 0.6s ease' }} />)}
        </div>
      );
    }
    case 'rules':
      return (
        <span style={{ width: 34, height: 18, borderRadius: 999, background: t % 2 === 0 ? 'var(--cyan-600)' : 'var(--ink-200)', position: 'relative', display: 'inline-block', transition: 'background 0.35s' }}>
          <span style={{ position: 'absolute', top: 2, left: t % 2 === 0 ? 18 : 2, width: 14, height: 14, borderRadius: '50%', background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,0.25)', transition: 'left 0.35s' }} />
        </span>
      );
    default:
      return null;
  }
};

const FeatureShowcaseGrid = () => {
  const t = useTickTT(1100);
  return (
    <div className="grid grid-4" style={{ gap: 18 }}>
      {FEATURE_CARDS.map((f, i) => (
        <a key={f.slug} href={`/feature-${f.slug}`} className="card card--hover" style={{ display: 'flex', flexDirection: 'column', gap: 14, textDecoration: 'none', color: 'inherit' }}>
          <span style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(6,182,212,0.10)', color: 'var(--cyan-600)', display: 'grid', placeItems: 'center' }}>
            <Icon name={f.icon} size={19} />
          </span>
          <div>
            <div style={{ fontWeight: 700, fontSize: 15, marginBottom: 4 }}>{f.t}</div>
            <div style={{ fontSize: 12.5, color: 'var(--ink-500)', lineHeight: 1.5 }}>{f.d}</div>
          </div>
          <div style={{ marginTop: 'auto', paddingTop: 10, borderTop: '1px solid var(--line)', display: 'flex', alignItems: 'center', minHeight: 40 }}>
            <MiniVisual kind={f.kind} t={t + i} />
          </div>
        </a>
      ))}
    </div>
  );
};

Object.assign(window, {
  ActivityCaptureGfx, LiveMonitorGfx, ProjectAnalyticsGfx, FeatureShowcaseGrid,
  KeyboardMouseMock, ScreenshotsMock, LiveMonitoringMock, AllScreensMock,
  AICheatDetectionMock, EditTimeManuallyMock, ProjectAnalyticsMock, ProductivityRulesMock,
});
