// Pricing, Guarantee, FAQ, FinalCTA, Footer, LandingSaaS root

function Pricing() {
  const monthly = 199, yearly = 999;
  const savings = monthly * 12 - yearly;
  const perMonth = Math.round(yearly / 12);
  return (
    <section id="planos" style={{ padding: '32px 0 32px', background: T.bg }}>
      <Container>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <h2 style={{ margin: 0, maxWidth: 1080, marginLeft: 'auto', marginRight: 'auto', fontFamily: T.font, fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.03em', fontWeight: 700, color: T.ink }}>
            Tudo isso por um investimento <em style={{ fontStyle: 'normal', color: T.accent }}>MUITO MENOR</em> do quanto sua empresa vai passar a vender por mês.
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, maxWidth: 1080, margin: '0 auto' }}>
          {/* Mensal */}
          <div style={{ padding: '40px 36px', background: T.surface, border: `1px solid ${T.rule}`, borderRadius: 24, display: 'flex', flexDirection: 'column', minHeight: 520 }}>
            <Pill tone="line">Plano Mensal</Pill>
            <div style={{ marginTop: 26, display: 'flex', alignItems: 'baseline', gap: 6 }}>
              <span style={{ fontFamily: T.font, fontSize: 56, fontWeight: 700, color: T.ink, letterSpacing: '-0.035em' }}>R$ 199</span>
              <span style={{ fontSize: 17, color: T.inkMuted }}>/mês</span>
            </div>
            <p style={{ fontSize: 17, color: T.inkMuted, marginTop: 8 }}>Flexibilidade total. Cancele a qualquer momento.</p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '32px 0 0', flex: 1 }}>
              {[
                'Acesso completo ao Copiloto Comercial',
                'Criação de scripts personalizados',
                'Exportação em PDF',
                'Cancelamento a qualquer momento',
              ].map(f => (
                <li key={f} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: '12px 0', fontSize: 17, color: T.inkSoft, borderBottom: `1px dashed ${T.rule}` }}>
                  <span style={{ color: T.ink, marginTop: 2 }}>→</span>{f}
                </li>
              ))}
            </ul>
            <GhostBtn big style={{ marginTop: 32 }}>Assinar Mensal →</GhostBtn>
          </div>

          {/* Anual */}
          <div style={{ padding: '40px 36px', background: T.dark, color: T.darkInk, borderRadius: 24, position: 'relative', display: 'flex', flexDirection: 'column', minHeight: 520 }}>
            <div aria-hidden style={{ position: 'absolute', inset: 0, borderRadius: 24, overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: -80, right: -80, width: 260, height: 260, borderRadius: '50%', background: T.accent, opacity: .3, filter: 'blur(40px)' }} />
            </div>
            <div style={{
              position: 'absolute', top: -14, right: 28,
              background: T.cta, color: T.ctaInk, fontFamily: T.mono, fontSize: 12,
              letterSpacing: '0.1em', padding: '7px 14px', borderRadius: 999, fontWeight: 700,
              boxShadow: '0 6px 14px rgba(122,90,46,0.3)',
              zIndex: 2,
            }}>★ MAIS POPULAR</div>
            <Pill tone="line" style={{ borderColor: 'rgba(251,247,240,0.25)', color: 'rgba(251,247,240,0.75)', position: 'relative' }}>Plano Anual</Pill>
            <div style={{ marginTop: 26, display: 'flex', alignItems: 'baseline', gap: 10, position: 'relative' }}>
              <span style={{ fontFamily: T.font, fontSize: 56, fontWeight: 700, letterSpacing: '-0.035em' }}>R$ {yearly.toLocaleString('pt-BR')}</span>
              <span style={{ fontSize: 17, color: 'rgba(251,247,240,0.6)' }}>/ano</span>
            </div>
            <div style={{ marginTop: 10, display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center', position: 'relative' }}>
              <span style={{ fontSize: 17, color: 'rgba(251,247,240,0.5)', textDecoration: 'line-through' }}>de R$ 2.388</span>
              <span style={{ fontFamily: T.mono, fontSize: 12, letterSpacing: '0.08em', padding: '5px 10px', borderRadius: 6, background: T.accent, color: '#fff', fontWeight: 600 }}>ECONOMIZE R$ {savings.toLocaleString('pt-BR')}</span>
            </div>
            <p style={{ fontSize: 17, color: 'rgba(251,247,240,0.6)', marginTop: 10, position: 'relative' }}>Equivale a R$ {perMonth}/mês — menos de R$ 3 por dia.</p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '32px 0 0', flex: 1, position: 'relative' }}>
              {[
                ['Tudo do plano mensal', false],
                ['Prioridade no suporte', true],
                ['Acesso antecipado a novas funcionalidades', true],
                [`Economia de R$ ${savings.toLocaleString('pt-BR')} vs mensal`, true],
              ].map(([f, h]) => (
                <li key={f} style={{
                  display: 'flex', gap: 12, alignItems: 'flex-start', padding: '12px 0', fontSize: 17,
                  color: h ? T.bg : 'rgba(251,247,240,0.8)', fontWeight: h ? 500 : 400,
                  borderBottom: '1px dashed rgba(251,247,240,0.15)',
                }}>
                  <span style={{ color: T.accent, marginTop: 2 }}>★</span>{f}
                </li>
              ))}
            </ul>
            <PrimaryBtn big style={{ marginTop: 32, position: 'relative' }}>Assinar Anual e economizar R$ {savings.toLocaleString('pt-BR')} →</PrimaryBtn>
          </div>
        </div>

        <div style={{ marginTop: 32, textAlign: 'center', display: 'flex', gap: 24, justifyContent: 'center', flexWrap: 'wrap', fontSize: 17, color: T.inkMuted }}>
          <span>🔒 Pagamento seguro</span>
          <span>⚡ Acesso imediato</span>
          <span>✓ Sem fidelidade</span>
        </div>
      </Container>
    </section>
  );
}

