// Pricing + ForWhom + FAQ + Final CTA + Footer

const Pricing = () => {
  const features = [
    'Todas as trilhas práticas (vídeos + materiais)',
    'Live semanal ao vivo',
    'Comunidade de profissionais',
    'Templates, frameworks e prompts',
    'Replay de todas as lives',
    'Novos conteúdos toda semana',
    'Acesso ao desafio mensal',
  ];
  return (
    <section className="dark-section section-pad grain" id="preco">
      <div className="radial-blue" />
      <div className="container-md" style={{ position: 'relative', zIndex: 1 }}>
        <div className="reveal section-head section-head-center">
          <span className="eyebrow" style={{ color: 'var(--color-primary-light)' }}>Investimento</span>
          <h2 className="h-section on-dark">Menos que um almoço de negócios por semana.</h2>
          <p className="h-sub on-dark" style={{ marginTop: 14, marginLeft: 'auto', marginRight: 'auto' }}>Dois vídeos por semana + live prática + comunidade + templates.</p>
        </div>

        <div className="pricing-grid">
          <div className="price-card founder reveal">
            <div className="price-badge">Oferta de fundador</div>
            <div className="plan-name">Plano Fundador</div>
            <div className="price-num tabular">
              <span className="currency">R$</span>
              <span className="amount">129</span>
              <span className="per">/ mês</span>
            </div>
            <div className="price-strike tabular">R$ 169/mês</div>
            <div className="price-fix">Preço fixo enquanto for membro</div>
            <div className="price-divider" />
            <ul className="feature-list">
              {features.map((f, i) => (
                <li key={i}><span className="check"><ICheck size={18} /></span>{f}</li>
              ))}
            </ul>
            <div className="price-foot">
              <a href="#assinar" className="btn btn-primary btn-lg btn-block" style={{ height: 56 }}>
                Entrar como Fundador <IArrow size={16} />
              </a>
              <div className="price-note">Vagas limitadas · cobrança em BRL</div>
            </div>
          </div>

          <div className="price-card reveal">
            <div className="plan-name">Plano Regular</div>
            <div className="price-num regular tabular">
              <span className="currency">R$</span>
              <span className="amount">169</span>
              <span className="per">/ mês</span>
            </div>
            <div style={{ height: 22 }} />
            <div className="price-divider" />
            <ul className="feature-list">
              {features.map((f, i) => (
                <li key={i}><span className="check"><ICheck size={18} /></span>{f}</li>
              ))}
            </ul>
            <div className="price-foot">
              <a href="#assinar" className="btn btn-ghost-dark btn-lg btn-block" style={{ height: 56 }}>
                Entrar agora
              </a>
              <div className="price-note">Cobrança recorrente · cancele quando quiser</div>
            </div>
          </div>
        </div>

        <p className="guarantee">
          7 dias para experimentar. Se não for pra você, devolvemos 100%.<br />
          Cancele quando quiser, sem burocracia.
        </p>
      </div>
    </section>
  );
};

