// prumo-sections.jsx — seções da landing (compõe Nav + Hero + … + Footer em <PageBody/>)

function Hero(){
  return (
    <section id="topo" style={{position:'relative',overflow:'hidden'}}>
      {/* glow sutil no topo */}
      <div style={{position:'absolute',top:-180,left:'50%',transform:'translateX(-50%)',width:900,height:420,
        background:'radial-gradient(50% 50% at 50% 50%, color-mix(in oklab,var(--accent) 22%,transparent), transparent 70%)',
        filter:'blur(20px)',pointerEvents:'none',opacity:.7}}></div>
      <div className="wrap" style={{position:'relative',paddingTop:84,paddingBottom:30,textAlign:'center'}}>
        {/* O chip carrega o estado real do produto (beta fechado) em vez de repetir
            o <title> da página. O posicionamento já é feito pelo parágrafo abaixo. */}
        <Reveal><div className="flex center" style={{justifyContent:'center'}}>
          <span className="chip"><span className="dot"></span>Beta fechado · vagas abrem por lote</span>
        </div></Reveal>
        <Reveal delay={60}>
          <h1 className="display grad-text" style={{margin:'22px auto 0',maxWidth:880}}>
            Tire o escritório do caos.
          </h1>
        </Reveal>
        {/* O parágrafo nomeia o produto logo abaixo do h1 de propósito. O título é
            um slogan ("Tire o escritório do caos"), então sem esta linha a primeira
            dobra nunca diz o que o app é nem como ele se chama — foi por isso que a
            verificação de marca do Google reprovou com "o nome do app não
            corresponde ao da página inicial". Manter em paridade com o bloco
            estático de index.html. */}
        <Reveal delay={120}>
          <p className="lead" style={{maxWidth:660,margin:'22px auto 0'}}>
            O <strong style={{color:'var(--text)',fontWeight:600}}>Prumo</strong> é a
            plataforma de gestão para escritórios de arquitetura e interiores:
            prospecção, orçamentos, projetos, obras e financeiro — tudo o que o seu
            escritório faz, finalmente reunido em um só lugar.
          </p>
        </Reveal>
        <Reveal delay={180}>
          <div className="flex center hero-actions" style={{justifyContent:'center',gap:12,marginTop:30,flexWrap:'wrap'}}>
            <WaitlistBtn source="hero" variant="primary" lg>Entrar na lista de espera <Icon name="arrow" size={17}/></WaitlistBtn>
            {/* CTA "Ver demonstração" oculto no pré-lançamento — reativar quando a demo estiver pronta */}
          </div>
        </Reveal>
      </div>
      {/* dashboard — captura real do produto, é o LCP da página */}
      <Reveal delay={120}>
        <div className="wrap" style={{position:'relative',paddingBottom:30}}>
          <Shot priority src="img/app-dashboard.png" width={2880} height={1880}
            alt="Dashboard do Prumo mostrando os projetos do escritório, a agenda de marketing do dia, os leads recentes e a lista de clientes."/>
        </div>
      </Reveal>
    </section>
  );
}

function Problema(){
  const fontes=['Planilhas','WhatsApp','Caderno','E-mail','Google Drive','Notas no celular','A memória'];
  return (
    <section className="section tight">
      <div className="wrap" style={{maxWidth:920,textAlign:'center'}}>
        {/* sem eyebrow aqui: "O dia a dia hoje" não acrescenta nada ao título,
            e um eyebrow acima de toda seção vira ritmo de template */}
        <Reveal delay={60}>
          <h2 className="h2" style={{margin:'0 auto',maxWidth:760}}>
            Sua obra mora em <span className="accent-text">sete lugares</span> diferentes.
          </h2>
        </Reveal>
        <Reveal delay={120}>
          <p className="lead" style={{maxWidth:560,margin:'18px auto 0'}}>
            Cada informação em um canto. Quando o cliente liga, você abre cinco abas
            só para responder “como está meu projeto?”.
          </p>
        </Reveal>
        <Reveal delay={160}>
          <div className="flex center" style={{justifyContent:'center',gap:10,flexWrap:'wrap',marginTop:30}}>
            {fontes.map((f,i)=>(
              <span key={f} className="chip" style={{transform:`rotate(${[-3,2,-2,3,-1,2,-3][i]}deg)`,
                color:'var(--text-2)',background:'var(--surface)'}}>{f}</span>
            ))}
          </div>
        </Reveal>
        <Reveal delay={220}>
          <p className="mono faint" style={{fontSize:13,marginTop:30,letterSpacing:'.04em'}}>e se tudo morasse num lugar só?</p>
        </Reveal>
      </div>
    </section>
  );
}

