// Shared editorial atoms — rules, labels, numbers, buttons

function Rule({ style }) {
  const { t } = useTheme();
  return <hr style={{ border: 0, borderTop: `1px solid ${t.rule}`, margin: 0, ...style }} />;
}

function Eyebrow({ children, style }) {
  const { t, f } = useTheme();
  return (
    <div style={{
      fontFamily: f.sans, fontSize: 11, fontWeight: 600,
      letterSpacing: '0.14em', textTransform: 'uppercase',
      color: t.muted, ...style,
    }}>{children}</div>
  );
}

function Display({ children, size = 64, italic = false, style }) {
  const { t, f } = useTheme();
  return (
    <div style={{
      fontFamily: f.display, fontWeight: f.displayWeight,
      letterSpacing: f.displayTracking, fontStyle: italic ? 'italic' : 'normal',
      fontSize: size, lineHeight: 1.02, color: t.ink,
      textWrap: 'pretty', ...style,
    }}>{children}</div>
  );
}

function Body({ children, size = 15, style }) {
  const { t, f } = useTheme();
  return (
    <div style={{
      fontFamily: f.sans, fontSize: size, lineHeight: 1.55,
      color: t.ink2, ...style,
    }}>{children}</div>
  );
}

function Mono({ children, size = 12, style }) {
  const { t, f } = useTheme();
  return (
    <span style={{
      fontFamily: f.mono, fontSize: size, letterSpacing: '0.02em',
      color: t.muted, ...style,
    }}>{children}</span>
  );
}

function DropNumber({ value, unit, style }) {
  const { t, f } = useTheme();
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, ...style }}>
      <span style={{
        fontFamily: f.display, fontWeight: f.displayWeight,
        letterSpacing: f.displayTracking, fontSize: 56, lineHeight: 1, color: t.ink,
      }}>{value}</span>
      {unit && <span style={{ fontFamily: f.sans, fontSize: 14, color: t.muted }}>{unit}</span>}
    </div>
  );
}

function Btn({ children, onClick, variant = 'primary', size = 'md', style, type }) {
  const { t, f } = useTheme();
  const pad = size === 'sm' ? '8px 14px' : size === 'lg' ? '16px 28px' : '12px 22px';
  const fs = size === 'sm' ? 13 : size === 'lg' ? 16 : 14;
  const base = {
    fontFamily: f.sans, fontWeight: 500, letterSpacing: '0.01em',
    padding: pad, fontSize: fs, borderRadius: 2, border: 'none',
    display: 'inline-flex', alignItems: 'center', gap: 8, transition: 'all .15s',
  };
  const styles = {
    primary: { ...base, background: t.ink, color: t.paper },
    accent:  { ...base, background: t.accent, color: t.paper },
    ghost:   { ...base, background: 'transparent', color: t.ink, border: `1px solid ${t.rule}` },
    link:    { ...base, background: 'transparent', color: t.ink, padding: 0, textDecoration: 'underline', textUnderlineOffset: 4 },
  };
  return (
    <button type={type} onClick={onClick} style={{ ...styles[variant], ...style }}
      onMouseEnter={e => { if (variant === 'primary') e.currentTarget.style.background = t.accent; }}
      onMouseLeave={e => { if (variant === 'primary') e.currentTarget.style.background = t.ink; }}
    >{children}</button>
  );
}

function Pill({ children, tone = 'default', style }) {
  const { t, f } = useTheme();
  const colors = {
    default: { bg: t.tint, fg: t.ink2 },
    good:    { bg: 'oklch(0.94 0.05 150)', fg: t.good },
    warn:    { bg: 'oklch(0.94 0.06 75)', fg: t.warn },
    accent:  { bg: t.tint, fg: t.accent },
  }[tone];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '3px 10px', borderRadius: 999,
      fontFamily: f.sans, fontSize: 11, fontWeight: 500,
      background: colors.bg, color: colors.fg,
      ...style,
    }}>{children}</span>
  );
}

// Subtle striped placeholder for "image would go here"
function PhotoPh({ w = '100%', h = 200, label, style }) {
  const { t, f } = useTheme();
  return (
    <div style={{
      width: w, height: h, position: 'relative',
      background: `repeating-linear-gradient(135deg, ${t.paper2} 0 6px, ${t.paper} 6px 12px)`,
      border: `1px solid ${t.rule}`, display: 'flex', alignItems: 'center', justifyContent: 'center',
      ...style,
    }}>
      <span style={{ fontFamily: f.mono, fontSize: 10, color: t.muted, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
        {label || 'photo'}
      </span>
    </div>
  );
}

// Horizontal bar for data
function Bar({ value, max = 100, color, h = 8, style }) {
  const { t } = useTheme();
  return (
    <div style={{ width: '100%', height: h, background: t.tint, ...style }}>
      <div style={{ width: `${(value/max)*100}%`, height: '100%', background: color || t.accent, transition: 'width .5s' }} />
    </div>
  );
}

// Sparkline drawn as svg polyline
function Spark({ data, w = 120, h = 28, color, style }) {
  const { t } = useTheme();
  const max = Math.max(...data), min = Math.min(...data);
  const range = max - min || 1;
  const pts = data.map((v, i) => `${(i / (data.length - 1)) * w},${h - ((v - min) / range) * h}`).join(' ');
  return (
    <svg width={w} height={h} style={style}>
      <polyline points={pts} fill="none" stroke={color || t.accent} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" />
    </svg>
  );
}

// Nav bar shared across app screens
function NavBar({ active, onNav, persona }) {
  const { t, f } = useTheme();
  const items = [
    { id: 'dashboard', label: 'Übersicht' },
    { id: 'market',    label: 'Arbeitsmarkt' },
    { id: 'courses',   label: 'Umschulung' },
    { id: 'plan',      label: 'Mein Plan' },
  ];
  return (
    <div style={{
      padding: '18px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      borderBottom: `1px solid ${t.rule}`, background: t.paper,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
        <div style={{ fontFamily: f.display, fontSize: 22, fontWeight: f.displayWeight, letterSpacing: f.displayTracking, color: t.ink }}>
          jobless<span style={{ color: t.accent }}>.</span>team
        </div>
        <nav style={{ display: 'flex', gap: 24 }}>
          {items.map(it => (
            <button key={it.id} onClick={() => onNav && onNav(it.id)}
              style={{
                border: 0, background: 'transparent', padding: '4px 0',
                fontFamily: f.sans, fontSize: 14, color: active === it.id ? t.ink : t.muted,
                borderBottom: active === it.id ? `2px solid ${t.accent}` : '2px solid transparent',
                cursor: 'pointer',
              }}>{it.label}</button>
          ))}
        </nav>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontFamily: f.sans, fontSize: 13, color: t.ink, fontWeight: 500 }}>{persona?.name}</div>
          <Mono size={10}>{persona?.city} · {persona?.branche}</Mono>
        </div>
        <div style={{
          width: 36, height: 36, borderRadius: '50%', background: t.tint,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: f.display, fontSize: 14, color: t.ink, fontWeight: 500,
        }}>{persona?.name?.split(' ').map(s=>s[0]).join('')}</div>
      </div>
    </div>
  );
}

Object.assign(window, { Rule, Eyebrow, Display, Body, Mono, DropNumber, Btn, Pill, PhotoPh, Bar, Spark, NavBar });