/* global React */
const { useState: useStateFAQ } = React;

function FAQ() {
  const [open, setOpen] = useStateFAQ(0);
  const items = [
    {
      q: "Vocês são agência?",
      a: "Não. Somos uma assessoria estratégica focada em crescimento, vendas e previsibilidade. Não vendemos serviços soltos — estruturamos a operação completa da clínica.",
    },
    {
      q: "Vocês fazem tráfego pago?",
      a: "Sim, quando faz sentido dentro da estratégia completa. Tráfego é uma das alavancas, não a única. Antes de aumentar o topo do funil, é preciso garantir que o meio e o fim estejam funcionando.",
    },
    {
      q: "Atendem qualquer nicho?",
      a: "Hoje somos especializados em clínicas e consultórios de estética — com foco em harmonização facial e orofacial. Essa especialização nos permite entregar profundidade em vez de superficialidade.",
    },
    {
      q: "Em quanto tempo vejo resultado?",
      a: "Depende do cenário atual e dos gargalos existentes. O diagnóstico estratégico identifica em qual ponto da jornada está o maior travamento — e o impacto é proporcional a isso.",
    },
    {
      q: "Preciso investir em anúncios?",
      a: "Nem sempre. Muitas clínicas crescem primeiro corrigindo estrutura, posicionamento e processo comercial. Anúncios sem estrutura amplificam o problema; anúncios com estrutura amplificam o resultado.",
    },
  ];

  return (
    <section id="faq" style={{ background: "var(--bg-canvas)" }}>
      <div className="wrap-narrow">
        <div className="section-head" style={{ marginBottom: 48 }}>
          <span className="eyebrow-tag" style={{ marginBottom: 20 }}>
            <span className="dot" />
            FAQ
          </span>
          <h2>
            Dúvidas <span className="accent">honestas</span>, respostas diretas.
          </h2>
        </div>

        <div style={{ borderTop: "1px solid var(--border-subtle)" }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={it.q} style={{ borderBottom: "1px solid var(--border-subtle)" }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: "100%",
                    display: "flex", alignItems: "center", justifyContent: "space-between",
                    gap: 24,
                    padding: "28px 0",
                    background: "transparent",
                    border: "none",
                    cursor: "pointer",
                    textAlign: "left",
                  }}
                >
                  <span style={{ display: "flex", alignItems: "center", gap: 20 }}>
                    <span style={{
                      fontFamily: "var(--font-display)",
                      fontSize: 13,
                      color: isOpen ? "var(--brand-violet)" : "var(--fg-tertiary)",
                      letterSpacing: "0.06em",
                      fontVariantNumeric: "tabular-nums",
                      transition: "color 200ms",
                    }}>
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    <span style={{
                      fontFamily: "var(--font-display)",
                      fontWeight: 600,
                      fontSize: 20,
                      lineHeight: 1.3,
                      letterSpacing: "-0.01em",
                      color: "var(--fg-primary)",
                    }}>
                      {it.q}
                    </span>
                  </span>
                  <span aria-hidden="true" style={{
                    width: 36, height: 36, borderRadius: 999,
                    background: isOpen ? "var(--brand-violet)" : "var(--ink-100)",
                    color: isOpen ? "#fff" : "var(--fg-secondary)",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    transition: "background 200ms, transform 200ms",
                    transform: isOpen ? "rotate(45deg)" : "rotate(0deg)",
                    flexShrink: 0,
                  }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                  </span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 280 : 0,
                  overflow: "hidden",
                  transition: "max-height 360ms cubic-bezier(0.2,0,0,1)",
                }}>
                  <div style={{
                    paddingLeft: 53, paddingRight: 60, paddingBottom: 28,
                    color: "var(--fg-secondary)",
                    fontSize: 16, lineHeight: 1.6,
                    maxWidth: 720,
                  }}>
                    {it.a}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;