// chamapro-shared.jsx — shared components: icons, avatars, mock data

// Tiny stroke-based icon set
const Icon = {
  search: (s = 18) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="2"/><path d="M20 20l-3.5-3.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>,
  plus: (s = 18) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"/></svg>,
  bell: (s = 18) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M6 8a6 6 0 0112 0v5l1.5 3h-15L6 13V8zM10 19a2 2 0 004 0" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  home: (s = 18) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M3 11l9-7 9 7v9a2 2 0 01-2 2h-4v-6h-6v6H5a2 2 0 01-2-2v-9z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/></svg>,
  list: (s = 18) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M4 6h16M4 12h16M4 18h10" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>,
  chat: (s = 18) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M21 12a8 8 0 01-12 7l-5 1 1.5-4A8 8 0 1121 12z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/></svg>,
  user: (s = 18) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><circle cx="12" cy="8" r="4" stroke="currentColor" strokeWidth="1.8"/><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>,
  star: (s = 14, fill = 'currentColor') => <svg width={s} height={s} viewBox="0 0 24 24" fill={fill}><path d="M12 2l3 7 7.5.6-5.7 5 1.7 7.4L12 18l-6.5 4 1.7-7.4-5.7-5L9 9z"/></svg>,
  starOutline: (s = 14) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M12 2l3 7 7.5.6-5.7 5 1.7 7.4L12 18l-6.5 4 1.7-7.4-5.7-5L9 9z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/></svg>,
  pin: (s = 14) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M12 22s7-7.5 7-13a7 7 0 10-14 0c0 5.5 7 13 7 13z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/><circle cx="12" cy="9" r="2.5" stroke="currentColor" strokeWidth="1.8"/></svg>,
  clock: (s = 14) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.8"/><path d="M12 7v5l3 2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>,
  check: (s = 14) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  back: (s = 18) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M15 6l-6 6 6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  close: (s = 18) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>,
  filter: (s = 16) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M3 5h18M6 12h12M10 19h4" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>,
  send: (s = 18) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M3 12L21 4l-4 17-4-7-7-2z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" fill="currentColor" fillOpacity=".1"/></svg>,
  shield: (s = 14) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M12 3l8 3v6c0 5-4 8.5-8 9-4-.5-8-4-8-9V6l8-3z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/><path d="M9 12l2 2 4-4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  flame: (s = 14, fill = '#FF5722') => <svg width={s} height={s} viewBox="0 0 24 24" fill={fill}><path d="M13.5 2c.5 4-2 5.5-2 8 0 1.4 1 2.5 2 2.5s2-1 2-2.5c0-.5 0-1-.3-1.5C16 9.5 18 12 18 15a6 6 0 11-12 0c0-3.5 3-5 4-7.5C11 5 13 4 13.5 2z"/></svg>,
  camera: (s = 18) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M4 8h3l2-3h6l2 3h3v11H4V8z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/><circle cx="12" cy="13" r="3.5" stroke="currentColor" strokeWidth="1.8"/></svg>,
  mic: (s = 18) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><rect x="9" y="3" width="6" height="12" rx="3" stroke="currentColor" strokeWidth="1.8"/><path d="M5 11a7 7 0 0014 0M12 18v3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>,
  arrowRight: (s = 14) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  sparkle: (s = 14) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M6 18l2.5-2.5M15.5 8.5L18 6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>,
  lightning: (s = 14) => <svg width={s} height={s} viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z"/></svg>,
  heart: (s = 16) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M12 20s-7-4-7-10a4.5 4.5 0 018-3 4.5 4.5 0 018 3c0 6-7 10-7 10z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/></svg>,
  share: (s = 16) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M4 12v7h16v-7M12 3v13M7 8l5-5 5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  briefcase: (s = 18) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><rect x="3" y="7" width="18" height="13" rx="2" stroke="currentColor" strokeWidth="1.8"/><path d="M9 7V5a2 2 0 012-2h2a2 2 0 012 2v2M3 13h18" stroke="currentColor" strokeWidth="1.8"/></svg>,
  wrench: (s = 18) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M14 7a4 4 0 015 5l-9 9-4-4 9-9a4 4 0 01-1-1z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/></svg>,
  paint: (s = 18) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M19 7l-9 9-3 3-3-3 3-3 9-9 3 3z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/></svg>,
  dot: (s = 4) => <span style={{ width: s, height: s, borderRadius: 999, background: 'currentColor', display: 'inline-block' }}/>,
};

