// Shared visual primitives — icons, wordmark, theme tokens, micro-components.
// All components in this file follow the cualificador design system:
// dark premium background, single accent, white-bone text.

// ─── Theme tokens (resolvable from any tweak override) ────────────────
window.THEME = {
  // Light, warm-neutral background — confident & trustworthy.
  // Slight cream tint avoids sterile pure-white; matched ink with low chroma.
  bg: '#F6F4EF',
  bgRaised: '#FFFFFF',
  bgCard: '#FFFFFF',
  border: 'rgba(20,22,30,0.10)',
  borderStrong: 'rgba(20,22,30,0.18)',
  text: '#1B1D26',
  textMuted: 'rgba(27,29,38,0.66)',
  textDim: 'rgba(27,29,38,0.44)',
  accents: {
    blue:  { solid: '#2563EB', soft: 'rgba(37,99,235,0.10)', glow: 'rgba(37,99,235,0.18)' },
    green: { solid: '#059669', soft: 'rgba(5,150,105,0.10)',  glow: 'rgba(5,150,105,0.18)' },
    amber: { solid: '#D97706', soft: 'rgba(217,119,6,0.10)',  glow: 'rgba(217,119,6,0.18)' },
  },
  ok: '#059669',
  warn: '#D97706',
  hot: '#DC2626',
  cold: '#2563EB',
};

window.useAccent = function useAccent(name = 'blue') {
  return window.THEME.accents[name] || window.THEME.accents.blue;
};

// ─── Lucide-style line icons (24px stroke, currentColor) ──────────────
const Ic = ({ d, size = 22, strokeWidth = 1.6, fill = 'none', stroke = 'currentColor', children, viewBox = '0 0 24 24', style }) => (
  <svg width={size} height={size} viewBox={viewBox} fill={fill} stroke={stroke} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" style={style}>
    {d ? <path d={d} /> : children}
  </svg>
);

