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

const FAQ_ITEMS = [
  {
    q: 'How does the first consultation work?',
    a: 'You describe the case by WhatsApp or email and send the main documents (contracts, court notices, marriage or property records). I personally review them and respond with an honest diagnosis on legal viability, possible paths and fees — in writing, before any work begins. No long form, no signup.',
  },
  {
    q: 'Do I need to travel to Brazil?',
    a: 'In most cases, no. A notarized and apostilled Power of Attorney lets me act on your behalf in court hearings, banks, registries (cartórios) and government offices. I will only ask you to come to Brazil if a specific procedure absolutely requires your physical presence — which is rare.',
  },
  {
    q: 'How is the Power of Attorney prepared?',
    a: 'You sign it before a notary in your country, then have it apostilled (Hague Convention) or legalized at the Brazilian consulate. I send you a Portuguese template tailored to your case. We also need a sworn translation in Brazil — I handle that here.',
  },
  {
    q: 'How much are the fees?',
    a: 'Fees follow the Brazilian Bar (OAB) minimum schedule. After reviewing your case I send a clear written proposal — flat fee, contingency, or hybrid, depending on the matter. International transfers in USD or EUR are accepted. Everything agreed before work begins.',
  },
  {
    q: 'Will Brazilian courts recognize my foreign divorce or judgment?',
    a: 'Foreign judgments must be homologated by the Brazilian Superior Court of Justice (STJ) before they can be enforced. I handle the full procedure — document preparation, sworn translations, apostille, and the STJ filing. Same applies to foreign arbitral awards under the New York Convention.',
  },
  {
    q: 'In what languages can we communicate?',
    a: 'English, Spanish and Portuguese — directly with me. Court filings, contracts and official translations are produced in Portuguese as required by Brazilian law, but you receive plain-English summaries of every step. No surprises.',
  },
  {
    q: 'Can you guarantee I will win the case?',
    a: 'No. No serious lawyer promises results — it is prohibited by the Brazilian Bar (OAB) and dishonest with the client. What I offer is high-quality technical work, strategy built on rigorous document review, and transparent communication at every stage.',
  },
];

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 — Frequently asked
          </p>
          <h2 className="font-serif" style={{
            fontFamily: serifFamily, color: palette.ink,
            fontSize: 'clamp(32px, 3.6vw, 48px)', fontWeight: 500, lineHeight: 1.05,
          }}>
            Before you <span style={{ fontStyle: 'italic', color: palette.accent }}>ask.</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 }}>
            The questions we hear most before the first conversation.
            If yours is not here, send it on WhatsApp — I reply personally.
          </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=Hello%2C%20Dr.%20Roberto.%20I%20came%20from%20your%20website."
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Message on 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;