// sections-bot.jsx — Objections, Guarantee, Urgency, FAQ, CTA Final, Footer

// ---------- OBJECTIONS (blocks com ícones) ----------
const ObjIcons = {
  value: (
    <svg viewBox="0 0 32 32" fill="none">
      <circle cx="16" cy="16" r="13" stroke="currentColor" strokeWidth="1.4"/>
      <path d="M16 8v16M19.5 11.5h-5a2.5 2.5 0 1 0 0 5h3a2.5 2.5 0 1 1 0 5h-5.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  shield: (
    <svg viewBox="0 0 32 32" fill="none">
      <path d="M16 4l11 4v8c0 7-5 11-11 12-6-1-11-5-11-12V8l11-4z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
      <path d="M11 16l3.5 3.5L21 13" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  clock: (
    <svg viewBox="0 0 32 32" fill="none">
      <circle cx="16" cy="16" r="12" stroke="currentColor" strokeWidth="1.4"/>
      <path d="M16 9v7l5 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  target: (
    <svg viewBox="0 0 32 32" fill="none">
      <circle cx="16" cy="16" r="12" stroke="currentColor" strokeWidth="1.4"/>
      <circle cx="16" cy="16" r="7" stroke="currentColor" strokeWidth="1.4"/>
      <circle cx="16" cy="16" r="2.5" fill="currentColor"/>
    </svg>
  ),
  hourglass: (
    <svg viewBox="0 0 32 32" fill="none">
      <path d="M9 4h14M9 28h14M11 4v4c0 4 5 6 5 8 0 2-5 4-5 8v4M21 4v4c0 4-5 6-5 8 0 2 5 4 5 8v4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
};

const objections = [
  { n: "01", icon: ObjIcons.value, tag: "Valor percebido", title: "\"Parece caro pra um PDF.\"",
    answer: "Se fosse só um PDF, também acharia. Mas são quatro entregáveis feitos por mim, sobre o seu caso, que você aplica no dia que receber. Um rebranding completo com a minha mão custa a partir de R$10.000. O Ponto Zero é o diagnóstico que direciona tudo isso por uma fração do valor.",
    note: "Garantia de 7 dias · sem pergunta difícil" },
  { n: "02", icon: ObjIcons.shield, tag: "Garantia", title: "\"E se eu não gostar do que receber?\"",
    answer: "Sete dias de garantia integral. Me chama, devolvo. Sem formulário de cancelamento, sem pergunta difícil, sem tentativa de te convencer a ficar.",
    note: "7 dias · sem formulário" },
  { n: "03", icon: ObjIcons.clock, tag: "Conveniência", title: "\"Não tenho tempo agora.\"",
    answer: "O processo não tem reunião. Você preenche o formulário no seu ritmo, me manda, e em até 72 horas recebe tudo pronto no WhatsApp. Não precisa marcar nada, não precisa travar horário.",
    note: "72h · entrega no WhatsApp" },
  { n: "04", icon: ObjIcons.target, tag: "Genérico vs. específico", title: "\"Já tentei coisas que não funcionaram.\"",
    answer: "Quase tudo que não funciona é genérico — curso pra todo chef do Brasil, template que serve pra qualquer nicho. O Ponto Zero é feito a partir do seu caso específico. A análise é do seu negócio, não de um perfil médio.",
    note: "Feito sobre o seu caso" },
  { n: "05", icon: ObjIcons.hourglass, tag: "Urgência real", title: "\"Preciso pensar mais.\"",
    answer: "Legítimo. Mas enquanto você pensa, o cliente que poderia ser seu está sendo atendido por outro chef — normalmente com menos técnica, mas com comunicação mais clara. Me chama no direct com a palavra PONTO e te mando a primeira pergunta do diagnóstico gratuitamente.",
    note: "Ou manda PONTO no direct primeiro" },
];

function Objections() {
  const headRef = useStaggerReveal(".stagger");
  const gridRef = useStaggerReveal(".stagger-item");
  return (
    <section className="section-pad objections" id="objecoes" data-screen-label="08 Objeções">
      <div className="container">
        <div className="obj-header" ref={headRef}>
          <span className="kicker stagger reveal">Antes de comprar</span>
          <h2 className="section-title stagger reveal">
            Porque isso é<br/><em>para você:</em>
          </h2>
        </div>

        <div className="obj-grid" ref={gridRef}>
          {objections.map((o) => (
            <article className="obj-card stagger-item reveal" key={o.n}>
              <div className="obj-card-top">
                <div className="obj-card-icon">{o.icon}</div>
                <div className="obj-card-num">{o.n}</div>
              </div>
              <div className="obj-card-tag">{o.tag}</div>
              <h3 className="obj-card-title">{o.title}</h3>
              <p className="obj-card-text">{o.answer}</p>
              <div className="obj-card-note">
                <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
                  <path d="M3 8l3.5 3.5L13 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
                {o.note}
              </div>
            </article>
          ))}
        </div>

        <div className="reveal" ref={useReveal()} style={{marginTop: 64, display: "flex", justifyContent: "center"}}>
          <a href="#oferta" data-checkout className="btn btn-primary btn-large">
            Quero meu diagnóstico <Arrow />
          </a>
        </div>
      </div>
    </section>
  );
}

// ---------- GUARANTEE ----------
function Guarantee() {
  const ref = useStaggerReveal(".stagger");
  return (
    <section className="section-pad guarantee" data-screen-label="09 Garantia">
      <div className="container">
        <div className="guarantee-grid" ref={ref}>
          <div className="guarantee-seal stagger reveal">
            <svg className="ring" viewBox="0 0 200 200">
              <defs>
                <path id="seal-circle" d="M 100,100 m -82,0 a 82,82 0 1,1 164,0 a 82,82 0 1,1 -164,0" />
              </defs>
              <text>
                <textPath href="#seal-circle" startOffset="0">
                  GARANTIA INTEGRAL · DEVOLUÇÃO TOTAL · 7 DIAS · GARANTIA INTEGRAL · DEVOLUÇÃO TOTAL · 7 DIAS ·
                </textPath>
              </text>
            </svg>
            <div className="inner">
              <span className="big-seven">7</span>
            </div>
          </div>
          <div className="guarantee-content">
            <span className="kicker stagger reveal">Garantia</span>
            <h2 className="section-title stagger reveal">
              7 dias de <em>garantia</em> integral.
            </h2>
            <p className="stagger reveal">
              Você tem 7 dias depois de receber o diagnóstico pra decidir se valeu.
              Se sentir que não valeu — me manda uma mensagem e devolvo o valor integral.
              Não vou pedir explicação, não vou tentar te reter, não vou te mandar pra
              um formulário. <strong style={{color: "var(--text-primary)"}}>Quem entrega com
              honestidade não precisa esconder o botão de devolução atrás de burocracia.</strong>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- URGENCY ----------
function Urgency() {
  const ref = useStaggerReveal(".stagger");
  return (
    <section className="section-pad urgency" data-screen-label="10 Urgência">
      <div className="container">
        <div className="urgency-inner" ref={ref}>
          <span className="kicker stagger reveal">Vagas semanais</span>
          <h2 className="section-title stagger reveal" style={{textAlign: "center"}}>
            Atendo <em>no máximo</em><br/>8 por semana.
          </h2>

          <p className="section-lede stagger reveal" style={{textAlign: "center", margin: "32px auto 0", maxWidth: 640}}>
            Cada diagnóstico é feito por mim, do zero. Sem automação, sem equipe,
            sem template preenchido. Quando as vagas fecham, a próxima abertura é
            na segunda-feira seguinte.
          </p>

          <div className="stagger reveal" style={{marginTop: 40}}>
            <a href="#oferta" data-checkout className="btn btn-primary btn-large">
              Quero meu diagnóstico <Arrow />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- FAQ ----------
const faqs = [
  { q: "Quanto tempo depois da compra eu recebo o formulário?",
    a: "Na hora que sua compra for processada, você terá acesso à plataforma com link do formulário. Depois que você preenche e me manda, você recebe em 72 horas tudo no seu WhatsApp." },
  { q: "Preciso entender de marketing para responder o formulário?",
    a: "Não. As perguntas são sobre o seu negócio, seus clientes e como você se comunica hoje. Você responde com o que sabe. O trabalho analítico é meu." },
  { q: "Serve pra quem está começando agora?",
    a: "Se você ainda não tem cliente, o diagnóstico pode não ter insumo suficiente. Nesse caso, me chama antes no direct — te digo se faz sentido ou se é melhor esperar." },
  { q: "Serve para chef que já tem clientela e quer subir o nível?",
    a: "Esse é exatamente o perfil para quem o Ponto Zero foi pensado." },
  { q: "Isso substitui um rebranding completo?",
    a: "Não. O Ponto Zero é o mapa. O rebranding completo é a obra. Um não substitui o outro — o primeiro direciona o segundo." },
  { q: "Como funciona a sessão de dúvidas?",
    a: "Depois que você receber o PDF completo, a gente agenda uma reunião de 30 a 40 minutos. Nela eu passo por tudo que foi entregue — diagnóstico, plano de ação, análise de perfil e bio — e te dou o direcionamento completo de como aplicar cada parte no seu caso específico. Você não precisa descobrir sozinho o que fazer com o que recebeu. Saindo da reunião, o próximo passo já está claro e vai depender exclusivamente de você para executar. Vou estar disponível por 30 dias para dar o direcionamento e acompanhamento da nova estratégia." },
  { q: "Posso pagar parcelado?",
    a: "Em até 12× no cartão pela Hubla. As taxas variam conforme o número de parcelas." },
  { q: "Como tiro dúvidas antes de comprar?",
    a: "Me chama no direct do Instagram @omarcusribeiro_ com a palavra PONTO. Eu respondo pessoalmente." },
];

function FaqItem({ f, isOpen, onClick }) {
  const innerRef = useRef(null);
  const [maxH, setMaxH] = useState(0);
  useEffect(() => {
    const measure = () => {
      if (innerRef.current) setMaxH(innerRef.current.scrollHeight);
    };
    measure();
    window.addEventListener("resize", measure);
    return () => window.removeEventListener("resize", measure);
  }, []);
  return (
    <div className={`faq-item ${isOpen ? "open" : ""}`}>
      <button className="faq-toggle" onClick={onClick}>
        <span className="q">{f.q}</span>
        <span className="plus">+</span>
      </button>
      <div className="faq-content" style={{ maxHeight: isOpen ? maxH + "px" : "0px" }}>
        <div className="faq-content-inner" ref={innerRef}>{f.a}</div>
      </div>
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = useState(-1);
  const ref = useStaggerReveal(".stagger");
  return (
    <section className="section-pad" id="faq" data-screen-label="11 FAQ">
      <div className="container">
        <div className="faq-grid" ref={ref}>
          <div className="faq-head">
            <span className="kicker stagger reveal">FAQ</span>
            <h2 className="section-title stagger reveal">
              Dúvidas<br/><em>frequentes.</em>
            </h2>
            <p className="section-lede stagger reveal">
              As respostas mais importantes antes de você comprar, sem rodeio.
            </p>
          </div>

          <div className="faq-list stagger reveal">
            {faqs.map((f, i) => (
              <FaqItem key={i} f={f} isOpen={open === i} onClick={() => setOpen(open === i ? -1 : i)} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- CTA FINAL ----------
function CtaFinal() {
  const ref = useStaggerReveal(".stagger");
  return (
    <section className="section-pad cta-final" data-screen-label="12 CTA Final">
      <div className="container">
        <div className="cta-final-inner" ref={ref}>
          <span className="kicker stagger reveal" style={{justifyContent: "center"}}>Próximo passo</span>
          <h2 className="stagger reveal">
            Em 72 horas, você sabe<br/>o que está <em>no caminho.</em>
          </h2>
          <p className="stagger reveal">
            Um mapa claro do que está travando sua percepção de valor, com bio nova
            e plano pronto para aplicar.
          </p>
          <div className="stagger reveal">
            <a href="#" data-checkout className="btn btn-primary btn-large">
              Quero meu diagnóstico — R$497 <Arrow />
            </a>
          </div>
          <div className="stagger reveal" style={{marginTop: 24, fontSize: 13, color: "var(--text-muted)", fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.14em"}}>
            7 dias garantia · 12× sem juros* · entrega no WhatsApp
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- FOOTER ----------
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-logo-big">
              Ponto<br/>Zero<em>.</em>
            </div>
            <div className="footer-tagline">
              Marcus Ribeiro · Estratégia de marca para personal chefs
            </div>
          </div>
          <div className="footer-col">
            <h4>Navegação</h4>
            <ul>
              <li><a href="#dor">Diagnóstico</a></li>
              <li><a href="#solucao">Método</a></li>
              <li><a href="#oferta">Oferta</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Contato</h4>
            <ul>
              <li><a href="https://instagram.com/omarcusribeiro_">@omarcusribeiro_</a></li>
              <li><a href="#">Direct · palavra PONTO</a></li>
              <li><a href="#">WhatsApp</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Marcus Ribeiro · Ponto Zero</span>
          <span>Hubla · 12× no cartão</span>
          <span>v.01 · 2026</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Objections, Guarantee, Urgency, FAQ, CtaFinal, Footer });