// Pilah sections: features, how it works, platforms, differentials, testimonials, pricing, faq, cta

const FeatureCard = ({ icon: IconComp, title, desc, delay = 0 }) => (
  <Reveal delay={delay}>
    <div className="feature-card">
      <div className="feature-icon"><IconComp size={20}/></div>
      <h3 className="feature-title">{title}</h3>
      <p className="feature-desc">{desc}</p>
    </div>
  </Reveal>
);

const FeaturesSection = () => (
  <section className="section" id="features">
    <div className="container">
      <Reveal>
        <div className="section-eyebrow"><span className="dot"/>Recursos</div>
      </Reveal>
      <Reveal delay={80}>
        <h2 className="section-title">Tudo que você precisa,<br/><em>num só lugar.</em></h2>
      </Reveal>
      <Reveal delay={160}>
        <p className="section-sub">Chega de planilha bagunçada. O Pilah organiza sua vida financeira com ferramentas visuais e intuitivas.</p>
      </Reveal>
      <div className="features-grid">
        <FeatureCard icon={Icon.Wallet} title="Entradas e saídas" desc="Registre cada centavo, categorize automaticamente e veja pra onde vai seu dinheiro em tempo real." delay={100}/>
        <FeatureCard icon={Icon.Card} title="Cartões de crédito" desc="Cadastre cartões, acompanhe faturas, parcelas e vencimentos. Nunca mais perca o controle." delay={160}/>
        <FeatureCard icon={Icon.Target} title="Metas financeiras" desc="Defina objetivos com prazo e acompanhe o progresso visualmente. Realize seus sonhos com disciplina." delay={220}/>
        <FeatureCard icon={Icon.Repeat} title="Recorrências" desc="Pagamentos fixos como aluguel, assinaturas e salário geram automático todo mês." delay={280}/>
        <FeatureCard icon={Icon.Users} title="Controle familiar" desc="Adicione membros da família e veja os gastos de cada um separadamente." delay={340}/>
        <FeatureCard icon={Icon.Chart} title="Relatórios visuais" desc="Gráficos de evolução, distribuição por categoria e comparativos. Entenda em segundos." delay={400}/>
      </div>
    </div>
  </section>
);

