/* ============================================================
   components.jsx — Primitivos de UI compartilhados
   ============================================================ */
const { useState, useRef, useEffect } = React;

/* ---------- Ícones (stroke geométrico) ---------- */
const ICONS = {
  user: 'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM5 20a7 7 0 0 1 14 0',
  grid: 'M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z',
  cart: 'M3 4h2l2.4 11.2A2 2 0 0 0 9.36 17h7.7a2 2 0 0 0 1.96-1.6L20.5 8H6M9 21h.01M17 21h.01',
  doc: 'M7 3h7l5 5v13H7zM14 3v5h5',
  check: 'M5 13l4 4L19 7',
  arrowR: 'M5 12h14M13 6l6 6-6 6',
  arrowL: 'M19 12H5M11 6l-6 6 6 6',
  plus: 'M12 5v14M5 12h14',
  minus: 'M5 12h14',
  trash: 'M4 7h16M9 7V5h6v2M6 7l1 13h10l1-13',
  edit: 'M4 20h4L18.5 9.5a2.1 2.1 0 0 0-3-3L5 17v3z',
  whatsapp: 'M20 12a8 8 0 0 1-11.8 7L4 20l1.1-4A8 8 0 1 1 20 12ZM8.5 8.5c-.3 0-.7.1-.9.5-.3.4-1 1-1 2.3s1 2.7 1.2 2.9c.1.2 2 3.1 4.9 4.2 2.4.9 2.9.8 3.4.7.6-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.4l-2-1c-.3-.1-.5-.1-.7.1l-.7.9c-.1.2-.3.2-.5.1-.7-.3-1.5-.6-2.4-1.6-.7-.7-1.1-1.5-1.3-1.8-.1-.2 0-.4.1-.5l.5-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5l-.8-2c-.2-.5-.4-.5-.6-.5Z',
  mail: 'M3 6h18v12H3zM3 7l9 6 9-6',
  download: 'M12 3v12M7 11l5 5 5-5M5 21h14',
  copy: 'M9 9h11v11H9zM5 15H4V4h11v1',
  qr: 'M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h3v3h-3zM20 14v6M17 20h3',
  x: 'M6 6l12 12M18 6L6 18',
  clock: 'M12 7v5l3 2M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z',
  spark: 'M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z',
  money: 'M12 7v10M9.5 9.2c0-1 .9-1.7 2.5-1.7s2.5.8 2.5 1.8c0 2.4-5 1.3-5 3.6 0 1 1 1.8 2.5 1.8s2.5-.7 2.5-1.7M3 5h18v14H3z',
  layers: 'M12 3l9 5-9 5-9-5 9-5ZM3 14l9 5 9-5',
  search: 'M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM21 21l-4.3-4.3',
  pin: 'M12 21s7-5.2 7-11a7 7 0 1 0-14 0c0 5.8 7 11 7 11ZM12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z',
  building: 'M4 21V5l8-2v18M12 21V9l6 2v10M3 21h18M8 8v.01M8 12v.01M8 16v.01',
  chevD: 'M6 9l6 6 6-6',
  send: 'M22 2L11 13M22 2l-7 20-4-9-9-4 20-7Z',
  lock: 'M6 11h12v9H6zM9 11V8a3 3 0 0 1 6 0v3',
  bolt: 'M13 2L4 14h7l-1 8 9-12h-7l1-8Z',
};

function Icon({ name, size = 20, stroke = 2, fill, style, ...rest }) {
  const filled = name === 'whatsapp';
  return (
    <svg width={size} height={size} viewBox="0 0 24 24"
      fill={filled ? 'currentColor' : 'none'}
      stroke={filled ? 'none' : 'currentColor'}
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
      style={{ flexShrink: 0, ...style }} {...rest}>
      <path d={ICONS[name] || ''} />
    </svg>
  );
}

/* ---------- Logo: imagem (logos.js) OU texto (kit de revenda) ---------- */
function BrandLogo({ dark = false, height = 30 }) {
  const b = window.BRANDING || {};
  const img = dark ? window.LOGO_DARK : window.LOGO_LIGHT;
  if (b.usarLogoImagem !== false && img) {
    // logoEscala: multiplicador p/ logos "empilhados" (emblema + texto) ficarem maiores
    const esc = b.logoEscala || 1;
    return <img src={img} alt={(b.empresa && b.empresa.nome) || 'Logo'}
      style={{ height: height * esc, width: 'auto', display: 'block', objectFit: 'contain' }} />;
  }
  const t = b.logoTexto || { linha1: (b.empresa && b.empresa.nome) || 'Sua', linha2: 'Empresa' };
  const txtColor = dark ? '#15171c' : 'var(--text)';
  const subColor = dark ? '#6b7180' : 'var(--text-3)';
  return (
    <div className="row gap-3" style={{ alignItems: 'center' }}>
      <div className="mark" style={{ width: height * 0.6 }}>
        <i style={{ height: height * 0.4 }}></i>
        <i style={{ height: height * 0.4 }}></i>
      </div>
      <div className="col" style={{ lineHeight: 1.05 }}>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: height * 0.58, letterSpacing: '-0.02em', color: txtColor }}>{t.linha1}</span>
        {t.linha2 ? <span style={{ fontSize: height * 0.28, letterSpacing: '0.18em', textTransform: 'uppercase', color: subColor, fontWeight: 600 }}>{t.linha2}</span> : null}
      </div>
    </div>
  );
}

