/* Pixel animation — events firing up into a tracking graph. */
const { useState: useStateP, useEffect: useEffectP } = React;

const eventTypes = [
  { name: 'PageView', color: '#9ca3af' },
  { name: 'ViewContent', color: '#60a5fa' },
  { name: 'AddToCart', color: '#fbbf24' },
  { name: 'Purchase', color: '#0ac775' },
];

function PixelStage() {
  const [events, setEvents] = useStateP([]);
  useEffectP(() => {
    let id = 0;
    const t = setInterval(() => {
      const e = eventTypes[Math.floor(Math.random() * eventTypes.length)];
      setEvents(prev => [...prev.slice(-4), { ...e, id: id++, x: 20 + Math.random() * 60 }]);
    }, 750);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="pixel-stage">
      <div className="pixel-label">Meta Pixel · Firing</div>
      <div className="pixel-events">
        {events.map(e => (
          <div key={e.id} className="pixel-event" style={{ left: `${e.x}%`, color: e.color }}>
            <span className="pe-dot" />
            <span className="pe-name">{e.name}</span>
          </div>
        ))}
      </div>
      <div className="pixel-count">
        <div className="pc-kpi"><span className="pc-n">2,441</span><span className="pc-l">PageView</span></div>
        <div className="pc-kpi"><span className="pc-n">318</span><span className="pc-l">AddToCart</span></div>
        <div className="pc-kpi"><span className="pc-n">84</span><span className="pc-l">Purchase</span></div>
      </div>
      <style>{`
        .pixel-stage { width: 100%; height: 100%; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-family: var(--f-sans); position: relative; }
        .pixel-label { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
        .pixel-events { flex: 1; position: relative; overflow: hidden; border: 1px dashed var(--line); border-radius: 10px; background:
          radial-gradient(circle at center, var(--paper) 0, var(--paper-2) 100%); }
        html.dark .pixel-events { background: radial-gradient(circle at center, var(--paper-3) 0, var(--paper-2) 100%); }
        .pixel-event {
          position: absolute; bottom: 0;
          display: flex; flex-direction: column; align-items: center;
          animation: event-rise 2.5s linear forwards;
        }
        .pe-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
        .pe-name { margin-top: 4px; font: 500 10px/1 var(--f-mono); color: currentColor; white-space: nowrap; }
        @keyframes event-rise {
          0% { opacity: 0; transform: translateY(0); }
          15% { opacity: 1; }
          100% { opacity: 0; transform: translateY(-140px); }
        }
        .pixel-count { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
        .pc-kpi { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
        html.dark .pc-kpi { background: var(--paper-3); }
        .pc-n { display: block; font-family: var(--f-serif); font-style: italic; font-size: 20px; color: var(--ink); }
        .pc-l { display: block; font-size: 10px; color: var(--muted); font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }
      `}</style>
    </div>
  );
}

window.PixelStage = PixelStage;