// VeloFy LP — Bottom half: Benefits, Calculator, Social, Offer, Objections, Guarantee, Urgency, FAQ, Final
const Icon2 = window.VFTop.Icon;

// ─── Benefits ─────────────────────────────────────────────
const BENEFITS = [
  { ico: <Icon2.Server/>, title: 'No ar quando o criativo viraliza', body: 'Infra própria, não compartilhada com 2 milhões de lojinhas dropship do mundo todo.' },
  { ico: <Icon2.Money/>, title: 'Mais venda por visita', body: 'Checkout calibrado pro tráfego pago brasileiro, não pro shopper americano de Black Friday.' },
  { ico: <Icon2.Pkg/>, title: 'Margem inteira no bolso', body: 'Sem mensalidade em dólar, sem taxa de construtor, sem fee de app de checkout.' },
  { ico: <Icon2.Bolt/>, title: 'Loja no ar em minutos', body: 'Sem precisar contratar dev pra "fazer o checkout falar com a loja".' },
  { ico: <Icon2.Headset/>, title: 'Suporte que entende DR', body: 'Em português, do mesmo time que processa seu pagamento. Não é chatbot.' },
  { ico: <Icon2.Brush/>, title: 'Design 100% editável', body: 'Você muda o que quiser sem precisar pedir ajuda pra ninguém. Sem app extra.' },
  { ico: <Icon2.Gauge/>, title: 'Velocidade que segura ROAS', body: 'Loja lenta mata criativo bom. A gente protege seu CAC, não o nosso.' },
  { ico: <Icon2.Grid/>, title: 'Um painel só', body: 'Vendas, checkout, layout, integrações. Sem 5 abas abertas pra rodar 1 negócio.' },
];

