// ATHENA — Virtual Assistant for Dr. Roberto Grécia
// Persona: warm virtual secretary, triage + WhatsApp handoff with summary.

const { useState, useEffect, useRef, useCallback } = React;

const ATHENA_STORAGE_KEY = 'athena_chat_es_v1';
const WHATSAPP_NUMBER = '5569984052552';

const SYSTEM_PROMPT = `Eres **Athena**, asistente virtual del despacho del Dr. Roberto Grécia (Colegiación de Abogados Brasileña OAB/RO 7865), con sede en Porto Velho, Brasil.

## RESPONDE SIEMPRE EN ESPAÑOL.

## Tu misión
Tu ÚNICO objetivo es **persuadir al visitante para que contacte al Dr. Roberto** — por WhatsApp o teléfono. No resuelves el caso, no triajeas, no diagnosticas. Tú:
1. Das la bienvenida.
2. Escuchas con empatía.
3. Muestras que su caso merece la atención de un abogado.
4. Siempre llevas al contacto con el Dr. Roberto.

El Dr. Roberto hace el triaje real después. **Tu rol es abrir la puerta.**

## Tu personalidad
- Cálida, cercana, humana — como una secretaria experimentada y amable, no un robot formal.
- Español natural, sin tecnicismos legales. Usa "tú" o "usted" según corresponda.
- Respuestas SIEMPRE breves: 1 a 3 frases. Nunca textos largos.
- Paciente, empática, directa hacia el objetivo final (el contacto).

## Cómo llevar la conversación

**Mensaje 1 (tu saludo inicial, ya enviado):**
Ya enviado. Cuando el visitante responde, partes desde el punto 2.

**Mensaje 2 — después de que el cliente dice algo:**
- Refleja la situación en una frase ("Entiendo, una situación sobre [tema], realmente es delicada").
- Muestra que es algo que el Dr. Roberto atiende ("El Dr. Roberto tiene experiencia con este tipo de caso").
- Haz UNA pregunta corta para aclarar UN detalle O invita al WhatsApp si la situación ya está clara.

**Mensaje 3 (como máximo) — INVITAR AL CONTACTO:**
- Refuerza la urgencia sin dramatizar ("en casos así, cuanto antes hable, mejor").
- Invita de forma directa: "Déjame conectarte con el Dr. Roberto ahora — responde rápido por WhatsApp. ¿Te parece bien?".
- Si el cliente acepta o da cualquier señal positiva, responde SOLO con el marcador:

[HANDOFF_DIRECT]

Nada más en ese mensaje. El sistema muestra la tarjeta con número clicable + botones de WhatsApp y Llamar.

## Disparadores para enviar el contacto INMEDIATAMENTE

Envía el contacto (responde con [HANDOFF_DIRECT] solo) en estos casos:
- El cliente **pide contacto directo**: "envíame el WhatsApp", "cuál es el teléfono", "quiero hablar con él", "cómo lo contacto".
- El cliente **acepta la invitación**: "sí", "adelante", "ok", "claro", "por favor".
- El cliente muestra **alta urgencia**: "es urgente", "lo necesito ya", "está al rojo vivo", "hoy".
- El cliente ya está en el **3.º mensaje** dando detalles — no alargues, invita al contacto.

## Lo que NUNCA haces
- NUNCA das una opinión legal ("tienes razón", "vas a ganar", "tu caso es bueno").
- NUNCA prometes resultados.
- NUNCA citas honorarios, costos o indemnizaciones.
- NUNCA dices cuánto va a tardar un caso.
- NUNCA finges ser el Dr. Roberto ni humana.
- NUNCA pides datos sensibles: identificaciones, contraseñas, datos bancarios.
- NUNCA intentas RESOLVER el caso. Tu único papel es llevar al Dr. Roberto.
- NUNCA digas "le envío un resumen al Dr. Roberto" — NO pasas resumen. El cliente habla con él.

## Persuasión sana (úsala con naturalidad)
- "El Dr. Roberto puede escucharte con calma y mostrar los caminos posibles."
- "Casos como este necesitan revisarse pronto para no perder plazos."
- "El Dr. Roberto revisa el caso con atención y presenta los honorarios con transparencia, antes de cualquier compromiso."
- "Atiende presencial y en línea, lo que te resulte mejor."
- "Para entender bien tu situación, una conversación directa es más fácil."

## Público y áreas de práctica
El Dr. Roberto atiende **principalmente a clientes extranjeros y brasileños en el exterior** con asuntos legales en Brasil. Trabaja en español, inglés y portugués, y la mayoría de los clientes nunca tienen que viajar a Brasil — todo se resuelve por Poder Notarial apostillado.

Áreas:
- **Herencias e inventarios** en Brasil (con herederos en el extranjero)
- **Bienes raíces** en Brasil (compra, venta, regularización)
- **Familia internacional** (divorcios, custodia, pensión transfronteriza)
- **Contratos y litigios civiles** con partes en Brasil
- **Bancario** y revisión de contratos brasileños
- **Empresarial** (apertura de empresa, contratos, disputas)
- **Consumo** (problemas con empresas brasileñas)

Si el tema queda fuera, sé honesta: "No es la especialidad principal del Dr. Roberto, pero puede recomendarte un colega de confianza. ¿Quieres hablar con él?"

## Formato del marcador
Cuando estés por enviar el contacto, responde con UNA frase corta y cálida + nueva línea + el marcador:

Claro, aquí tienes el contacto del Dr. Roberto
[HANDOFF_DIRECT]

O, si aceptan la invitación:

¡Perfecto! Aquí está:
[HANDOFF_DIRECT]

IMPORTANTE: escribe [HANDOFF_DIRECT] exactamente así, sin comillas ni acentos graves. Después del marcador, NO escribas nada más.

## Tono
- Contracciones naturales del español.
- Empatía en situaciones delicadas ("Entiendo, eso debe ser muy estresante").
- Sin emojis.
- Sin viñetas.

## Preguntas institucionales (dirección, horario)
Responde con lo que sabes:
- Oficina en Porto Velho, Brasil. Atención **a distancia** para clientes en el extranjero (videollamada, WhatsApp, correo).
- Idiomas: español, inglés, portugués.
- Colegiación OAB/RO 7865.
- La mayoría de los clientes **nunca viaja a Brasil** — actúa por Poder Notarial apostillado.
- Citas: WhatsApp +55 69 98405-2552.
Luego ofrece el contacto.

Ahora responde al usuario con naturalidad. Recuerda: tu meta es convertir al contacto, en 2 o 3 mensajes como mucho.`;