window.Icon = function Icon({ name, size = 22, strokeWidth = 1.6, style }) {
  const p = { size, strokeWidth, style };
  switch (name) {
    case 'flask': return <Ic {...p}><path d="M9 3h6"/><path d="M10 3v6L4 19a2 2 0 0 0 1.7 3h12.6A2 2 0 0 0 20 19l-6-10V3"/><path d="M7 14h10"/></Ic>;
    case 'store': return <Ic {...p}><path d="M3 9 4.5 4h15L21 9"/><path d="M4 9v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V9"/><path d="M3 9h18"/><path d="M9 21v-6h6v6"/></Ic>;
    case 'truck': return <Ic {...p}><path d="M14 18V6H3v12h2"/><path d="M14 8h4l3 4v6h-2"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></Ic>;
    case 'cross': return <Ic {...p}><path d="M9 3h6v6h6v6h-6v6H9v-6H3V9h6V3z"/></Ic>;
    case 'device': return <Ic {...p}><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M8 21h8M10 18v3M14 18v3"/><path d="M8 9l2 2 2-2 2 2 2-2"/></Ic>;
    case 'plane': return <Ic {...p}><path d="M2 12l8-2 4-7 2 1-2 7 7 2 1 2-7 2 1 5-2 1-3-4-5 2-2-3 4-3-2-3z"/></Ic>;
    case 'briefcase': return <Ic {...p}><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M3 13h18"/></Ic>;
    case 'plus': return <Ic {...p}><path d="M12 5v14M5 12h14"/></Ic>;
    case 'arrow': return <Ic {...p}><path d="M5 12h14M13 5l7 7-7 7"/></Ic>;
    case 'arrowL': return <Ic {...p}><path d="M19 12H5M11 5l-7 7 7 7"/></Ic>;
    case 'check': return <Ic {...p}><path d="M5 12l5 5 9-11"/></Ic>;
    case 'sparkle': return <Ic {...p}><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3z"/><path d="M19 4l.6 1.4L21 6l-1.4.6L19 8l-.6-1.4L17 6l1.4-.6L19 4z"/></Ic>;
    case 'clock': return <Ic {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></Ic>;
    case 'dollar': return <Ic {...p}><path d="M12 2v20M17 6H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></Ic>;
    case 'trend': return <Ic {...p}><path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/></Ic>;
    case 'shield': return <Ic {...p}><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z"/></Ic>;
    case 'fire': return <Ic {...p}><path d="M12 2c1 4 4 5 4 9a4 4 0 0 1-8 0c0-2 1-3 1-5 0 2 3 2 3-4z"/></Ic>;
    case 'whatsapp': return <Ic {...p} viewBox="0 0 24 24"><path d="M3 21l1.7-5A8 8 0 1 1 8 19l-5 2z"/><path d="M8.5 9.5c.3 1.5 1.5 3.2 3 4 1.6.7 2.5.5 3 .3l.7-.5c.3-.3.7-.3 1 0l1 1c.3.3.3.7 0 1-.5.5-1 1-2 1-2.5 0-5-1.5-6.5-4-1-1.7-1-3-1-3.5 0-1 .5-1.5 1-2 .3-.3.7-.3 1 0l1 1c.3.3.3.7 0 1l-.5.7c-.2.5-.4 1.4.3 2z"/></Ic>;
    case 'eye': return <Ic {...p}><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></Ic>;
    case 'chev-r': return <Ic {...p}><path d="M9 6l6 6-6 6"/></Ic>;
    case 'chev-d': return <Ic {...p}><path d="M6 9l6 6 6-6"/></Ic>;
    case 'x': return <Ic {...p}><path d="M6 6l12 12M18 6L6 18"/></Ic>;
    case 'chart': return <Ic {...p}><path d="M3 3v18h18"/><path d="M7 14v4M11 9v9M15 11v7M19 7v11"/></Ic>;
    case 'users': return <Ic {...p}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.9M16 3.1A4 4 0 0 1 16 11"/></Ic>;
    case 'list': return <Ic {...p}><path d="M3 6h18M3 12h18M3 18h18"/></Ic>;
    case 'book': return <Ic {...p}><path d="M4 4h12a3 3 0 0 1 3 3v13H7a3 3 0 0 1-3-3V4z"/><path d="M19 17H7a3 3 0 0 0-3 3"/></Ic>;
    case 'download': return <Ic {...p}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></Ic>;
    case 'filter': return <Ic {...p}><path d="M3 4h18l-7 9v6l-4 2v-8L3 4z"/></Ic>;
    case 'home': return <Ic {...p}><path d="M3 12l9-9 9 9v9a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2v-9z"/></Ic>;
    case 'building': return <Ic {...p}><rect x="4" y="3" width="16" height="18" rx="1"/><path d="M9 8h.01M15 8h.01M9 12h.01M15 12h.01M9 16h.01M15 16h.01M10 21v-4h4v4"/></Ic>;
    case 'spark2': return <Ic {...p}><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></Ic>;
    case 'logo-mark': return (
      <Ic {...p} fill="currentColor" stroke="none" viewBox="0 0 24 24">
        <path d="M4 4h7a5 5 0 0 1 5 5v0a5 5 0 0 1-5 5H8v6H4V4zm4 6.5h2.5a2 2 0 0 0 0-4H8v4z"/>
        <circle cx="18" cy="18" r="2.5" />
      </Ic>
    );
    default: return <Ic {...p}><circle cx="12" cy="12" r="9"/></Ic>;
  }
};

// ─── Wordmark — AI First Business logo con nodos conectados ──────────
window.Wordmark = function Wordmark({ size = 14, color, mono = false }) {
  const isDark = window.THEME && window.THEME.bg && window.THEME.bg.includes('0f');
  const textColor = color || window.THEME.text;
  const blue = mono ? textColor : '#3b82f6';
  const nodeColor = isDark ? '#ffffff' : '#0f172a';
  const dimColor = isDark ? '#64748b' : '#94a3b8';
  const nodeR = size * 0.38;
  const smallR = size * 0.24;
  const svgW = size * 3.2;
  const svgH = size * 2.4;

  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: size * 0.5,
      fontFamily: '"Inter", ui-sans-serif, system-ui, sans-serif',
      lineHeight: 1,
    }}>
      <svg width={svgW} height={svgH} viewBox={`0 0 ${svgW} ${svgH}`} style={{ flexShrink: 0, overflow: 'visible' }}>
        {/* Nodo azul — abajo izquierda */}
        <circle cx={size * 0.5} cy={size * 1.5} r={nodeR} fill={blue} />
        {/* Nodo oscuro — arriba centro */}
        <circle cx={size * 1.9} cy={size * 0.55} r={nodeR} fill={nodeColor} />
        {/* Conector azul punteado */}
        <line
          x1={size * 0.5 + nodeR * 0.8} y1={size * 1.5 - nodeR * 0.8}
          x2={size * 1.9 - nodeR * 0.8} y2={size * 0.55 + nodeR * 0.8}
          stroke={blue} strokeWidth={size * 0.1} strokeDasharray={`${size * 0.18},${size * 0.14}`}
        />
        {/* Nodo pequeño gris — abajo derecha */}
        <circle cx={size * 2.8} cy={size * 1.9} r={smallR} fill={dimColor} />
        {/* Conector gris punteado */}
        <line
          x1={size * 1.9 + nodeR * 0.6} y1={size * 0.55 + nodeR * 0.9}
          x2={size * 2.8 - smallR * 0.6} y2={size * 1.9 - smallR * 0.8}
          stroke={dimColor} strokeWidth={size * 0.07} strokeDasharray={`${size * 0.14},${size * 0.12}`}
        />
      </svg>
      <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: size * 0.18,
        fontSize: size, letterSpacing: '-0.02em', color: textColor }}>
        <span style={{ fontWeight: 300 }}>AI</span>
        <span style={{ fontWeight: 700 }}>First</span>
        <span style={{ fontWeight: 400, opacity: 0.85 }}>Business</span>
      </span>
    </div>
  );
};

