// Estimado brand tokens + GHL lead helper.
// Mono palette: Paper #FAF8F3, Ink #15140F. No accents except pulse-dot green.

const C = {
  ink:    '#15140F',
  ink2:   '#2A2822',
  paper:  '#FAF8F3',
  paper2: '#F4F0E6',
  paper3: '#ECE6D7',
  rule:   '#E5E0D5',
  muted:  '#6B6960',
  green:  '#22C55E',
};

const F = {
  display: '"Newsreader", "Newsreader Placeholder", Georgia, serif',
  ui:      '"Geist", "Geist Placeholder", system-ui, -apple-system, sans-serif',
  mono:    '"Geist Mono", "Geist Mono Placeholder", ui-monospace, "SF Mono", Menlo, monospace',
};

// ─── Logo lockup ─────────────────────────────────────────────
function EMark({ size = 28, invert = false }) {
  const bg = invert ? C.paper : C.ink;
  const fg = invert ? C.ink : C.paper;
  return (
    <div style={{
      width: size, height: size,
      borderRadius: size * 0.24,
      background: bg, color: fg,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: F.display, fontWeight: 500,
      fontSize: size * 0.72, lineHeight: 1,
      flexShrink: 0,
      paddingTop: size * 0.06,
    }}>E</div>
  );
}

function Lockup({ size = 28, invert = false, gap }) {
  const _gap = gap ?? size * 0.32;
  const wordSize = size * 0.86;
  const wordColor = invert ? C.paper : C.ink;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: _gap, lineHeight: 1 }}>
      <EMark size={size} invert={invert} />
      <span style={{
        fontFamily: F.display, fontWeight: 420,
        fontSize: wordSize, letterSpacing: '-0.035em',
        color: wordColor, lineHeight: 1,
      }}>Estimado</span>
    </span>
  );
}

// ─── Mono eyebrow label ──────────────────────────────────────
function MonoLabel({ children, color, style = {}, className }) {
  return (
    <span className={className} style={{
      fontFamily: F.mono, fontSize: 11, letterSpacing: '0.12em',
      textTransform: 'uppercase', color: color || C.muted,
      ...style,
    }}>{children}</span>
  );
}

// ─── Arrow icon ─────────────────────────────────────────────
function Arrow({ color = '#fff', size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0 }}>
      <path d="M2.5 7h9M8 3.5L11.5 7 8 10.5" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function BackArrow({ color = '#15140F', size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0 }}>
      <path d="M11.5 7h-9M6 3.5L2.5 7 6 10.5" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

// ─── Avatar stack ───────────────────────────────────────────
const AVATAR_IDS = [12, 33, 8, 15, 51, 60, 11, 67, 13, 7];
function AvatarStack({ size = 32, count = 5, overlap = 9, borderColor }) {
  const ids = AVATAR_IDS.slice(0, count);
  return (
    <div style={{ display: 'flex' }}>
      {ids.map((id, i) => (
        <img key={id} src={`https://i.pravatar.cc/120?img=${id}`} alt="" loading="lazy"
          style={{
            width: size, height: size, borderRadius: 999,
            objectFit: 'cover',
            marginLeft: i === 0 ? 0 : -overlap,
            border: `2px solid ${borderColor || C.paper}`,
            background: C.paper2,
            zIndex: count - i,
          }} />
      ))}
    </div>
  );
}

// ─── GoHighLevel two-stage capture ──────────────────────────
const GHL_HOOK = 'https://services.leadconnectorhq.com/hooks/kzxGehAT5juhdSHBWxZt/webhook-trigger/0c680fd3-029b-4394-9c7b-a46bb7a93e58';

function postLead(data) {
  const body = new URLSearchParams();
  const qs = new URLSearchParams(window.location.search);
  const fbclid = qs.get('fbclid') || localStorage.getItem('estimado_fbclid') || '';
  if (fbclid) localStorage.setItem('estimado_fbclid', fbclid);
  const eventId = data.event_id || sessionStorage.getItem('estimado_event_id') || `estimado-${Date.now()}-${Math.random().toString(16).slice(2)}`;
  sessionStorage.setItem('estimado_event_id', eventId);
  if (data.email)     body.set('email',     data.email);
  if (data.name)      body.set('name',      data.name);
  if (data.firstName) body.set('firstName', data.firstName);
  if (data.lastName)  body.set('lastName',  data.lastName);
  if (data.phone)     body.set('phone',     data.phone);
  if (data.company)   body.set('company',   data.company);
  if (data.stage)     body.set('stage',     data.stage);
  if (fbclid)         body.set('fbclid',    fbclid);
  body.set('event_id', eventId);
  try {
    fetch(GHL_HOOK, { method: 'POST', mode: 'no-cors', body }).catch(() => {});
  } catch (_) { /* never blocks the UI */ }
}

Object.assign(window, { C, F, EMark, Lockup, MonoLabel, Arrow, BackArrow, AvatarStack, postLead, GHL_HOOK });