// Testimonials + FAQ + Final CTA + Footer

const typebotInitScript = document.createElement("script");
typebotInitScript.type = "module";
typebotInitScript.innerHTML = `import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0/dist/web.js'

Typebot.initBubble({
  typebot: "shebytes-jcuqy02",
  theme: {
    button: { backgroundColor: "#1D1D1D" },
    chatWindow: { backgroundColor: "#F8F8F8" },
  },
});
`;
document.body.append(typebotInitScript);


const Testimonials = () => {
  const items = [
  {
    quote: "Em duas semanas já senti a diferença, ter um sistema que te ajuda no agendamenteo dos clientes é outro nível.",
    name: "Carolina Souza",
    biz: "Dentista",
    tag: "+312% reservas/mês"
  },
  {
    quote: "Queria passar autoridade pois trabaho no setor de óleo & gás. Meu site impõe o respeito que eu quero passar para os clientes.",
    name: "Diretoria",
    biz: "Technical Solutions QHSE",
    tag: "B2B · Óleo & Gás"
  },
  {
    quote: "O novo sistema de assinatura da Caixa Bomba virou nosso carro-chefe. Recomendo muito.",
    name: "Livraria Nigra Koro",
    biz: "Livraria independente",
    tag: "Assinatura recorrente"
  },
  {
    quote: "Minha aquarela merecia uma galeria à altura. O site respira como as obras.",
    name: "Pri Cardoso",
    biz: "Artista aquarelista",
    tag: "Portfólio premium"
  }];


  return (
    <section className="section testimonials" id="depoimentos">
      <div className="shell">
        <div className="sec-head">
          <div>
            <div className="eyebrow">
</div>
            <h2>Quem já está<br /><span className="italic">online.</span></h2>
          </div>
          <p className="lede">Negócios diferentes, mesma sensação: trabalho menos cansativo e clientes que confiam e voltam.


          </p>
        </div>

        <div className="tst-grid">
          {items.map((t, i) => <figure key={i} className={"tst-card " + (i === 0 ? "tst-feature" : "")}>
              <div className="tst-quote-mark" aria-hidden="true">“</div>
              <blockquote>{t.quote}</blockquote>
              <figcaption>
                <div className="tst-name">{t.name}</div>
                <div className="tst-biz mono">{t.biz}</div>
              </figcaption>
              <div className="tst-tag mono">{t.tag}</div>
            </figure>
          )}
        </div>
      </div>
    </section>);

};