// ─── Misc primitives ──────────────────────────────────────────────────
window.Chip = function Chip({ children, tone = 'muted', style }) {
  const T = window.THEME;
  const tones = {
    muted: { bg: 'rgba(20,22,30,0.05)', fg: T.textMuted, bd: T.border },
    accent: { bg: 'var(--accent-soft)', fg: 'var(--accent-solid)', bd: 'var(--accent-soft)' },
    hot: { bg: 'rgba(239,68,68,0.12)', fg: '#FCA5A5', bd: 'rgba(239,68,68,0.25)' },
    warn: { bg: 'rgba(245,158,11,0.12)', fg: '#FCD34D', bd: 'rgba(245,158,11,0.25)' },
    ok: { bg: 'rgba(52,211,153,0.12)', fg: '#6EE7B7', bd: 'rgba(52,211,153,0.25)' },
    cold: { bg: 'rgba(96,165,250,0.12)', fg: '#93C5FD', bd: 'rgba(96,165,250,0.25)' },
  };
  const s = tones[tone] || tones.muted;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px', borderRadius: 999,
      background: s.bg, color: s.fg,
      border: `1px solid ${s.bd}`,
      fontSize: 11, fontWeight: 500, letterSpacing: '0.01em',
      lineHeight: 1.2, whiteSpace: 'nowrap',
      ...style,
    }}>{children}</span>
  );
};

window.TempChip = function TempChip({ temp, size = 'sm' }) {
  const map = {
    caliente: { tone: 'hot', dot: '#EF4444', label: 'Caliente' },
    tibio: { tone: 'warn', dot: '#F59E0B', label: 'Tibio' },
    frio: { tone: 'cold', dot: '#60A5FA', label: 'Explorando' },
  };
  const m = map[temp] || map.frio;
  return (
    <window.Chip tone={m.tone}>
      <span style={{ width: 6, height: 6, borderRadius: 99, background: m.dot, boxShadow: `0 0 8px ${m.dot}` }} />
      {m.label}
    </window.Chip>
  );
};

