/* global React, Reveal, MagneticCta, ArrowGlyph, Counter */
const { useState: useState3 } = React;

/* ============================================================
   SOCIAL PROOF
   ============================================================ */
function Proof() {
  const cases = [
    { name: "Lazaretti Carnes", segment: "Açougue premium · Joinville/SC", delta: "+312%", deltaLabel: "tráfego orgânico", url: "https://lazaretticarnes.com.br", host: "lazaretticarnes.com.br" },
    { name: "Abrapet Talks", segment: "Eventos · Setor pet", delta: "+58", deltaLabel: "leads / mês", url: "https://abrapetalks.com.br", host: "abrapetalks.com.br" },
    { name: "Zago Bikes", segment: "Bike shop · Joinville/SC", delta: "1ª pos.", deltaLabel: "no Google local", url: "https://zagobikes.com.br", host: "zagobikes.com.br" },
    { name: "SB Magro", segment: "Saúde & estética · SC", delta: "+184%", deltaLabel: "agendamentos online", url: "https://sbmagro.com.br", host: "sbmagro.com.br" },
  ];

  const testimonials = [
    {
      q: "Em 1 semana eu já apareci no Google. Antes ninguém me achava.",
      n: "Ricardo M.",
      c: "Marcenaria · Joinville/SC",
      i: "R",
    },
    {
      q: "Recuperei o investimento no primeiro mês. Sem exagero.",
      n: "Camila S.",
      c: "Arquitetura · Florianópolis/SC",
      i: "C",
    },
    {
      q: "Meu site ficou pronto mais rápido do que pedi café no escritório.",
      n: "André P.",
      c: "Engenharia · Curitiba/PR",
      i: "A",
    },
  ];

  return (
    <section id="exemplos" className="proof">
      <div className="container">
        <Reveal className="proof-headline">
          <span className="eyebrow">Prova real</span>
          <Counter to={50} />
          <h2>
            <span style={{ fontStyle: "italic" }}>empresas</span> já têm sua presença digital com a Athera.
          </h2>
        </Reveal>

        <div className="cases-hint">
          <span className="swipe" />
          <span>arraste para ver mais</span>
          <span className="swipe" />
        </div>
        <div className="cases-grid">
          {cases.map((c, i) => (
            <Reveal key={c.name} className="case-card" delay={i * 100}>
              <a href={c.url} target="_blank" rel="noopener" style={{ display: "block" }}>
                <div className="browser-frame">
                  <div className="browser-chrome">
                    <div className="browser-dots"><span /><span /><span /></div>
                    <div className="browser-url">{c.host}</div>
                  </div>
                  <div className="browser-body">
                    <img src={`https://image.thum.io/get/width/1200/crop/750/${c.url}`} alt={c.name} loading="lazy" />
                  </div>
                </div>
                <div className="case-meta">
                  <div>
                    <div className="who">{c.name}</div>
                    <span className="seg">{c.segment}</span>
                  </div>
                  <div className="delta">
                    {c.delta}
                    <small>{c.deltaLabel}</small>
                  </div>
                </div>
              </a>
            </Reveal>
          ))}
        </div>

        <div className="testimonials">
          {testimonials.map((t, i) => (
            <Reveal key={i} className="t-card" delay={i * 120}>
              <p className="t-quote">{t.q}</p>
              <div className="t-meta">
                <span className="t-avatar">{t.i}</span>
                <div className="t-info">
                  <div className="n">{t.n}</div>
                  <div className="c">{t.c}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   INCLUDED
   ============================================================ */
function Included() {
  const items = [
    { t: "Design responsivo premium", d: "Funciona perfeito em qualquer celular, tablet ou desktop. Mobile-first.", m: "incluso" },
    { t: "Copywriting estruturado para conversão", d: "Hierarquia, prova social, CTAs claros. A página não é só bonita — ela vende.", m: "incluso" },
    { t: "Código otimizado", d: "Velocidade, SEO técnico e Core Web Vitals desde o primeiro pixel.", m: "Lighthouse 95+" },
    { t: "Integração com WhatsApp", d: "Botão flutuante e formulário que dispara mensagem direto pro seu número.", m: "incluso" },
    { t: "Formulário de contato funcional", d: "Recebe os leads direto no seu e-mail, sem plataformas terceiras.", m: "incluso" },
    { t: "Pixel do Meta + Google Analytics", d: "Tráfego pago rastreado desde o lançamento. Você sabe de onde vem cada lead.", m: "incluso" },
    { t: "Ajustes até aprovação", d: "Mudanças finas de texto, cor, imagem — sem custo extra antes da publicação.", m: "incluso" },
    { t: "Domínio e hospedagem", d: "Pode usar o que você já tem ou contratar com a Athera. A gente configura.", m: "opcional" },
    { t: "Tráfego pago (Meta + Google Ads)", d: "Campanhas estratégicas para a sua nova página gerar leads desde o dia 1.", m: "opcional" },
    { t: "Plano de manutenção mensal", d: "Suporte contínuo, alterações, atualizações e relatórios.", m: "opcional" },
  ];
  return (
    <section className="included">
      <div className="container included-grid">
        <Reveal>
          <span className="eyebrow">O que está incluso</span>
          <h2 className="display-2" style={{ marginTop: 18 }}>
            Tudo o que um site sério precisa.
            <br />
            <span style={{ color: "var(--muted-2)" }}>Nada que ele não precisa.</span>
          </h2>
          <p className="lead" style={{ marginTop: 24 }}>
            R$ 197, parcela única, parte da landing page. Sem mensalidade obrigatória, sem assinatura escondida. Hospedagem, domínio e tráfego pago são opcionais e cobrados à parte se você quiser contratar.
          </p>
        </Reveal>

        <Reveal as="ul" className="included-list" delay={150}>
          {items.map((it, i) => (
            <li key={i}>
              <span className="idx">/{String(i + 1).padStart(2, "0")}</span>
              <span className="title">{it.t}</span>
              <span className={`meta ${it.m === "incluso" ? "muted" : ""}`}>{it.m}</span>
              <span className="desc">{it.d}</span>
            </li>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

/* ============================================================
   FAQ
   ============================================================ */
function FAQ() {
  const data = [
    { q: "O que está incluso no valor de R$ 197?", a: "A criação completa da sua landing page — design, copy estruturado para conversão, código otimizado e publicação." },
    { q: "Está incluso domínio e hospedagem?", a: "Não. Domínio e hospedagem são contratados à parte. Mas a gente pode configurar tudo pra você." },
    { q: "Vocês fornecem domínio e hospedagem?", a: "Sim. Se preferir, a gente cuida do registro do domínio e da hospedagem em servidor profissional. Você não precisa lidar com isso." },
    { q: "Posso usar um domínio que já tenho?", a: "Sim, sem problema. Se você já tem um domínio registrado, a gente conecta sua nova landing page nele." },
    { q: "Em quanto tempo fica pronto?", a: "Você recebe a prévia funcional em até 24h. A versão final, ajustada e publicada, sai em até 5 dias úteis — contando a partir do recebimento das informações do seu negócio." },
    { q: "A página já vem pronta para vender?", a: "Sim. Já entregamos focada em conversão — com CTA claro, prova social e integração com WhatsApp." },
    { q: "Preciso enviar algo?", a: "Sim, algumas informações do seu negócio: o que você vende, para quem, fotos (se tiver) e a forma como quer receber os contatos." },
    { q: "Posso pedir alterações?", a: "Sim. Fazemos ajustes iniciais sem custo até a página ficar do jeito que você aprovou." },
    { q: "Tem mensalidade?", a: "Não pela criação. R$ 197 é parcela única. Só hospedagem (se contratada conosco) tem renovação anual." },
    { q: "Vocês fazem tráfego pago?", a: "Sim. Trabalhamos com Meta Ads e Google Ads — podemos cuidar das campanhas para você. Cobrado à parte." },
    { q: "Vocês fazem sites completos?", a: "Sim, e também sistemas. A landing page é a porta de entrada. Quando o negócio cresce, escalamos com você." },
    { q: "Tem suporte depois?", a: "Sim, opcional. Você escolhe se quer ficar com um plano de manutenção mensal ou pagar por demanda." },
    { q: "Esse valor é promocional?", a: "Sim. R$ 197 é o valor para começar rápido. Pode mudar a qualquer momento, então vale aproveitar agora." },
    { q: "Posso contratar tudo com vocês?", a: "Sim. Landing page, site completo, sistemas, tráfego, design — fazemos tudo dentro do ecossistema Athera." },
  ];

  const [open, setOpen] = useState3(null);

  // Split into two columns for desktop
  const half = Math.ceil(data.length / 2);
  const colA = data.slice(0, half);
  const colB = data.slice(half);

  const renderItem = (item, globalIdx) => (
    <div key={globalIdx} className={`faq-item ${open === globalIdx ? "open" : ""}`}>
      <button
        className="faq-q"
        onClick={() => setOpen(open === globalIdx ? null : globalIdx)}
        aria-expanded={open === globalIdx}
      >
        <span>
          <span className="faq-n">{String(globalIdx + 1).padStart(2, "0")}</span>
          {item.q}
        </span>
        <span className="toggle" aria-hidden="true">+</span>
      </button>
      <div className="faq-a">
        <div>
          <p>{item.a}</p>
        </div>
      </div>
    </div>
  );

  return (
    <section id="faq" className="faq">
      <div className="container">
        <div className="section-head">
          <div>
            <Reveal><span className="eyebrow">Dúvidas frequentes</span></Reveal>
            <Reveal as="h2" className="display-2" delay={100} style={{ marginTop: 16 }}>
              As perguntas que <span style={{ fontStyle: "italic", color: "var(--accent)" }}>todo mundo</span> faz.
            </Reveal>
          </div>
          <Reveal delay={200}>
            <p className="lead">
              Inicie rápido. Sem complicação. Se sobrar dúvida, pergunta direto no WhatsApp — sem robô, sem script.
            </p>
          </Reveal>
        </div>

        <div className="faq-columns">
          <div className="faq-col">
            {colA.map((it, i) => renderItem(it, i))}
          </div>
          <div className="faq-col">
            {colB.map((it, i) => renderItem(it, i + half))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FINAL CTA
   ============================================================ */
function Final({ wa }) {
  return (
    <section className="final" id="cta-final">
      <div className="container final-inner">
        <Reveal>
          <span className="vagas">
            <span>Vagas hoje</span>
            <span className="dots">
              <span className="on" />
              <span className="on" />
              <span />
            </span>
            <span style={{ color: "var(--accent-2)" }}>2 de 3 restantes</span>
          </span>
        </Reveal>
        <Reveal as="h2" delay={120}>
          3 vagas por dia.
          <br />
          <em>É o limite real do que conseguimos entregar com qualidade.</em>
        </Reveal>
        <Reveal as="p" delay={240}>
          Se você chegou até aqui, você não é curioso. Vamos conversar.
        </Reveal>
        <Reveal delay={340}>
          <MagneticCta href={wa} className="cta cta-large" label="final">
            <span>Quero minha prévia agora</span>
            <ArrowGlyph />
          </MagneticCta>
          <div className="final-micro">
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--accent-2)" }} />
            <span>Respondemos em até <b style={{ color: "#fff" }}>1h</b>. Sem robô. Sem script.</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ============================================================
   FOOTER
   ============================================================ */
function Footer({ wa }) {
  return (
    <footer className="footer">
      <div className="container footer-inner">
        <div className="footer-brand">
          <img src="assets/athera-logo.png" alt="" />
          <div>
            <div className="who">Athera Tecnologia</div>
            <div className="meta">Athera Tecnologia · Joinville/SC · CNPJ 51.523.841/0001-14</div>
          </div>
        </div>
        <div className="footer-links">
          <a href="https://www.instagram.com/athera.tecnologia" target="_blank" rel="noopener">Instagram</a>
          <a href={wa}>WhatsApp</a>
          <a href="mailto:contato@atheratecnologia.com.br">E-mail</a>
        </div>
        <div className="footer-copy">© 2026 Athera Tecnologia</div>
      </div>
    </footer>
  );
}

Object.assign(window, { Proof, Included, FAQ, Final, Footer });