const FAQ = () => {
  const items = [
  {
    q: "Preciso saber tecnologia para usar?",
    a: "Não. Você fala com a gente por WhatsApp, manda fotos, descreve seus serviços — a gente traduz para o digital. Quem entende de site somos nós; você cuida do que importa: atender bem."
  },
  {
    q: "Funciona no celular?",
    a: "Funciona, e bem. Mais de 70% dos clientes reservam pelo celular, então cada site é desenhado mobile-first. Carregamento rápido, agenda fluida, pagamento em um toque."
  },
  {
    q: "Posso cancelar quando quiser?",
    a: "Sim. Sem fidelidade, sem multa. Se você decidir parar, exportamos seus dados e desligamos. Mas raramente alguém pede para sair — geralmente pedem para crescer."
  },
  {
    q: "Quanto tempo leva para ficar pronto?",
    a: "Para o Plano Essência, 48 horas em média a partir da nossa conversa inicial. Projetos sob medida levam de 2 a 6 semanas, dependendo da complexidade."
  },
  {
    q: "Vocês fazem em outros idiomas?",
    a: "Sim. Todos os sites podem nascer multilíngue (PT, EN, ES) com SEO otimizado para cada idioma. Ideal para quem atende turistas ou clientes internacionais."
  },
  {
    q: "E se eu já tiver um site?",
    a: "Melhor ainda. A gente avalia o que dá para aproveitar, migra o que vale a pena e moderniza o resto. Você não perde histórico nem clientela."
  }];

  const [open, setOpen] = React.useState(0);

  return (
    <section className="section faq" id="faq">
      <div className="shell">
        <div className="sec-head">
          <div>
            <div className="eyebrow">
</div>
            <h2>Qual sua dúvida para em 2026<br /><span className="italic">você ainda não ter um site?</span></h2>
          </div>
          <p className="lede">Se sua dúvida não estiver aqui, chama no WhatsApp, a gente responde em minutos.


          </p>
        </div>

        <div className="faq-list">
          {items.map((it, i) => <div key={i} className={"faq-item " + (open === i ? "open" : "")}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="mono faq-n">{String(i + 1).padStart(2, "0")}</span>
                <span className="faq-q-text">{it.q}</span>
                <span className="faq-toggle" aria-hidden="true">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                    <path d="M5 12h14M12 5v14" strokeLinecap="round" />
                  </svg>
                </span>
              </button>
              <div className="faq-a"><div className="faq-a-inner">{it.a}</div></div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const FinalCTA = () =>
<section className="section final-cta" id="contato">
    <div className="shell">
      <div className="fcta-card" style={{ backgroundColor: "rgb(13, 0, 0)" }}>
        <div className="fcta-bg" aria-hidden="true">
          <div className="fcta-bg-grid" />
          <div className="fcta-bg-orb" />
        </div>
        <div className="fcta-content">
          <div className="eyebrow" style={{ color: "var(--clay-soft)" }}>seu próximo cliente está te procurando</div>
          <h2 className="fcta-h2">
            Seu próximo<br />
            <span className="italic">cliente</span> está<br />
            te procurando.
          </h2>
          <p className="fcta-sub">Você não dá a devida importância ao site até ver seu concorrente brilhando na internet. Não deixe a imagem da sua empresa para depois.



        </p>
          <div className="fcta-actions">
            <a className="btn btn-whats" href="#contato">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M12 2C6.48 2 2 6.48 2 12c0 1.85.5 3.58 1.38 5.07L2 22l5.07-1.34A9.94 9.94 0 0 0 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2zm5.27 14.21c-.22.62-1.27 1.17-1.78 1.21-.46.04-.99.21-3.37-.7-2.83-1.09-4.65-3.91-4.79-4.1-.14-.18-1.14-1.51-1.14-2.88 0-1.37.72-2.04.97-2.32.26-.28.56-.35.75-.35.18 0 .37 0 .53.01.18.01.42-.07.66.5.25.59.83 2.04.91 2.19.07.15.12.32.02.51-.1.18-.15.3-.3.46-.15.16-.31.36-.45.49-.15.13-.3.28-.13.55.17.27.77 1.26 1.65 2.05 1.14 1.02 2.09 1.33 2.36 1.48.27.15.43.13.59-.07.16-.2.68-.79.86-1.06.18-.27.36-.22.61-.13.25.09 1.59.75 1.86.88.27.13.45.2.52.31.07.11.07.64-.15 1.26z" />
              </svg>
              Falar no WhatsApp
            </a>
            <a className="btn btn-ghost fcta-ghost" href="/form.html">
              Preencher formulário
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M5 12h14M13 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </a>
          </div>
          <div className="fcta-trust">
            <span><strong>20 min</strong> de conversa</span>
            <span><strong>3 dias</strong> para proposta</span>
            <span><strong>48 h</strong> para estar no ar</span>
          </div>
        </div>
      </div>
    </div>
  </section>;


const Footer = () =>
<footer className="sb-footer">
    <div className="shell">
      <div className="ft-top">
        <div className="ft-brand">
          <a href="#" className="sb-mark" aria-label="SheBytes">
            <span className="sb-mark-glyph">
              <svg viewBox="0 0 24 24" width="24" height="24" fill="none">
                <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.4" />
                <path d="M12 4 L12 12 L18.5 14.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
              </svg>
            </span>
            <span className="sb-mark-text">she<em>bytes</em><span className="sb-mark-dot">.</span></span>
          </a>
          <p className="ft-tagline">
            Sites institucionais, lojas e apps.<br />
            
          </p>
        </div>

        <div className="ft-cols">
          <div className="ft-col">
            <div className="ft-col-head mono">Navegar</div>
            <a href="#para-quem">Para quem</a>
            <a href="#clientes">Clientes</a>
            <a href="#como-funciona">Como funciona</a>
            <a href="#planos">Planos</a>
            <a href="#faq">Perguntas</a>
          </div>
          <div className="ft-col">
            <div className="ft-col-head mono">Empresa</div>
            <a href="#sobre">Sobre</a>
            <a href="#planos">Orçamento sob medida</a>
            <a href="#portfolio">Clientes</a>
          </div>
          <div className="ft-col">
            <div className="ft-col-head mono">Contato</div>
            <a href="https://wa.me/5522992633338?text=Ol%C3%A1,%20quero%20um%20site%20profissional">+55 22992633338</a>
            <a href="mailto:hello@shebytes.me">hello@shebytes.me</a>
            <a href="https://www.instagram.com/shebytesme/">@shebytesme</a>
            <a href="#">São Paulo · Rio de Janeiro · Miami</a>
          </div>
          <div className="ft-col">
            <div className="ft-col-head mono">Idioma</div>
            <a href="#" className="ft-lang on">Português</a>
            <a href="#" className="ft-lang">English</a>
            <a href="#" className="ft-lang">Español</a>
          </div>
        </div>
      </div>

      <div className="ft-big" aria-hidden="true">
        <span>she</span>
        <span className="italic">bytes</span>
        <span>.</span>
      </div>

      <div className="ft-bottom">
        <span className="mono">© 2026 SheBytes — todos os direitos reservados</span>
        <div className="ft-legal">
          <a href="#">Termos</a>
          <a href="#">Privacidade</a>
          <a href="#">Política de cookies</a>
        </div>
      </div>
    </div>
  </footer>;


window.Testimonials = Testimonials;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;