const HowItWorksSection = () => (
  <section className="section section-dark">
    <div className="container">
      <Reveal><div className="section-eyebrow light"><span className="dot"/>Como funciona</div></Reveal>
      <Reveal delay={80}><h2 className="section-title light">3 passos pra tomar<br/><em>controle de verdade.</em></h2></Reveal>
      <div className="steps-grid">
        {[
          {n:'01', t:'Crie sua conta', d:'Cadastro rápido com e-mail e senha. Sem burocracia, sem cartão pra começar.'},
          {n:'02', t:'Registre seus gastos', d:'Adicione transações, categorize e configure recorrências. O Pilah faz o resto.'},
          {n:'03', t:'Acompanhe e cresça', d:'Veja relatórios visuais, bata metas e tome decisões com confiança.'},
        ].map((s, i) => (
          <Reveal key={i} delay={100 + i*100}>
            <div className="step-card">
              <div className="step-num">{s.n}</div>
              <h3 className="step-title">{s.t}</h3>
              <p className="step-desc">{s.d}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

const PlatformsSection = () => (
  <section className="section">
    <div className="container">
      <div className="platform-head">
        <div>
          <Reveal><div className="section-eyebrow"><span className="dot"/>Plataforma</div></Reveal>
          <Reveal delay={80}><h2 className="section-title">Feito pra funcionar<br/><em>em qualquer tela.</em></h2></Reveal>
          <Reveal delay={160}><p className="section-sub" style={{marginBottom: 0}}>Desktop, tablet ou celular. O Pilah se adapta com a mesma experiência completa.</p></Reveal>
        </div>
        <Reveal delay={220}>
          <div className="platform-cta">
            <div className="platform-cta-inner">
              <div className="platform-cta-eyebrow"><span className="dot"/>Disponível agora</div>
              <h3 className="platform-cta-title">Experimente em<br/><em>menos de 2 minutos.</em></h3>
              <p className="platform-cta-desc">Crie sua conta, importe seus gastos e comece a visualizar tudo hoje mesmo.</p>
              <div className="platform-cta-btns">
                <a href="#preco" className="btn btn-primary">Começar agora <Icon.ArrowRight size={14}/></a>
                <a href="#features" className="btn btn-ghost">Ver recursos <Icon.ArrowUpRight size={14}/></a>
              </div>
              <div className="platform-cta-foot">
                <div className="platform-cta-avatars">
                  <span>CA</span><span>RF</span><span>JS</span><span>+</span>
                </div>
                <div>
                  <div className="platform-cta-stars">
                    <Icon.Star size={12}/><Icon.Star size={12}/><Icon.Star size={12}/><Icon.Star size={12}/><Icon.Star size={12}/>
                    <b>4,9</b>
                  </div>
                  <div className="platform-cta-small">+12.800 usuários ativos</div>
                </div>
              </div>
            </div>
            <div className="platform-cta-orb"/>
          </div>
        </Reveal>
      </div>

      <div className="platform-grid">
        <Reveal delay={100}>
          <div className="platform-card big">
            <div className="platform-visual desktop-visual">
              <div className="mini-window">
                <div className="mini-dots"><span/><span/><span/></div>
                <div className="mini-content">
                  <div className="mini-sidebar"><span/><span/><span/><span/></div>
                  <div className="mini-main">
                    <div className="mini-row"><div className="mini-stat"/><div className="mini-stat"/></div>
                    <div className="mini-chart">
                      <svg viewBox="0 0 200 60" preserveAspectRatio="none" style={{width:'100%',height:'100%'}}>
                        <path d="M0,45 C30,40 50,20 80,25 C110,30 130,15 160,18 C180,20 190,12 200,10" fill="none" stroke="var(--accent)" strokeWidth="1.5"/>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="platform-info">
              <div className="platform-stat"><AnimatedNumber value={5} suffix="s"/></div>
              <div className="platform-label">pra registrar uma transação</div>
              <h3 className="platform-title">Visão completa no desktop</h3>
              <p className="platform-desc">Dashboard com gráficos, categorias e fluxo de caixa lado a lado. Análise com clareza total.</p>
            </div>
          </div>
        </Reveal>
        <Reveal delay={180}>
          <div className="platform-card">
            <div className="platform-visual phone-visual">
              <div className="mini-phone">
                <div className="mini-phone-notch"/>
                <div className="mini-phone-content">
                  <div className="mini-phone-balance">R$ 8.247</div>
                  <div className="mini-phone-sub">saldo do mês</div>
                  <div className="mini-phone-rows">
                    <div className="mini-phone-row"><span/><div><b/><small/></div><em>+R$1.2k</em></div>
                    <div className="mini-phone-row"><span/><div><b/><small/></div><em className="neg">-R$340</em></div>
                    <div className="mini-phone-row"><span/><div><b/><small/></div><em>+R$890</em></div>
                  </div>
                </div>
              </div>
            </div>
            <div className="platform-info">
              <div className="platform-stat">PWA</div>
              <div className="platform-label">instala como app nativo</div>
              <h3 className="platform-title">No bolso, sempre</h3>
              <p className="platform-desc">Direto do navegador, sem loja. Abre em tela cheia no celular.</p>
            </div>
          </div>
        </Reveal>
        <Reveal delay={260}>
          <div className="platform-card">
            <div className="platform-visual security-visual">
              <div className="sec-shield">
                <Icon.Lock size={40}/>
                <div className="sec-pulse"/>
                <div className="sec-pulse sec-pulse-2"/>
              </div>
            </div>
            <div className="platform-info">
              <div className="platform-stat"><AnimatedNumber value={100} suffix="%"/></div>
              <div className="platform-label">criptografado</div>
              <h3 className="platform-title">Seus dados, só seus</h3>
              <p className="platform-desc">Criptografia e isolamento por usuário. Privacidade total, sem exceção.</p>
            </div>
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

const TestimonialsSection = () => {
  const items = [
    {q:'Finalmente um app que eu consigo usar todo dia. Antes eu tentava planilha e desistia na segunda semana. Com o Pilah, já são 3 meses no controle.', n:'Camila Almeida', r:'Designer, 28 anos', i:'CA'},
    {q:'A função de controle familiar mudou tudo aqui em casa. Eu e minha esposa finalmente sabemos exatamente pra onde vai o dinheiro.', n:'Ricardo Ferreira', r:'Engenheiro, 34 anos', i:'RF'},
    {q:'Percebi que gastava quase 40% do salário com alimentação fora. Cortei e já economizei R$ 800 no mês.', n:'Juliana Santos', r:'Professora, 31 anos', i:'JS'},
    {q:'Nunca fui de anotar nada, mas o Pilah é tão simples que virou hábito. Em dois meses montei minha reserva de emergência.', n:'Marcos Lima', r:'Analista de TI, 30 anos', i:'ML'},
    {q:'Controlar parcelas do cartão era um pesadelo. Agora cadastro e o Pilah me mostra mês a mês quanto vai sair.', n:'Fernanda Oliveira', r:'Advogada, 35 anos', i:'FO'},
    {q:'Coloquei uma meta de viagem, acompanhei todo mês e em 5 meses já tinha o valor completo.', n:'Beatriz Costa', r:'Nutricionista, 29 anos', i:'BC'},
  ];
  return (
    <section className="section">
      <div className="container">
        <Reveal><div className="section-eyebrow"><span className="dot"/>Depoimentos</div></Reveal>
        <Reveal delay={80}><h2 className="section-title">Quem usa,<br/><em>recomenda.</em></h2></Reveal>
        <div className="testim-grid">
          {items.map((t, i) => (
            <Reveal key={i} delay={80 + (i%3)*80}>
              <div className="testim-card">
                <div className="testim-stars">{[0,1,2,3,4].map(k => <Icon.Star key={k} size={14}/>)}</div>
                <p className="testim-quote">"{t.q}"</p>
                <div className="testim-foot">
                  <div className="testim-avatar">{t.i}</div>
                  <div>
                    <div className="testim-name">{t.n}</div>
                    <div className="testim-role">{t.r}</div>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

const PricingSection = () => (
  <section className="section" id="preco">
    <div className="container">
      <Reveal><div className="section-eyebrow"><span className="dot"/>Preço</div></Reveal>
      <Reveal delay={80}><h2 className="section-title">Invista no seu<br/><em>controle financeiro.</em></h2></Reveal>
      <Reveal delay={160}><p className="section-sub">Menos de R$ 1 por dia pra nunca mais perder dinheiro sem saber pra onde foi.</p></Reveal>
      <div className="pricing-grid">
        <Reveal delay={120}>
          <div className="price-card">
            <div className="price-head">
              <h3>Mensal</h3>
              <p>Ideal pra experimentar sem compromisso.</p>
            </div>
            <div className="price-amount"><span className="cur">R$</span><span className="num">39</span><span className="per">/mês</span></div>
            <ul className="price-list">
              {['Dashboard completo','Transações ilimitadas','Cartões de crédito','Metas financeiras','Recorrências automáticas','Controle familiar','Relatórios visuais','App instalável (PWA)','Suporte por e-mail'].map((f,i)=>(
                <li key={i}><Icon.Check size={14}/>{f}</li>
              ))}
            </ul>
            <a href="#" className="btn btn-outline">Assinar mensal <Icon.ArrowRight size={14}/></a>
          </div>
        </Reveal>
        <Reveal delay={200}>
          <div className="price-card featured">
            <div className="price-badge">Melhor custo-benefício</div>
            <div className="price-head">
              <h3>Semestral</h3>
              <p>6 meses de acesso completo com economia real.</p>
            </div>
            <div className="price-save">Economize R$ 36</div>
            <div className="price-amount">
              <span className="cur">R$</span><span className="num">198</span><span className="per">/semestre</span>
            </div>
            <div className="price-equiv"><s>R$ 234</s> · equivale a R$ 33/mês</div>
            <ul className="price-list">
              {['Tudo do plano mensal','Atualizações prioritárias','Suporte por WhatsApp','Acesso antecipado a novas features'].map((f,i)=>(
                <li key={i}><Icon.Check size={14}/>{f}</li>
              ))}
            </ul>
            <a href="#" className="btn btn-primary">Assinar semestral <Icon.ArrowRight size={14}/></a>
          </div>
        </Reveal>
      </div>
      <Reveal delay={300}>
        <div className="guarantee">
          <div className="guarantee-icon"><Icon.Check size={16}/></div>
          <div>
            <h4>Teste por 7 dias sem compromisso</h4>
            <p>Se dentro de 7 dias o Pilah não for pra você, devolvemos 100%. Sem burocracia, sem perguntas.</p>
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

const FaqSection = () => {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    {q:'O Pilah funciona no celular?', a:'Sim! O Pilah é um PWA — funciona direto do navegador no celular e no computador. Você pode instalar na tela inicial e ele abre como um app nativo.'},
    {q:'Meus dados ficam seguros?', a:'Totalmente. Seus dados são criptografados e armazenados com isolamento por usuário. Ninguém além de você tem acesso às suas informações financeiras.'},
    {q:'Posso cancelar a assinatura a qualquer momento?', a:'Sim. Não tem fidelidade nem multa. Você pode cancelar quando quiser e continua com acesso até o fim do período pago.'},
    {q:'Consigo controlar os gastos da minha família?', a:'Sim! Adicione membros da família e atribua transações a cada pessoa. Gráficos separados por membro.'},
    {q:'Preciso baixar algum app na loja?', a:'Não! O Pilah funciona 100% pelo navegador. Basta acessar pilah.online e fazer login.'},
    {q:'Quais formas de pagamento são aceitas?', a:'PIX e cartão de crédito, processado pela Kiwify — plataforma segura de pagamentos digitais.'},
  ];
  return (
    <section className="section" id="faq">
      <div className="container container-narrow">
        <Reveal><div className="section-eyebrow"><span className="dot"/>Dúvidas</div></Reveal>
        <Reveal delay={80}><h2 className="section-title">Perguntas<br/><em>frequentes.</em></h2></Reveal>
        <div className="faq-list">
          {faqs.map((f, i) => (
            <Reveal key={i} delay={80 + i*50}>
              <div className={`faq-item ${open===i?'open':''}`} onClick={() => setOpen(open===i?-1:i)}>
                <div className="faq-q">
                  <span>{f.q}</span>
                  <div className="faq-toggle"><Icon.Plus size={16}/></div>
                </div>
                <div className="faq-a"><p>{f.a}</p></div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

const FinalCta = () => (
  <section className="section section-cta">
    <div className="container">
      <Reveal>
        <div className="cta-box">
          <div className="cta-bg">
            <div className="cta-orb cta-orb-1"/>
            <div className="cta-orb cta-orb-2"/>
          </div>
          <div className="cta-content">
            <h2>Pronto pra tomar controle do seu dinheiro?</h2>
            <p>Comece agora e veja seus primeiros resultados já na primeira semana.</p>
            <a href="#preco" className="btn btn-primary btn-lg">Ver planos e começar agora <Icon.ArrowRight size={16}/></a>
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-top">
        <div className="footer-brand">
          <PilahLogo/>
          <p>Controle total do seu dinheiro. Sem planilha, sem complicação.</p>
        </div>
        <div className="footer-cols">
          <div>
            <h5>Produto</h5>
            <a href="#features">Recursos</a>
            <a href="#preco">Preço</a>
            <a href="#faq">FAQ</a>
          </div>
          <div>
            <h5>Empresa</h5>
            <a href="#">Sobre</a>
            <a href="#">Contato</a>
            <a href="#">Blog</a>
          </div>
          <div>
            <h5>Legal</h5>
            <a href="#">Privacidade</a>
            <a href="#">Termos</a>
          </div>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Pilah. Todos os direitos reservados.</span>
        <span className="dim">Pilah não é instituição financeira. É ferramenta de organização pessoal.</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { FeaturesSection, HowItWorksSection, PlatformsSection, TestimonialsSection, PricingSection, FaqSection, FinalCta, Footer });