/* Onboarding — first-visit step-by-step tour */

const STEPS = [
  {
    title: 'Bem-vindo ao SynapIA Studio',
    body: 'Seu copiloto jurídico de elite. Em 4 passos rápidos eu mostro o essencial — depois você assume.',
    art: 'hello',
  },
  {
    title: 'Seis modos de trabalho',
    body: 'Chat (respostas rápidas), Raciocínio (cadeia visível), Peças (petições completas), Recursos (apelações/agravos), Agêntico (ferramentas: cálculo, súmulas, CNPJ…) e Deep Research (pesquisa profunda).',
    art: 'modes',
  },
  {
    title: 'Importe processos com um clique',
    body: 'A extensão SynapIA captura inteiro teor + andamentos do tribunal. O Studio recebe tudo estruturado e contextualizado.',
    art: 'bridge',
  },
  {
    title: 'Personalize seu estilo e timbre',
    body: 'Carregue um .docx com seu timbrado para que todas as peças saiam com a identidade visual do seu escritório. Adicione amostras de texto para que a IA aprenda e replique sua escrita.',
    art: 'style',
  },
];

const Onboarding = ({ open, onClose, onJump }) => {
  const [i, setI] = React.useState(0);
  if (!open) return null;
  const s = STEPS[i];
  const last = i === STEPS.length - 1;

  return (
    <div className="ob-overlay" onClick={onClose}>
      <div className="ob-card" onClick={e => e.stopPropagation()}>
        <button className="ob-close" onClick={onClose} aria-label="Fechar"><I.x size={14} sw={2}/></button>
        <div className="ob-art">
          <OBArt kind={s.art}/>
        </div>
        <div className="ob-body">
          <div className="ob-eyebrow">PASSO {i+1} DE {STEPS.length}</div>
          <h2 className="ob-title">{s.title}</h2>
          <p className="ob-text">{s.body}</p>
        </div>
        <div className="ob-foot">
          <div className="ob-dots">
            {STEPS.map((_, k) => (
              <button key={k} className={`ob-dot ${k === i ? 'active' : ''}`} onClick={() => setI(k)}/>
            ))}
          </div>
          <div className="ob-actions">
            {i > 0 && <button className="btn-ghost" onClick={() => setI(i - 1)}><I.arrowL size={12} sw={2}/> Voltar</button>}
            {!last && <button className="btn-primary" onClick={() => setI(i + 1)}>Próximo <I.arrowR size={12} sw={2}/></button>}
            {last && <button className="btn-primary" onClick={onClose}>Começar a usar <I.check size={12} sw={2.2}/></button>}
          </div>
        </div>
      </div>
    </div>
  );
};

