/* eslint-disable */
// Shared UI atoms — exposed to window so other Babel scripts can use them.

function FadeIn({ children, className = '', as: As = 'div', style, id }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { el.classList.add('visible'); obs.unobserve(el); } },
      { threshold: 0.08 }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return <As ref={ref} id={id} style={style} className={`fade-section ${className}`}>{children}</As>;
}

function MockChrome({ title }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '10px 14px', background: 'white', borderBottom: '1px solid var(--muted-200)' }}>
      <span style={{ width: 10, height: 10, borderRadius: 999, background: '#ff5f57' }} />
      <span style={{ width: 10, height: 10, borderRadius: 999, background: '#febc2e' }} />
      <span style={{ width: 10, height: 10, borderRadius: 999, background: '#28c840' }} />
      <span className="font-mono" style={{ marginLeft: 8, fontSize: 11, color: 'var(--muted-400)' }}>{title}</span>
    </div>
  );
}

function ProgressBar({ pct, gradient = true }) {
  return (
    <div style={{ width: '100%', height: 6, background: 'var(--muted-50)', borderRadius: 999, overflow: 'hidden' }}>
      <div style={{
        width: `${pct}%`, height: '100%', borderRadius: 999,
        background: gradient ? 'linear-gradient(90deg, #7c3aed, #00c8e0)' : 'var(--praxis-primary)'
      }} />
    </div>
  );
}

function Avatar({ initials, bg, size = 28 }) {
  return (
    <div style={{
      width: size, height: size, background: bg,
      borderRadius: 999, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      color: 'white', fontWeight: 700, fontSize: size * 0.39, flexShrink: 0
    }}>{initials}</div>
  );
}

function Pill({ children, variant = 'gray' }) {
  const styles = {
    green:  { color: '#16a34a', background: 'rgba(22,163,74,0.1)' },
    amber:  { color: '#d97706', background: 'rgba(217,119,6,0.1)' },
    purple: { color: '#7c3aed', background: 'rgba(124,58,237,0.08)' },
    cyan:   { color: '#0284c7', background: 'rgba(2,132,199,0.08)' },
    gray:   { color: '#9ca3af', background: '#f8f9fb', border: '1px solid #e8eaed' },
  };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      fontSize: 10, fontWeight: 600, padding: '2px 8px', borderRadius: 999,
      ...styles[variant]
    }}>{children}</span>
  );
}

function Eyebrow({ children, color }) {
  return <p className="eyebrow" style={{ margin: 0, marginBottom: 12, color: color || 'var(--praxis-primary)' }}>{children}</p>;
}

function Check({ color = 'var(--praxis-primary)' }) {
  return <span style={{ color, fontWeight: 700, flexShrink: 0, marginTop: 1 }}>✓</span>;
}

Object.assign(window, { FadeIn, MockChrome, ProgressBar, Avatar, Pill, Eyebrow, Check });