// pages-content.jsx — Solutions, Customers, Blog index + post

function PageSolutions({ id }) {
  const { t } = useT();
  if (id) {
    const p = SOLUTIONS.find(x=>x.id===id);
    if (!p) return <PageNotFound/>;
    return (
      <>
        <section className="module-hero" style={{'--mod-color': p.tone==='coral'?'#FF8A65':p.tone==='pink'?'#F8A5C2':p.tone==='midnight'?'#1A2A55':'#8B5CF6'}}>
          <div className="container">
            <a href="#/solucoes" className="back-link"><Icons.arrow size={14}/> {tx('All solutions','Todas as soluções')}</a>
            <div className="module-hero-grid">
              <div>
                <div className="eyebrow" style={{color:'var(--mod-color)'}}>{tx('Solution for','Solução para')}</div>
                <h1 className="h-1">{p.headline}</h1>
                <p className="lede">{tx('Preconfigured setup. Industry templates. AI trained on your workflow.','Configuração pronta. Templates do mercado. IA treinada para o seu fluxo.')}</p>
                <ul className="bullets">{p.bullet.map((b,i)=><li key={i}>{b}</li>)}</ul>
                <div className="hero-ctas" style={{marginTop:28}}>
                  <a href={URLS.signup} className="btn btn-primary btn-lg">{t('cta.start')}</a>
                  <a href={URLS.sales} className="btn btn-outline btn-lg">{t('cta.talkToSales')}</a>
                </div>
              </div>
              <div className="persona-card">
                <div className="persona-card-ic">{Icons[p.icon](40)}</div>
                <div className="persona-stats">
                  <div><b>2x</b><span>{tx('faster visits','velocidade de atendimento')}</span></div>
                  <div><b>-67%</b><span>{tx('less admin rework','retrabalho admin')}</span></div>
                  <div><b>+38%</b><span>{tx('owner retention','retenção tutores')}</span></div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section>
          <div className="container">
            <div className="section-head">
              <div className="eyebrow">{tx('Recommended modules','Módulos recomendados')}</div>
              <h2 className="h-2">{tx('The right bundle for ','O pacote ideal para ')}{p.headline.toLowerCase()}.</h2>
            </div>
            <div className="modules-grid">
              {MODULES.slice(0, p.id==='solo'?4:p.id==='chain'?8:6).map(m=><ModuleCard key={m.id} m={m}/>)}
            </div>
          </div>
        </section>
        <FinalCta/>
      </>
    );
  }
  return (
    <>
      <PageHeader eyebrow={tx('Solutions','Soluções')} title={t('solutions.title')} sub={t('solutions.sub')}/>
      <section style={{paddingTop:0}}>
        <div className="container">
          <div className="solutions-grid">
            {SOLUTIONS.map(p=>(
              <a key={p.id} href={'#/solucoes/'+p.id} className={'solution-card tone-'+p.tone}>
                <div className="sc-ic">{Icons[p.icon](28)}</div>
                <h3>{p.headline}</h3>
                <ul>{p.bullet.map((b,i)=><li key={i}>{b}</li>)}</ul>
                <span className="more">{tx('Explore','Explorar')} <Icons.arrow/></span>
              </a>
            ))}
          </div>
        </div>
      </section>
      <FinalCta/>
    </>
  );
}