const ForWhom = () => (
  <section className="section-pad grain grain-light" style={{ background: 'var(--color-bg)' }}>
    <div className="container-md" style={{ position: 'relative', zIndex: 1 }}>
      <div className="reveal section-head">
        <span className="eyebrow">O time</span>
        <h2 className="h-section">Pra quem o Lab faz sentido — e pra quem não faz.</h2>
      </div>
      <div className="whom-grid reveal">
        <div className="whom-col">
          <div className="lead">Para quem é</div>
          <h3>Profissional de finanças que quer aprofundar técnica.</h3>
          <ul className="whom-list">
            {[
              'Analistas de FP&A que querem aprofundar em modelagem financeira e valuation',
              'Controllers que precisam ir além do fechamento e agregar análise estratégica',
              'Consultores financeiros que querem entregar projetos mais completos e mais rápido',
              'Donos de escritório contábil que querem oferecer FP&A e advisory como serviço',
              'Analistas de investimento que querem aprofundar em valuation e M&A',
              'Qualquer profissional de finanças que quer combinar técnica + IA',
            ].map((t, i) => (
              <li key={i}><span className="mark"><ICheck size={16} /></span>{t}</li>
            ))}
          </ul>
        </div>
        <div className="whom-col dark">
          <div className="lead">Para quem não é</div>
          <h3>Quem busca outra coisa.</h3>
          <ul className="whom-list">
            {[
              'Quem busca curso de programação',
              'Quem quer só teoria sem aplicar nada',
              'Quem não trabalha com finanças e não pretende trabalhar',
              'Quem procura dicas de investimento pessoal (isso é sobre finanças corporativas)',
            ].map((t, i) => (
              <li key={i}><span className="mark"><IX size={16} /></span>{t}</li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  </section>
);

const FAQS = [
  ['O que exatamente eu recebo como membro?', 'Acesso a todas as trilhas de vídeo (modelagem financeira, valuation, análise de demonstrativos, indicadores, FP&A, M&A e IA aplicada), live semanal ao vivo com case prático, comunidade de profissionais, templates e modelos financeiros em Excel, e conteúdo novo toda semana.'],
  ['Qual o nível do conteúdo? É básico ou avançado?', 'Intermediário a avançado. Assumimos que você já trabalha com finanças e entende o básico de DRE, balanço e fluxo de caixa. A partir daí, aprofundamos em modelagem, valuation, indicadores e IA aplicada. Se você é controller, analista ou consultor, está no nível certo.'],
  ['Preciso saber programar?', 'Não. Os conteúdos de IA são focados em usar ferramentas como Claude e ChatGPT no contexto financeiro — não em programação. Você vai ver código em alguns momentos (dashboards, automações), mas o foco é sempre no resultado financeiro.'],
  ['Tem conteúdo sobre contabilidade e demonstrativos?', 'Sim. Temos trilhas específicas sobre análise de demonstrativos financeiros (DRE, DFC, BP), indicadores (ROE, ROIC, margens, liquidez, endividamento), consolidação e contabilidade aplicada. Tudo com cases de empresas reais.'],
  ['Qual a diferença pro conteúdo gratuito?', 'O conteúdo gratuito mostra O QUE é possível. O Lab mostra COMO fazer, com cases completos, modelos financeiros prontos e suporte direto. É a diferença entre assistir um trailer e ver o filme inteiro.'],
  ['Posso cancelar quando quiser?', 'Sim. Sem fidelidade, sem multa, sem burocracia.'],
  ['O que é a oferta de Fundador?', 'Os primeiros membros entram por R$ 129/mês em vez de R$ 169. Esse preço fica fixo enquanto você for membro — mesmo que o preço suba no futuro. As vagas são limitadas.'],
  ['Funciona pra quem trabalha em empresa, não consultoria?', 'Sim. O conteúdo serve pra qualquer profissional de finanças — controller, analista de FP&A, gerente financeiro, analista de investimentos. O workflow é o mesmo: analisar, modelar, projetar e apresentar.'],
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section-pad grain grain-light" style={{ background: '#fff' }} id="faq">
      <div className="container-narrow" style={{ position: 'relative', zIndex: 1 }}>
        <div className="reveal section-head">
          <span className="eyebrow">Dúvidas comuns</span>
          <h2 className="h-section">Perguntas frequentes.</h2>
        </div>
        <div className="faq-list reveal">
          {FAQS.map(([q, a], i) => (
            <div key={i} className={"faq-item" + (open === i ? " open" : "")}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{q}</span>
                <span className="faq-toggle" />
              </button>
              <div className="faq-a"><div className="faq-a-inner">{a}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FinalCTA = () => (
  <section className="dark-section section-pad grain">
    <div className="radial-blue" />
    <div className="container-narrow" style={{ position: 'relative', zIndex: 1 }}>
      <div className="final-cta reveal">
        <span className="eyebrow" style={{ color: 'var(--color-primary-light)', justifyContent: 'center', display: 'inline-flex' }}>Última chamada</span>
        <h2>Modelagem, valuation, indicadores, IA. Tudo na prática, toda semana.</h2>
        <span className="cta-pill">
          <a href="#assinar" className="btn btn-primary btn-lg">
            Entrar como Fundador — R$ 129/mês <IArrow size={16} />
          </a>
        </span>
        <div className="micro">Garantia de 7 dias · Cancele quando quiser · Conteúdo novo toda semana</div>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-inner">
        <div className="logo-text" style={{ color: '#fff' }}>equitye <em style={{ color: 'var(--color-primary-light)' }}>lab</em></div>
        <div className="footer-copy">© 2026 Equitye · Todos os direitos reservados</div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Pricing, ForWhom, FAQ, FinalCTA, Footer });