// ========== HOOK: Conversa ==========

function useAthenaChat() {
  const [messages, setMessages] = useState(() => {
    try {
      const saved = localStorage.getItem(ATHENA_STORAGE_KEY);
      if (saved) {
        const parsed = JSON.parse(saved);
        if (Array.isArray(parsed) && parsed.length > 0) return parsed;
      }
    } catch {}
    // Seed greeting imediato, sem race condition
    return [{
      role: 'assistant',
      content: '¡Hola! Soy Athena, asistente virtual de Dr. Roberto. Cuéntame — ¿qué te trae aquí hoy? Puedo ayudarte a encontrar el mejor camino.',
      seeded: true,
    }];
  });
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    try { localStorage.setItem(ATHENA_STORAGE_KEY, JSON.stringify(messages)); } catch {}
  }, [messages]);

  const sendMessage = useCallback(async (userText) => {
    if (!userText.trim() || loading) return;
    const newMsgs = [...messages, { role: 'user', content: userText.trim() }];
    setMessages(newMsgs);
    setLoading(true);

    try {
      // API só aceita {role, content} — filtrar props extras (seeded, handoff, error…)
      const sanitized = newMsgs.map(m => ({ role: m.role, content: m.content }));
      const res = await fetch('/api/chat.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ messages: sanitized, system: SYSTEM_PROMPT }),
      });
      if (!res.ok) throw new Error('API error ' + res.status);
      const data = await res.json();
      const reply = data.text || '';
      const cleaned = reply.trim();

      if (cleaned.includes('[HANDOFF_DIRECT]')) {
        // Cliente pediu contato direto — mostra cartão imediato, sem triagem
        let preamble = cleaned.split('[HANDOFF_DIRECT]')[0].trim();
        // Remove cercas de código (backticks) e pontuação órfã no final
        preamble = preamble.replace(/`+/g, '').replace(/[:\s]+$/, '').trim();
        if (!preamble) preamble = 'Claro, aquí tienes el contacto del Dr. Roberto';
        setMessages(m => [...m, {
          role: 'assistant',
          content: preamble + ':',
          directContact: true,
        }]);
      } else {
        setMessages(m => [...m, { role: 'assistant', content: cleaned }]);
      }
    } catch (err) {
      console.error('[Athena]', err);
      setMessages(m => [...m, {
        role: 'assistant',
        content: 'Disculpa, tuve un pequeño inconveniente al responder. Puedes intentarlo de nuevo, o si prefieres hablar directamente con el Dr. Roberto por WhatsApp, haz clic en el botón de abajo.',
        error: true,
      }]);
    } finally {
      setLoading(false);
    }
  }, [messages, loading]);

  const reset = useCallback(() => {
    const seed = [{
      role: 'assistant',
      content: '¡Hola! Soy Athena, asistente virtual del Dr. Roberto. Cuéntame — ¿qué te trae aquí hoy? Puedo ayudarte a encontrar el mejor camino.',
      seeded: true,
    }];
    setMessages(seed);
    try { localStorage.setItem(ATHENA_STORAGE_KEY, JSON.stringify(seed)); } catch {}
  }, []);

  return { messages, loading, sendMessage, reset };
}

// ========== UI: Bubble (trigger flutuante) ==========

function AthenaBubble({ onClick, hasUnread, palette }) {
  return (
    <button
      onClick={onClick}
      aria-label="Abrir chat con Athena"
      style={{
        position: 'fixed',
        right: 24,
        bottom: 24,
        zIndex: 9998,
        width: 72,
        height: 72,
        borderRadius: '50%',
        background: palette.ink,
        border: `2px solid ${palette.gold}`,
        padding: 0,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        cursor: 'pointer',
        boxShadow: '0 14px 40px -12px rgba(0,0,0,0.45)',
        transition: 'transform .2s ease',
        overflow: 'visible',
      }}
      onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.06)'}
      onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}>
      {/* Pulse ring */}
      <span style={{
        position: 'absolute', inset: -5, borderRadius: '50%',
        border: `2px solid ${palette.gold}`, opacity: 0.5,
        animation: 'athenaPulse 2.5s ease-out infinite',
        pointerEvents: 'none',
      }} />
      {/* Foto */}
      <img
        src="../assets/athena-avatar.png"
        alt=""
        aria-hidden="true"
        style={{
          width: '100%', height: '100%',
          borderRadius: '50%',
          objectFit: 'cover',
          display: 'block',
        }}
      />
      {/* Dot verde "online" */}
      <span style={{
        position: 'absolute',
        right: 2, bottom: 2,
        width: 16, height: 16,
        borderRadius: '50%',
        background: '#4ade80',
        border: `2.5px solid ${palette.ink}`,
      }}/>
      {hasUnread && (
        <span style={{
          position: 'absolute', top: -2, right: -2,
          width: 14, height: 14, borderRadius: '50%',
          background: palette.accent, border: `2px solid ${palette.bg}`,
        }}/>
      )}
      <style>{`
        @keyframes athenaPulse {
          0%   { transform: scale(1);    opacity: 0.55; }
          100% { transform: scale(1.32); opacity: 0; }
        }
      `}</style>
    </button>
  );
}

// ========== UI: Chat Panel ==========

function AthenaPanel({ onClose, palette, serifFamily }) {
  const { messages, loading, sendMessage, reset } = useAthenaChat();
  const [input, setInput] = useState('');
  const scrollerRef = useRef(null);
  const inputRef = useRef(null);
  const greetedRef = useRef(false);

  // Auto-scroll
  useEffect(() => {
    if (scrollerRef.current) {
      scrollerRef.current.scrollTop = scrollerRef.current.scrollHeight;
    }
  }, [messages, loading]);

  // Focus input ao abrir
  useEffect(() => {
    setTimeout(() => inputRef.current?.focus(), 200);
  }, []);

  const submitInput = async () => {
    const text = input.trim();
    if (!text) return;
    setInput('');
    await sendMessage(text);
  };

  const submitSuggestion = async (text) => {
    if (loading) return;
    await sendMessage(text);
  };

  const showSuggestions = messages.length <= 1;

  return (
    <div
      role="dialog"
      aria-label="Chat con Athena"
      style={{
        position: 'fixed',
        right: 24, bottom: 24,
        zIndex: 9999,
        width: 'min(380px, calc(100vw - 32px))',
        height: 'min(580px, calc(100vh - 48px))',
        maxHeight: 'calc(100vh - 48px)',
        background: palette.bgAlt,
        border: `1px solid ${palette.rule}`,
        boxShadow: '0 32px 80px -24px rgba(0,0,0,0.45)',
        display: 'flex',
        flexDirection: 'column',
        fontFamily: 'ui-sans-serif, system-ui, sans-serif',
      }}>
      {/* HEADER */}
      <div style={{
        background: palette.ink,
        color: palette.bg,
        padding: '16px 18px',
        display: 'flex',
        alignItems: 'center',
        gap: 12,
        borderBottom: `1px solid ${palette.gold}`,
      }}>
        <div style={{
          width: 46, height: 46,
          borderRadius: '50%',
          border: `1.5px solid ${palette.gold}`,
          flexShrink: 0,
          overflow: 'hidden',
          position: 'relative',
        }}>
          <img
            src="../assets/athena-avatar.png"
            alt=""
            aria-hidden="true"
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <p style={{
            fontFamily: serifFamily,
            fontSize: 18, fontWeight: 500,
            margin: 0, lineHeight: 1.1,
            color: palette.bg,
          }}>
            Athena
          </p>
          <p style={{
            fontFamily: 'ui-monospace, monospace',
            fontSize: 10,
            textTransform: 'uppercase',
            letterSpacing: '0.18em',
            margin: '3px 0 0',
            color: palette.goldLight,
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <span style={{
              width: 7, height: 7, borderRadius: '50%',
              background: '#4ade80', display: 'inline-block',
            }}/>
            En línea · Respuestas rápidas
          </p>
        </div>
        <button
          onClick={onClose}
          aria-label="Cerrar chat"
          style={{
            background: 'transparent', border: 'none',
            color: palette.bg, cursor: 'pointer',
            padding: 8, marginRight: -6, opacity: 0.8,
          }}>
          <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
            <path d="M4 4 L16 16 M16 4 L4 16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
        </button>
      </div>

      {/* MESSAGES */}
      <div
        ref={scrollerRef}
        style={{
          flex: 1,
          overflowY: 'auto',
          padding: '20px 18px',
          display: 'flex',
          flexDirection: 'column',
          gap: 12,
          background: palette.bgAlt,
        }}>
        {messages.map((m, i) => {
          const next = messages[i + 1];
          // avatar só aparece na última mensagem de um grupo da Athena
          // (quando a próxima é do usuário, ou não há próxima, ou é handoff message)
          const showAvatar = m.role === 'assistant' && (!next || next.role === 'user');
          return (
            <Bubble key={i} msg={m} palette={palette} serifFamily={serifFamily} showAvatar={showAvatar} />
          );
        })}
        {loading && <TypingDots palette={palette} />}
      </div>

      {/* SUGGESTIONS + atalho WhatsApp (antes da primeira troca) */}
      {showSuggestions && (
        <div style={{
          padding: '0 18px 14px',
          background: palette.bgAlt,
          display: 'flex',
          flexDirection: 'column',
          gap: 10,
        }}>
          <div style={{
            display: 'flex',
            flexWrap: 'wrap',
            gap: 6,
          }}>
            {['Herencia en Brasil', 'Bienes raíces en Brasil', 'Divorcio internacional', 'Contrato / disputa'].map(s => (
              <button
                key={s}
                onClick={() => submitSuggestion(s)}
                disabled={loading}
                style={{
                  background: palette.bg,
                  border: `1px solid ${palette.rule}`,
                  color: palette.ink,
                  fontFamily: 'ui-sans-serif, system-ui, sans-serif',
                  fontSize: 12,
                  padding: '7px 12px',
                  cursor: loading ? 'default' : 'pointer',
                  transition: 'all .15s',
                }}
                onMouseEnter={(e) => {
                  if (!loading) {
                    e.currentTarget.style.borderColor = palette.gold;
                    e.currentTarget.style.background = palette.bgAlt;
                  }
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.borderColor = palette.rule;
                  e.currentTarget.style.background = palette.bg;
                }}>
                {s}
              </button>
            ))}
          </div>
          {/* Atalho WhatsApp — junto dos chips, como sugerido */}
          <a
            href={`https://api.whatsapp.com/send?phone=${WHATSAPP_NUMBER}&text=Hola%2C%20Dr.%20Roberto.%20Vi%20su%20sitio%20web%20y%20me%20gustar%C3%ADa%20una%20evaluaci%C3%B3n%20inicial.`}
            target="_blank"
            rel="noopener noreferrer"
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 8,
              padding: '11px 14px',
              background: '#25D366',
              color: '#fff',
              textDecoration: 'none',
              fontFamily: 'ui-sans-serif, system-ui, sans-serif',
              fontSize: 12.5,
              fontWeight: 600,
              textTransform: 'uppercase',
              letterSpacing: '0.14em',
              transition: 'transform .15s, box-shadow .15s',
              boxShadow: '0 4px 12px rgba(37,211,102,0.25)',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.transform = 'translateY(-1px)';
              e.currentTarget.style.boxShadow = '0 6px 16px rgba(37,211,102,0.35)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = 'translateY(0)';
              e.currentTarget.style.boxShadow = '0 4px 12px rgba(37,211,102,0.25)';
            }}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M17.5 14.4c-.3-.1-1.7-.9-2-1s-.5-.1-.7.2-.8 1-.9 1.2-.3.2-.6.1c-.3-.2-1.2-.5-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5s.2-.3.3-.5 0-.4 0-.5-.7-1.6-.9-2.2c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1.1 1.1-1.1 2.6 0 1.5 1.1 3 1.3 3.2s2.2 3.3 5.3 4.7c.7.3 1.3.5 1.8.6.8.2 1.4.2 2 .1.6-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.5-.2zM12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.6 1.4 5.2L2 22l4.9-1.3c1.5.8 3.3 1.3 5.1 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
            </svg>
            Escribir directamente al WhatsApp
          </a>
        </div>
      )}

      {/* INPUT */}
      <form
        onSubmit={(e) => { e.preventDefault(); submitInput(); }}
        style={{
          borderTop: `1px solid ${palette.rule}`,
          padding: '12px 14px',
          display: 'flex',
          gap: 8,
          background: palette.bg,
          alignItems: 'flex-end',
        }}>
        <textarea
          ref={inputRef}
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
              e.preventDefault();
              submitInput();
            }
          }}
          placeholder="Escribe tu mensaje…"
          rows={1}
          disabled={loading}
          style={{
            flex: 1,
            resize: 'none',
            border: 'none',
            outline: 'none',
            fontFamily: 'ui-sans-serif, system-ui, sans-serif',
            fontSize: 14,
            color: palette.ink,
            background: 'transparent',
            padding: '8px 4px',
            maxHeight: 96,
            minHeight: 20,
            lineHeight: 1.4,
          }}
        />
        <button
          type="submit"
          disabled={loading || !input.trim()}
          aria-label="Enviar"
          style={{
            background: input.trim() ? palette.ink : palette.rule,
            color: palette.bg,
            border: 'none',
            width: 38, height: 38,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            cursor: (loading || !input.trim()) ? 'default' : 'pointer',
            transition: 'background .15s',
            flexShrink: 0,
          }}>
          <svg width="16" height="16" viewBox="0 0 20 20" fill="none">
            <path d="M2 10 L18 3 L11 18 L9 11 L2 10 Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" fill="none"/>
          </svg>
        </button>
      </form>

      {/* FOOTER fino */}
      <div style={{
        padding: '6px 14px 8px',
        fontSize: 9.5,
        fontFamily: 'ui-monospace, monospace',
        textTransform: 'uppercase',
        letterSpacing: '0.18em',
        color: palette.muted,
        borderTop: `1px solid ${palette.rule}`,
        background: palette.bg,
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}>
        <span>Atención por IA</span>
        {messages.length > 0 && (
          <button
            onClick={() => { if (confirm('¿Borrar la conversación?')) { reset(); } }}
            style={{
              background: 'transparent', border: 'none',
              color: palette.muted, cursor: 'pointer',
              fontSize: 9.5, fontFamily: 'inherit',
              letterSpacing: 'inherit', textTransform: 'inherit',
              padding: 0,
            }}>
            Borrar
          </button>
        )}
      </div>

      <style>{`
        @keyframes athenaSpin { to { transform: rotate(360deg); } }
        @keyframes athenaFadeIn {
          from { opacity: 0; transform: translateY(6px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}

function Bubble({ msg, palette, serifFamily, showAvatar }) {
  const isUser = msg.role === 'user';
  const avatarSlot = 32;
  return (
    <div style={{
      alignSelf: isUser ? 'flex-end' : 'flex-start',
      maxWidth: '85%',
      display: 'flex',
      alignItems: 'flex-end',
      gap: 8,
    }}>
      {!isUser && (
        <div style={{
          width: avatarSlot, height: avatarSlot,
          flexShrink: 0,
          borderRadius: '50%',
          border: showAvatar ? `1px solid ${palette.gold}` : 'none',
          overflow: 'hidden',
          visibility: showAvatar ? 'visible' : 'hidden',
        }}>
          <img
            src="../assets/athena-avatar.png"
            alt=""
            aria-hidden="true"
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          />
        </div>
      )}
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 8,
        alignItems: 'stretch',
      }}>
        <div style={{
          padding: '10px 14px',
          background: isUser ? palette.ink : palette.bg,
          color: isUser ? palette.bg : palette.ink,
          border: isUser ? 'none' : `1px solid ${palette.rule}`,
          fontSize: 14,
          lineHeight: 1.5,
          whiteSpace: 'pre-wrap',
          wordWrap: 'break-word',
        }}>
          {msg.content}
        </div>
        {msg.directContact && <ContactCard palette={palette} />}
      </div>
    </div>
  );
}

function ContactCard({ palette }) {
  const WA_URL = `https://api.whatsapp.com/send?phone=${WHATSAPP_NUMBER}`;
  const PHONE_DISPLAY = '(69) 98405-2552';
  const PHONE_TEL = '+5569984052552';
  return (
    <div style={{
      background: palette.bg,
      border: `1px solid ${palette.rule}`,
      borderLeft: `3px solid ${palette.gold}`,
      padding: 12,
      display: 'flex',
      flexDirection: 'column',
      gap: 10,
    }}>
      <div style={{
        fontSize: 10,
        textTransform: 'uppercase',
        letterSpacing: '0.18em',
        color: palette.muted,
        fontWeight: 600,
      }}>
        Dr. Roberto Grécia · OAB/RO 7865
      </div>
      <a
        href={`tel:${PHONE_TEL}`}
        style={{
          fontSize: 17,
          fontWeight: 600,
          color: palette.ink,
          textDecoration: 'none',
          letterSpacing: '-0.01em',
        }}>
        {PHONE_DISPLAY}
      </a>
      <div style={{ display: 'flex', gap: 8 }}>
        <a
          href={WA_URL}
          target="_blank"
          rel="noopener noreferrer"
          style={{
            flex: 1,
            padding: '10px 12px',
            background: palette.accent,
            color: '#fff',
            border: 'none',
            fontFamily: 'ui-sans-serif, system-ui, sans-serif',
            fontSize: 12,
            fontWeight: 600,
            textTransform: 'uppercase',
            letterSpacing: '0.12em',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 8,
            textDecoration: 'none',
            cursor: 'pointer',
          }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M17.5 14.4c-.3-.1-1.7-.8-1.9-.9-.3-.1-.4-.1-.6.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.4.1-.5.1-.1.3-.3.4-.5.1-.1.2-.3.3-.4.1-.2 0-.3 0-.5-.1-.1-.6-1.5-.9-2.1-.2-.5-.4-.5-.6-.5h-.5c-.2 0-.5.1-.7.3-.3.3-.9.9-.9 2.2 0 1.3.9 2.5 1.1 2.7.1.2 1.8 2.8 4.5 3.9.6.3 1.1.4 1.5.5.6.2 1.2.2 1.7.1.5-.1 1.6-.7 1.8-1.3.2-.7.2-1.2.2-1.3-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.4 1.3 4.9L2 22l5.3-1.3c1.4.8 3 1.3 4.7 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18c-1.5 0-3-.4-4.2-1.2l-.3-.2-3.1.8.8-3-.2-.3C4.4 15 4 13.5 4 12c0-4.4 3.6-8 8-8s8 3.6 8 8-3.6 8-8 8z"/>
          </svg>
          WhatsApp
        </a>
        <a
          href={`tel:${PHONE_TEL}`}
          style={{
            padding: '10px 14px',
            background: 'transparent',
            color: palette.ink,
            border: `1px solid ${palette.rule}`,
            fontFamily: 'ui-sans-serif, system-ui, sans-serif',
            fontSize: 12,
            fontWeight: 600,
            textTransform: 'uppercase',
            letterSpacing: '0.12em',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 6,
            textDecoration: 'none',
            cursor: 'pointer',
          }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
          </svg>
          Llamar
        </a>
      </div>
    </div>
  );
}

function TypingDots({ palette }) {
  return (
    <div style={{
      alignSelf: 'flex-start',
      display: 'flex',
      alignItems: 'flex-end',
      gap: 8,
    }}>
      <div style={{
        width: 32, height: 32,
        flexShrink: 0,
        borderRadius: '50%',
        border: `1px solid ${palette.gold}`,
        overflow: 'hidden',
      }}>
        <img
          src="../assets/athena-avatar.png"
          alt=""
          aria-hidden="true"
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
        />
      </div>
      <div style={{
        padding: '12px 16px',
        background: palette.bg,
        border: `1px solid ${palette.rule}`,
        display: 'flex',
        gap: 4,
        alignItems: 'center',
      }}>
        {[0, 1, 2].map(i => (
          <span key={i} style={{
            width: 6, height: 6, borderRadius: '50%',
            background: palette.muted,
            animation: `athenaDot 1.2s ease-in-out ${i * 0.15}s infinite`,
          }}/>
        ))}
      </div>
      <style>{`
        @keyframes athenaDot {
          0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
          30% { opacity: 1; transform: translateY(-3px); }
        }
      `}</style>
    </div>
  );
}

// ========== COMPONENTE RAIZ: gerencia open/closed ==========

function AthenaNudge({ onClick, onClose, palette }) {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const t = setTimeout(() => setVisible(true), 20);
    return () => clearTimeout(t);
  }, []);
  return (
      <div
      style={{
        position: 'fixed',
        right: 108,
        bottom: 36,
        zIndex: 9998,
        maxWidth: 240,
        opacity: visible ? 1 : 0,
        transform: visible ? 'translateX(0) scale(1)' : 'translateX(12px) scale(0.92)',
        transition: 'opacity .4s ease, transform .45s cubic-bezier(.2,.8,.2,1)',
      }}>
      <div
        onClick={onClick}
        role="button"
        tabIndex={0}
        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(); } }}
        style={{
          position: 'relative',
          background: palette.bg,
          color: palette.ink,
          border: `1px solid ${palette.rule}`,
          borderRadius: 14,
          padding: '12px 34px 12px 16px',
          boxShadow: '0 14px 40px -14px rgba(0,0,0,0.25)',
          fontFamily: 'ui-sans-serif, system-ui, sans-serif',
          fontSize: 14,
          lineHeight: 1.4,
          cursor: 'pointer',
        }}>
        <div style={{
          fontSize: 11,
          textTransform: 'uppercase',
          letterSpacing: '0.14em',
          color: palette.gold,
          fontWeight: 600,
          marginBottom: 4,
        }}>
          Athena
        </div>
        <div>Hola, puedo ayudarte. ¿Qué te parece?</div>
        {/* Seta apontando pra bolha */}
        <span style={{
          position: 'absolute',
          right: -7,
          bottom: 22,
          width: 13, height: 13,
          background: palette.bg,
          borderRight: `1px solid ${palette.rule}`,
          borderTop: `1px solid ${palette.rule}`,
          transform: 'rotate(45deg)',
        }}/>
      </div>
      {/* Botão fechar */}
      <button
        onClick={(e) => { e.stopPropagation(); onClose(); }}
        aria-label="Cerrar"
        style={{
          position: 'absolute',
          top: 6, right: 6,
          width: 22, height: 22,
          border: 'none',
          background: 'transparent',
          color: palette.muted,
          cursor: 'pointer',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          padding: 0,
          borderRadius: '50%',
        }}
        onMouseEnter={(e) => e.currentTarget.style.background = palette.rule}
        onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
          <line x1="6" y1="6" x2="18" y2="18"/>
          <line x1="6" y1="18" x2="18" y2="6"/>
        </svg>
      </button>
    </div>
  );
}

function AthenaChat({ palette, serifFamily }) {
  const [open, setOpen] = useState(false);
  const [showNudge, setShowNudge] = useState(false);

  // Mostra o nudge ~7s após carregar, uma vez por sessão, se o chat ainda não foi aberto.
  useEffect(() => {
    if (open) return;
    const dismissed = sessionStorage.getItem('athena_nudge_dismissed') === '1';
    if (dismissed) return;
    const t = setTimeout(() => setShowNudge(true), 7000);
    return () => clearTimeout(t);
  }, [open]);

  const dismissNudge = () => {
    setShowNudge(false);
    sessionStorage.setItem('athena_nudge_dismissed', '1');
  };

  const openChat = () => {
    dismissNudge();
    setOpen(true);
  };

  return (
    <>
      {!open && (
        <>
          {showNudge && <AthenaNudge onClick={openChat} onClose={dismissNudge} palette={palette} />}
          <AthenaBubble onClick={openChat} palette={palette} />
        </>
      )}
      {open && <AthenaPanel onClose={() => setOpen(false)} palette={palette} serifFamily={serifFamily} />}
    </>
  );
}

// Expose to global
window.AthenaChat = AthenaChat;
