// FAQ + Floating WhatsApp button
const { useState: useStateFAQ } = React;

const FAQ_ITEMS = [
  {
    q: '¿Necesito viajar a Brasil?',
    a: 'En la mayoría de los casos, no. Con un Poder Notarial firmado y apostillado en su país, puedo representarle ante tribunales brasileños, bancos, registros y notarías sin que usted tenga que viajar. Le indicaré exactamente qué documentos preparar y dónde apostillarlos.',
  },
  {
    q: '¿Qué es un Poder Notarial y cómo lo firmo desde el extranjero?',
    o: 'Un Poder Notarial (Procuração) es el documento que autoriza al abogado a actuar por usted. Lo redacto en portugués con traducción, usted lo firma ante un notario en su país y le coloca la Apostilla de La Haya. Acepto los originales por correo y comienzo a actuar de inmediato.',
    a: 'Un Poder Notarial (Procuração) es el documento que autoriza al abogado a actuar por usted. Lo redacto en portugués con traducción, usted lo firma ante un notario en su país y le coloca la Apostilla de La Haya. Recibo los originales por correo y empiezo a actuar de inmediato.',
  },
  {
    q: '¿En qué idiomas trabajan?',
    a: 'Atiendo en español, inglés y portugués. Toda la comunicación con usted — reuniones, correos, informes, contratos — se hace en su idioma. Los documentos oficiales brasileños se le entregan con traducción y resumen claro.',
  },
  {
    q: '¿Cómo se cobran los honorarios?',
    a: 'Cumplimos plenamente la tabla mínima de la OAB/RO (Colegio de Abogados de Brasil). Después de revisar su caso, presento una propuesta escrita clara — honorario fijo, éxito o mixto, según el tipo de asunto — y todo se firma antes de iniciar cualquier trabajo. Acepto pagos internacionales por transferencia.',
  },
  {
    q: '¿Cuánto tarda un caso típico?',
    a: 'Depende del tipo de asunto. Un inventario o partición puede resolverse en 6 a 18 meses. Una revisión bancaria, entre 12 y 24 meses en primera instancia. Un divorcio consensual, semanas. En la primera reunión le doy un plazo realista basado en los tribunales involucrados.',
  },
  {
    q: '¿Mi caso es confidencial?',
    a: 'Absolutamente. La confidencialidad abogado–cliente es un deber ético y está protegida por la ley brasileña. Nada de lo que comparta se divulga a terceros — ni siquiera el hecho de ser cliente — sin su autorización expresa.',
  },
  {
    q: '¿Pueden garantizar que ganaré el caso?',
    a: 'No. Ningún abogado serio promete resultados — está prohibido por la OAB y es deshonesto con el cliente. Lo que ofrezco es trabajo técnico riguroso, estrategia basada en una revisión cuidadosa de los documentos y comunicación transparente en su idioma en cada etapa.',
  },
];

function FAQ({ palette, serifFamily }) {
  const [open, setOpen] = useStateFAQ(0);
  return (
    <section id="faq" className="px-6 md:px-12 py-24" style={{ background: palette.bg }}>
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
        <Reveal variant="left" className="lg:col-span-4 lg:sticky lg:top-8 self-start">
          <p className="font-mono text-[10px] uppercase tracking-[0.3em] mb-4" style={{ color: palette.gold }}>
            № 05 — Preguntas frecuentes
          </p>
          <h2 className="font-serif" style={{
            fontFamily: serifFamily, color: palette.ink,
            fontSize: 'clamp(32px, 3.6vw, 48px)', fontWeight: 500, lineHeight: 1.05,
          }}>
            Antes de que <span style={{ fontStyle: 'italic', color: palette.accent }}>preguntes.</span>
          </h2>
          <div className="mt-6" style={{ width: 60, borderTop: `2px solid ${palette.gold}` }} />
          <p className="font-sans text-[14px] leading-[1.7] mt-6 max-w-sm" style={{ color: palette.muted }}>
            Las preguntas que más escuchamos antes de la primera conversación.
            Si la tuya no está aquí, envíala por WhatsApp — respondo personalmente.
          </p>
        </Reveal>

        <div className="lg:col-span-8">
          <ul style={{ borderTop: `1px solid ${palette.rule}` }}>
            {FAQ_ITEMS.map((item, i) => {
              const isOpen = open === i;
              return (
                <li key={i} style={{ borderBottom: `1px solid ${palette.rule}` }}>
                  <button
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    className="w-full text-left py-6 flex items-start justify-between gap-6 group"
                    aria-expanded={isOpen}>
                    <div className="flex items-start gap-5">
                      <span className="font-mono text-[11px] uppercase tracking-[0.22em] mt-1.5"
                            style={{ color: palette.gold, minWidth: 24 }}>
                        {String(i + 1).padStart(2, '0')}
                      </span>
                      <h3 className="font-serif text-[20px] md:text-[24px] leading-tight"
                          style={{ fontFamily: serifFamily, color: palette.ink, fontWeight: 500 }}>
                        {item.q}
                      </h3>
                    </div>
                    <span
                      className="font-serif text-[28px] leading-none mt-1 transition-transform"
                      style={{
                        fontFamily: serifFamily,
                        color: palette.accent,
                        transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                        transition: 'transform 400ms cubic-bezier(0.22, 1, 0.36, 1)',
                      }}>
                      +
                    </span>
                  </button>
                  <div
                    style={{
                      maxHeight: isOpen ? '400px' : '0px',
                      opacity: isOpen ? 1 : 0,
                      overflow: 'hidden',
                      transition: 'max-height 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 400ms ease',
                    }}>
                    <p className="font-sans text-[15px] leading-[1.75] pb-7 pr-12 pl-12"
                       style={{ color: palette.muted }}>
                      {item.a}
                    </p>
                  </div>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </section>
  );
}

function WhatsAppFloat({ palette }) {
  const [visible, setVisibleWA] = useStateFAQ(false);
  React.useEffect(() => {
    const onScroll = () => setVisibleWA(window.scrollY > 600);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <a
      href="https://api.whatsapp.com/send?phone=5569984052552&text=Hola%2C%20Dr.%20Roberto.%20Vi%20su%20sitio%20web."
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Escribir por WhatsApp"
      className="wa-float"
      style={{
        opacity: visible ? 1 : 0,
        pointerEvents: visible ? 'auto' : 'none',
        transform: visible ? 'translateY(0) scale(1)' : 'translateY(20px) scale(0.85)',
        transition: 'opacity 400ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1)',
      }}>
      <span className="wa-float-pulse" />
      <svg width="30" height="30" 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>
    </a>
  );
}

window.FAQ = FAQ;
window.WhatsAppFloat = WhatsAppFloat;