// Pricing — 3 variants

const PLAN_INCLUDES = [
"Site profissional responsivo",
"Chatbot e link WhatsApp integrado",
"Google Maps com endereço da sua empresa",
"Hospedagem + domínio + SSL configurados",
"Atualizações de segurança automáticas",
"Suporte humano por WhatsApp",
"SEO completo"];

  


const CUSTOM_INCLUDES = [
"E-commerce WooCommerce completo",
"Integrações sob medida (CRM, ERP, gateways)",
"Área de membros, EAD, assinatura",
"Estratégia de conteúdo e SEO multilíngue",
"Identidade visual",
"SLA dedicado + gerente de projeto"];


// ── A: Two side-by-side cards (R$149 highlighted) ──
const PricingA = () =>
<section className="section pricing pricingA" id="planos">
    <div className="shell">
      <div className="sec-head">
        <div>
          <div className="eyebrow">
</div>
          <h2>Tenha um site<br /><span className="italic">profissional</span></h2>
        </div>
        <p className="lede">
      </p>
       
      </div>

      <div className="prA-grid">
        <article className="prA-card prA-feature">
          <div className="prA-feature-ribbon mono">essêncial · sem fidelidade</div>
          <div className="prA-card-head">
            <span className="mono">PLANO 01</span>
            <h3>Mensalidade</h3>
            <p>Cancele quando quiser / sem fidelidade</p>
          </div>
          <div className="prA-price">
            <span className="prA-currency">R$</span>
            <span className="prA-amount">49,99</span>
            <span className="prA-period">/mês</span>
          </div>
          <p className="prA-summary">+ 1x de R$39,99 do seu domínio .com.br*.


        </p>
          <ul className="prA-list">
            {PLAN_INCLUDES.map((x, i) => <li key={i}><Check />{x}</li>)}
          </ul>
          <a className="btn btn-primary prA-cta" href="#contato">
            Começar agora
            <Arrow />
          </a>
          <div className="prA-fine mono">sem fidelidade · cancele quando quiser - domínio comprado à parte*</div>
        </article>

        <article className="prA-card prA-custom">
          <div className="prA-card-head">
            <span className="mono">PLANO 02</span>
            <h3>Sob medida</h3>
          </div>
          <div className="prA-price">
            <span className="prA-amount-mini">orçamento</span>
            <span className="prA-period">/ projeto</span>
          </div>
          <p className="prA-summary">Para quando o site precisa de mai: loja, integrações, áreas de membros, SEO multilíngue.


        </p>
          <ul className="prA-list">
            {CUSTOM_INCLUDES.map((x, i) => <li key={i}><Plus />{x}</li>)}
          </ul>
          <a className="btn btn-ghost prA-cta" href="#contato">
            Solicitar proposta
            <Arrow />
          </a>
          <div className="prA-fine mono"></div>
        </article>
      </div>
    </div>
    
 
  </section>;

// ── B: Single hero card + custom CTA below ──
const PricingB = () =>
<section className="section pricing pricingB" id="planos">
    <div className="shell">
      <div className="sec-head">
        <div>
          <div className="eyebrow">planos</div>
          <h2>Um número.<br /><span className="italic">Zero pegadinha.</span></h2>
        </div>
        <p className="lede">
          A maioria dos negócios começa aqui — e fica. Quando o
          projeto pede mais, a gente desenha um plano sob medida.
        </p>
      </div>

      <div className="prB-stage">
        <div className="prB-hero">
          <div className="prB-side">
            <span className="mono prB-tag">PLANO ESSÊNCIA</span>
            <div className="prB-price">
              <span className="prB-currency">R$</span>
              <span className="prB-amount">149</span>
              <span className="prB-period">por mês</span>
            </div>
            <p className="prB-blurb">
              Site, agenda, hospedagem, suporte. Tudo incluso.
              Pague pelo serviço — não pelas linhas de código.
            </p>
            <div className="prB-ctas">
              <a className="btn btn-primary" href="#contato">Assinar agora<Arrow /></a>
              <a className="btn btn-ghost" href="#contato">Falar no WhatsApp</a>
            </div>
            <div className="prB-trust">
              <span className="mono">✱ sem fidelidade</span>
              <span className="mono">✱ no ar em 48h</span>
              <span className="mono">✱ cancele quando quiser</span>
            </div>
          </div>
          <div className="prB-list-side">
            <div className="prB-list-head mono">o que vem dentro</div>
            <ul className="prB-list">
              {PLAN_INCLUDES.map((x, i) =>
            <li key={i}>
                  <span className="prB-list-n mono">{String(i + 1).padStart(2, "0")}</span>
                  {x}
                </li>
            )}
            </ul>
          </div>
        </div>

        <div className="prB-custom">
          <div>
            <span className="mono prB-tag">PROJETO SOB MEDIDA</span>
            <div className="prB-custom-title">
              Precisa de algo maior? <em>Conta pra gente.</em>
            </div>
            <p className="prB-custom-sub">
              E-commerce, integrações, áreas de membros, SEO multilíngue —
              orçamento desenhado em 3 dias.
            </p>
          </div>
          <a className="btn btn-primary" href="#contato">Solicitar proposta<Arrow /></a>
        </div>
      </div>
    </div>
  </section>;