// Item de lista com check âmbar — usado tanto na coluna do FeatureBlock quanto
// na fileira horizontal do FeatureWide.
function FeaturePoint({children}){
  return (
    <div className="flex center" style={{gap:11}}>
      <span style={{width:22,height:22,borderRadius:7,background:'var(--accent)',display:'grid',placeItems:'center',flexShrink:0}}>
        <svg width="13" height="13" viewBox="0 0 24 24" aria-hidden="true" style={{stroke:'var(--bg)',fill:'none',strokeWidth:2.6,strokeLinecap:'round',strokeLinejoin:'round'}}><path d="M4 12.5l5 5 11-12"/></svg>
      </span>
      <span style={{fontSize:15.5}}>{children}</span>
    </div>
  );
}

// Layout padrão: texto de um lado, mock do outro (alterna com `flip`).
function FeatureBlock({eyebrow, title, lead, points, mock, flip}){
  return (
    <Reveal>
      <div className="grid" style={{gridTemplateColumns:'1fr 1fr',gap:56,alignItems:'center'}} data-feat>
        <div style={{order:flip?2:1}}>
          <Eyebrow>{eyebrow}</Eyebrow>
          <h3 className="h2" style={{fontSize:'clamp(26px,3vw,38px)',marginTop:14,marginBottom:16}}>{title}</h3>
          <p className="lead" style={{maxWidth:420,marginBottom:22}}>{lead}</p>
          <div className="flex" style={{flexDirection:'column',gap:13}}>
            {points.map(p=><FeaturePoint key={p}>{p}</FeaturePoint>)}
          </div>
        </div>
        <div style={{order:flip?1:2}}>{mock}</div>
      </div>
    </Reveal>
  );
}

// Layout largo: cabeçalho centralizado, mock em destaque e os pontos em fileira.
// Existe para quebrar a sequência de blocos texto/imagem alternados e para dar
// peso maior ao Painel do Cliente, que é o diferencial do produto.
function FeatureWide({eyebrow, title, lead, points, mock}){
  return (
    <Reveal>
      <div style={{textAlign:'center'}}>
        <Eyebrow>{eyebrow}</Eyebrow>
        <h3 className="h2" style={{fontSize:'clamp(26px,3vw,38px)',marginTop:14,maxWidth:640,marginLeft:'auto',marginRight:'auto'}}>{title}</h3>
        <p className="lead" style={{maxWidth:560,margin:'16px auto 0'}}>{lead}</p>
      </div>
      <div style={{maxWidth:760,margin:'34px auto 0'}}>{mock}</div>
      <div className="grid" style={{gridTemplateColumns:`repeat(${points.length},1fr)`,gap:20,marginTop:30,
        maxWidth:900,marginLeft:'auto',marginRight:'auto'}} data-feat-points>
        {points.map(p=><FeaturePoint key={p}>{p}</FeaturePoint>)}
      </div>
    </Reveal>
  );
}

