// pages-company.jsx — About, Careers, Contact, Changelog

function PageAbout() {
  const { t } = useT();
  return (
    <>
      <PageHeader eyebrow={tx('About Zoee','Sobre Zoee')} title={t('about.title')} sub={t('about.sub')}/>
      <section style={{paddingTop:0}}>
        <div className="container">
          <div className="about-mission">
            <div className="about-mission-l">
              <div className="eyebrow">{t('about.mission')}</div>
              <h2 className="h-2">{t('about.missionBody')}</h2>
              <p className="muted" style={{fontSize:17,maxWidth:520}}>{tx('We began designing Zoee in 2024, after spending months inside real clinics watching how they work. In 2026 we serve more than 1,200 pet businesses across seven countries. The mission has not changed: give time back to the people who provide care.','Em 2024 começamos a desenhar a Zoee depois de passar meses dentro de clínicas reais, observando rotinas. Em 2026 atendemos mais de 1.200 negócios pet em sete países. A missão é a mesma: devolver tempo a quem cuida.')}</p>
            </div>
            <div className="about-stats">
              <div><b>1,200+</b><span>{tx('clinics and pet shops','clínicas e petshops')}</span></div>
              <div><b>7</b><span>{tx('languages in production','idiomas em produção')}</span></div>
              <div><b>240k+</b><span>{tx('active pets in the system','pets ativos no sistema')}</span></div>
              <div><b>{tx('$0','R$ 0')}</b><span>{tx('permanent free plan','plano gratuito permanente')}</span></div>
            </div>
          </div>

          <div style={{marginTop:96}}>
            <div className="section-head">
              <div className="eyebrow">{t('about.values')}</div>
              <h2 className="h-2">{tx('What guides our work.','O que guia nosso trabalho.')}</h2>
            </div>
            <div className="values-grid">
              {VALUES.map((v,i)=>(
                <div key={i} className="value-card">
                  <div className="value-num">0{i+1}</div>
                  <h4>{v.title}</h4>
                  <p>{v.body}</p>
                </div>
              ))}
            </div>
          </div>

          <div style={{marginTop:96}}>
            <div className="section-head">
              <div className="eyebrow">{t('about.team')}</div>
              <h2 className="h-2">{tx('Small team. Large impact.','Time pequeno. Impacto grande.')}</h2>
              <p className="lede">{tx('28 people across Brazil, Portugal and Argentina. Engineering, design, AI and support, all pointed the same direction.','28 pessoas distribuídas entre Brasil, Portugal e Argentina. Engenharia, design, IA, atendimento — todos olhando para a mesma direção.')}</p>
            </div>
            <div className="team-grid">
              {[
                ['Mariana Schmidt', tx('CEO & co-founder','CEO & cofundadora'),'MS','#FFB199'],
                ['Pedro Vasconcelos', tx('CTO & co-founder','CTO & cofundador'),'PV','#A5B4FC'],
                ['Camila Reis', tx('Head of Clinical','Head de Clínica'),'CR','#F8A5C2'],
                ['Rafael Tobias','CFO','RT','#FCD34D'],
                ['Letícia Andrade', tx('Head of Customer','Head de Customer'),'LA','#86EFAC'],
                ['João Beltrão', tx('Head of Marketing','Head de Marketing'),'JB','#67E8F9'],
                ['Beatriz Lima', tx('Head of Design','Head de Design'),'BL','#C4B5FD'],
                ['Tiago Mendes', tx('Head of Sales','Head de Sales'),'TM','#FFB199'],
              ].map((p,i)=>(
                <div key={i} className="team-card">
                  <div className="team-av" style={{background:p[3]}}>{p[2]}</div>
                  <div className="team-name">{p[0]}</div>
                  <div className="team-role">{p[1]}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
      <FinalCta/>
    </>
  );
}

function PageCareers() {
  const { t } = useT();
  return (
    <>
      <PageHeader eyebrow={tx('Careers','Carreiras')} title={t('careers.title')} sub={t('careers.sub')}/>
      <section style={{paddingTop:0}}>
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">{t('careers.benefits')}</div>
            <h2 className="h-2">{tx('What we offer.','O que oferecemos.')}</h2>
          </div>
          <div className="cols-3">
            {[
              [tx('Remote-first','Remoto-first'), tx('Work from anywhere, with in-person gatherings twice a year.','Trabalhe de onde quiser, com encontros presenciais 2x por ano.'), 'globe'],
              [tx('Equity for everyone','Equity para todo mundo'), tx('Real ownership from day one. Everyone holds options.','Sociedade real desde o dia 1. Todo time tem opções da empresa.'), 'spark'],
              [tx('Health + pet','Saúde + pet'), tx('Medical, dental, therapy and a pet plan for your animals.','Plano de saúde, odontológico, terapia e plano pet para os seus.'), 'pawprint'],
              [tx('Continuous learning','Aprendizado contínuo'), tx('$1,600 a year for courses, events and tools.','R$ 8.000/ano para cursos, eventos e ferramentas.'), 'book'],
              [tx('Real time off','Tempo de qualidade'), tx('30 days of vacation, your birthday off, no Friday afternoons.','30 dias de férias, day-off no aniversário, sem sexta após 13h.'), 'cal'],
              [tx('Equipment','Equipamento'), tx('A full setup at home. Good chair, 4K monitor, MacBook.','Setup completo na sua casa. Cadeira boa, monitor 4K, MacBook.'), 'register'],
            ].map((b,i)=>(
              <div key={i} className="problem-card">
                <div className="picon">{Icons[b[2]](24)}</div>
                <h3>{b[0]}</h3>
                <p>{b[1]}</p>
              </div>
            ))}
          </div>

          <div style={{marginTop:96}}>
            <div className="section-head">
              <div className="eyebrow">{t('careers.openings')}</div>
              <h2 className="h-2">{tx('Open roles right now.','Vagas abertas agora.')}</h2>
            </div>
            <div className="jobs-list">
              {JOBS.map((j,i)=>(
                <div key={i} className="job-row">
                  <div className="job-dept">{j.dept}</div>
                  <div className="job-role">{j.role}</div>
                  <div className="job-loc">{j.loc}</div>
                  <a href="#" className="btn btn-outline">{t('careers.apply')}</a>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
      <FinalCta/>
    </>
  );
}

function PageContact() {
  const { t } = useT();
  return (
    <>
      <PageHeader eyebrow={tx('Contact','Contato')} title={t('contact.title')} sub={t('contact.sub')}/>
      <section style={{paddingTop:0}}>
        <div className="container">
          <div className="contact-grid">
            <div>
              <div className="contact-channels">
                <a href="#" className="contact-channel">
                  <div className="cc-ic" style={{background:'#FFE2D5',color:'#C2410C'}}>{Icons.bolt(20)}</div>
                  <div><b>{tx('Sales and demo','Vendas e demo')}</b><p>{tx('Guided tour, plans for chains and franchises.','Tour guiado, planos para rede e franquia.')}</p><span className="cc-link">sales@zoee.ai →</span></div>
                </a>
                <a href="#" className="contact-channel">
                  <div className="cc-ic" style={{background:'#DCFCE7',color:'#047857'}}>{Icons.chat(20)}</div>
                  <div><b>{tx('Support','Suporte')}</b><p>{tx('Questions about the product, integrations and accounts.','Dúvidas sobre o produto, integrações e contas.')}</p><span className="cc-link">support@zoee.pet →</span></div>
                </a>
                <a href="#" className="contact-channel">
                  <div className="cc-ic" style={{background:'#DBEAFE',color:'#1D4ED8'}}>{Icons.people(20)}</div>
                  <div><b>{tx('Partnerships','Parcerias')}</b><p>{tx('Integrations, marketplace and co-marketing.','Integrações, marketplace e co-marketing.')}</p><span className="cc-link">partners@zoee.pet →</span></div>
                </a>
                <a href="#" className="contact-channel">
                  <div className="cc-ic" style={{background:'#EDE9FE',color:'#4C1D95'}}>{Icons.shield(20)}</div>
                  <div><b>{tx('Press & legal','Imprensa & jurídico')}</b><p>{tx('Data requests, press and compliance.','Pedidos LGPD, imprensa e compliance.')}</p><span className="cc-link">legal@zoee.pet →</span></div>
                </a>
              </div>
              <div className="contact-addr">
                <h5>{tx('Address','Endereço')}</h5>
                <p>Av. Brigadeiro Faria Lima, 4.221 · 8º andar<br/>Itaim Bibi · São Paulo, SP · 04538-133<br/><span className="muted">CNPJ 56.789.012/0001-34</span></p>
              </div>
            </div>

            <form className="contact-form" onSubmit={(e)=>{e.preventDefault(); window.location.href = URLS.contact;}}>
              <h3>{tx('Send a message','Mandar uma mensagem')}</h3>
              <label>{t('contact.name')}<input className="input" required/></label>
              <label>{t('contact.email')}<input className="input" type="email" required/></label>
              <label>{t('contact.role')}
                <select className="input" defaultValue="">
                  <option value="" disabled>{tx('Select','Selecione')}</option>
                  <option>{tx('Veterinary clinician','Veterinário clínico')}</option>
                  <option>{tx('Clinic / pet shop manager','Gestor de clínica/petshop')}</option>
                  <option>{tx('Solo professional','Profissional autônomo')}</option>
                  <option>{tx('Chain or franchise','Rede ou franquia')}</option>
                  <option>{tx('Other','Outro')}</option>
                </select>
              </label>
              <label>{t('contact.message')}<textarea className="input" rows="5" required></textarea></label>
              <button type="submit" className="btn btn-primary btn-block">{t('contact.send')}</button>
              <p className="muted small">{tx('By submitting you agree to our ','Ao enviar, você concorda com a nossa ')}<a href="#/legal/privacidade">{tx('privacy policy','política de privacidade')}</a>.</p>
            </form>
          </div>
        </div>
      </section>
    </>
  );
}

function PageChangelog() {
  const { t } = useT();
  return (
    <>
      <PageHeader eyebrow={tx('Changelog','Novidades')} title={t('changelog.title')} sub={t('changelog.sub')} cta={<a href="#" className="btn btn-outline" style={{marginTop:24}}>{t('changelog.subscribe')} →</a>}/>
      <section style={{paddingTop:0}}>
        <div className="container" style={{maxWidth:820}}>
          <div className="changelog-list">
            {CHANGELOG_ENTRIES.map((c,i)=>(
              <div key={i} className="cl-item">
                <div className="cl-date">{c.date}</div>
                <div className="cl-body">
                  <span className={'cl-tag cl-'+c.tag}>{c.tag}</span>
                  <h4>{c.title}</h4>
                  <p>{c.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { PageAbout, PageCareers, PageContact, PageChangelog });