// pages-product.jsx — Home, Recursos, Module detail, Cowork, Preços

const { useState: useStateP } = React;

function PageHome() {
  const { t } = useT();
  return (
    <>
      <section className="hero">
        <div className="container hero-inner">
          <div className="hero-copy">
            <div className="eyebrow">{t('hero.eyebrow')}</div>
            <h1 className="h-1">{t('hero.title')}</h1>
            <p className="lede">{t('hero.sub')}</p>
            <div className="hero-ctas">
              <a href={URLS.signup} className="btn btn-primary btn-lg">{t('cta.start')}</a>
              <a href="#/cowork" className="btn btn-outline btn-lg">{t('cta.demo')}</a>
            </div>
            <div className="hero-trust">
              <span className="check">{t('hero.trust1')}</span>
              <span className="check">{t('hero.trust2')}</span>
              <span className="check">{t('hero.trust3')}</span>
            </div>
          </div>
          <HeroMockup />
        </div>
      </section>

      <div className="proof">
        <div className="container proof-inner">
          <div className="proof-label"><strong>{t('proof.label')}</strong></div>
          <div className="proof-logos">
            <div className="proof-logo l1"><span className="dot"></span>Pata Feliz</div>
            <div className="proof-logo l2"><span className="dot"></span>Doguinho</div>
            <div className="proof-logo l3"><span className="dot"></span>AnimalCare</div>
            <div className="proof-logo l4"><span className="dot"></span>BichoSaúde</div>
            <div className="proof-logo l5"><span className="dot"></span>Mundo Animal</div>
          </div>
          <div className="proof-lang"><span className="flag"></span>{t('proof.lang')}</div>
        </div>
      </div>

      <section>
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">{t('problem.eyebrow')}</div>
            <h2 className="h-2">{t('problem.title')}</h2>
            <p className="lede">{t('problem.sub')}</p>
          </div>
          <div className="cols-3">
            <div className="problem-card coral">
              <div className="picon">{Icons.bolt(24)}</div>
              <h3>{t('problem.c1.title')}</h3>
              <p>{t('problem.c1.body')}</p>
            </div>
            <div className="problem-card pink">
              <div className="picon">{Icons.people(24)}</div>
              <h3>{t('problem.c2.title')}</h3>
              <p>{t('problem.c2.body')}</p>
            </div>
            <div className="problem-card midnight">
              <div className="picon">{Icons.layers(24)}</div>
              <h3>{t('problem.c3.title')}</h3>
              <p>{t('problem.c3.body')}</p>
            </div>
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">{t('modules.eyebrow')}</div>
            <h2 className="h-2">{t('modules.title')}</h2>
            <p className="lede">{t('modules.sub')}</p>
          </div>
          <div className="modules-grid">
            {MODULES.map(m => <ModuleCard key={m.id} m={m} />)}
          </div>
          <div style={{textAlign:'center',marginTop:40}}>
            <a href="#/recursos" className="btn btn-outline">{t('cta.allModules')} <Icons.arrow /></a>
          </div>
        </div>
      </section>

      <section className="ai-section">
        <div className="container">
          <div className="ai-grid">
            <div>
              <div className="eyebrow">{t('ai.eyebrow')}</div>
              <h2 className="h-2">{t('ai.title')}</h2>
              <p className="lede">{t('ai.sub')}</p>
              <div className="ai-features">
                <div className="ai-feat"><div className="num">01</div><div><h4>{t('ai.f1.title')}</h4><p>{t('ai.f1.body')}</p></div></div>
                <div className="ai-feat"><div className="num">02</div><div><h4>{t('ai.f2.title')}</h4><p>{t('ai.f2.body')}</p></div></div>
                <div className="ai-feat"><div className="num">03</div><div><h4>{t('ai.f3.title')}</h4><p>{t('ai.f3.body')}</p></div></div>
              </div>
              <a href="#/cowork" className="ai-cta">{t('ai.cta')}</a>
            </div>
            <CoworkMockup />
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">{t('how.eyebrow')}</div>
            <h2 className="h-2">{t('how.title')}</h2>
          </div>
          <div className="timeline">
            <div className="tl-step coral"><div className="tl-num">1</div><h4>{t('how.s1.title')}</h4><p>{t('how.s1.body')}</p></div>
            <div className="tl-step"><div className="tl-num">2</div><h4>{t('how.s2.title')}</h4><p>{t('how.s2.body')}</p></div>
            <div className="tl-step"><div className="tl-num">3</div><h4>{t('how.s3.title')}</h4><p>{t('how.s3.body')}</p></div>
            <div className="tl-step"><div className="tl-num">4</div><h4>{t('how.s4.title')}</h4><p>{t('how.s4.body')}</p></div>
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">{t('pricing.eyebrow')}</div>
            <h2 className="h-2">{t('pricing.title')}</h2>
            <p className="lede">{t('pricing.sub')}</p>
          </div>
          <PricingBlock />
        </div>
      </section>

      <section>
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">{t('testimonials.eyebrow')}</div>
            <h2 className="h-2">{t('testimonials.title')}</h2>
          </div>
          <div className="t-grid">
            {TESTIMONIALS.map((tm,i)=>(
              <div key={i} className="t-card">
                <div className="t-stars">★★★★★</div>
                <p className="t-quote">"{tm.quote}"</p>
                <div className="t-author">
                  <div className={'t-av '+tm.avCls}>{tm.av}</div>
                  <div className="t-meta">
                    <div className="name">{tm.name}</div>
                    <div className="role">{tm.role}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--bg-2)' }}>
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">{t('faq.eyebrow')}</div>
            <h2 className="h-2">{t('faq.title')}</h2>
          </div>
          <FAQBlock items={FAQ} />
        </div>
      </section>

      <FinalCta />
    </>
  );
}

// ── Recursos (overview de todos os módulos) ──
function PageFeatures() {
  const { t } = useT();
  return (
    <>
      <PageHeader eyebrow={t('modules.eyebrow')} title={t('features.title')} sub={t('features.sub')} />
      <section style={{paddingTop:0}}>
        <div className="container">
          <div className="modules-grid">
            {MODULES.map(m => <ModuleCard key={m.id} m={m} />)}
          </div>

          <div style={{marginTop:96}}>
            <div className="section-head">
              <div className="eyebrow">{tx('How it fits together','Como tudo se conecta')}</div>
              <h2 className="h-2">{tx('Modular without the mess.','Modular sem virar bagunça.')}</h2>
              <p className="lede">{tx('Each module stands on its own, but all of them share the same pets, owners, visits and finances. You never type anything twice.','Cada módulo tem sua autonomia. Mas todos compartilham os mesmos pets, tutores, atendimentos e finanças. Você não digita duas vezes nada.')}</p>
            </div>
            <div className="cols-3">
              <div className="problem-card midnight">
                <div className="picon">{Icons.shield(24)}</div>
                <h3>{tx('Central identity','Identidade central')}</h3>
                <p>{tx('Single sign-on, granular role permissions, full auditing. Optional SSO on Premium.','Login único, permissões granulares por papel, auditoria completa. SSO opcional no Premium.')}</p>
              </div>
              <div className="problem-card coral">
                <div className="picon">{Icons.layers(24)}</div>
                <h3>{tx('Unified data','Dados unificados')}</h3>
                <p>{tx('A pet added at checkout shows up in the medical record. A visit generates an invoice in Finance. No islands.','Pet cadastrado no PDV aparece no prontuário. Atendimento gera fatura no Financeiro. Sem ilhas.')}</p>
              </div>
              <div className="problem-card pink">
                <div className="picon">{Icons.spark(24)}</div>
                <h3>{tx('AI across the board','IA transversal')}</h3>
                <p>{tx('Cowork reads context from every active module. The more modules, the smarter it gets.','Cowork acessa contexto de todos os módulos ativos. Quanto mais módulos, mais inteligente.')}</p>
              </div>
            </div>
          </div>
        </div>
      </section>
      <FinalCta />
    </>
  );
}

// ── Module detail (1 template, themed per module) ──
function PageModule({ id }) {
  const { t } = useT();
  const m = MODULES.find(x => x.id === id);
  const long = MODULE_LONG[id];
  if (!m || !long) return <PageNotFound />;
  const color = long.color;

  return (
    <>
      <section className="module-hero" style={{ '--mod-color': color }}>
        <div className="container">
          <a href="#/recursos" className="back-link"><Icons.arrow size={14} /> {tx('All modules','Todos os módulos')}</a>
          <div className="module-hero-grid">
            <div>
              <div className="eyebrow" style={{color:'var(--mod-color)'}}>{long.eyebrow}</div>
              <h1 className="h-1">{long.pitch}</h1>
              <p className="lede">{long.body}</p>
              <div className="hero-ctas" style={{marginTop:28}}>
                <a href={URLS.signup} className="btn btn-primary btn-lg">{t('cta.start')}</a>
                <a href="#/precos" className="btn btn-outline btn-lg">{t('cta.viewPlans')}</a>
              </div>
            </div>
            <ModuleMockup moduleId={id} color={color} />
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">{tx('What\u2019s inside','O que vem dentro')}</div>
            <h2 className="h-2">{tx('Features in ','Recursos do módulo ')}{t('mod.'+id)}.</h2>
          </div>
          <div className="feat-grid">
            {m.feats.map((f,i)=>(
              <div key={i} className="feat-card">
                <div className="feat-num" style={{background:color+'33', color: '#1F2937'}}>{String(i+1).padStart(2,'0')}</div>
                <h4>{f}</h4>
                <p className="muted">{tx('Available on ','Disponível no plano ')}{m.tag === 'free' ? 'Free' : m.tag === 'pro' ? 'Pro' : 'Premium'}{tx(' and above.',' e superiores.')}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{background:'var(--bg-2)'}}>
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">{tx('Works with','Integra com')}</div>
            <h2 className="h-2">{tx('Connects to your other modules.','Funciona com seus outros módulos.')}</h2>
            <p className="lede">{tx('Every Zoee module talks to the others. ','Cada módulo da Zoee conversa com os outros. ')}{t('mod.'+id)}{tx(' connects naturally with:',' se conecta naturalmente com:')}</p>
          </div>
          <div className="modules-grid">
            {MODULES.filter(x=>x.id!==id).slice(0,4).map(m2 => <ModuleCard key={m2.id} m={m2} />)}
          </div>
        </div>
      </section>

      <FinalCta />
    </>
  );
}

// ── Cowork dedicated page ──
function PageCowork() {
  const { t } = useT();
  return (
    <>
      <section className="ai-section" style={{paddingBottom: 80}}>
        <div className="container">
          <div className="ai-grid">
            <div>
              <div className="eyebrow">{t('ai.eyebrow')}</div>
              <h1 className="h-1" style={{color:'#fff'}}>{t('cowork.title')}</h1>
              <p className="lede">{t('cowork.sub')}</p>
              <div className="hero-ctas" style={{marginTop:28}}>
                <a href={URLS.signup} className="btn btn-coral btn-lg">{t('cta.start')}</a>
                <a href={URLS.sales} className="btn btn-outline btn-lg" style={{background:'transparent',color:'#fff',borderColor:'rgba(255,255,255,0.3)'}}>{t('cta.talkToSales')}</a>
              </div>
            </div>
            <CoworkMockup />
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">{tx('How it works','Como funciona')}</div>
            <h2 className="h-2">{tx('Three layers. One space.','Três camadas. Um espaço só.')}</h2>
            <p className="lede">{tx('Cowork brings chat, agents and tools into one conversational surface, always in the context of your clinic\u2019s data.','Cowork une chat, agentes e ferramentas em uma experiência conversacional. Tudo no contexto dos dados da sua clínica.')}</p>
          </div>
          <div className="cols-3">
            <div className="problem-card coral">
              <div className="picon">{Icons.chat(24)}</div>
              <h3>{tx('1. Chat with context','1. Chat com contexto')}</h3>
              <p>{tx('Talk to an AI that sees pets, owners, the schedule and the books. No prompt engineering, no training. It works on day one.','Converse com IA que enxerga pets, tutores, agenda e finanças. Sem prompt engineering, sem treinamento. Funciona desde o primeiro dia.')}</p>
            </div>
            <div className="problem-card pink">
              <div className="picon">{Icons.bolt(24)}</div>
              <h3>{tx('2. Autonomous agents','2. Agentes autônomos')}</h3>
              <p>{tx('Define triggers (new booking, overdue, follow-up) and actions (message, reminder, collection). Agents run 24/7.','Defina gatilhos (novo agendamento, atraso, retorno...) e ações (mensagem, lembrete, cobrança...). Os agentes rodam 24/7.')}</p>
            </div>
            <div className="problem-card midnight">
              <div className="picon">{Icons.spark(24)}</div>
              <h3>{tx('3. Tools you create','3. Ferramentas que você cria')}</h3>
              <p>{tx('\u201cI want a weight-based dose calculator for carprofen.\u201d Described out loud, built by the AI, saved to your menu, shareable with the team.','"Quero uma calculadora de dose por peso para Carprofeno." Descrita em voz, criada pela IA, salva no menu. Compartilhável com o time.')}</p>
            </div>
          </div>
        </div>
      </section>

      <section style={{background:'var(--bg-2)'}}>
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">{tx('Supported models','Modelos suportados')}</div>
            <h2 className="h-2">{tx('The best models in the world, without an account on any of them.','Os melhores modelos do mundo, sem você ter conta em nenhum.')}</h2>
            <p className="lede">{tx('Cowork routes automatically to the right model for the task. Switch manually whenever you want.','Cowork roteia automaticamente para o modelo certo conforme a tarefa. Você escolhe trocar, se quiser.')}</p>
          </div>
          <div className="models-grid">
            {[
              { name: 'Claude 4', kind: 'Anthropic', use: tx('Clinical reasoning','Raciocínio clínico'), color: '#FFB199' },
              { name: 'GPT-5', kind: 'OpenAI', use: tx('Content + chat','Conteúdo + chat'), color: '#86EFAC' },
              { name: 'Gemini 2.5', kind: 'Google', use: tx('Multimodal + imaging','Multimodal + imagens'), color: '#A5B4FC' },
              { name: 'Llama 4', kind: 'Meta · on-prem', use: tx('Sensitive data','Dados sensíveis'), color: '#F8A5C2' },
              { name: 'Whisper v3', kind: 'OpenAI', use: tx('Clinical transcription','Transcrição clínica'), color: '#FCD34D' },
              { name: 'Eleven v2', kind: 'ElevenLabs', use: tx('Audio for owners','Áudio para tutor'), color: '#67E8F9' },
            ].map(mo => (
              <div key={mo.name} className="model-card">
                <div className="model-dot" style={{background:mo.color}}></div>
                <div className="model-name">{mo.name}</div>
                <div className="model-kind">{mo.kind}</div>
                <div className="model-use">{mo.use}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <FinalCta />
    </>
  );
}

// ── Pricing page ──
function PagePricing() {
  const { t } = useT();
  return (
    <>
      <PageHeader eyebrow={t('pricing.eyebrow')} title={t('pricingPage.title')} sub={t('pricingPage.sub')} />
      <section style={{paddingTop:0}}>
        <div className="container">
          <PricingBlock />

          <div style={{marginTop:96}}>
            <div className="section-head">
              <div className="eyebrow">{tx('Full comparison','Comparativo completo')}</div>
              <h2 className="h-2">{tx('Compare plans side by side.','Compare planos lado a lado.')}</h2>
            </div>
            <div className="compare-table">
              <div className="ct-row ct-head">
                <div>{tx('Features','Recursos')}</div>
                <div>Free</div>
                <div className="hl">Pro</div>
                <div>Premium</div>
              </div>
              {[
                [tx('Full scheduling','Agenda completa'), '✓','✓','✓'],
                [tx('Directory / Presence','Diretório / Presence'), '✓','✓','✓'],
                [tx('Clinical Care','Atendimento Clínico'), '—','✓','✓'],
                ['CRM + WhatsApp Meta API', '—','✓','✓'],
                [tx('Full finance','Financeiro completo'), '—','✓','✓'],
                [tx('Sales / POS','Vendas / PDV'), '—','✓','✓'],
                ['Marketing + Content Studio', '—','—','✓'],
                [tx('Owner Portal (app)','Portal do Tutor (app)'), '—','—','✓'],
                [tx('AI agents','Agentes IA'), 'Demo', tx('1,000 actions/mo','1.000 ações/mês'), tx('Unlimited','Ilimitado')],
                [tx('Providers','Profissionais'), '1', tx('up to 10','até 10'), tx('Unlimited','Ilimitado')],
                [tx('Multi-unit','Multi-unidade'), '—','—','✓'],
                [tx('Support','Suporte'), tx('Help center','Base ajuda'),'Chat', tx('Dedicated CSM','CSM dedicado')],
                ['SSO + SLA', '—','—','✓'],
              ].map((r,i)=>(
                <div key={i} className="ct-row">
                  <div>{r[0]}</div>
                  <div className="muted">{r[1]}</div>
                  <div className="hl"><b>{r[2]}</b></div>
                  <div>{r[3]}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{marginTop:96}}>
            <div className="section-head">
              <div className="eyebrow">{tx('Pricing questions','Perguntas sobre preços')}</div>
              <h2 className="h-2">{tx('No fine print.','Sem letra miúda.')}</h2>
            </div>
            <FAQBlock items={[
              { q: tx('Can I pay monthly and switch to annual later?','Posso pagar mensal e mudar para anual depois?'), a: tx('Yes. Upgrade to annual whenever you like and the amount is prorated.','Pode. Você faz upgrade para anual quando quiser e o valor é prorrateado.') },
              { q: tx('What counts as an "AI action"?','O que conta como "ação de IA"?'), a: tx('One agent execution — a message sent, an automation run. Conversations in Cowork do not count toward the limit.','Uma execução de agente (uma mensagem disparada, uma automação rodada). Conversas no Cowork não contam para o limite.') },
              { q: tx('Is there an implementation fee?','Existe taxa de implantação?'), a: tx('No. Onboarding and data migration are included on every paid plan.','Não. Onboarding e migração de dados estão inclusos em todos os planos pagos.') },
              { q: tx('Is there a discount for nonprofits and rescues?','Há desconto para ONGs e protetores?'), a: tx('Yes. 50% off Pro and Premium for registered nonprofits. Write to partners@zoee.pet.','Sim. 50% off em Pro e Premium para ONGs cadastradas. Fale com a gente em parcerias@zoee.pet.') },
              { q: tx('Which payment methods do you accept?','Posso pagar via NF ou PIX?'), a: tx('Card, bank transfer, PIX and invoicing. Purchase-order billing is available on Premium.','Sim. Cartão, boleto, PIX e NFe são suportados. Pagamento corporativo via empenho no Premium.') },
            ]} />
          </div>
        </div>
      </section>
      <FinalCta />
    </>
  );
}

Object.assign(window, { PageHome, PageFeatures, PageModule, PageCowork, PagePricing });