// pages-support.jsx — Docs, Support, Legal pages, NotFound

function PageDocs() {
  const { t } = useT();
  return (
    <>
      <PageHeader eyebrow={tx('Documentation','Documentação')} title={t('docs.title')} sub={t('docs.sub')}/>
      <section style={{paddingTop:0}}>
        <div className="container">
          <div className="docs-grid">
            <aside className="docs-side">
              <input className="input" placeholder={t('docs.search')}/>
              <nav>
                {DOC_SECTIONS.map((s,i)=>(
                  <div key={i} className="docs-side-sec">
                    <h6>{s.title}</h6>
                    <ul>{s.items.map((it,j)=>(<li key={j} className={i===0&&j===0?'active':''}><a href="#">{it}</a></li>))}</ul>
                  </div>
                ))}
              </nav>
            </aside>
            <article className="docs-content">
              <div className="docs-breadcrumb">
                {tx('Guides','Guias')} <Icons.arrow size={12}/> {tx('Getting started','Primeiros passos')} <Icons.arrow size={12}/> {tx('Overview','Visão geral')}
              </div>
              <h1 className="h-2" style={{margin:'8px 0 4px'}}>{tx('Welcome to Zoee','Bem-vinda à Zoee')}</h1>
              <p className="muted">{tx('Last updated May 2, 2026 · 4 min read','Última atualização · 02 mai 2026 · 4 min de leitura')}</p>
              <article className="prose" style={{marginTop:24}}>
                <p className="lede" style={{maxWidth:'100%'}}>
                  {tx(
                    'Zoee is a modular platform for the pet-care market. These docs cover core concepts, modules, the REST API, webhooks and SDKs.',
                    'A Zoee é uma plataforma modular para o mercado pet. Esta documentação cobre conceitos centrais, módulos, API REST, webhooks e SDKs.'
                  )}
                </p>
                <h3>{tx('Core concepts','Conceitos centrais')}</h3>
                <p>
                  {tx('Zoee organizes data around four primary entities: ','A Zoee organiza dados em quatro entidades primárias: ')}
                  <b>Tenants</b>{tx(' (your company), ',' (sua empresa), ')}<b>Workspaces</b>{tx(' (locations), ',' (unidades), ')}
                  <b>Pets</b>{tx(' and ',' e ')}<b>{tx('Owners','Tutores')}</b>{tx('. Everything else hangs off those.','. Tudo gira em torno disso.')}
                </p>
                <h3>{tx('Authentication','Autenticação')}</h3>
                <p>
                  {tx(
                    'The API uses OAuth 2.0 with Bearer tokens. Tokens can be user-delegated or service tokens. Generate them in the dashboard under ',
                    'A API usa OAuth 2.0 com tokens Bearer. Tokens podem ser de usuário (delegados) ou de serviço. Geração via dashboard em '
                  )}
                  <code>/settings/tokens</code>.
                </p>
                <pre><code>{`curl https://api.zoee.pet/v1/pets \\
  -H "Authorization: Bearer zoe_live_xxx" \\
  -H "Accept-Language: en"`}</code></pre>
                <h3>{tx('Rate limits','Limites de uso')}</h3>
                <p>
                  {tx(
                    'Pro plan: 600 req/min per workspace. Premium plan: 4,000 req/min. ',
                    'Plano Pro: 600 req/min por workspace. Plano Premium: 4.000 req/min. '
                  )}
                  <code>X-RateLimit-*</code>
                  {tx(' headers are returned on every call.',' são retornados em toda chamada.')}
                </p>
                <h3>{tx('Idempotency','Idempotência')}</h3>
                <p>
                  {tx('POST requests accept ','POSTs aceitam ')}<code>Idempotency-Key</code>
                  {tx('. We guarantee a consistent response for 24 hours.','. Garantimos resposta consistente por 24h.')}
                </p>
                <h3>{tx('Official SDKs','SDKs oficiais')}</h3>
                <ul><li>JavaScript / TypeScript</li><li>Python</li><li>Ruby</li><li>Go (beta)</li></ul>
              </article>

              <div className="docs-next">
                <a href="#" className="docs-nav-card">
                  <span className="muted small">{tx('Next','Próximo')}</span>
                  <b>{tx('Quickstart: appointments via API','Quickstart: agendamentos via API')} <Icons.arrow size={14}/></b>
                </a>
              </div>
            </article>
          </div>
        </div>
      </section>
    </>
  );
}

