function Objecoes() {
  const [open, setOpen] = useState(0);
  const qs = [
    {
      q: 'Isso é só design bonito com nome pomposo?',
      a: 'Não. Design é a última etapa, e a menos importante em valor financeiro. O que você contrata aqui é a cadeia de decisão que vai antes — pesquisa, leitura de concorrência, posicionamento, voz de consumidor. Quem quer só estética, contrata qualquer agência. Geralmente sai mais barato e, para o problema errado, dá no mesmo resultado.',
    },
    {
      q: 'Vale o investimento pra uma marca que ainda é pequena?',
      a: 'Vale mais, não menos. Marca pequena não tem caixa para errar duas vezes. O custo de chutar posicionamento e descobrir em 18 meses que estava atirando no alvo errado é maior do que o valor de contratar direção logo no começo. Se a operação for muito inicial, existe um escopo reduzido focado só nas três primeiras etapas.',
    },
    {
      q: 'Funciona pra qualquer nicho?',
      a: 'Funciona para qualquer produto físico em mercado razoavelmente competitivo. Não funciona para segmentos onde a decisão de compra é 100% regulada por preço (commodity pura) ou onde não existe concorrência suficiente para mapear. Na primeira conversa, se o caso não se encaixar, você é informado diretamente.',
    },
    {
      q: 'Quanto tempo leva?',
      a: 'Em média, 3 semanas a depender do projeto.',
    },
    {
      q: 'E se eu já tiver feito um rebranding recente?',
      a: 'Melhor ainda. Rebranding sem direção costuma ser um sintoma, não uma solução. O processo vai partir do que existe — rótulo, narrativa, posicionamento atual — e cruzar com leitura de mercado e concorrência. O resultado pode ser: mantemos o visual e mudamos a narrativa, ou refazemos tudo, ou chegamos à conclusão de que só o preço está errado.',
    },
    {
      q: 'Como é cobrado?',
      a: 'Projeto fechado, com escopo documentado e etapas datadas. Sem contrato aberto, sem retainer mensal obrigatório. Se houver continuidade depois, é negociada separadamente. A primeira conversa (diagnóstico) é gratuita e tem valor de mercado em si — você sai com pelo menos minha visão inicial sobre seu produto.',
    },
  ];

  return (
    <Section id="objecoes" style={{ borderTop: '1px solid var(--line-soft)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 60, marginBottom: 70 }} className="obj-head">
          <Label n="08">Antes que você pergunte</Label>
          <MaskLines
            tag="h2"
            className="serif"
            style={{ fontSize: 'clamp(38px, 5.5vw, 76px)', lineHeight: 0.98, letterSpacing: '-0.03em' }}
            lines={[
              <>As dúvidas que</>,
              <><em className="italic">travam</em> sua decisão.</>,
            ]}
          />
        </div>

        <div style={{ borderTop: '1px solid var(--line-soft)' }}>
          {qs.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom: '1px solid var(--line-soft)' }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  className="obj-row"
                  style={{
                    width: '100%', textAlign: 'left',
                    display: 'grid', gridTemplateColumns: '60px 1fr 40px', gap: 20,
                    padding: '28px 0', alignItems: 'center',
                  }}
                >
                  <span className="mono obj-num" style={{ color: isOpen ? 'var(--accent)' : 'var(--fg-mute)' }}>0{i + 1}</span>
                  <span className="serif" style={{ fontSize: 'clamp(18px, 2.4vw, 30px)', letterSpacing: '-0.015em', lineHeight: 1.2 }}>
                    {item.q}
                  </span>
                  <span style={{
                    width: 28, height: 28, borderRadius: 999, border: '1px solid var(--line)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    transition: 'transform .4s, background .3s, border-color .3s',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                    borderColor: isOpen ? 'var(--accent)' : 'var(--line)',
                  }}>
                    <svg width="12" height="12" viewBox="0 0 12 12">
                      <path d="M6 2V10M2 6H10" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
                    </svg>
                  </span>
                </button>
                <div className="obj-row" style={{
                  display: 'grid', gridTemplateColumns: '60px 1fr 40px', gap: 20,
                  overflow: 'hidden',
                  maxHeight: isOpen ? 400 : 0,
                  opacity: isOpen ? 1 : 0,
                  transition: 'max-height .6s cubic-bezier(.2,.7,.2,1), opacity .5s, padding .4s',
                  paddingBottom: isOpen ? 32 : 0,
                }}>
                  <div className="obj-spacer" />
                  <p className="obj-answer" style={{ fontSize: 16.5, color: 'var(--fg-dim)', lineHeight: 1.6, maxWidth: 720 }}>
                    {item.a}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) {
          .obj-head { grid-template-columns: 1fr !important; gap: 20px !important; }
          .obj-row  { grid-template-columns: 1fr 40px !important; gap: 12px !important; }
          .obj-num  { display: none !important; }
          .obj-spacer { display: none !important; }
        }
        @media (max-width: 480px) {
          .obj-row  { padding: 20px 0 !important; gap: 10px !important; }
          .obj-answer { font-size: 15px !important; }
        }
      `}</style>
    </Section>
  );
}

window.Objecoes = Objecoes;