function Guarantee() {
  return (
    <section style={{ padding: '26px 0 22px', background: T.bg }}>
      <Container>
        <div style={{
          background: T.surface, borderRadius: 24, padding: '48px 56px',
          border: `1px solid ${T.rule}`, display: 'grid',
          gridTemplateColumns: '220px 1fr', gap: 56, alignItems: 'center',
        }}>
          <div style={{
            width: 220, height: 220, position: 'relative',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg viewBox="0 0 220 220" style={{ position: 'absolute', inset: 0, animation: 'saasFloat 6s ease-in-out infinite' }}>
              <defs>
                <path id="seal-circ" d="M 110,110 m -86,0 a 86,86 0 1,1 172,0 a 86,86 0 1,1 -172,0" />
              </defs>
              <circle cx="110" cy="110" r="100" fill="none" stroke={T.accent} strokeWidth="1.5" strokeDasharray="4 4" opacity=".5" />
              <circle cx="110" cy="110" r="90" fill={T.accentSoft} />
              <text fontFamily="Geist Mono, monospace" fontSize="11" fill={T.accent} letterSpacing="3">
                <textPath href="#seal-circ" startOffset="0">GARANTIA · INCONDICIONAL · 7 DIAS · GARANTIA · INCONDICIONAL · 7 DIAS · </textPath>
              </text>
            </svg>
            <div style={{ position: 'relative', textAlign: 'center' }}>
              <div style={{ fontFamily: T.font, fontSize: 56, fontWeight: 700, color: T.accent, letterSpacing: '-0.04em', lineHeight: 1 }}>7</div>
              <div style={{ fontFamily: T.mono, fontSize: 12, color: '#4f3a1a', letterSpacing: '0.14em', marginTop: 4 }}>DIAS</div>
            </div>
          </div>
          <div>
            <Eyebrow>Garantia incondicional</Eyebrow>
            <h2 style={{ margin: '18px 0 14px', fontFamily: T.font, fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.03em', fontWeight: 700, color: T.ink }}>
              7 dias para testar. Sem risco nenhum.
            </h2>
            <p style={{ margin: 0, fontSize: 17, lineHeight: 1.55, color: T.inkSoft }}>
              Se em 7 dias você não ver valor no Copiloto, me manda um e-mail e <em style={{ fontStyle: 'normal', fontWeight: 600, color: T.ink }}>devolvo cada centavo</em>. Sem perguntas. Sem burocracia.
            </p>
            <p style={{ margin: '14px 0 0', fontSize: 17, color: T.inkMuted, fontStyle: 'italic' }}>
              Mas cá entre nós: quem monta o primeiro script e envia pro time não quer mais voltar atrás.
            </p>
          </div>
        </div>
      </Container>
    </section>
  );
}

const FAQ_DATA = [
  { q: 'Funciona para venda de baixo ticket?', a: 'Sim. A estrutura das 6 etapas é a mesma, só muda só a intensidade. Venda de baixo ticket é abertura de segundos, sondagem com 2-3 perguntas, apresentação direta, fechamento simples.' },
  { q: 'Funciona para venda de alto ticket?', a: 'Sim. Para baixo ticket e para alto ticket. A estrutura é a mesma, mas cada uma das 6 etapas da venda demora um pouco mais porque é preciso criar um ambiente de credibilidade. O Copiloto cobre os dois cenários.' },
  { q: 'Será que funciona para o meu segmento?', a: 'O Copiloto tem todas as divisões necessárias para adaptar os scripts ao seu nicho de mercado: você pode escolher o ticket médio (alto ou baixo), canal de vendas (WhatsApp, reunião, vídeo-conferência, Telefone, DM Instagram), formato de entrega (serviço ou produto), segmento de público (B2B, B2C) etc. O Copiloto é totalmente personalizável para qualquer segmento.' },
  { q: 'É só para grandes empresas?', a: 'Não. Grandes empresas também usam, mas a maioria dos meus clientes são donos de PME que estão na linha de frente das vendas. O Copiloto se encaixa perfeitamente nesse perfil.' },
  { q: 'E se eu não gostar? Posso cancelar quando quiser?', a: 'Sim. Cancela a renovação a qualquer momento. Você continua com acesso até o fim do ciclo já pago. Sem multa, sem fidelidade.' },
  { q: 'Como funciona a garantia de 7 dias?', a: 'Os 7 dias contam a partir da primeira cobrança. Você pode pedir reembolso no próprio Hotmart (meio de pagamento) e eles reembolsam você. Sem perguntas nem tentativas de retenção.' },
  { q: 'Em quanto tempo monto meu primeiro script?', a: 'Em menos de 2 horas dedicadas, dependendo da complexidade do seu produto.' },
  { q: 'Como aprendo a usar o Copiloto?', a: 'Há algumas aulas detalhadas ensinando exatamente o que você precisa para montar os seus scripts e o seu Playbook de Vendas.' },
  { q: 'Posso cadastrar mais de um produto?', a: 'Sim. Você pode cadastrar quantos produtos quiser e fazer um ou mais scripts para cada um deles.' },
  { q: 'Por que o Copiloto é diferente do ChatGPT?', a: 'O ChatGPT é um caderno em branco que você tem que explicar tudo para ele sendo que ele não lembrará de nada no próximos chat aberto. O Copiloto é estruturado segundo o método de vendas com os mais de 5 mil scripts já validados pelo Conrado e personalizado para o seu contexto.' },
];

function FaqSection() {
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ padding: '22px 0 80px', background: T.bg }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.8fr', gap: 80 }}>
          <div>
            <Eyebrow>Perguntas frequentes</Eyebrow>
            <h2 style={{ margin: '20px 0 0', fontFamily: T.font, fontSize: 56, lineHeight: 1.04, letterSpacing: '-0.03em', fontWeight: 700, color: T.ink }}>
              Perguntas que você provavelmente está se fazendo agora.
            </h2>
          </div>
          <div style={{ background: T.surface, borderRadius: 20, border: `1px solid ${T.rule}`, padding: '8px 28px' }}>
            {FAQ_DATA.map((item, i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{ borderBottom: i < FAQ_DATA.length - 1 ? `1px solid ${T.rule}` : 'none' }}>
                  <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                    display: 'flex', width: '100%', alignItems: 'center', gap: 18,
                    background: 'transparent', border: 'none', cursor: 'pointer',
                    padding: '24px 0', textAlign: 'left', fontFamily: T.font, color: T.ink,
                  }}>
                    <span style={{ fontFamily: T.mono, fontSize: 12, color: T.accent, letterSpacing: '0.1em', minWidth: 28, fontWeight: 600 }}>
                      {String(i + 1).padStart(2, '0')}
                    </span>
                    <span style={{ flex: 1, fontSize: 28, fontWeight: 600, letterSpacing: '-0.012em', color: isOpen ? T.ink : T.inkSoft }}>
                      {item.q}
                    </span>
                    <span style={{
                      width: 30, height: 30, borderRadius: '50%',
                      background: isOpen ? T.accent : T.chipSoft,
                      color: isOpen ? '#fff' : T.ink,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 17, transition: 'all .25s',
                      transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                    }}>+</span>
                  </button>
                  <div style={{ overflow: 'hidden', maxHeight: isOpen ? 240 : 0, transition: 'max-height .35s ease' }}>
                    <p style={{ margin: 0, padding: '0 46px 24px', fontSize: 17, lineHeight: 1.6, color: T.inkSoft, maxWidth: 720 }}>{item.a}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </Container>
    </section>
  );
}

function FinalCTA() {
  return (
    <section style={{ background: T.dark, color: '#f6ece6', padding: '80px 0', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{ position: 'absolute', top: -100, left: '15%', width: 380, height: 380, borderRadius: '50%', background: T.accent, opacity: .18, filter: 'blur(60px)' }} />
      <div aria-hidden style={{ position: 'absolute', bottom: -120, right: '10%', width: 320, height: 320, borderRadius: '50%', background: T.cta, opacity: .12, filter: 'blur(70px)' }} />
      <Container style={{ position: 'relative', textAlign: 'center' }}>
        <Eyebrow color={T.cta}>Começar</Eyebrow>
        <h2 style={{ margin: '24px auto 0', maxWidth: 1100, fontFamily: T.font, fontSize: 56, lineHeight: 1.1, letterSpacing: '-0.03em', fontWeight: 700, color: '#fbf3ec' }}>
          Tenha na sua empresa toda a <em style={{ fontStyle: 'normal', color: T.cta }}>Inteligência Comercial do Conrado</em> por menos de um cafezinho por dia.
        </h2>
        <p style={{ margin: '28px auto 0', maxWidth: 760, fontSize: 28, lineHeight: 1.4, color: 'rgba(251,243,236,0.78)' }}>
          Construa o seu Playbook com os mesmos scripts que o próprio Conrado usa em todas as suas vendas.
        </p>
        <div style={{ marginTop: 40, display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <PrimaryBtn big>COMEÇAR AGORA POR R$ 199/MÊS →</PrimaryBtn>
          <button style={{
            padding: '18px 28px', background: 'transparent', color: '#fbf3ec',
            border: '1.5px solid rgba(251,243,236,0.35)', borderRadius: 999,
            fontSize: 17, fontWeight: 600, cursor: 'pointer', fontFamily: T.font,
          }}>R$ 999/ano — economize R$ 1.389 no Plano Anual</button>
        </div>
        <div style={{ marginTop: 32, display: 'flex', gap: 24, justifyContent: 'center', flexWrap: 'wrap', fontSize: 12, color: 'rgba(251,243,236,0.55)' }}>
          <span>✓ Cancele quando quiser</span>
          <span>✓ Sem fidelidade</span>
          <span>✓ Acesso imediato</span>
        </div>
      </Container>
    </section>
  );
}

function FooterBlock() {
  return (
    <footer style={{ padding: '40px 0', borderTop: `1px solid ${T.rule}`, background: T.bg }}>
      <Container style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16, fontSize: 12, color: T.inkMuted }}>
        <div>© 2026 Copiloto Comercial 8Ps · Webliv Educação</div>
        <div style={{ display: 'flex', gap: 24 }}>
          <a style={{ color: 'inherit', textDecoration: 'none' }}>Termos</a>
          <a style={{ color: 'inherit', textDecoration: 'none' }}>Privacidade</a>
          <a style={{ color: 'inherit', textDecoration: 'none' }}>Suporte</a>
        </div>
      </Container>
    </footer>
  );
}

function LandingSaaS() {
  return (
    <div style={{ background: T.bg, color: T.ink, width: '100%' }}>
      <PromoStrip />
      <Nav />
      <Hero />
      <Tese />
      <CompareCards />
      <Pullquote2 />
      <WhatIs />
      <Benefits />
      <SalesQuestion />
      <WhoIsConrado />
      <PhotoMarquee />
      <Pricing />
      <Guarantee />
      <FaqSection />
      <FinalCTA />
      <FooterBlock />
    </div>
  );
}

Object.assign(window, { Pricing, Guarantee, FaqSection, FinalCTA, FooterBlock, LandingSaaS });