// Stars row
function Stars({ value = 5, size = 12, total = 5 }) {
  return (
    <span className="cp-stars" style={{ fontSize: size }}>
      {Array.from({ length: total }).map((_, i) => (
        <span key={i} style={{ color: i < Math.round(value) ? '#FFB300' : 'rgba(0,0,0,.15)' }}>
          {Icon.star(size, 'currentColor')}
        </span>
      ))}
    </span>
  );
}

// Avatar with initials, optional image url
function Avatar({ name = 'AA', size = 'md', img, ring }) {
  const cls = size === 'sm' ? 'cp-avatar sm' : size === 'lg' ? 'cp-avatar lg' : 'cp-avatar';
  const initials = name.split(' ').map(n => n[0]).join('').slice(0, 2).toUpperCase();
  const seed = name.charCodeAt(0) + (name.charCodeAt(1) || 0);
  const hue = (seed * 37) % 360;
  return (
    <div
      className={cls + (img ? ' cp-avatar-img' : '')}
      style={{
        backgroundImage: img ? `url(${img})` : undefined,
        background: img ? undefined : `linear-gradient(135deg, hsl(${hue} 70% 60%), hsl(${(hue + 40) % 360} 80% 50%))`,
        boxShadow: ring ? `0 0 0 2px var(--cp-bg), 0 0 0 4px ${ring}` : undefined,
      }}
    >
      {!img && initials}
    </div>
  );
}

// Verified badge
function Verified({ size = 14 }) {
  return (
    <span className="cp-verified" style={{ width: size, height: size }} title="Profissional verificado">
      <svg width={size * 0.6} height={size * 0.6} viewBox="0 0 24 24" fill="none">
        <path d="M5 13l4 4L19 7" stroke="white" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </span>
  );
}

// Logo: flame mark + wordmark
function Logo({ size = 22, mark = false, color }) {
  const c = color || 'var(--cp-primary)';
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, color: 'var(--cp-text)' }}>
      <span style={{
        width: size + 6, height: size + 6, borderRadius: 8,
        background: c, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>
        <svg width={size * 0.7} height={size * 0.7} viewBox="0 0 24 24" fill="white">
          <path d="M13.5 2c.5 4-2 5.5-2 8 0 1.4 1 2.5 2 2.5s2-1 2-2.5c0-.5 0-1-.3-1.5C16 9.5 18 12 18 15a6 6 0 11-12 0c0-3.5 3-5 4-7.5C11 5 13 4 13.5 2z"/>
        </svg>
      </span>
      {!mark && <span style={{ fontWeight: 800, fontSize: size, letterSpacing: '-.02em' }}>
        Chama<span style={{ color: c }}>Pro</span>
      </span>}
    </span>
  );
}

// Real-feel placeholder photo using gradient + emoji
function PhotoPlaceholder({ kind = 'home', h = 120 }) {
  const palettes = {
    bath:    { g: 'linear-gradient(135deg, #BFE6FF, #6DA8C7)', e: '🚿' },
    kitchen: { g: 'linear-gradient(135deg, #FFE0B2, #C19A6B)', e: '🍳' },
    paint:   { g: 'linear-gradient(135deg, #E8D5F2, #9966CC)', e: '🎨' },
    yard:    { g: 'linear-gradient(135deg, #C8E6C9, #5D8A4F)', e: '🌿' },
    elec:    { g: 'linear-gradient(135deg, #FFF59D, #F9A825)', e: '⚡' },
    plumb:   { g: 'linear-gradient(135deg, #B3E5FC, #0288D1)', e: '🔧' },
    home:    { g: 'linear-gradient(135deg, #FFCCBC, #FF7043)', e: '🏠' },
    move:    { g: 'linear-gradient(135deg, #D7CCC8, #6D4C41)', e: '📦' },
    ac:      { g: 'linear-gradient(135deg, #E1F5FE, #4FC3F7)', e: '❄️' },
  };
  const p = palettes[kind] || palettes.home;
  return (
    <div style={{
      height: h, borderRadius: 12, background: p.g,
      display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end',
      padding: 10, fontSize: 28, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ filter: 'drop-shadow(0 2px 8px rgba(0,0,0,.2))' }}>{p.e}</div>
    </div>
  );
}

Object.assign(window, { Icon, Stars, Avatar, Verified, Logo, PhotoPlaceholder });
