// pages-tutors.jsx — B2C area for pet owners (tutor.zoee.pet funnel)

function PageTutors() {
  const { t, lang } = useT();
  const en = lang === 'en';

  const feats = [1,2,3,4,5,6].map(i => ({
    title: t('tutors.f'+i+'.title'),
    body: t('tutors.f'+i+'.body'),
    icon: ['shield','book','cal','bolt','stethoscope','pawprint'][i-1],
    color: ['#FFB199','#A5B4FC','#86EFAC','#FCD34D','#F8A5C2','#C4B5FD'][i-1],
  }));

  const faq = en ? [
    { q: 'Does it cost anything?', a: 'No. The pet owner account is free. Your clinic pays for Zoee; you get access at no charge.' },
    { q: 'I have pets at two different clinics. Does that work?', a: 'Yes. If both use Zoee, all pets and records appear under the same account, grouped by clinic.' },
    { q: 'Who can see my pet\u2019s records?', a: 'You and the clinical team that treats your pet. Nobody else. Records are encrypted and access is logged.' },
    { q: 'Is there an app to download?', a: 'Yes, for iOS and Android. Some clinics publish their own branded version — the invitation link tells you which to install.' },
    { q: 'Can I get my data if I change clinics?', a: 'Yes. You can export the full history of each pet as a PDF at any time, from your account settings.' },
  ] : [
    { q: 'Tem algum custo?', a: 'Não. A conta do tutor é gratuita. Sua clínica paga pela Zoee; para você o acesso é livre.' },
    { q: 'Tenho pets em duas clínicas diferentes. Funciona?', a: 'Sim. Se as duas usam Zoee, todos os pets e registros aparecem na mesma conta, agrupados por clínica.' },
    { q: 'Quem consegue ver o histórico do meu pet?', a: 'Você e a equipe clínica que atende seu pet. Mais ninguém. Os dados são criptografados e todo acesso é registrado.' },
    { q: 'Existe app para baixar?', a: 'Sim, para iOS e Android. Algumas clínicas publicam a própria versão com marca própria — o link do convite indica qual instalar.' },
    { q: 'Consigo levar meus dados se trocar de clínica?', a: 'Sim. Você exporta o histórico completo de cada pet em PDF quando quiser, nas configurações da conta.' },
  ];

  return (
    <>
      <section className="tutor-hero">
        <div className="container tutor-hero-grid">
          <div>
            <div className="eyebrow">{t('tutors.eyebrow')}</div>
            <h1 className="h-1">{t('tutors.title')}</h1>
            <p className="lede">{t('tutors.sub')}</p>
            <div className="hero-ctas" style={{marginTop:28}}>
              <a href={URLS.tutor} className="btn btn-primary btn-lg">{t('tutors.ctaPrimary')}</a>
              <a href="#tutor-how" className="btn btn-outline btn-lg">{t('tutors.ctaSecondary')}</a>
            </div>
            <p className="muted small" style={{marginTop:14}}>{t('tutors.note')}</p>
          </div>
          <TutorPhone en={en} />
        </div>
      </section>

      <section>
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">{en ? 'What you get' : 'O que você tem'}</div>
            <h2 className="h-2">{en ? 'Built for the person holding the leash.' : 'Feito para quem segura a guia.'}</h2>
          </div>
          <div className="tutor-feats">
            {feats.map((f,i)=>(
              <div key={i} className="tutor-feat">
                <div className="tf-ic" style={{background:f.color}}>{Icons[f.icon](22)}</div>
                <h4>{f.title}</h4>
                <p>{f.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="tutor-how" style={{background:'var(--bg-2)'}}>
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">{t('tutors.howTitle')}</div>
            <h2 className="h-2">{en ? 'Three steps, no paperwork.' : 'Três passos, sem burocracia.'}</h2>
          </div>
          <div className="timeline" style={{gridTemplateColumns:'repeat(3, 1fr)'}}>
            <div className="tl-step coral"><div className="tl-num">1</div><h4>{t('tutors.h1')}</h4><p>{t('tutors.h1b')}</p></div>
            <div className="tl-step"><div className="tl-num">2</div><h4>{t('tutors.h2')}</h4><p>{t('tutors.h2b')}</p></div>
            <div className="tl-step"><div className="tl-num">3</div><h4>{t('tutors.h3')}</h4><p>{t('tutors.h3b')}</p></div>
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="tutor-refer">
            <div>
              <h3>{t('tutors.findTitle')}</h3>
              <p>{t('tutors.findBody')}</p>
            </div>
            <div className="tutor-refer-ctas">
              <a href={URLS.contact} className="btn btn-primary">{t('tutors.findCta')}</a>
              <a href={URLS.whatsapp} className="btn btn-outline">WhatsApp</a>
            </div>
          </div>
        </div>
      </section>

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

      <section style={{paddingTop:0}}>
        <div className="container">
          <div className="cta-banner">
            <h2>{en ? 'Your pet\u2019s whole story, in your pocket.' : 'A história do seu pet, no seu bolso.'}</h2>
            <p>{t('tutors.note')}</p>
            <a href={URLS.tutor} className="btn btn-coral btn-lg">{t('tutors.ctaPrimary')}</a>
          </div>
        </div>
      </section>
    </>
  );
}

// B2C phone mockup — pet owner view
function TutorPhone({ en }) {
  return (
    <div className="tutor-phone-wrap">
      <div className="tutor-phone">
        <div className="tp-screen">
          <div className="tp-status"><span>9:41</span><span>5G</span></div>
          <div className="tp-head">
            <div>
              <div className="tp-hi">{en ? 'Hi, Julia' : 'Olá, Júlia'}</div>
              <div className="tp-sub">{en ? '3 pets · Pata Feliz Clinic' : '3 pets · Clínica Pata Feliz'}</div>
            </div>
            <div className="tp-av">J</div>
          </div>

          <div className="tp-card">
            <div className="tp-card-top">
              <div>
                <div className="tp-pet">Luna</div>
                <div className="tp-breed">{en ? 'Golden Retriever · 4y' : 'Golden Retriever · 4a'}</div>
              </div>
              <div className="tp-badge">{en ? 'Due' : 'Vencendo'}</div>
            </div>
            <div className="tp-card-row">
              <span>{en ? 'V10 vaccine' : 'Vacina V10'}</span>
              <b>{en ? 'Tomorrow, 9:00' : 'Amanhã, 09:00'}</b>
            </div>
          </div>

          <div className="tp-section">{en ? 'Vaccine card' : 'Carteirinha'}</div>
          <div className="tp-list">
            <div className="tp-row"><span className="tp-dot ok"></span><div><b>V10</b><small>{en ? 'Applied 12 May 2025' : 'Aplicada 12 mai 2025'}</small></div><em>{en ? 'renew' : 'renovar'}</em></div>
            <div className="tp-row"><span className="tp-dot ok"></span><div><b>{en ? 'Rabies' : 'Antirrábica'}</b><small>{en ? 'Applied 12 May 2025' : 'Aplicada 12 mai 2025'}</small></div><em>ok</em></div>
            <div className="tp-row"><span className="tp-dot warn"></span><div><b>{en ? 'Deworming' : 'Vermífugo'}</b><small>{en ? 'Overdue 8 days' : 'Atrasado 8 dias'}</small></div><em>!</em></div>
          </div>

          <div className="tp-section">{en ? 'Prescriptions' : 'Receitas'}</div>
          <div className="tp-list">
            <div className="tp-row"><span className="tp-dot rx"></span><div><b>Apoquel 16mg</b><small>{en ? 'Thor · valid to 30 Sep' : 'Thor · válida até 30 set'}</small></div><em>PDF</em></div>
          </div>

          <div className="tp-tabbar">
            <div className="tp-tab active">{en ? 'Pets' : 'Pets'}</div>
            <div className="tp-tab">{en ? 'Book' : 'Agendar'}</div>
            <div className="tp-tab">{en ? 'History' : 'Histórico'}</div>
            <div className="tp-tab">{en ? 'Me' : 'Perfil'}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PageTutors, TutorPhone });