function Features(){
  return (
    <section id="recursos" className="section">
      <div className="wrap" style={{display:'flex',flexDirection:'column',gap:96}}>
        <FeatureBlock
          eyebrow="Projetos & Obras"
          title="Do briefing à entrega, em etapas claras."
          lead="Arraste cada projeto pelo fluxo e veja, num relance, o que está em briefing, em andamento e pronto para entregar."
          points={['Quadro visual por status','Cronograma de obra e medições','Cliente acompanha o andamento sozinho']}
          mock={<Shot src="img/app-projetos.png" width={2160} height={1280}
            alt="Quadro de projetos do Prumo em colunas por etapa: briefing, estudo preliminar, anteprojeto e projeto legal."/>}/>
        <FeatureBlock flip
          eyebrow="Orçamentos & Financeiro"
          title="Orçamentos que viram caixa no fim do mês."
          lead="Monte propostas por ambiente, versione com o cliente e veja o impacto direto no fluxo de caixa do escritório."
          points={['Proposta por ambiente, com versões','Aprovação digital do cliente','Receitas, despesas e saldo previsto']}
          mock={<Shot src="img/app-financeiro.png" width={2160} height={1320}
            alt="Dashboard financeiro do Prumo com entradas, despesas, saldo do mês e as últimas movimentações do escritório."/>}/>
        <FeatureWide
          eyebrow="Painel do Cliente"
          title="Seu cliente acompanha o projeto por conta própria."
          lead="Cada cliente entra no próprio painel para ver o andamento, opinar e marcar o que já revisou, sem trocas infinitas de mensagem."
          points={['Acesso exclusivo por cliente','Vê projetos e arquivos','Comenta na plataforma','Marca entregas como vistas']}
          mock={<Shot src="img/app-area-cliente.png" width={3072} height={868}
            alt="Painel do cliente no Prumo: contratos ativos, próximas parcelas a pagar e andamento do projeto."/>}/>
        <FeatureBlock
          eyebrow="Prospecção & Agenda"
          title="Do primeiro contato ao contrato assinado."
          lead="Capte leads, acompanhe o funil e agende visitas sem perder nenhuma oportunidade pelo caminho."
          points={['Funil de leads com origem','Conversão de lead em projeto','Visitas e compromissos no calendário']}
          mock={<Shot src="img/app-prospeccao.png" width={2160} height={1240}
            alt="CRM do Prumo com a lista de leads, a origem de cada contato e o status no funil de vendas."/>}/>
      </div>
    </section>
  );
}

