// VeryPay — Before/After, Profiles, FAQ, CTA Footer
function BeforeAfter() {
  const items = [
    { before: "20 PDFs por mês", beforeBody: "Você baixa, abre, esquece. Ninguém olha de verdade.", after: "1 dashboard que decide", afterBody: "3 métricas que importam. Lido em 30 segundos." },
    { before: "Antecipação no automático", beforeBody: "Toda venda antecipada. Imposto invisível de 3% ao mês.", after: "Antecipação por critério", afterBody: "Só quando faz sentido. Caixa não vira refém." },
    { before: "Caixa em zigue-zague", beforeBody: "Recebe muito, recebe pouco. Sem previsibilidade.", after: "Caixa que cresce com método", afterBody: "Linha previsível, ajustada por trimestre." },
    { before: "Suporte por protocolo", beforeBody: "0800, fila, fila, fila. Quem te atende não te conhece.", after: "Especialista atribuído", afterBody: "WhatsApp direto. Sabe seu negócio pelo nome." }
  ];

  return (
    <section className="light" style={{ paddingBottom: 0 }}>
      <div className="container">
        <SectionMeta label="ANTES & DEPOIS" index="07" dark />
        <h2 className="display ink" style={{ maxWidth: "16ch" }}>
          <Reveal>Como é o recebimento</Reveal>
          <br />
          <Reveal delay={0.1}>antes <span style={{ color: "var(--magenta)" }}>&</span> depois.</Reveal>
        </h2>

        <div className="ba-stage" style={{ marginTop: 64 }}>
          <div className="ba-col ba-before">
            <div className="ba-eyebrow">
              <span className="ba-bar"></span>
              ANTES DA VERYPAY
            </div>
            {items.map((it, i) => (
              <Reveal key={i} delay={i * 0.06}>
                <div className="ba-item">
                  <span className="marker">{String(i+1).padStart(2,'0')}</span>
                  <div className="body">
                    <strong>{it.before}</strong>
                    <span>{it.beforeBody}</span>
                  </div>
                </div>
              </Reveal>
            ))}
            <div style={{ marginTop: 32, fontFamily: "var(--font-mono)", fontSize: 11, opacity: 0.4, letterSpacing: "0.12em", textTransform: "uppercase" }}>
              CAOS <Slash /> SEM MÉTODO
            </div>
          </div>
          <div className="ba-divider"></div>
          <div className="ba-col ba-after">
            <div className="ba-eyebrow">
              <span className="ba-bar"></span>
              COM A VERYPAY
            </div>
            {items.map((it, i) => (
              <Reveal key={i} delay={0.1 + i * 0.06}>
                <div className="ba-item">
                  <span className="marker">{String(i+1).padStart(2,'0')}</span>
                  <div className="body">
                    <strong>{it.after}</strong>
                    <span>{it.afterBody}</span>
                  </div>
                </div>
              </Reveal>
            ))}
            <div style={{ marginTop: 32, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--magenta)", letterSpacing: "0.12em", textTransform: "uppercase" }}>
              MÉTODO <Slash /> EM CURSO
            </div>
          </div>
        </div>

        <div className="ba-final">
          <h3 className="display-sm ink" style={{ marginBottom: 16 }}>
            A diferença não é a taxa.
          </h3>
          <h3 className="display-sm ink">
            É o <span style={{ color: "var(--magenta)" }}>método</span>.
          </h3>
        </div>
      </div>
    </section>
  );
}

function Profiles() {
  const cards = [
    {
      n: "01",
      icon: "store",
      title: "Varejo físico",
      body: "Lojas com fluxo diário, ticket médio variável, múltiplos meios de pagamento."
    },
    {
      n: "02",
      icon: "brief",
      title: "Serviços profissionais",
      body: "Profissionais liberais, clínicas, escritórios. Faturamento concentrado, ticket alto."
    },
    {
      n: "03",
      icon: "bag",
      title: "E-commerce",
      body: "Vendas online, integração com plataforma, gestão de chargeback."
    },
    {
      n: "04",
      icon: "net",
      title: "Franqueados / multi-loja",
      body: "Vários CNPJs, necessidade de consolidação financeira, split obrigatório."
    }
  ];

  return (
    <section className="light">
      <div className="container">
        <SectionMeta label="PERFIS QUE ATENDEMOS" index="08" dark />
        <h2 className="display ink" style={{ maxWidth: "18ch" }}>
          <Reveal>Negócios que cresceram</Reveal>
          <br />
          <Reveal delay={0.1}>e precisam de gestão,</Reveal>
          <br />
          <Reveal delay={0.2}>não de <span style={{ color: "var(--magenta)" }}>loteria</span>.</Reveal>
        </h2>

        <div className="profiles-grid">
          {cards.map((c, i) => (
            <Reveal key={c.n} delay={i * 0.08}>
              <div className="profile-card">
                <span className="num">{c.n} <Slash /> 04</span>
                <div className="icon-wrap"><ProfileIcon name={c.icon} /></div>
                <h3>{c.title}</h3>
                <p>{c.body}</p>
              </div>
            </Reveal>
          ))}
        </div>

        <div className="profiles-foot">
          <Slash /> Faturamento mensal a partir de R$ 30 mil.
        </div>
      </div>
    </section>
  );
}

function ProfileIcon({ name }) {
  const p = { width: 36, height: 36, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "store": return <svg {...p}><path d="M3 9l2-6h14l2 6"/><path d="M3 9v11h18V9"/><path d="M3 9h18"/><path d="M9 22V12h6v10"/></svg>;
    case "brief": return <svg {...p}><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>;
    case "bag": return <svg {...p}><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6L18 2H6z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>;
    case "net": return <svg {...p}><circle cx="12" cy="5" r="2.5"/><circle cx="5" cy="19" r="2.5"/><circle cx="19" cy="19" r="2.5"/><path d="M12 7.5v6"/><path d="M12 13.5L5 17"/><path d="M12 13.5L19 17"/></svg>;
    default: return null;
  }
}

function FAQ() {
  const [open, setOpen] = useState(-1);
  const items = [
    {
      q: "Quanto custa o serviço de gestão da VeryPay?",
      a: "A VeryPay não cobra mensalidade pelo serviço de gestão. Nossa remuneração vem da relação com os adquirentes parceiros — o cliente paga apenas a taxa do produto que usa, e essa taxa é negociada por nós."
    },
    {
      q: "Vocês são uma adquirente?",
      a: "Não. Somos um gestor de recebimento. Trabalhamos com os principais adquirentes do mercado e escolhemos o produto certo para cada cliente. Você fica com a maquininha do adquirente; nós ficamos com a gestão."
    },
    {
      q: "Funciona pra micro empreendedor?",
      a: "Nosso modelo faz mais sentido a partir de R$ 30 mil/mês de faturamento. Abaixo disso, qualquer maquininha do mercado serve — não há margem para otimizar."
    },
    {
      q: "E se eu já tenho maquininha?",
      a: "Fazemos o diagnóstico mesmo assim. Em geral, conseguimos melhorar a taxa ou os termos da sua maquininha atual sem você trocar — ou trocamos por algo melhor. Decisão sua."
    },
    {
      q: "Quanto tempo dura o contrato?",
      a: "Não temos contrato de fidelidade. Você usa enquanto faz sentido. Se a relação não funcionar, você sai sem multa."
    },
    {
      q: "Como é o atendimento?",
      a: "Especialista atribuído + WhatsApp direto + revisão mensal agendada. Sem 0800, sem fila, sem protocolo."
    }
  ];

  return (
    <section id="faq" className="light">
      <div className="container">
        <SectionMeta label="DÚVIDAS FREQUENTES" index="09" dark />
        <div className="faq-wrap">
          <div className="faq-title">
            <h2 className="display-sm">
              <Reveal>O que você está</Reveal>
              <br />
              <Reveal delay={0.1}>pensando agora.</Reveal>
            </h2>
          </div>
          <div className="faq-list">
            {items.map((it, i) => (
              <div key={i} className={"faq-item" + (open === i ? " open" : "")}>
                <div className="head" onClick={() => setOpen(open === i ? -1 : i)} role="button" tabIndex={0}>
                  <span className="num">{String(i+1).padStart(2,'0')}</span>
                  <h3 className="q">{it.q}</h3>
                  <span className="plus">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
                      <path d="M7 1v12M1 7h12"/>
                    </svg>
                  </span>
                </div>
                <div className="body">
                  <p>{it.a}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function CTAFooter() {
  return (
    <>
      <section className="darker cta-final halo-magenta">
        <img
          src="assets/icon-pink.png"
          alt=""
          aria-hidden="true"
          style={{
            position: "absolute",
            left: "-15%",
            top: "10%",
            width: "60%",
            opacity: 0.05,
            pointerEvents: "none",
            zIndex: 0
          }}
        />
        <div className="container" style={{ position: "relative", zIndex: 2 }}>
          <div className="eyebrow" style={{ justifyContent: "center" }}>
            <MagentaBar />
            <span>VERYPAY <Slash /> PRÓXIMO PASSO</span>
          </div>
          <h2 className="display">
            Quer entender quanto<br />
            você está <UnderlineMagenta>perdendo</UnderlineMagenta> hoje?
          </h2>
          <p className="sub">
            30 minutos no WhatsApp, sem compromisso. Você sai com um diagnóstico inicial
            e pode decidir o que fazer com ele.
          </p>
          <div style={{ display: "flex", justifyContent: "center" }}>
            <a className="btn btn-big" href={waLink()} target="_blank" rel="noopener">
              <span className="wa"><WhatsAppIcon size={20} /></span>
              Falar com um especialista no WhatsApp
              <span className="arrow">→</span>
            </a>
          </div>
          <div className="micro">
            Atendimento humano, em até 1h em horário comercial.
          </div>
        </div>
      </section>

      <footer className="footer">
        <div className="container">
          <h3 className="footer-anchor">
            O melhor pagamento<br />
            é o <span className="accent">feito pra você.</span>
          </h3>
          <div className="footer-info">
            <span>CNPJ 61.244.445/0001-01</span>
            <span>ATENDIMENTO COMERCIAL</span>
          </div>
          <div className="footer-final">
            <span>©2026 VERYPAY PAGAMENTOS</span>
          </div>
          {/* social placeholder (comentado): <div className="footer-social">[LinkedIn] [Instagram]</div> */}
        </div>
      </footer>
    </>
  );
}

Object.assign(window, { BeforeAfter, Profiles, FAQ, CTAFooter });