// ── C: Comparison table ──
const PricingC = () =>
<section className="section pricing pricingC" id="planos">
    <div className="shell">
      <div className="sec-head">
        <div>
          <div className="eyebrow">planos</div>
          <h2>Compare<br /><span className="italic">lado a lado.</span></h2>
        </div>
        <p className="lede">
          O essencial cabe em uma mensalidade. Quando o projeto
          escala, abrimos a régua completa.
        </p>
      </div>

      <div className="prC-table">
        <div className="prC-row prC-row-head">
          <div className="prC-cell prC-cell-label" />
          <div className="prC-cell prC-cell-essence">
            <span className="mono prC-tag">PLANO 01</span>
            <div className="prC-title">Essência</div>
            <div className="prC-price-mini">
              <span>R$</span><strong>149</strong><span>/mês</span>
            </div>
            <a className="btn btn-primary btn-mini" href="#contato">Começar agora</a>
          </div>
          <div className="prC-cell prC-cell-custom">
            <span className="mono prC-tag">PLANO 02</span>
            <div className="prC-title">Sob medida</div>
            <div className="prC-price-mini">
              <span>a partir de</span><strong>R$ 4.8k</strong>
            </div>
            <a className="btn btn-ghost btn-mini" href="#contato">Solicitar</a>
          </div>
        </div>

        {[
      ["Site profissional responsivo", "✓", "✓"],
      ["Sistema de agendamento", "✓", "✓"],
      ["Hospedagem + SSL + domínio", "✓", "✓"],
      ["Suporte humano WhatsApp", "✓", "✓ · prioritário"],
      ["Atualizações ilimitadas", "✓", "✓"],
      ["E-commerce WooCommerce", "—", "✓"],
      ["Integrações sob medida (CRM, ERP)", "—", "✓"],
      ["Área de membros / EAD", "—", "✓"],
      ["SEO multilíngue PT/EN/ES", "básico", "completo"],
      ["Direção de arte autoral", "—", "✓"],
      ["Gerente de projeto dedicado", "—", "✓"]].
      map((row, i) =>
      <div key={i} className="prC-row">
            <div className="prC-cell prC-cell-label">{row[0]}</div>
            <div className="prC-cell prC-mark">{renderMark(row[1])}</div>
            <div className="prC-cell prC-mark">{renderMark(row[2])}</div>
          </div>
      )}
      </div>
    </div>
  </section>;


const renderMark = (v) => {
  if (v === "✓") return <span className="prC-yes"><Check /></span>;
  if (v === "—") return <span className="prC-no">—</span>;
  return <span className="prC-text">{v}</span>;
};

const Check = () =>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="m5 12 5 5L20 7" />
  </svg>;

const Plus = () =>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
    <path d="M12 5v14M5 12h14" />
  </svg>;

const Arrow = () =>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M5 12h14M13 5l7 7-7 7" />
  </svg>;


window.PricingA = PricingA;
window.PricingB = PricingB;
window.PricingC = PricingC;