function ModulesGrid(){
  const mods=[
    ['rocket','Prospecção','Capte leads e acompanhe o funil até virar projeto.'],
    ['receipt','Orçamentos','Monte propostas por ambiente e versione com o cliente.'],
    ['folder','Projetos','Do briefing à entrega, em etapas claras.'],
    ['calendar','Agenda','Compromissos, visitas e posts num só calendário.'],
    ['building','Obras','Acompanhe o canteiro, medições e cronograma.'],
    ['users','Cadastros','Clientes, fornecedores e materiais organizados.'],
    ['team','Time','Tarefas e responsáveis para cada projeto.'],
    ['chart','Relatórios','Indicadores do escritório em tempo real.'],
    ['wallet','Financeiro','Receitas, despesas e fluxo de caixa no controle.'],
  ];
  return (
    <section id="publico" className="section" style={{background:'var(--bg-2)',borderTop:'1px solid var(--border)',borderBottom:'1px solid var(--border)'}}>
      <div className="wrap">
        {/* sem eyebrow: "Tudo num lugar só" repete o título logo abaixo */}
        <Reveal delay={60}>
          <h2 className="h2" style={{maxWidth:680}}>Um módulo para cada parte do seu escritório.</h2>
        </Reveal>
        <div className="grid" style={{gridTemplateColumns:'repeat(3,1fr)',gap:1,marginTop:40,
          background:'var(--border)',border:'1px solid var(--border)',borderRadius:'var(--radius)',overflow:'hidden'}} data-mods>
          {mods.map(([ic,t,d],i)=>(
            <Reveal key={t} delay={(i%3)*60}>
              <div style={{background:'var(--bg-2)',padding:'26px 24px',height:'100%'}}>
                <span style={{width:38,height:38,borderRadius:10,border:'1px solid var(--border-2)',display:'grid',placeItems:'center',color:'var(--accent)'}}>
                  <Icon name={ic} size={19}/>
                </span>
                <div className="h3" style={{fontSize:18,marginTop:16,marginBottom:7}}>{t}</div>
                <p className="muted" style={{fontSize:14.5,lineHeight:1.5}}>{d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// Integração de calendário. Existe por dois motivos: é um recurso real do produto
// e a verificação de marca do Google OAuth exige que a página inicial explique o
// que o app faz com os dados do Google. O texto descreve exatamente o escopo
// pedido (calendar.events): o Prumo escreve os próprios eventos e não lê a agenda.
function Integracoes(){
  const pontos=[
    ['calendar','Sincronização automática',
     'Reuniões, visitas e prazos criados no Prumo viram eventos na sua Google Agenda. Alterou ou cancelou aqui, muda lá também.'],
    ['check','Só os eventos do Prumo',
     'O Prumo cria e atualiza apenas os eventos que ele mesmo gerou. Seus compromissos pessoais não são lidos nem alterados.'],
    ['gear','Você desconecta quando quiser',
     'A conexão fica em Configurações › Integrações. Ao desconectar, o Prumo perde o acesso à sua agenda na hora.'],
  ];
  return (
    <section id="integracoes" className="section tight">
      <div className="wrap">
        <Reveal>
          <div className="eyebrow"><span className="mark">—</span> Integrações</div>
        </Reveal>
        <Reveal delay={60}>
          <h2 className="h2" style={{maxWidth:720,marginTop:14}}>
            A agenda do escritório dentro do <span className="accent-text">Google Agenda</span>.
          </h2>
        </Reveal>
        <Reveal delay={120}>
          <p className="lead" style={{maxWidth:640,marginTop:18}}>
            Conecte a conta Google do escritório e todo compromisso, visita e prazo
            criado no Prumo aparece no seu calendário — no computador e no celular.
            Também funciona com o Outlook, pela conta Microsoft.
          </p>
        </Reveal>
        <div className="grid" style={{gridTemplateColumns:'repeat(3,1fr)',gap:20,marginTop:36}} data-mods>
          {pontos.map(([ic,t,d],i)=>(
            <Reveal key={t} delay={180+i*60}>
              <div className="card card-pad" style={{height:'100%'}}>
                <span style={{width:38,height:38,borderRadius:10,border:'1px solid var(--border-2)',display:'grid',placeItems:'center',color:'var(--accent)'}}>
                  <Icon name={ic} size={19}/>
                </span>
                <div className="h3" style={{fontSize:17,marginTop:16,marginBottom:7}}>{t}</div>
                <p className="muted" style={{fontSize:14.5,lineHeight:1.5}}>{d}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={360}>
          <p className="faint" style={{fontSize:13.5,marginTop:24}}>
            O uso dos dados do Google segue a{' '}
            <a href="https://app.prumotech.com/privacidade" className="navlink">Política de Privacidade</a>{' '}
            do Prumo.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

// Enquanto não há depoimento de cliente real, a seção carrega a fala do fundador.
// Trocar por um depoimento assim que o beta gerar um — a estrutura é a mesma,
// bastam a citação, o nome e a linha de contexto.
function Quote(){
  return (
    <section className="section tight">
      <div className="wrap" style={{maxWidth:820,textAlign:'center'}}>
        <Reveal>
          <blockquote className="display" style={{margin:0,fontSize:'clamp(24px,3.2vw,38px)',lineHeight:1.18,fontWeight:600,letterSpacing:'-.02em'}}>
            <span className="faint">“</span>Construí o Prumo porque eu mesmo perdia horas procurando informação.
            <span className="grad-text"> Escritório de arquitetura não precisa de mais uma planilha.</span><span className="faint">”</span>
          </blockquote>
        </Reveal>
        <Reveal delay={120}>
          <div className="flex center" style={{justifyContent:'center',gap:12,marginTop:26}}>
            <span aria-hidden="true" style={{width:40,height:40,borderRadius:'50%',background:'var(--surface-3)',
              display:'grid',placeItems:'center',fontWeight:600,fontSize:15}}>F</span>
            <div style={{textAlign:'left'}}>
              <div style={{fontWeight:600,fontSize:14.5}}>Felipe Furmann</div>
              <div className="faint mono" style={{fontSize:12.5}}>fundador do Prumo · Curitiba, PR</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Pricing(){
  // Cobrança selecionada: 'mensal' ou 'anual'. O anual mostra o preço equivalente por mês.
  const [billing,setBilling]=React.useState('anual');
  const annual = billing==='anual';

  // Cada plano traz o preço mensal e o anual (valor/mês cobrado anualmente).
  // priceMonthly/priceAnnual em null => plano sob consulta (Estúdio).
  const tiers=[
    // O anual manda no preço: 69,90/mês. O mensal mantém a mesma proporção de
    // desconto que já existia (16,7%): 69,90 / (1 - 0,167) = 83,91 -> 83,90.
    {name:'Autônomo', desc:'Para quem toca tudo sozinho.', priceMonthly:'83,90', priceAnnual:'69,90',
      feats:['1 usuário','Projetos e orçamentos ilimitados','Agenda e clientes','Prospecção de leads'], pop:false},
    {name:'Escritório', desc:'Para times pequenos que crescem.', priceMonthly:'127,90', priceAnnual:'107,90',
      feats:['Até 8 usuários','Tudo do Autônomo +','Obras e financeiro','Relatórios do escritório'], pop:true},
    {name:'Estúdio', desc:'Para operações maiores.', priceMonthly:null, priceAnnual:null,
      feats:['Usuários ilimitados','Permissões por função','Suporte prioritário','Integrações & API'], pop:false},
  ];

  return (
    <section id="precos" className="section">
      <div className="wrap">
        <div style={{textAlign:'center',maxWidth:640,margin:'0 auto'}}>
          {/* sem eyebrow: a seção já é "Preços" na navegação */}
          <Reveal delay={60}><h2 className="h2">Comece grátis. Cresça quando fizer sentido.</h2></Reveal>
          <Reveal delay={120}><p className="lead" style={{maxWidth:480,margin:'16px auto 0'}}>Primeiro mês grátis em qualquer plano. Sem cartão de crédito.</p></Reveal>
        </div>

        {/* alternador mensal / anual */}
        <Reveal delay={120}>
          <div className="flex center" style={{justifyContent:'center',gap:10,marginTop:28}}>
            <div className="flex" style={{padding:4,border:'1px solid var(--border)',borderRadius:999,background:'var(--surface)',gap:4}}>
              {[['mensal','Mensal'],['anual','Anual']].map(([val,label])=>(
                <button key={val} onClick={()=>setBilling(val)}
                  style={{padding:'8px 18px',borderRadius:999,border:0,cursor:'pointer',fontSize:14,fontWeight:600,
                    fontFamily:'var(--font-display)',transition:'all .2s ease',
                    background: billing===val ? 'var(--accent)' : 'transparent',
                    color: billing===val ? 'var(--bg)' : 'var(--text-2)'}}>
                  {label}
                </button>
              ))}
            </div>
            {/* âmbar, não azul: o acento da página é um só.
                "até 17%" porque o desconto real varia por plano (16,7% e 15,6%). */}
            <Badge tone="amber">Economize até 17%</Badge>
          </div>
        </Reveal>

        <div className="grid" style={{gridTemplateColumns:'repeat(3,1fr)',gap:18,marginTop:36,alignItems:'stretch'}} data-price>
          {tiers.map((tier,i)=>{
            const consult = tier.priceMonthly===null; // Estúdio: sem valor fixo
            const price = annual ? tier.priceAnnual : tier.priceMonthly;
            return (
              <Reveal key={tier.name} delay={i*70}>
                <div className="card" style={{padding:'28px 26px',height:'100%',display:'flex',flexDirection:'column',gap:18,
                  borderColor:tier.pop?'var(--accent)':'var(--border)',background:tier.pop?'var(--surface-2)':'var(--surface)'}}>
                  <div className="flex between center">
                    <span style={{fontWeight:650,fontSize:17}}>{tier.name}</span>
                    {/* "recomendado" e não "mais escolhido": pré-lançamento, ainda
                        não existe base de clientes que sustente essa afirmação. */}
                    {tier.pop && <Badge tone="amber">recomendado</Badge>}
                  </div>
                  <p className="muted" style={{fontSize:14,marginTop:-8}}>{tier.desc}</p>
                  {consult ? (
                    // Plano sob consulta — sem preço, valor definido em contato
                    <div className="flex" style={{alignItems:'baseline',gap:6,minHeight:44}}>
                      <span className="mono" style={{fontSize:26,fontWeight:700}}>Sob consulta</span>
                    </div>
                  ) : (
                    <div style={{minHeight:44}}>
                      <div className="flex" style={{alignItems:'baseline',gap:6}}>
                        <span className="mono" style={{fontSize:34,fontWeight:700}}>R$ {price}</span>
                        <span className="faint" style={{fontSize:13}}>/mês</span>
                      </div>
                      {/* no anual, deixa claro que a cobrança é anual */}
                      <span className="faint" style={{fontSize:12}}>{annual ? 'cobrado anualmente' : 'cobrança mensal'}</span>
                    </div>
                  )}
                  {consult ? (
                    <Btn variant="subtle" style={{justifyContent:'center'}} href="Prumo%20-%20Contato.html">Falar com a gente</Btn>
                  ) : (
                    <WaitlistBtn source={`pricing_${tier.name.toLowerCase()}`} variant={tier.pop?'primary':'subtle'} style={{justifyContent:'center'}}>
                      Entrar na lista de espera
                    </WaitlistBtn>
                  )}
                  <hr className="hairline"/>
                  <div className="flex" style={{flexDirection:'column',gap:11}}>
                    {tier.feats.map(f=>(
                      <div key={f} className="flex center" style={{gap:10}}>
                        <Icon name="check" size={16} style={{color:'var(--accent)'}}/>
                        <span style={{fontSize:14.5,color:'var(--text-2)'}}>{f}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function CTA(){
  return (
    <section className="section">
      <div className="wrap">
        <Reveal>
          <div className="card" style={{position:'relative',overflow:'hidden',padding:'clamp(40px,6vw,80px)',textAlign:'center',background:'var(--surface)'}}>
            <div style={{position:'absolute',inset:0,background:'radial-gradient(60% 120% at 50% 0%, color-mix(in oklab,var(--accent) 16%,transparent), transparent 60%)',pointerEvents:'none'}}></div>
            <div style={{position:'relative'}}>
              <h2 className="h2" style={{maxWidth:620,margin:'0 auto'}}>Coloque sua operação no prumo.</h2>
              <p className="lead" style={{maxWidth:480,margin:'18px auto 0'}}>Deixe seu contato e avisamos assim que abrir uma vaga no beta.</p>
              <div className="flex center hero-actions" style={{justifyContent:'center',gap:12,marginTop:28,flexWrap:'wrap'}}>
                <WaitlistBtn source="cta_final" variant="primary" lg>Entrar na lista de espera <Icon name="arrow" size={17}/></WaitlistBtn>
                <Btn variant="ghost" lg href="Prumo%20-%20Contato.html">Falar com a gente</Btn>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function PageBody(){
  return (
    <React.Fragment>
      <Nav/>
      <main>
        <Hero/>
        <Problema/>
        <Features/>
        <ModulesGrid/>
        <Integracoes/>
        <Quote/>
        <Pricing/>
        <CTA/>
      </main>
      <Footer/>
    </React.Fragment>
  );
}

Object.assign(window,{ Hero, Problema, Features, ModulesGrid, Integracoes, Quote, Pricing, CTA, PageBody });