function PageCustomers() {
  const { t } = useT();
  return (
    <>
      <PageHeader eyebrow={tx('Customers','Clientes')} title={t('customers.title')} sub={t('customers.sub')}/>
      <section style={{paddingTop:0}}>
        <div className="container">
          <div className="customers-grid">
            {CUSTOMERS_LIST.map((c,i)=>(
              <div key={i} className="cust-card">
                <div className="cust-logo" style={{background:`hsl(${i*38},45%,82%)`}}>{c.name.split(' ').map(w=>w[0]).slice(0,2).join('')}</div>
                <div className="cust-meta">
                  <div className="cust-name">{c.name}</div>
                  <div className="cust-sub">{c.type} · {c.city}</div>
                  <div className="cust-size">{c.size}</div>
                </div>
              </div>
            ))}
          </div>

          <div style={{marginTop:96}}>
            <div className="section-head">
              <div className="eyebrow">{tx('Featured cases','Casos em destaque')}</div>
              <h2 className="h-2">{tx('Three stories, three contexts.','Três histórias, três contextos.')}</h2>
            </div>
            <div className="cases-grid">
              {[
                { name: tx('AnimalCare Group','Rede AnimalCare'), city: tx('7 locations · São Paulo','7 unidades · SP'), metric: tx('22 days','22 dias'), metricL: tx('to migrate 12 years of data','migração de 12 anos de dados'), body: tx('Real-time consolidated finance and standardized clinical protocols raised operating margin by 14%.','Consolidação financeira em tempo real e padronização de protocolos clínicos elevaram a margem operacional em 14%.'), color: '#A5B4FC' },
                { name: tx('Doguinho Pet Shop','Petshop Doguinho'), city: 'Recife', metric: '+102%', metricL: tx('new clients in 6 months','clientes novos em 6 meses'), body: tx('Online booking plus AI messaging transformed the front desk. The POS cut average sale time by 4x.','Agendamento online + IA de mensagens transformaram a recepção. PDV cortou o tempo médio de venda em 4x.'), color: '#FFB199' },
                { name: 'Pata Feliz', city: 'Curitiba', metric: '12 min', metricL: tx('average clinical visit','atendimento clínico médio'), body: tx('The AI writes the note while the vet examines. She looks at the pet again. Owners noticed.','A IA escreve a evolução enquanto a vet examina. Voltou a olhar pro pet. Os tutores notaram.'), color: '#F8A5C2' },
              ].map((c,i)=>(
                <div key={i} className="case-card">
                  <div className="case-color" style={{background:c.color}}></div>
                  <div className="case-metric"><b>{c.metric}</b><span>{c.metricL}</span></div>
                  <h4>{c.name}</h4>
                  <div className="muted small">{c.city}</div>
                  <p>{c.body}</p>
                  <a href="#/blog" className="more">{tx('Read the full case','Ler caso completo')} <Icons.arrow/></a>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
      <FinalCta/>
    </>
  );
}

function PageBlog({ postId }) {
  const { t } = useT();
  if (postId) {
    const post = BLOG_POSTS.find(p=>p.id===postId) || BLOG_POSTS[0];
    return (
      <>
        <section className="blog-post-hero">
          <div className="container" style={{maxWidth: 760}}>
            <a href="#/blog" className="back-link"><Icons.arrow size={14}/> {tx('Back to blog','Voltar ao blog')}</a>
            <div className="post-cat" style={{background: post.color+'40', color:'#1F2937'}}>{post.cat}</div>
            <h1 className="h-1" style={{fontSize:'clamp(36px,4.4vw,56px)'}}>{post.title}</h1>
            <div className="post-meta">
              <div className="post-av" style={{background:post.color}}>{post.author.split(' ').map(w=>w[0]).slice(0,2).join('')}</div>
              <div>
                <div className="post-author">{post.author}</div>
                <div className="post-info">{post.role} · {post.date} · {post.read} {t('blog.minRead')}</div>
              </div>
            </div>
          </div>
        </section>
        <section style={{paddingTop:0}}>
          <div className="container" style={{maxWidth: 760}}>
            <div className="post-cover" style={{background:`linear-gradient(135deg, ${post.color} 0%, ${post.color}80 100%)`}}>
              <div className="post-cover-tag">{tx('article','artigo')}</div>
            </div>
            <article className="prose">
              <p className="lede" style={{maxWidth:'100%'}}>{post.excerpt}</p>
              <h2>O contexto</h2>
              <p>Há cerca de uma década, o mercado pet brasileiro vive uma transformação silenciosa. Clínicas que eram operações familiares passaram a profissionalizar gestão, marketing e atendimento. Petshops cresceram e viraram redes. Profissionais autônomos descobriram canais digitais. Mas o software que sustenta tudo isso, em larga medida, parou no tempo.</p>
              <p>Na Zoee, conversamos semanalmente com centenas de profissionais. Os relatos se repetem: sistemas que travam, telas confusas, ausência de WhatsApp oficial, financeiro desconectado do atendimento, nenhuma IA. As clínicas pagam alto por software que atrapalha mais do que ajuda.</p>
              <h2>O que mudamos no Zoee</h2>
              <p>Desenhamos cada módulo lado a lado com profissionais reais. Validamos cada decisão de UI com vets exercendo a clínica. Construímos o Cowork — nosso espaço de IA — como um colega que entende casos, tutores e a operação do dia.</p>
              <blockquote>"Em dois meses, deixamos de operar três sistemas diferentes. A IA do Cowork escreve as evoluções enquanto eu examino. Voltei a olhar pro pet, não pra tela." — Dra. Camila Reis</blockquote>
              <h2>Como isso fica na prática</h2>
              <p>Considere uma consulta padrão de 20 minutos. Antes: a vet escreve, digita, abre outra tela para a receita, faz busca por bula, copia, cola, gera PDF, envia por email manualmente. Resultado: 45% do tempo é operação de software.</p>
              <p>Com a Zoee: a vet conversa com o pet e o tutor. O microfone está ligado. O Cowork escuta, estrutura SOAP, sugere os diagnósticos diferenciais com base em sinais clínicos coletados, gera a receita com bula integrada, envia por WhatsApp em 1 clique. O atendimento dura 12 minutos — não porque a vet acelerou, mas porque o software saiu do caminho.</p>
              <h2>O caminho à frente</h2>
              <p>Estamos só começando. Próximos 6 meses: integração com Open Finance, módulo de telemedicina veterinária, marketplace de ferramentas customizadas, app whitelabel completo. Tudo no mesmo espírito — tecnologia que cuida.</p>
              <p>Se você quer testar, é grátis. <a href={URLS.signup}>Comece aqui.</a></p>
            </article>

            <div style={{marginTop:64,padding:32,background:'var(--bg-2)',borderRadius:18,textAlign:'center'}}>
              <h3 style={{margin:0,fontSize:22,letterSpacing:'-0.02em'}}>{tx('Get content like this by email.','Receba conteúdo como este por email.')}</h3>
              <p style={{color:'var(--muted)',margin:'8px 0 18px'}}>{tx('One email a week. No spam.','Um email por semana. Sem spam.')}</p>
              <div style={{display:'flex',gap:8,maxWidth:420,margin:'0 auto'}}>
                <input className="input" placeholder={tx('you@company.com','seu@email.com.br')}/>
                <button className="btn btn-primary">{tx('Subscribe','Inscrever')}</button>
              </div>
            </div>
          </div>
        </section>

        <section style={{background:'var(--bg-2)'}}>
          <div className="container">
            <div className="section-head"><h2 className="h-2">{tx('More articles','Outros artigos')}</h2></div>
            <div className="blog-grid">
              {BLOG_POSTS.filter(p=>p.id!==post.id).slice(0,3).map(p=>(
                <a key={p.id} href={'#/blog/'+p.id} className="blog-card">
                  <div className="blog-cover" style={{background:`linear-gradient(135deg, ${p.color} 0%, ${p.color}80 100%)`}}><span>{p.cat}</span></div>
                  <h4>{p.title}</h4>
                  <p>{p.excerpt}</p>
                  <div className="blog-meta">{p.author} · {p.date}</div>
                </a>
              ))}
            </div>
          </div>
        </section>
      </>
    );
  }
  return (
    <>
      <PageHeader eyebrow={tx('Zoee Journal','Diário Zoee')} title={t('blog.title')} sub={t('blog.sub')}/>
      <section style={{paddingTop:0}}>
        <div className="container">
          <div className="blog-cats">
            {(tx(['All','Product','Management','CRM','Marketing','Compliance','Finance'],['Todos','Produto','Gestão','CRM','Marketing','Conformidade','Financeiro'])).map((c,i)=>(
              <button key={c} className={'blog-cat '+(i===0?'active':'')}>{c}</button>
            ))}
          </div>
          <div className="blog-grid">
            {BLOG_POSTS.map(p=>(
              <a key={p.id} href={'#/blog/'+p.id} className="blog-card">
                <div className="blog-cover" style={{background:`linear-gradient(135deg, ${p.color} 0%, ${p.color}80 100%)`}}><span>{p.cat}</span></div>
                <h4>{p.title}</h4>
                <p>{p.excerpt}</p>
                <div className="blog-meta">{p.author} · {p.date} · {p.read} {t('blog.minRead')}</div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { PageSolutions, PageCustomers, PageBlog });