const OBArt = ({ kind }) => {
  if (kind === 'hello') return (
    <svg viewBox="0 0 280 160" className="ob-svg">
      <rect width="280" height="160" rx="12" fill="#F2F0E8"/>
      <image href="/logo_trans.png" x="70" y="28" width="140" height="70"
             preserveAspectRatio="xMidYMid meet"/>
      <rect x="60" y="112" width="160" height="2" rx="1" fill="#1F1E1A" opacity=".12"/>
      <text x="140" y="136" textAnchor="middle" fontSize="11" fontFamily="Inter"
            fontWeight="600" fill="#6B6A62" letterSpacing="0.5">COPILOTO JURÍDICO DE ELITE</text>
    </svg>
  );
  if (kind === 'modes') return (
    <svg viewBox="0 0 280 160" className="ob-svg">
      <rect width="280" height="160" rx="12" fill="#F2F0E8"/>
      {[
        ['Chat',       8,   '#1F1E1A'],
        ['Peças',      58,  '#2a5c45'],
        ['Recursos',   108, '#3a3a30'],
        ['Agêntico',   158, '#1F1E1A'],
        ['Research',   208, '#5a4a2a'],
      ].map(([l, x, fill], idx) => (
        <g key={idx}>
          <rect x={x} y={36} width={46} height={68} rx={6} fill="white" stroke="#E4E2D9"/>
          <circle cx={x+23} cy={58} r={8} fill={fill}/>
          <rect x={x+8} y={74} width={30} height={3} rx="1.5" fill="#1F1E1A" opacity=".15"/>
          <rect x={x+8} y={82} width={22} height={3} rx="1.5" fill="#1F1E1A" opacity=".1"/>
          <text x={x+23} y={118} textAnchor="middle" fontSize="7.5" fontFamily="Inter"
                fontWeight="600" fill="#1F1E1A">{l}</text>
        </g>
      ))}
    </svg>
  );
  if (kind === 'bridge') return (
    <svg viewBox="0 0 280 160" className="ob-svg">
      <rect width="280" height="160" rx="12" fill="#F2F0E8"/>
      <rect x="20" y="34" width="100" height="92" rx="8" fill="white" stroke="#E4E2D9"/>
      <text x="70" y="54" textAnchor="middle" fontSize="9" fontFamily="Inter" fontWeight="700" fill="#6B6A62">PJe / TRIBUNAL</text>
      <rect x="34" y="64" width="72" height="3" rx="1" fill="#1F1E1A" opacity=".25"/>
      <rect x="34" y="74" width="60" height="3" rx="1" fill="#1F1E1A" opacity=".15"/>
      <rect x="34" y="84" width="68" height="3" rx="1" fill="#1F1E1A" opacity=".15"/>
      <rect x="34" y="94" width="50" height="3" rx="1" fill="#1F1E1A" opacity=".15"/>
      <rect x="160" y="34" width="100" height="92" rx="8" fill="white" stroke="#E4E2D9"/>
      <image href="/logo_trans.png" x="183" y="44" width="54" height="30"
             preserveAspectRatio="xMidYMid meet"/>
      <rect x="174" y="98" width="72" height="3" rx="1" fill="#1F1E1A" opacity=".25"/>
      <rect x="174" y="108" width="56" height="3" rx="1" fill="#1F1E1A" opacity=".15"/>
      <path d="M124 80 L156 80" stroke="#1F1E1A" strokeWidth="1.5" strokeDasharray="3 3"/>
      <polygon points="156,80 150,76 150,84" fill="#1F1E1A"/>
    </svg>
  );
  // style — timbre + aprendizado
  return (
    <svg viewBox="0 0 280 160" className="ob-svg">
      <rect width="280" height="160" rx="12" fill="#F2F0E8"/>
      {/* Documento com timbre */}
      <rect x="40" y="28" width="86" height="108" rx="6" fill="white" stroke="#E4E2D9"/>
      <image href="/logo_trans.png" x="52" y="36" width="62" height="28"
             preserveAspectRatio="xMidYMid meet"/>
      <rect x="52" y="72" width="62" height="2.5" rx="1" fill="#1F1E1A" opacity=".3"/>
      <rect x="52" y="80" width="52" height="2" rx="1" fill="#1F1E1A" opacity=".15"/>
      <rect x="52" y="88" width="58" height="2" rx="1" fill="#1F1E1A" opacity=".15"/>
      <rect x="52" y="96" width="44" height="2" rx="1" fill="#1F1E1A" opacity=".15"/>
      {/* Seta de aprendizado */}
      <path d="M140 84 Q160 60 174 80" stroke="#1F1E1A" strokeWidth="1.5"
            fill="none" strokeDasharray="3 3"/>
      <polygon points="174,80 168,76 170,84" fill="#1F1E1A"/>
      {/* Chip AI */}
      <rect x="168" y="44" width="68" height="68" rx="8" fill="white" stroke="#E4E2D9"/>
      <rect x="180" y="58" width="44" height="3" rx="1.5" fill="#1F1E1A" opacity=".2"/>
      <rect x="180" y="66" width="36" height="3" rx="1.5" fill="#2a5c45" opacity=".5"/>
      <rect x="180" y="74" width="44" height="3" rx="1.5" fill="#1F1E1A" opacity=".2"/>
      <rect x="180" y="82" width="30" height="3" rx="1.5" fill="#2a5c45" opacity=".5"/>
      <rect x="180" y="90" width="40" height="3" rx="1.5" fill="#1F1E1A" opacity=".2"/>
      <text x="202" y="124" textAnchor="middle" fontSize="8" fontFamily="Inter"
            fontWeight="600" fill="#6B6A62">Estilo + Timbre</text>
    </svg>
  );
};

window.Onboarding = Onboarding;