function PageSupport() {
  const { t } = useT();
  const cats = [
    [tx('Getting started','Primeiros passos'), tx('12 articles','12 artigos'), '#FFB199', 'book'],
    [tx('Scheduling','Agenda'), tx('24 articles','24 artigos'), '#A5B4FC', 'cal'],
    [tx('Clinical care','Atendimento clínico'), tx('38 articles','38 artigos'), '#F8A5C2', 'stethoscope'],
    [tx('CRM and WhatsApp','CRM e WhatsApp'), tx('19 articles','19 artigos'), '#86EFAC', 'chat'],
    [tx('Finance','Financeiro'), tx('21 articles','21 artigos'), '#FCD34D', 'coin'],
    [tx('AI and Cowork','IA e Cowork'), tx('17 articles','17 artigos'), '#C4B5FD', 'spark'],
    [tx('POS and inventory','PDV e estoque'), tx('15 articles','15 artigos'), '#67E8F9', 'register'],
    [tx('Account and billing','Conta e cobrança'), tx('9 articles','9 artigos'), '#FCA5A5', 'shield'],
  ];
  return (
    <>
      <PageHeader eyebrow={tx('Help center','Central de ajuda')} title={t('support.title')} sub={t('support.sub')}/>
      <section style={{paddingTop:0}}>
        <div className="container" style={{maxWidth:920}}>
          <div className="support-search">
            {Icons.search(20)}
            <input className="input" placeholder={t('support.search')}/>
          </div>
          <div className="support-cats">
            {cats.map((c,i)=>(
              <a key={i} href="#" className="support-cat">
                <div className="sc-ic" style={{background:c[2]}}>{Icons[c[3]](22)}</div>
                <div className="sc-title">{c[0]}</div>
                <div className="sc-count">{c[1]}</div>
              </a>
            ))}
          </div>
          <div className="support-contact">
            <div>
              <h3>{tx('Didn\u2019t find what you needed?','Não encontrou o que procurava?')}</h3>
              <p className="muted">
                {tx(
                  'Human support in English and Portuguese, Monday to Saturday, 7am to 10pm.',
                  'Atendimento humano em português, de segunda a sábado, 7h às 22h (BRT).'
                )}
              </p>
            </div>
            <div className="support-channels">
              <a href={URLS.contact} className="btn btn-primary">{tx('Talk to us','Falar com a gente')}</a>
              <a href={URLS.whatsapp} className="btn btn-outline">WhatsApp</a>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function PageLegal({ kind }) {
  const data = LEGAL_DOCS[kind];
  if (!data) return <PageNotFound/>;
  return (
    <>
      <PageHeader eyebrow="Legal" title={data.title} sub={data.updated}/>
      <section style={{paddingTop:0}}>
        <div className="container" style={{maxWidth:780}}>
          <div className="legal-tabs">
            <a href="#/legal/lgpd" className={kind==='lgpd'?'active':''}>{tx('Data protection','LGPD')}</a>
            <a href="#/legal/termos" className={kind==='termos'?'active':''}>{tx('Terms','Termos de uso')}</a>
            <a href="#/legal/privacidade" className={kind==='privacidade'?'active':''}>{tx('Privacy','Privacidade')}</a>
          </div>
          <article className="prose legal-prose">
            {data.body.map((b,i)=>(
              b.h ? <h3 key={i}>{b.h}</h3> : <p key={i}>{b.p}</p>
            ))}
            {kind==='lgpd' && (
              <div className="dpo-card">
                <div className="dpo-ic">{Icons.shield(24)}</div>
                <div>
                  <b>{tx('Data Protection Officer','Encarregada de Dados (DPO)')}</b>
                  <p>
                    Camila Reis Ferreira<br/>
                    dpo@zoee.pet · {tx('Requests answered within 15 business days.','Solicitações atendidas em até 15 dias úteis.')}
                  </p>
                </div>
              </div>
            )}
          </article>
        </div>
      </section>
    </>
  );
}

function PageNotFound() {
  return (
    <section className="hero">
      <div className="container" style={{textAlign:'center',padding:'40px 0'}}>
        <div className="eyebrow">{tx('Error 404','Erro 404')}</div>
        <h1 className="h-1">{tx('Page not found.','Página não encontrada.')}</h1>
        <p className="lede" style={{margin:'8px auto 28px'}}>
          {tx('The URL may be wrong, or the content has moved.','Talvez a URL esteja errada, ou o conteúdo tenha sido movido.')}
        </p>
        <a href="#/" className="btn btn-primary btn-lg">{tx('Back to home','Voltar para o início')}</a>
      </div>
    </section>
  );
}

Object.assign(window, { PageDocs, PageSupport, PageLegal, PageNotFound });