// BrandMark — logo with purple/blue gradient "A"
const BrandMark = ({ size = 32, withText = true, textSize = 18 }) => {
  return (
    <div className="wordmark" style={{ fontSize: textSize }}>
      <div className="wordmark-mark" style={{ width: size, height: size, borderRadius: size * 0.28 }}>
        <svg viewBox="0 0 24 24" width={size * 0.55} height={size * 0.55} fill="none"
          stroke="white" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 19L12 5l7 14M8 14h8"/>
        </svg>
      </div>
      {withText && <span className="wordmark-text">Automatiza</span>}
    </div>
  );
};

// TerminalWidget — the signature brand element
const TerminalWidget = ({ style = {}, lines, title = 'automatiza@producao ~ status' }) => {
  const defaultLines = [
    { type: 'cmd', text: 'automatiza --healthcheck' },
    { type: 'ok', label: 'crm', text: '247 leads ativos' },
    { type: 'ok', label: 'financeiro', text: 'fluxo de caixa +12,4%' },
    { type: 'ok', label: 'rh/folha', text: 'CLT 2026 · 18 colaboradores' },
    { type: 'ok', label: 'pdv', text: 'NFC-e emitida · PIX online' },
    { type: 'ok', label: 'ia', text: 'Claude · lead scoring on' },
    { type: 'prompt', text: '' },
  ];
  const ls = lines || defaultLines;
  return (
    <div style={{
      background: '#0a0a16',
      borderRadius: 12,
      overflow: 'hidden',
      boxShadow: 'var(--shadow-lg), 0 0 0 1px rgba(139,92,246,.22)',
      fontFamily: 'var(--font-mono)',
      fontSize: 13,
      border: '1px solid rgba(255,255,255,.08)',
      ...style,
    }}>
      <div style={{
        background: 'linear-gradient(180deg, #1a1a2e, #131325)',
        padding: '10px 14px',
        display: 'flex', alignItems: 'center', gap: 10,
        borderBottom: '1px solid rgba(255,255,255,.06)',
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <span style={{ width: 12, height: 12, borderRadius: '50%', background: '#ff5f57' }}/>
          <span style={{ width: 12, height: 12, borderRadius: '50%', background: '#febc2e' }}/>
          <span style={{ width: 12, height: 12, borderRadius: '50%', background: '#28c840' }}/>
        </div>
        <div style={{
          flex: 1, textAlign: 'center',
          fontSize: 12, color: 'var(--text-3)',
          fontFamily: 'var(--font-mono)',
        }}>{title}</div>
      </div>
      <div style={{ padding: '18px 20px', minHeight: 220, display: 'flex', flexDirection: 'column', gap: 7 }}>
        {ls.map((l, i) => (
          <TerminalLine key={i} line={l}/>
        ))}
      </div>
    </div>
  );
};

const TerminalLine = ({ line }) => {
  if (line.type === 'cmd') {
    return (
      <div style={{ display: 'flex', gap: 8 }}>
        <span style={{ color: 'var(--text-4)' }}>$</span>
        <span style={{ color: 'var(--text-1)' }}>{line.text}</span>
      </div>
    );
  }
  if (line.type === 'ok') {
    return (
      <div style={{ display: 'flex', gap: 8 }}>
        <span style={{ color: 'var(--green)' }}>✓</span>
        <span style={{ color: '#a78bfa' }}>{line.label}</span>
        <span style={{ color: 'var(--text-2)' }}>{line.text}</span>
      </div>
    );
  }
  if (line.type === 'warn') {
    return (
      <div style={{ display: 'flex', gap: 8 }}>
        <span style={{ color: 'var(--amber)' }}>⚠</span>
        <span style={{ color: '#fcd34d' }}>{line.label}</span>
        <span style={{ color: 'var(--text-2)' }}>{line.text}</span>
      </div>
    );
  }
  if (line.type === 'prompt') {
    return (
      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <span style={{ color: 'var(--text-4)' }}>$</span>
        <span style={{
          display: 'inline-block', width: 8, height: 16, background: '#60a5fa',
          animation: 'blink 1s step-end infinite',
        }}/>
      </div>
    );
  }
  return <div style={{ color: 'var(--text-2)' }}>{line.text}</div>;
};

// Cursor blink animation
const _style = document.createElement('style');
_style.textContent = `@keyframes blink { 50% { opacity: 0; } }`;
document.head.appendChild(_style);

Object.assign(window, { BrandMark, TerminalWidget, TerminalLine });