// Animated number counter — climbs from 0 to target on mount.
window.Counter = function Counter({ value, suffix = '', prefix = '', duration = 900 }) {
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    let raf, t0;
    const step = (t) => {
      if (!t0) t0 = t;
      const p = Math.min(1, (t - t0) / duration);
      const e = 1 - Math.pow(1 - p, 3);
      setN(Math.round(value * e));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [value, duration]);
  return <span style={{ fontVariantNumeric: 'tabular-nums' }}>{prefix}{n}{suffix}</span>;
};

// Reveal — fade + slide-up children with stagger.
window.Reveal = function Reveal({ children, delay = 0, style }) {
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => { const t = setTimeout(() => setShown(true), delay); return () => clearTimeout(t); }, [delay]);
  return (
    <div style={{
      opacity: shown ? 1 : 0,
      transform: shown ? 'translateY(0)' : 'translateY(8px)',
      transition: 'opacity 360ms cubic-bezier(.2,.7,.3,1), transform 360ms cubic-bezier(.2,.7,.3,1)',
      ...style,
    }}>{children}</div>
  );
};

// Progress dots — N steps, current index highlighted.
window.ProgressDots = function ProgressDots({ total, current }) {
  return (
    <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
      {Array.from({ length: total }).map((_, i) => (
        <div key={i} style={{
          height: 4, borderRadius: 4,
          width: i === current ? 22 : 6,
          background: i <= current ? 'var(--accent-solid)' : 'rgba(20,22,30,0.10)',
          transition: 'all 320ms cubic-bezier(.2,.7,.3,1)',
        }} />
      ))}
    </div>
  );
};

// Background — dark premium with subtle dot grid + soft accent glow.
window.PremiumBg = function PremiumBg({ accent }) {
  return (
    <>
      {/* Base — soft cream paper, with a faint accent halo at the top */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'linear-gradient(180deg, #FBFAF6 0%, #F6F4EF 55%, #EFEDE6 100%)',
      }} />
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `radial-gradient(900px 500px at 50% -5%, ${accent.glow} 0%, transparent 55%)`,
      }} />
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage: 'radial-gradient(rgba(20,22,30,0.05) 1px, transparent 1px)',
        backgroundSize: '24px 24px',
        maskImage: 'radial-gradient(ellipse at center, black 25%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse at center, black 25%, transparent 75%)',
        opacity: 0.7,
      }} />
    </>
  );
};

// Subtle pulse glow used behind feature buttons / hero CTAs.
window.PulseGlow = function PulseGlow({ color, size = 200 }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <div style={{
        width: size, height: size, borderRadius: '50%',
        background: `radial-gradient(circle, ${color} 0%, transparent 70%)`,
        animation: 'pg-pulse 2.6s ease-in-out infinite',
      }} />
    </div>
  );
};

// Inject keyframes once.
if (typeof document !== 'undefined' && !document.getElementById('cualif-keyframes')) {
  const s = document.createElement('style');
  s.id = 'cualif-keyframes';
  s.textContent = `
    @keyframes pg-pulse { 0%,100%{transform:scale(.92);opacity:.55} 50%{transform:scale(1.05);opacity:.85} }
    @keyframes cu-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    @keyframes cu-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
    .cu-shimmer { background: linear-gradient(90deg, transparent, rgba(20,22,30,0.06), transparent); background-size: 200% 100%; animation: cu-shimmer 2.4s linear infinite; }
    .cu-card-hover { transition: border-color 180ms, transform 180ms, background 180ms, box-shadow 180ms; }
    .cu-card-hover:hover { border-color: rgba(20,22,30,0.22) !important; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(20,22,30,0.06); }
    .cu-btn-primary { transition: transform 120ms, box-shadow 200ms, filter 200ms; }
    .cu-btn-primary:hover { filter: brightness(1.08); }
    .cu-btn-primary:active { transform: scale(0.98); }
  `;
  document.head.appendChild(s);
}