const Benefits = () => (
  <section data-screen-label="05 Benefícios">
    <div className="container">
      <span className="section-tag"><span className="num">04 //</span> Benefícios</span>
      <h2 className="section-h">Não são features.<br/>São coisas que você <span style={{fontStyle:'italic', color:'var(--accent)'}}>para de perder</span>.</h2>
      <div className="ben-grid">
        {BENEFITS.map((b,i) => (
          <div key={i} className="ben">
            <div>
              <div className="ben-num">{String(i+1).padStart(2,'0')} ✓</div>
              <Icon2.Check className="ben-ico" style={{display:'none'}}/>
              <h3>{b.title}</h3>
              <p>{b.body}</p>
            </div>
            <div style={{display:'flex',alignItems:'center',gap:8,color:'var(--accent)'}}>
              {React.cloneElement(b.ico, {style:{width:20,height:20}})}
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ─── Calculator ───────────────────────────────────────────
const fmt = (n) => 'R$ ' + Math.round(n).toLocaleString('pt-BR');

const Calculator = () => {
  const [revenue, setRevenue] = useState(150); // R$ k/mês
  const [downHours, setDownHours] = useState(3); // h/mês
  const [feePct, setFeePct] = useState(2.0); // %
  const [subscription, setSubscription] = useState(2156); // R$/mês (Shopify Advanced em BRL ~)

  // Calc
  const revenueR = revenue * 1000;
  const downCost = (revenueR / (30 * 16)) * downHours; // assume 16h ativo/dia
  const feeCost = revenueR * (feePct / 100);
  const monthly = subscription + downCost + feeCost;
  const yearly = monthly * 12;

  return (
    <section id="calc" className="calc" data-screen-label="06 Calculadora">
      <div className="container">
        <span className="section-tag"><span className="num">05 //</span> Faça as contas</span>
        <h2 className="section-h">Quanto a Shopify + checkout externo te custam <span style={{color:'var(--accent)', fontStyle:'italic'}}>por ano?</span></h2>
        <p className="section-sub">Mexe nos números. A conta é sua. A economia também.</p>

        <div className="calc-card">
          <div className="calc-controls">
            <h4>// Sua operação hoje</h4>
            <p className="calc-cap">Use a régua. Os números mudam ao vivo.</p>

            <div className="calc-row">
              <label>Faturamento mensal <span className="val">R$ {revenue}k</span></label>
              <input type="range" min="10" max="2000" step="10" value={revenue} onChange={e=>setRevenue(+e.target.value)}/>
            </div>

            <div className="calc-row">
              <label>Taxa do checkout externo <span className="val">{feePct.toFixed(1)}%</span></label>
              <input type="range" min="0" max="5" step="0.1" value={feePct} onChange={e=>setFeePct(+e.target.value)}/>
            </div>

            <div className="calc-row">
              <label>Mensalidade do construtor <span className="val">{fmt(subscription)}</span></label>
              <input type="range" min="0" max="6000" step="50" value={subscription} onChange={e=>setSubscription(+e.target.value)}/>
            </div>

            <div className="calc-row">
              <label>Horas de loja caída no mês <span className="val">{downHours}h</span></label>
              <input type="range" min="0" max="20" step="0.5" value={downHours} onChange={e=>setDownHours(+e.target.value)}/>
            </div>
          </div>

          <div className="calc-result">
            <div className="label">// Sua economia anual na VeloFy</div>
            <div className="big">{fmt(yearly)}<span className="small">/ano</span></div>
            <div className="yr">{fmt(monthly)} todo mês de volta no caixa.</div>
            <div className="calc-breakdown">
              <div><span>Mensalidade evitada</span><span>{fmt(subscription * 12)}/ano</span></div>
              <div><span>Taxa de checkout evitada</span><span>{fmt(feeCost * 12)}/ano</span></div>
              <div><span>Vendas perdidas em downtime</span><span>{fmt(downCost * 12)}/ano</span></div>
            </div>
            <a href="/cadastro" className="btn btn-primary calc-cta">🚀 Quero essa economia →</a>
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── Social Proof ─────────────────────────────────────────
const TESTIS = [
  {
    body: <>Migrei de Shopify e parei de tomar susto no celular de madrugada. <em>3 meses sem 1 minuto de downtime</em>, e o checkout aumentou conversão em 23%.</>,
    stat: '↑ 23% conversão',
    name: 'Rafael M.',
    role: 'Dropshipper · nicho casa · R$ 380k/mês',
    initials: 'RM'
  },
  {
    body: <>Saí pagando 2,2% pro checkout antigo. Em 4 meses já economizei o suficiente pra contratar mais um media buyer. <em>Pegada que muda o jogo</em>.</>,
    stat: '↓ R$ 38k em fees',
    name: 'Bruna F.',
    role: 'E-com escalado · moda · 7 dígitos/mês',
    initials: 'BF'
  },
  {
    body: <>Black Friday passada eu perdi R$ 80 mil em vendas com loja fora do ar. Esse ano, na VeloFy, foi o <em>primeiro pico sem queda</em>. Dormi tranquilo.</>,
    stat: '0min downtime',
    name: 'Diego T.',
    role: 'Resposta direta · suplementos · R$ 1.2M/mês',
    initials: 'DT'
  }
];

const Social = () => (
  <section className="social" data-screen-label="07 Prova social">
    <div className="container">
      <span className="section-tag" style={{margin:'0 auto', display:'inline-flex'}}><span className="num">06 //</span> Quem já tá rodando</span>
      <h2 className="section-h" style={{margin:'24px auto'}}>O time que processa seu pagamento <span style={{color:'var(--accent)', fontStyle:'italic'}}>também construiu sua loja</span>.</h2>
      <div className="social-strap">
        <Icon2.Bolt className="bolt" style={{width:16, height:16}}/>
        Powered by Velory Pagamentos — gateway que processa milhões em GMV no mercado brasileiro de DR
      </div>
      <div className="social-grid">
        {TESTIS.map((t,i)=>(
          <div key={i} className="testi">
            <div className="quote-mark">"</div>
            <div className="body">{t.body}</div>
            <div className="stat"><Icon2.Bolt style={{width:12,height:12}}/> {t.stat}</div>
            <div className="who">
              <div className="avatar">{t.initials}</div>
              <div>
                <div className="name">{t.name}</div>
                <div className="role">{t.role}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ─── Offer ───────────────────────────────────────────────
const OFFER_ITEMS = [
  ['Construtor de loja profissional', 'R$ 297/mês'],
  ['Checkout integrado de alta conversão', '2% por venda'],
  ['Templates otimizados pra resposta direta', 'R$ 497'],
  ['Domínio próprio + SSL', 'R$ 50/mês'],
  ['Painel unificado de vendas', 'R$ 197/mês'],
  ['Suporte em português, do mesmo time', 'R$ 297/mês'],
  ['Atualizações e melhorias contínuas', 'incluso'],
];

const Offer = () => (
  <section id="oferta" className="offer" data-screen-label="08 Oferta">
    <div className="container">
      <span className="section-tag"><span className="num">07 //</span> O que tá na mesa</span>
      <h2 className="section-h">Vamos ao que tá na mesa.</h2>
      <p className="section-sub">O valor de mercado dessa stack inteira hoje, somado, e o que você paga na VeloFy. Sem letrinha miúda.</p>

      <div className="offer-card">
        <div className="offer-head">
          <span>// Stack completa VeloFy</span>
          <span>Tudo incluso · pra sempre</span>
        </div>
        <div className="offer-body">
          {OFFER_ITEMS.map(([k,v],i) => (
            <div key={i} className="offer-line">
              <span className="item"><Icon2.Check className="check"/> {k}</span>
              <span className="value">{v}</span>
            </div>
          ))}
        </div>
        <div className="offer-totals">
          <div className="offer-mkt">
            <span>Valor de mercado</span>
            <span className="strike">R$ 1.338/mês + 2% por venda</span>
          </div>
          <div className="offer-final">
            <div className="label">Hoje na VeloFy</div>
            <div className="price">R$ 0<small>pra sempre</small></div>
          </div>
        </div>
        <div className="offer-foot">
          <h4>Como isso é possível?</h4>
          <p>A VeloFy é mantida pela Velory Pagamentos. A gente ganha quando você processa pagamento no nosso gateway — não quando você paga mensalidade. <strong style={{color:'var(--fg)'}}>Sua loja crescendo é a nossa receita crescendo.</strong> Os incentivos estão alinhados pela primeira vez no mercado.</p>
        </div>
      </div>
      <div style={{marginTop:32, textAlign:'center'}}>
        <a href="/cadastro" className="btn btn-primary btn-xl">🚀 Criar minha loja grátis agora</a>
      </div>
    </div>
  </section>
);

// ─── Objections (accordion) ──────────────────────────────
const OBJECTIONS = [
  {
    q: '"Mas se é grátis, a loja deve ser feia ou converter mal..."',
    a: <>Justo. É a primeira coisa que todo dropshipper experiente pensa. Por isso a gente fez o caminho contrário: o time que construiu a VeloFy é o mesmo que mantém o checkout que já processa milhões em GMV. Estética e conversão não são "feature de produto pago" — são pré-requisito pra Velory existir. <strong>Se você não vende, a gente não fatura.</strong></>
  },
  {
    q: '"Vou ficar refém da Velory pra sempre?"',
    a: <>Você só usa a VeloFy enquanto ela te servir. O dia que não servir mais, você exporta seus dados e vai embora. <strong>Sem multa, sem prazo de fidelidade, sem ligação de retenção.</strong> A gente prefere te ter porque você quer ficar — não porque tá preso.</>
  },
  {
    q: '"Minha loja atual já tá rodando. Migrar dá trabalho..."',
    a: <>Dá menos trabalho do que continuar pagando mensalidade em dólar e pegando madrugada de loja caída. A gente te ajuda a migrar — o time de onboarding faz o setup com você. <strong>Em poucas horas sua nova loja tá no ar</strong>, rodando, com checkout ligado.</>
  },
  {
    q: '"E se vocês quebrarem amanhã?"',
    a: <>A VeloFy é um produto da Velory Pagamentos — uma empresa que já processa volume real no mercado de resposta direta. <strong>Não é startup de garagem testando hipótese.</strong> É infraestrutura de pagamento ativa, com cliente pagante, há tempo.</>
  },
  {
    q: '"Shopify tem mil apps. Vocês têm o quê?"',
    a: <>Shopify precisa de mil apps porque o core não resolve nada sozinho. A VeloFy faz nativo o que você instala 5 apps no Shopify pra fazer mal feito: checkout, upsell, order bump, integração com gateway. <strong>Menos coisa pra dar errado. Menos coisa pra pagar.</strong></>
  }
];

const Accordion = ({ items, idPrefix='obj' }) => {
  const [open, setOpen] = useState(0);
  return (
    <div>
      {items.map((it,i) => (
        <div key={i} className={'obj-item' + (open === i ? ' open' : '')}>
          <button className="obj-q" onClick={()=>setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
            <span>{it.q}</span>
            <span className="ico"><Icon2.Plus style={{width:16,height:16}}/></span>
          </button>
          <div className="obj-a">{it.a}</div>
        </div>
      ))}
    </div>
  );
};

const Objections = () => (
  <section data-screen-label="09 Objeções">
    <div className="container">
      <span className="section-tag"><span className="num">08 //</span> Objeções, sem rodeio</span>
      <h2 className="section-h">As 5 perguntas que você tá pensando agora.</h2>
      <div style={{marginTop:32, maxWidth:'90ch'}}>
        <Accordion items={OBJECTIONS}/>
      </div>
    </div>
  </section>
);

// ─── Guarantee ────────────────────────────────────────────
const Guarantee = () => (
  <section className="guar" data-screen-label="10 Garantia">
    <div className="container">
      <div className="guar-card">
        <span className="section-tag"><span className="num">09 //</span> Garantia</span>
        <div className="guar-shield" style={{marginTop:24}}><Icon2.Shield/></div>
        <h2>Sem risco. Sem mensalidade. <span style={{color:'var(--accent)'}}>Sem pegadinha.</span></h2>
        <p>Você não paga nada pra usar a VeloFy. Nunca. Se em algum momento a plataforma não servir pra você — por qualquer motivo — você exporta seus dados em 1 clique e vai embora. Sem multa, sem fidelidade, sem ligação de retenção.</p>
        <p style={{marginTop:18, color:'var(--fg-3)'}}>A gente só ganha quando você vende. Então o jogo é: a VeloFy precisa funcionar pro seu negócio, todo dia. Senão a gente perde junto com você.</p>
      </div>
    </div>
  </section>
);

// ─── Urgency ─────────────────────────────────────────────
const Urgency = () => (
  <section data-screen-label="11 Urgência">
    <div className="container">
      <span className="section-tag"><span className="num">10 //</span> Onboarding humano · limitado</span>
      <h2 className="section-h">Setup com o time da VeloFy nas primeiras <span style={{color:'var(--accent)', fontStyle:'italic'}}>50 lojas</span> do mês.</h2>
      <p className="section-sub">O time de migração atende cada nova loja pessoalmente — análise da loja atual, planejamento de migração e setup no Zoom. Atenção 1-a-1 tem capacidade limitada por mês.</p>

      <div className="urg-card">
        <div>
          <div className="mono" style={{fontSize:12, color:'var(--fg-3)', textTransform:'uppercase', letterSpacing:'.1em'}}>// Maio de 2026 · vagas com onboarding humano</div>
          <div style={{fontFamily:'var(--display)', fontSize:'clamp(20px,2.2vw,26px)', fontWeight:700, marginTop:10, maxWidth:'30ch', lineHeight:1.2, letterSpacing:'-.02em'}}>
            Depois que enche, novos cadastros entram no self-service (que também funciona — mas sem feito-junto).
          </div>
          <div className="urg-bar"/>
        </div>
        <div className="urg-num">
          <div className="big">16</div>
          <div className="lbl">vagas restantes</div>
        </div>
      </div>
    </div>
  </section>
);

// ─── FAQ ──────────────────────────────────────────────────
const FAQS = [
  { q: 'A VeloFy é mesmo 100% gratuita? Tem pegadinha?', a: <>Sim, 100% gratuita. <strong>Pra sempre.</strong> A Velory monetiza pela taxa de transação no checkout — que você pagaria pra qualquer gateway de qualquer jeito. A diferença é que aqui o construtor vem junto, sem custo extra.</> },
  { q: 'Eu preciso usar o checkout da Velory?', a: <>Sim. A integração nativa é justamente o que faz a VeloFy ser rápida, estável e converter mais. É o modelo de negócio: a gente entrega o construtor de graça porque ganha no processamento.</> },
  { q: 'Migrar da Shopify (ou outra plataforma) dá muito trabalho?', a: <>Não. O time de onboarding faz o setup com você. <strong>Em poucas horas a loja nova tá no ar.</strong> Você não precisa ser dev nem entender de código.</> },
  { q: 'Funciona pra quem tá começando do zero?', a: <>Sim. Tem templates prontos otimizados pra resposta direta. Você escolhe um, edita o que quiser, conecta o domínio e tá rodando.</> },
  { q: 'E pra quem já fatura alto?', a: <>Funciona melhor ainda. Quanto mais você escala, mais doem as taxas do checkout externo e a mensalidade do construtor. <strong>Pra quem faz 6 ou 7 dígitos por mês, a economia anual passa fácil de R$ 30k</strong> — sem contar venda recuperada pela estabilidade.</> },
  { q: 'Tem suporte humano?', a: <>Sim, em português, do mesmo time que cuida do seu pagamento. Não é chatbot.</> },
  { q: 'Posso usar domínio próprio?', a: <>Sim, sem custo extra. Conecta no painel em poucos minutos.</> },
  { q: 'E se a Velory quebrar ou sair do mercado?', a: <>Você tem seus dados exportáveis a qualquer momento. Mas pra contexto: a Velory já processa volume real no mercado de resposta direta brasileiro — não é projeto experimental. A VeloFy nasce de uma operação que já existe e tem cliente pagante.</> },
];

const FAQ = () => (
  <section id="faq" data-screen-label="12 FAQ">
    <div className="container">
      <span className="section-tag"><span className="num">11 //</span> FAQ</span>
      <h2 className="section-h">Tudo que você quer saber, sem rodeio.</h2>
      <div style={{marginTop:32, maxWidth:'90ch'}}>
        <Accordion items={FAQS} idPrefix="faq"/>
      </div>
    </div>
  </section>
);

// ─── Final CTA ────────────────────────────────────────────
const Final = ({ cta }) => {
  const ctaCfg = window.VFTop.CTA_VARIANTS[cta];
  return (
    <section id="cta" className="final" data-screen-label="13 CTA Final">
      <div className="container">
        <span className="section-tag" style={{margin:'0 auto'}}><span className="num">12 //</span> A escolha</span>
        <h2 style={{marginTop:24}}>
          Continuar pagando dólar pra uma loja que cai. Ou <span className="accent">migrar pra uma plataforma feita aqui.</span>
        </h2>
        <p className="section-sub" style={{margin:'0 auto 40px', textAlign:'center'}}>
          A VeloFy não é "mais um construtor". É o primeiro feito pra você que escala em tráfego pago no Brasil — mantido pelo mesmo time que processa seu pagamento. Sem pagar nada por isso.
        </p>
        <a href="/cadastro" className="btn btn-primary btn-xl final-cta-xl">🚀 {ctaCfg.label}</a>
        <div style={{marginTop:18, fontFamily:'var(--mono)', fontSize:13, color:'var(--fg-3)'}}>
          Sem cartão • Pronta em minutos • Sem mensalidade pra sempre
        </div>

        <div className="ps">
          <strong>P.S.</strong> — Toda hora de loja fora do ar no pico de tráfego custa, em média, mais do que um ano inteiro de qualquer mensalidade de construtor. A VeloFy elimina a mensalidade e o downtime ao mesmo tempo. Porque foi feita pra resolver os dois — não pra te vender um plano.
        </div>
      </div>
    </section>
  );
};

// ─── Footer ──────────────────────────────────────────────
const Footer = () => (
  <footer>
    <div className="container">
      <div className="foot-grid">
        <div>
          <a className="logo" href="#" style={{marginBottom:16}}>
            <span className="logo-mark"><img src="assets/velofy-logo.png" alt="VeloFy"/></span>
            <span>VeloFy</span>
          </a>
          <p style={{color:'var(--fg-3)', fontSize:14, marginTop:14, maxWidth:'40ch'}}>
            Construtor de loja + checkout integrado, feito no Brasil pra quem escala em tráfego pago.
          </p>
          <p style={{color:'var(--fg-4)', fontSize:12, marginTop:14, fontFamily:'var(--mono)'}}>⚡ Powered by Velory Pagamentos</p>
        </div>
        <div>
          <h5>Produto</h5>
          <a href="#solucao">Como funciona</a>
          <a href="#oferta">Preço</a>
          <a href="#calc">Calculadora</a>
          <a href="#">Templates</a>
        </div>
        <div>
          <h5>Empresa</h5>
          <a href="#">Sobre a Velory</a>
          <a href="#">Imprensa</a>
          <a href="#">Carreiras</a>
          <a href="#">Contato</a>
        </div>
        <div>
          <h5>Legal</h5>
          <a href="#">Termos de uso</a>
          <a href="#">Privacidade · LGPD</a>
          <a href="#">Segurança</a>
        </div>
      </div>
      <div className="foot-bottom">
        <div>© 2026 VeloFy · Velory Pagamentos Tecnologia Ltda · CNPJ 00.000.000/0001-00</div>
        <div>Feito no Brasil 🇧🇷</div>
      </div>
    </div>
  </footer>
);

window.VFBot = { Benefits, Calculator, Social, Offer, Objections, Guarantee, Urgency, FAQ, Final, Footer };