// 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 InsideSection = () => {
  const rows = [
    {
      n: '01',
      eyebrow: 'Dashboard',
      title: <>Tudo numa <em>tela só.</em></>,
      desc: 'Saldo, fluxo de caixa, entradas e saídas do mês, resultado e categorias — lado a lado. A informação que mais importa aparece antes de você precisar procurar.',
      img: 'assets/TABLET.png',
      alt: 'Dashboard do Pilah',
    },
    {
      n: '02',
      eyebrow: 'Recorrências',
      title: <>Pagamentos fixos <em>no automático.</em></>,
      desc: 'Aluguel, energia, internet, salário, condomínio — tudo que entra ou sai todo mês é gerado sozinho. Você só acompanha e ajusta se algo mudar.',
      img: 'assets/Notebook-1.png',
      alt: 'Recorrências mensais no Pilah',
    },
    {
      n: '03',
      eyebrow: 'Relatórios',
      title: <>Números que <em>fazem sentido.</em></>,
      desc: 'Receita anual, gastos anuais, saldo acumulado, evolução mês a mês e distribuição por categoria. O ano inteiro numa rolada, sem planilha.',
      img: 'assets/PC.png',
      alt: 'Relatórios do Pilah',
    },
  ];
  return (
    <section className="section inside-section" id="por-dentro">
      <div className="inside-bg" aria-hidden="true">
        <div className="inside-orb inside-orb-1"/>
        <div className="inside-orb inside-orb-2"/>
      </div>
      <div className="container">
        <div className="inside-head">
          <Reveal><div className="section-eyebrow"><span className="dot"/>Por dentro</div></Reveal>
          <Reveal delay={80}><h2 className="section-title">Todo mundo mostra o preview.<br/><em>A gente mostra por dentro.</em></h2></Reveal>
          <Reveal delay={160}><p className="inside-sub">Screenshots reais da plataforma. Sem photoshop, sem "em breve".</p></Reveal>
        </div>

        {rows.map((r, i) => (
          <Reveal key={i} delay={80}>
            <div className={`inside-row ${i % 2 === 1 ? 'reversed' : ''}`}>
              <div className="inside-text">
                <div className="inside-num" aria-hidden="true">{r.n}</div>
                <div className="inside-eyebrow-tag">{r.eyebrow}</div>
                <h3 className="inside-title">{r.title}</h3>
                <p className="inside-desc">{r.desc}</p>
              </div>
              <div className="inside-image-wrap">
                <div className="inside-image-inner">
                  <div className="inside-image-grid" aria-hidden="true"/>
                  <div className="inside-image-glow" aria-hidden="true"/>
                  <div className="inside-corner inside-corner-tl" aria-hidden="true"/>
                  <div className="inside-corner inside-corner-tr" aria-hidden="true"/>
                  <div className="inside-corner inside-corner-bl" aria-hidden="true"/>
                  <div className="inside-corner inside-corner-br" aria-hidden="true"/>
                  <img className="inside-image" src={r.img} alt={r.alt} loading="lazy"/>
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </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">Leve o Pilah<br/><em>no bolso.</em></h2></Reveal>
          <Reveal delay={160}><p className="section-sub" style={{marginBottom: 0}}>A mesma experiência do desktop, na palma da mão. Instala como app nativo, funciona offline, notifica na hora.</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="#preco" className="btn btn-ghost">Ver planos <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>

      <Reveal delay={100}>
        <div className="mobile-showcase">
          <div className="mobile-showcase-bg" aria-hidden="true"/>
          <div className="mobile-showcase-image-wrap">
            <div className="mobile-showcase-glow"/>
            <img className="mobile-showcase-image" src="assets/Ultramarine.png" alt="Pilah no celular" loading="lazy"/>
          </div>
          <div className="mobile-showcase-info">
            <div className="mobile-showcase-badge"><Icon.Phone size={14}/>App instalável (PWA)</div>
            <h3 className="mobile-showcase-title">Tudo em <em>segundos,</em><br/>de qualquer lugar.</h3>
            <p className="mobile-showcase-desc">Direto do navegador do celular, sem loja, sem espera. Abre em tela cheia, funciona rapidíssimo e mostra suas contas, gastos e metas na mesma qualidade do desktop.</p>
            <ul className="mobile-showcase-list">
              <li><Icon.Check size={14}/>Instalação em 1 clique</li>
              <li><Icon.Check size={14}/>Interface idêntica em qualquer tela</li>
              <li><Icon.Check size={14}/>Lançamento de despesas em 5 segundos</li>
              <li><Icon.Check size={14}/>Criptografia ponta-a-ponta</li>
            </ul>
            <div className="mobile-showcase-ctas">
              <a href="#preco" className="btn btn-primary">Começar agora <Icon.ArrowRight size={14}/></a>
              <a href="#faq" className="btn btn-ghost">Como instalar? <Icon.ArrowUpRight size={14}/></a>
            </div>
          </div>
        </div>
      </Reveal>
    </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="https://pay.kiwify.com.br/vTfjZfL" target="_blank" rel="noopener" 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="https://pay.kiwify.com.br/y1EPB1j" target="_blank" rel="noopener" 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>
          </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, InsideSection, PlatformsSection, TestimonialsSection, PricingSection, FaqSection, FinalCta, Footer });