// ─────────────────────────────────────────────────────────────
// icons.jsx — Custom line icons (replacing emojis)
// All icons are 24x24 stroke SVGs, currentColor.
// ─────────────────────────────────────────────────────────────

window.AreaIcon = function AreaIcon({ id, size = 24 }) {
  const props = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor", strokeWidth: 1.6,
    strokeLinecap: "round", strokeLinejoin: "round"
  };
  switch (id) {
    case 1: // Selección — target / aim
      return (
        <svg {...props}>
          <circle cx="12" cy="12" r="9"/>
          <circle cx="12" cy="12" r="5"/>
          <circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none"/>
        </svg>
      );
    case 2: // Onboarding — door / entrance with arrow
      return (
        <svg {...props}>
          <path d="M14 3h5a1 1 0 011 1v16a1 1 0 01-1 1h-5"/>
          <path d="M10 12H3"/>
          <path d="M6 8l-4 4 4 4"/>
        </svg>
      );
    case 3: // Desempeño — chart up with arrow
      return (
        <svg {...props}>
          <path d="M3 20h18"/>
          <path d="M5 16l4-5 4 3 6-8"/>
          <path d="M15 6h4v4"/>
        </svg>
      );
    case 4: // Desarrollo — graduation cap / books stacked
      return (
        <svg {...props}>
          <path d="M22 10L12 5 2 10l10 5 10-5z"/>
          <path d="M6 12v5c3 2 9 2 12 0v-5"/>
          <path d="M22 10v6"/>
        </svg>
      );
    case 5: // Clima — pulse / barometer
      return (
        <svg {...props}>
          <circle cx="12" cy="12" r="9"/>
          <path d="M3 12h3l2-4 3 8 2-4 2 2h6"/>
        </svg>
      );
    case 6: // Bienestar — hand holding heart / sprout
      return (
        <svg {...props}>
          <path d="M12 21s-7-4.5-7-10a4 4 0 017-2.6A4 4 0 0119 11c0 5.5-7 10-7 10z"/>
          <path d="M12 8v0"/>
        </svg>
      );
    default:
      return null;
  }
};

// Level indicator: a stack of bars showing fill level 1-4 (like cellphone signal)
window.LevelBars = function LevelBars({ level = 1, color = "#009aba", size = "md", className = "" }) {
  const dims = size === "lg"
    ? { w: 6, gap: 3, h: [10, 14, 18, 22] }
    : size === "sm"
    ? { w: 3, gap: 2, h: [5, 7, 9, 11] }
    : { w: 4, gap: 2, h: [7, 10, 13, 16] };
  const totalW = dims.w * 4 + dims.gap * 3;
  const totalH = dims.h[3];
  return (
    <svg className={className} width={totalW} height={totalH} viewBox={`0 0 ${totalW} ${totalH}`} aria-label={`Nivel ${level} de 4`}>
      {[0,1,2,3].map(i => {
        const active = i < level;
        const x = i * (dims.w + dims.gap);
        const h = dims.h[i];
        const y = totalH - h;
        return (
          <rect key={i} x={x} y={y} width={dims.w} height={h} rx={dims.w/2}
            fill={active ? color : "rgba(255,255,255,0.12)"} />
        );
      })}
    </svg>
  );
};

// Numeric level chip — for level options on survey
window.LevelDot = function LevelDot({ level, color, active = false }) {
  // Filled segments based on level (1-4)
  const segs = [0,1,2,3];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 2,
    }}>
      {segs.map(i => (
        <span key={i} style={{
          width: 7, height: 7, borderRadius: '50%',
          background: i < level ? color : 'rgba(255,255,255,0.15)',
          transition: 'background 0.2s',
        }}/>
      ))}
    </span>
  );
};

// Common UI icons
window.UIIcon = function UIIcon({ name, size = 16, strokeWidth = 2 }) {
  const props = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor", strokeWidth,
    strokeLinecap: "round", strokeLinejoin: "round"
  };
  switch(name) {
    case 'arrow-right': return <svg {...props}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'arrow-left':  return <svg {...props}><path d="M19 12H5M11 18l-6-6 6-6"/></svg>;
    case 'clock':       return <svg {...props}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>;
    case 'check':       return <svg {...props}><path d="M20 6L9 17l-5-5"/></svg>;
    case 'check-circle':return <svg {...props}><circle cx="12" cy="12" r="10"/><path d="M8 12l3 3 5-6"/></svg>;
    case 'document':    return <svg {...props}><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg>;
    case 'download':    return <svg {...props}><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></svg>;
    case 'lock':        return <svg {...props}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></svg>;
    case 'grid':        return <svg {...props}><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>;
    case 'sparkle':     return <svg {...props}><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.5 5.5l2 2M16.5 16.5l2 2M5.5 18.5l2-2M16.5 7.5l2-2"/></svg>;
    case 'chart':       return <svg {...props}><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 6-7"/></svg>;
    case 'whatsapp':    return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>;
    case 'mail':        return <svg {...props}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 7l10 7 10-7"/></svg>;
    default: return null;
  }
};

// Export the components that the views need
Object.assign(window, {
  AreaIcon: window.AreaIcon,
  LevelBars: window.LevelBars,
  LevelDot: window.LevelDot,
  UIIcon: window.UIIcon,
});