/* ---------- Logo (PNG real — para fundos escuros) ---------- */
function LogoImg({ height = 34 }) {
  return <BrandLogo height={height} />;
}

/* ---------- Logo (CSS — usado no termo, fundo claro) ---------- */
function Logo({ size = 'md' }) {
  const h = size === 'sm' ? 20 : size === 'lg' ? 34 : 26;
  return (
    <div className="row gap-3" style={{ alignItems: 'center' }}>
      <div className="mark" style={{ width: h * 0.62 }}>
        <i style={{ height: h * 0.42 }}></i>
        <i style={{ height: h * 0.42 }}></i>
      </div>
      <div className="col" style={{ lineHeight: 1.05 }}>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: h * 0.62, letterSpacing: '-0.02em' }}>
          D Digital
        </span>
        <span style={{ fontSize: h * 0.32, letterSpacing: '0.26em', textTransform: 'uppercase', color: 'var(--text-3)', fontWeight: 600 }}>
          Solutions
        </span>
      </div>
    </div>
  );
}

/* ---------- Button ---------- */
function Button({ children, variant = 'primary', size = 'md', icon, iconR, full, ...rest }) {
  const base = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9,
    fontFamily: 'var(--font-display)', fontWeight: 600, whiteSpace: 'nowrap',
    borderRadius: 'var(--r-md)', transition: 'all .16s ease', width: full ? '100%' : 'auto',
    fontSize: size === 'sm' ? 13 : size === 'lg' ? 16 : 14.5,
    padding: size === 'sm' ? '8px 14px' : size === 'lg' ? '15px 26px' : '11px 20px',
  };
  const variants = {
    primary: { background: 'var(--brand-blue)', color: '#fff', boxShadow: '0 6px 18px rgba(0,74,173,.35)' },
    yellow:  { background: 'var(--brand-yellow)', color: '#000' },
    ghost:   { background: 'var(--surface-2)', color: 'var(--text)', border: '1px solid var(--line)' },
    outline: { background: 'transparent', color: 'var(--text-2)', border: '1px solid var(--line-strong)' },
    subtle:  { background: 'transparent', color: 'var(--text-2)' },
    danger:  { background: 'transparent', color: 'var(--danger)', border: '1px solid rgba(240,85,107,.3)' },
  };
  const { style: styleOverride, ...domProps } = rest;
  return (
    <button className="ddbtn" style={{ ...base, ...variants[variant], ...(styleOverride || {}) }} data-variant={variant} {...domProps}>
      {icon && <Icon name={icon} size={size === 'sm' ? 16 : 18} />}
      {children}
      {iconR && <Icon name={iconR} size={size === 'sm' ? 16 : 18} />}
    </button>
  );
}

/* ---------- Field ---------- */
function Field({ label, hint, icon, error, children, full, ...input }) {
  const id = 'f-' + (input.name || Math.random().toString(36).slice(2));
  return (
    <label htmlFor={id} className="col gap-2" style={{ gridColumn: full ? '1 / -1' : 'auto' }}>
      {label && <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-2)' }}>{label}</span>}
      <div className="ddfield" data-error={!!error} style={{
        display: 'flex', alignItems: 'center', gap: 10,
        background: 'var(--surface-2)', border: '1px solid var(--line)',
        borderRadius: 'var(--r-md)', padding: '0 14px', transition: 'all .16s ease',
      }}>
        {icon && <Icon name={icon} size={18} style={{ color: 'var(--text-3)' }} />}
        {children || (
          <input id={id} {...input} style={{
            background: 'none', border: 'none', outline: 'none', flex: 1,
            padding: '13px 0', fontSize: 15, color: 'var(--text)',
          }} />
        )}
      </div>
      {(hint || error) && <span style={{ fontSize: 12, color: error ? 'var(--danger)' : 'var(--text-3)' }}>{error || hint}</span>}
    </label>
  );
}

/* ---------- Badge ---------- */
function Badge({ children, tone = 'blue', dot }) {
  const tones = {
    blue:   { bg: 'var(--blue-ghost)', fg: 'var(--brand-blue-300)' },
    yellow: { bg: 'var(--yellow-ghost)', fg: 'var(--brand-yellow)' },
    green:  { bg: 'var(--success-ghost)', fg: 'var(--success)' },
    gray:   { bg: 'var(--surface-2)', fg: 'var(--text-3)' },
  }[tone];
  return (
    <span className="row gap-2" style={{
      fontSize: 11.5, fontWeight: 600, fontFamily: 'var(--font-display)',
      padding: '4px 10px', borderRadius: 99, background: tones.bg, color: tones.fg,
      letterSpacing: '.02em', width: 'fit-content',
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: 99, background: tones.fg }}></span>}
      {children}
    </span>
  );
}

/* expose */
Object.assign(window, { Icon, Logo, BrandLogo, LogoImg, Button, Field, Badge });