/* ============================================
   HOME PAGE — Clinical Vet
   Hero, Stats, Services, Day Care, Testimonials, etc.
   ============================================ */

const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

// ============================================
// HERO
// ============================================
function Hero() {
  return (
    <section style={{position:'relative', overflow:'hidden', background:'var(--cream-100)'}}>
      {/* Decorative floating elements */}
      <FloatDeco speed={0.3} style={{position:'absolute', top:'10%', right:'8%', opacity:0.08, pointerEvents:'none'}}>
        <Illust.Paw size={120} color="var(--teal-900)"/>
      </FloatDeco>
      <FloatDeco speed={0.5} style={{position:'absolute', bottom:'15%', left:'4%', opacity:0.06, pointerEvents:'none'}}>
        <Illust.HeartLine size={90} color="var(--coral-700)"/>
      </FloatDeco>

      <div className="container" style={{paddingTop:48, paddingBottom:48, position:'relative'}}>
        <div className="hero-grid">
          <div className="hero-text">
            <Reveal>
              <span className="eyebrow">● Cuidado veterinário · 2008–2026</span>
            </Reveal>
            <Reveal delay={120} y={32}>
              <h1 className="display-xl" style={{margin:'24px 0 0'}}>
                Amor incondicional<br/>
                merece <span className="italic" style={{color:'var(--teal-700)'}}>cuidado</span><br/>
                24 horas.
              </h1>
            </Reveal>
            <Reveal delay={300}>
              <p className="body-lg" style={{maxWidth: 520, marginTop: 24}}>
                Uma clínica veterinária completa onde precisão clínica encontra
                o carinho que seu pet merece. Da consulta de rotina à cirurgia
                de alta complexidade — sempre próximos, sempre prontos.
              </p>
            </Reveal>

            <Reveal delay={420}>
              <div style={{display:'flex', flexWrap:'wrap', gap:12, marginTop: 32}}>
                <a href="contato.html" className="btn btn-primary btn-lg">
                  <Icon.Calendar size={16}/> Agendar consulta
                </a>
                <a href="servicos.html" className="btn btn-ghost btn-lg">
                  Conhecer serviços <Icon.Arrow size={14}/>
                </a>
              </div>
            </Reveal>

            <Reveal delay={580}>
              <div className="hero-trust">
                <div className="trust-item">
                  <div className="trust-num"><Counter to={15} suffix="+"/></div>
                  <div className="trust-label">anos<br/>de cuidado</div>
                </div>
                <div className="trust-divider"/>
                <div className="trust-item">
                  <div className="trust-num"><Counter to={14} suffix="k"/></div>
                  <div className="trust-label">tutores<br/>satisfeitos</div>
                </div>
                <div className="trust-divider"/>
                <div className="trust-item">
                  <div className="trust-num"><Counter to={4} suffix="k"/></div>
                  <div className="trust-label">cirurgias<br/>realizadas</div>
                </div>
                <div className="trust-divider"/>
                <div className="trust-item">
                  <div className="trust-num">24/7</div>
                  <div className="trust-label">plantão<br/>contínuo</div>
                </div>
              </div>
            </Reveal>
          </div>

          <div className="hero-visual">
            <Reveal x={32} delay={200}>
              <Photo label="vet sorrindo com golden retriever" ratio="4/5" tone="sage" className="hero-img-main" />
            </Reveal>
            <Reveal delay={700} x={-16}>
              <div className="hero-badge">
                <span className="dot dot-pulse" style={{color:'var(--teal-500)', width:8, height:8}}></span>
                <div>
                  <div style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--ink-500)'}}>Plantão online</div>
                  <div style={{fontWeight:500, fontSize:14}}>Atendendo agora</div>
                </div>
              </div>
            </Reveal>
            <Reveal delay={900} x={16}>
              <div className="hero-quote">
                <Icon.Heart size={14} />
                <div>
                  <div style={{fontSize:13, color:'var(--ink-700)', fontStyle:'italic'}}>"O Tobias entrou andando devagar e saiu correndo."</div>
                  <div style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.08em', color:'var(--ink-500)', marginTop:4}}>— Marina S., tutora</div>
                </div>
              </div>
            </Reveal>
            {/* Decorative pulse line */}
            <div style={{position:'absolute', top:-20, right:-20, opacity:0.5, pointerEvents:'none', color:'var(--teal-600)'}}>
              <Illust.Pulse width={160} height={32}/>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .hero-grid {
          display: grid;
          gap: 48px;
          grid-template-columns: 1fr;
          align-items: center;
        }
        @media (min-width: 1024px) {
          .hero-grid {
            grid-template-columns: 1.1fr 1fr;
            gap: 64px;
            min-height: 80vh;
          }
        }
        .hero-trust {
          display: flex;
          align-items: stretch;
          gap: 24px;
          margin-top: 56px;
          padding-top: 32px;
          border-top: 1px solid var(--ink-200);
          flex-wrap: wrap;
        }
        .trust-item { display: flex; flex-direction: column; }
        .trust-num {
          font-family: var(--font-serif);
          font-size: 32px;
          line-height: 1;
          color: var(--ink-900);
          margin-bottom: 4px;
        }
        .trust-label {
          font-family: var(--font-mono);
          font-size: 10px;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          color: var(--ink-500);
          line-height: 1.4;
        }
        .trust-divider {
          width: 1px;
          background: var(--ink-200);
          align-self: stretch;
        }
        .hero-visual {
          position: relative;
        }
        .hero-img-main {
          border-radius: var(--r-xl);
          box-shadow: var(--shadow-lg);
        }
        .hero-badge {
          position: absolute;
          top: 24px;
          left: -16px;
          background: var(--white);
          border-radius: var(--r-full);
          padding: 10px 18px 10px 14px;
          display: flex;
          align-items: center;
          gap: 10px;
          box-shadow: var(--shadow-md);
          border: 1px solid var(--ink-200);
          animation: floatY 4s ease-in-out infinite;
        }
        .hero-quote {
          position: absolute;
          bottom: 24px;
          right: -8px;
          background: var(--white);
          border-radius: var(--r-md);
          padding: 14px 18px;
          display: flex;
          gap: 12px;
          align-items: flex-start;
          max-width: 280px;
          box-shadow: var(--shadow-md);
          border: 1px solid var(--ink-200);
          color: var(--coral-600);
          animation: floatY 4s ease-in-out infinite;
          animation-delay: 1s;
        }
        @keyframes floatY {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-6px); }
        }
        @media (min-width: 1024px) {
          .hero-badge { left: -24px; }
          .hero-quote { right: -32px; }
        }
      `}</style>
    </section>
  );
}

// ============================================
// MARQUEE STRIP — values
// ============================================
function Marquee() {
  const items = [
    { ic: <Icon.Stethoscope size={16}/>, text: 'Medicina veterinária' },
    { ic: <Icon.Microscope size={16}/>, text: 'Laboratório próprio' },
    { ic: <Icon.Heart size={16}/>, text: 'Cuidado integral' },
    { ic: <Icon.Bag size={16}/>, text: 'Boutique & nutrição' },
    { ic: <Icon.Home size={16}/>, text: 'Hospedagem premium' },
    { ic: <Icon.Scissors size={16}/>, text: 'Banho & tosa' },
    { ic: <Icon.Shield size={16}/>, text: 'Emergência 24h' },
    { ic: <Icon.Sparkle size={16}/>, text: 'Day care recreativo' },
  ];
  const doubled = [...items, ...items];
  return (
    <section style={{background:'var(--ink-900)', color:'var(--cream-50)', padding:'18px 0', overflow:'hidden', borderTop:'1px solid rgba(245,237,220,0.06)', borderBottom:'1px solid rgba(245,237,220,0.06)'}}>
      <div style={{display:'flex', gap:48, animation:'marquee 40s linear infinite', whiteSpace:'nowrap', width:'max-content'}}>
        {doubled.map((it, i) => (
          <div key={i} style={{display:'inline-flex', alignItems:'center', gap:10, fontSize:14, fontFamily:'var(--font-mono)', textTransform:'uppercase', letterSpacing:'0.1em', color:'var(--cream-200)'}}>
            <span style={{color:'var(--teal-500)'}}>{it.ic}</span>
            {it.text}
          </div>
        ))}
      </div>
    </section>
  );
}

// ============================================
// EXCELLENCE — Two-column editorial
// ============================================
function Excellence() {
  return (
    <section className="section" style={{position:'relative', overflow:'hidden'}}>
      <FloatDeco speed={0.4} style={{position:'absolute', top:'5%', right:'-2%', opacity:0.05, pointerEvents:'none'}}>
        <Illust.StethoArt size={180} color="var(--teal-800)"/>
      </FloatDeco>

      <div className="container">
        <div className="excellence-grid">
          <div>
            <Reveal>
              <span className="eyebrow">02 · Excelência médica</span>
            </Reveal>
            <Reveal delay={100}>
              <h2 className="display-lg" style={{margin:'16px 0 24px'}}>
                Excelência médica<br/>
                <span className="italic" style={{color:'var(--teal-700)'}}>e diagnóstica.</span>
              </h2>
            </Reveal>
            <Reveal delay={220}>
              <p className="body-lg" style={{maxWidth:520}}>
                Estrutura completa para cuidar do seu pet do início ao fim do tratamento —
                equipe especializada, equipamentos de ponta e laboratório próprio com resultados
                em até 2 horas.
              </p>
            </Reveal>
            <Reveal delay={340}>
              <a href="servicos.html" className="btn btn-link" style={{marginTop:24}}>
                Ver todos os serviços <Icon.Arrow size={14}/>
              </a>
            </Reveal>
          </div>

          <div className="excellence-cards">
            <Reveal delay={120} y={32}>
              <ExcellenceCard
                icon={<Icon.Stethoscope size={20}/>}
                title="Clínica geral"
                desc="Consultas preventivas, diagnósticos e acompanhamento veterinário completo."
                link="servicos.html#clinica"
              />
            </Reveal>
            <Reveal delay={220} y={32}>
              <ExcellenceCard
                icon={<Icon.Shield size={20}/>}
                title="Cirurgia avançada"
                desc="Centro cirúrgico com anestesia segura, monitoramento contínuo e UTI."
                link="servicos.html#cirurgia"
                accent
              />
            </Reveal>
            <Reveal delay={320} y={32}>
              <ExcellenceCard
                icon={<Icon.Microscope size={20}/>}
                title="Laboratório"
                desc="Hemograma, bioquímica, ultrassom e raio-X com diagnóstico rápido."
                link="servicos.html#exames"
              />
            </Reveal>
            <Reveal delay={420} y={32}>
              <ExcellenceCard
                icon={<Icon.Sparkle size={20}/>}
                title="Especialidades"
                desc="Cardiologia, dermatologia, oftalmologia e ortopedia veterinária."
                link="servicos.html#especialidades"
              />
            </Reveal>
          </div>
        </div>
      </div>

      <style>{`
        .excellence-grid {
          display: grid;
          gap: 48px;
          grid-template-columns: 1fr;
        }
        @media (min-width: 1024px) {
          .excellence-grid { grid-template-columns: 1fr 1.2fr; gap: 80px; }
        }
        .excellence-cards {
          display: grid;
          gap: 16px;
          grid-template-columns: 1fr;
        }
        @media (min-width: 600px) {
          .excellence-cards { grid-template-columns: 1fr 1fr; }
        }
      `}</style>
    </section>
  );
}

function ExcellenceCard({ icon, title, desc, link, accent }) {
  return (
    <a href={link} className="card card-pad" style={{
      display:'flex',
      flexDirection:'column',
      gap:16,
      background: accent ? 'var(--teal-700)' : 'var(--white)',
      color: accent ? 'var(--cream-50)' : 'var(--ink-900)',
      borderColor: accent ? 'var(--teal-700)' : 'var(--ink-200)',
      minHeight: 240,
    }}>
      <div style={{
        width:44, height:44, borderRadius:'50%',
        background: accent ? 'rgba(245,237,220,0.15)' : 'var(--cream-100)',
        color: accent ? 'var(--cream-50)' : 'var(--teal-700)',
        display:'grid', placeItems:'center'
      }}>
        {icon}
      </div>
      <h3 className="display-sm" style={{margin:0, color:'inherit'}}>{title}</h3>
      <p className="body-sm" style={{margin:0, color: accent ? 'rgba(245,237,220,0.85)' : 'var(--ink-700)'}}>{desc}</p>
      <div style={{marginTop:'auto', display:'inline-flex', alignItems:'center', gap:8, fontSize:13, fontWeight:500}}>
        Saiba mais <Icon.Arrow size={14}/>
      </div>
    </a>
  );
}

// ============================================
// PETSHOP TEASER
// ============================================
function PetshopTeaser() {
  return (
    <section className="section" style={{background:'var(--cream-100)', position:'relative', overflow:'hidden'}}>
      <FloatDeco speed={0.3} style={{position:'absolute', top:'10%', right:'4%', opacity:0.08, pointerEvents:'none'}}>
        <Illust.Bone size={100} color="var(--coral-700)"/>
      </FloatDeco>
      <FloatDeco speed={0.5} style={{position:'absolute', bottom:'15%', left:'2%', opacity:0.05, pointerEvents:'none'}}>
        <Illust.Paw size={140} color="var(--teal-900)"/>
      </FloatDeco>

      <div className="container">
        <div className="ps-grid">
          <div className="ps-visual">
            <Reveal x={-32}>
              <Photo label="vitrine boutique pet" ratio="4/5" tone="ink" />
            </Reveal>
            <div className="ps-overlay">
              <Reveal delay={300} y={20}>
                <div className="ps-overlay-card">
                  <Icon.Bag size={20}/>
                  <div>
                    <div style={{fontWeight:600, fontSize:14}}>+800 produtos</div>
                    <div style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.1em', color:'var(--ink-500)', textTransform:'uppercase', marginTop:2}}>Marcas premium · curadoria veterinária</div>
                  </div>
                </div>
              </Reveal>
            </div>
          </div>

          <div className="ps-content">
            <Reveal>
              <span className="eyebrow">03 · Boutique & day care</span>
            </Reveal>
            <Reveal delay={100}>
              <h2 className="display-lg" style={{margin:'16px 0 24px'}}>
                Tudo para depois<br/>
                da consulta.<br/>
                <span className="italic" style={{color:'var(--coral-600)'}}>E para a vida toda.</span>
              </h2>
            </Reveal>
            <Reveal delay={220}>
              <p className="body-lg" style={{marginBottom:32}}>
                Nutrição premium recomendada pela equipe veterinária, brinquedos enriquecedores,
                hospedagem com câmeras 24h e day care recreativo para pets cheios de energia.
              </p>
            </Reveal>

            <Reveal delay={320}>
              <div className="ps-features">
                <PsFeature icon={<Icon.Bag size={18}/>} title="Nutrição premium" desc="Rações terapêuticas, snacks naturais e suplementos." />
                <PsFeature icon={<Icon.Home size={18}/>} title="Hospedagem hotel" desc="Quartos individuais, câmeras ao vivo e passeios diários." />
                <PsFeature icon={<Icon.Sparkle size={18}/>} title="Day care recreativo" desc="Atividades supervisionadas por adestrador certificado." />
                <PsFeature icon={<Icon.Scissors size={18}/>} title="Banho & tosa" desc="Higiene de spa com produtos hipoalergênicos." />
              </div>
            </Reveal>

            <Reveal delay={460}>
              <div style={{display:'flex', gap:12, marginTop:32, flexWrap:'wrap'}}>
                <a href="petshop.html" className="btn btn-dark btn-lg">Visitar pet shop <Icon.Arrow size={14}/></a>
                <a href="daycare.html" className="btn btn-ghost btn-lg">Conhecer day care</a>
              </div>
            </Reveal>
          </div>
        </div>
      </div>

      <style>{`
        .ps-grid {
          display: grid;
          gap: 48px;
          grid-template-columns: 1fr;
        }
        @media (min-width: 1024px) {
          .ps-grid { grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; }
        }
        .ps-visual { position: relative; }
        .ps-overlay {
          position: absolute;
          left: 16px;
          right: 16px;
          bottom: 16px;
        }
        .ps-overlay-card {
          background: var(--cream-50);
          border-radius: var(--r-md);
          padding: 14px 18px;
          display: flex;
          gap: 14px;
          align-items: center;
          color: var(--ink-900);
          box-shadow: var(--shadow-md);
        }
        .ps-features {
          display: grid;
          gap: 16px;
          grid-template-columns: 1fr;
        }
        @media (min-width: 600px) {
          .ps-features { grid-template-columns: 1fr 1fr; }
        }
      `}</style>
    </section>
  );
}

function PsFeature({ icon, title, desc }) {
  return (
    <div style={{display:'flex', gap:14, alignItems:'flex-start'}}>
      <div style={{width:36, height:36, borderRadius:'50%', background:'var(--white)', display:'grid', placeItems:'center', color:'var(--teal-700)', flexShrink:0, border:'1px solid var(--ink-200)'}}>{icon}</div>
      <div>
        <div style={{fontWeight:600, fontSize:15, marginBottom:2}}>{title}</div>
        <div className="body-sm" style={{margin:0}}>{desc}</div>
      </div>
    </div>
  );
}

// ============================================
// SPECIES CARE — by pet type
// ============================================
function SpeciesCare() {
  const [active, setActive] = useStateH('dog');
  const silhouettes = {
    dog: <Illust.DogSilhouette size={140} color="var(--teal-700)"/>,
    cat: <Illust.CatSilhouette size={140} color="var(--coral-600)"/>,
    exotic: <Illust.Paw size={140} color="var(--gold-600)"/>,
  };

  const data = {
    dog: {
      label: 'Cães',
      icon: <Icon.Dog size={20}/>,
      title: 'Cuidado pensado para cada porte e raça.',
      desc: 'Da consulta do filhote ao geriátrico, com protocolos específicos para porte pequeno, médio, grande e gigante. Avaliações cardíacas e ortopédicas em raças braquicefálicas, screening genético em raças predispostas.',
      stats: [
        { label: 'Pequeno porte', value: 'até 10kg' },
        { label: 'Médio porte', value: '10–25kg' },
        { label: 'Grande', value: '25–45kg' },
        { label: 'Gigante', value: '45kg+' },
      ],
      photo: 'cachorro feliz no consultório',
      tone: 'sage',
    },
    cat: {
      label: 'Gatos',
      icon: <Icon.Cat size={20}/>,
      title: 'Sala cat-friendly, sem latidos, sem estresse.',
      desc: 'Espaço silencioso e separado da movimentação canina, com protocolo Fear Free. Atenção especial a doenças renais, urinárias e endócrinas — frequentes em felinos. Atendimento gentil de raças sensíveis como Persa, Siamês e Sphynx.',
      stats: [
        { label: 'Filhote', value: 'até 1 ano' },
        { label: 'Adulto', value: '1–7 anos' },
        { label: 'Sênior', value: '7–12 anos' },
        { label: 'Geriátrico', value: '12+ anos' },
      ],
      photo: 'gato calmo em sala cat-friendly',
      tone: 'cream',
    },
    exotic: {
      label: 'Pets exóticos',
      icon: <Icon.Sparkle size={20}/>,
      title: 'Veterinários especializados em pets não convencionais.',
      desc: 'Atendimento clínico e cirúrgico para coelhos, hamsters, porquinhos-da-índia, aves e répteis. Equipe com certificação em medicina de animais selvagens e equipamento adequado para anestesia em pequenos pacientes.',
      stats: [
        { label: 'Roedores', value: 'coelhos, hamsters' },
        { label: 'Aves', value: 'calopsitas, agapornis' },
        { label: 'Répteis', value: 'iguanas, jabutis' },
        { label: 'Aquáticos', value: 'peixes, anfíbios' },
      ],
      photo: 'coelho sendo examinado',
      tone: 'blue',
    },
  };
  const cur = data[active];

  return (
    <section className="section" style={{position:'relative', overflow:'hidden'}}>
      <div className="container" style={{position:'relative'}}>
        <Reveal>
          <div style={{textAlign:'center', maxWidth:680, margin:'0 auto 48px'}}>
            <span className="eyebrow">04 · Para cada espécie</span>
            <h2 className="display-lg" style={{margin:'16px 0 16px'}}>
              Cada pet é <span className="italic" style={{color:'var(--teal-700)'}}>único.</span> Nosso cuidado também.
            </h2>
            <p className="body-lg">Selecione a espécie do seu pet para ver como adaptamos o atendimento.</p>
          </div>
        </Reveal>

        <div style={{display:'flex', justifyContent:'center', gap:8, marginBottom:32, flexWrap:'wrap'}}>
          {Object.entries(data).map(([key, v]) => (
            <button
              key={key}
              onClick={() => setActive(key)}
              className={`btn ${active === key ? 'btn-dark' : 'btn-ghost'}`}
              style={{padding: '12px 20px', transition: 'all 0.3s var(--ease)'}}
            >
              {v.icon} {v.label}
            </button>
          ))}
        </div>

        {/* Floating species silhouette */}
        <div style={{
          position:'absolute', top:200, right:-40, opacity:0.08, pointerEvents:'none',
          transition:'opacity 0.6s, transform 0.6s', display:'none',
        }} className="species-deco">
          {silhouettes[active]}
        </div>

        <div className="species-card" key={active} style={{animation:'speciesFade 0.5s var(--ease) both'}}>
          <Photo label={cur.photo} ratio="4/3" tone={cur.tone} />
          <div className="species-content">
            <h3 className="display-md" style={{margin:0}}>{cur.title}</h3>
            <p className="body-lg" style={{marginTop:16}}>{cur.desc}</p>

            <div className="species-stats">
              {cur.stats.map((s, i) => (
                <div key={i} className="species-stat">
                  <div style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--ink-500)'}}>{s.label}</div>
                  <div style={{fontFamily:'var(--font-serif)', fontSize:22, marginTop:4}}>{s.value}</div>
                </div>
              ))}
            </div>

            <a href="servicos.html" className="btn btn-link" style={{marginTop:24}}>
              Ver protocolos completos <Icon.Arrow size={14}/>
            </a>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes speciesFade {
          from { opacity: 0; transform: translateY(16px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @media (min-width: 1024px) {
          .species-deco { display: block !important; }
        }
        .species-card {
          background: var(--white);
          border: 1px solid var(--ink-200);
          border-radius: var(--r-xl);
          overflow: hidden;
          display: grid;
          grid-template-columns: 1fr;
          position: relative;
          z-index: 1;
        }
        @media (min-width: 900px) {
          .species-card { grid-template-columns: 1fr 1.1fr; }
        }
        .species-content { padding: 32px; }
        @media (min-width: 768px) {
          .species-content { padding: 48px; }
        }
        .species-stats {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 20px;
          margin-top: 32px;
          padding-top: 32px;
          border-top: 1px solid var(--ink-200);
        }
        @media (min-width: 600px) {
          .species-stats { grid-template-columns: repeat(4, 1fr); }
        }
      `}</style>
    </section>
  );
}

// ============================================
// TESTIMONIALS
// ============================================
function Testimonials() {
  const items = [
    {
      name: 'Marina Salgado',
      pet: 'Tutora do Tobias · Golden Retriever',
      stars: 5,
      text: 'O atendimento da Dra. Amanda foi impecável. Diagnóstico rápido, tratamento certeiro. O Tobias entrou andando devagar e saiu correndo.',
      tone: 'sage',
    },
    {
      name: 'Luiza Carvalho',
      pet: 'Tutora da Mel · Gato persa',
      stars: 5,
      text: 'Sala cat-friendly mudou tudo. A Mel sempre se estressava em vet. Aqui ela é examinada calma, com paciência. Encontrei meu lugar.',
      tone: 'cream',
    },
    {
      name: 'Pedro Pacheco',
      pet: 'Tutor do Chico · SRD',
      stars: 5,
      text: 'Atendimento de emergência às 3h da manhã. Salvaram meu cachorro de uma torção gástrica. Cirurgia rápida, recuperação tranquila.',
      tone: 'blue',
    },
    {
      name: 'Ana Paula Gugel',
      pet: 'Tutora da Nina · Yorkshire',
      stars: 5,
      text: 'A Nina ficou hospedada uma semana. Recebi vídeos diários, acompanhei pelas câmeras. Voltou pra casa feliz, cheirosinha e cansadinha.',
      tone: 'coral',
    },
    {
      name: 'Rafael Mendes',
      pet: 'Tutor da Lola · Buldogue',
      stars: 5,
      text: 'Cirurgia de palato em raça braquicefálica é coisa séria. A equipe explicou cada etapa, monitoramento foi rigoroso. Confiança total.',
      tone: 'teal',
    },
  ];

  return (
    <section className="section" style={{background:'var(--ink-900)', color:'var(--cream-50)', overflow:'hidden'}}>
      <div className="container">
        <Reveal>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:48, gap:24, flexWrap:'wrap'}}>
            <div>
              <span className="eyebrow" style={{color:'var(--teal-500)'}}>05 · Histórias de amor</span>
              <h2 className="display-lg" style={{margin:'16px 0 0', color:'var(--cream-50)'}}>
                14 mil tutores.<br/>
                <span className="italic" style={{color:'var(--gold-500)'}}>4.9/5 estrelas.</span>
              </h2>
            </div>
            <p className="body" style={{color:'var(--ink-300)', maxWidth: 360}}>
              Avaliações reais no Google e direto com nossos tutores. A confiança é construída uma consulta de cada vez.
            </p>
          </div>
        </Reveal>

        <div className="testim-scroll no-scrollbar">
          {items.map((t, i) => (
            <article key={i} className="testim-card">
              <div style={{display:'flex', gap:2, color:'var(--gold-500)', marginBottom:16}}>
                {Array.from({length:t.stars}).map((_,j) => <Icon.Star key={j} size={14} filled />)}
              </div>
              <p className="body-lg" style={{color:'var(--cream-50)', margin:0, fontFamily:'var(--font-serif)', fontSize:22, lineHeight:1.35}}>
                "{t.text}"
              </p>
              <div style={{display:'flex', gap:14, alignItems:'center', marginTop:32, paddingTop:24, borderTop:'1px solid rgba(245,237,220,0.12)'}}>
                <div style={{
                  width:44, height:44, borderRadius:'50%',
                  background: `linear-gradient(135deg, var(--${t.tone === 'sage' ? 'teal-700' : t.tone === 'coral' ? 'coral-600' : t.tone === 'blue' ? 'teal-800' : 'gold-600'}), var(--ink-700))`,
                  display:'grid', placeItems:'center',
                  fontFamily:'var(--font-serif)', fontSize:18, color:'var(--cream-50)',
                }}>
                  {t.name[0]}
                </div>
                <div>
                  <div style={{fontWeight:500, fontSize:14}}>{t.name}</div>
                  <div style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--ink-300)', marginTop:2}}>
                    {t.pet}
                  </div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>

      <style>{`
        .testim-scroll {
          display: flex;
          gap: 20px;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          padding-bottom: 16px;
          margin: 0 -24px;
          padding-left: 24px;
          padding-right: 24px;
        }
        .testim-card {
          flex-shrink: 0;
          width: 340px;
          background: rgba(245,237,220,0.04);
          border: 1px solid rgba(245,237,220,0.10);
          border-radius: var(--r-lg);
          padding: 32px;
          scroll-snap-align: start;
        }
        @media (min-width: 768px) {
          .testim-card { width: 420px; padding: 40px; }
        }
      `}</style>
    </section>
  );
}

// ============================================
// SPECIALISTS
// ============================================
function Specialists() {
  const team = [
    { name: 'Dra. Amanda Silva', role: 'Cirurgia geral · CRMV-SP 12345', focus: '15 anos · ortopedia', tone: 'sage' },
    { name: 'Dr. Carlos Mendes', role: 'Anestesiologia · CRMV-SP 23456', focus: 'pós-graduação · USP', tone: 'blue' },
    { name: 'Dra. Juliana Costa', role: 'Clínica médica · CRMV-SP 34567', focus: 'especialista · felinos', tone: 'cream' },
    { name: 'Dr. Marcos Tavares', role: 'Cardiologia · CRMV-SP 45678', focus: 'mestre · UNESP', tone: 'coral' },
  ];

  return (
    <section className="section" style={{background:'var(--cream-50)'}}>
      <div className="container">
        <div className="spec-head">
          <div>
            <span className="eyebrow">06 · Nossa equipe</span>
            <h2 className="display-lg" style={{margin:'16px 0 0'}}>
              Especialistas que<br/>
              <span className="italic" style={{color:'var(--teal-700)'}}>amam o que fazem.</span>
            </h2>
          </div>
          <a href="sobre.html" className="btn btn-link">Conhecer toda a equipe <Icon.Arrow size={14}/></a>
        </div>

        <div className="spec-grid">
          {team.map((m, i) => (
            <Reveal key={i} delay={i*100} y={32}>
              <div className="spec-card">
                <Photo label={`vet · ${m.name.split(' ')[1]}`} ratio="4/5" tone={m.tone} />
                <div style={{padding:'20px 4px 4px'}}>
                  <div className="display-sm" style={{margin:0}}>{m.name}</div>
                  <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--ink-500)', marginTop:6}}>{m.role}</div>
                  <div className="body-sm" style={{margin:'8px 0 0'}}>{m.focus}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>

      <style>{`
        .spec-head {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          margin-bottom: 48px;
          gap: 24px;
          flex-wrap: wrap;
        }
        .spec-grid {
          display: grid;
          gap: 20px;
          grid-template-columns: 1fr 1fr;
        }
        @media (min-width: 768px) {
          .spec-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
        }
      `}</style>
    </section>
  );
}

// ============================================
// FAQ
// ============================================
function FAQ() {
  const [open, setOpen] = useStateH(0);
  const items = [
    { q: 'Como funciona o atendimento de emergência?', a: 'Nosso plantão 24h opera todos os dias do ano. Não é necessário agendamento — basta vir até a clínica ou ligar (11) 9999-0000. Temos centro cirúrgico, UTI veterinária e equipe sempre presente.' },
    { q: 'Vocês atendem pets exóticos?', a: 'Sim. Temos veterinários especialistas em coelhos, roedores, aves, répteis e anfíbios. Marque pelo telefone ou WhatsApp para confirmar disponibilidade.' },
    { q: 'Qual é o protocolo para castração?', a: 'Avaliação clínica prévia, exames pré-operatórios (hemograma, bioquímica, ECG quando indicado), jejum orientado e cirurgia com anestesia inalatória. Internação no mesmo dia, alta com prescrição completa.' },
    { q: 'Como funciona a hospedagem?', a: 'Quartos individuais climatizados, dois passeios diários, alimentação seguindo a rotina do pet, câmeras ao vivo via app, e check-up diário com a equipe veterinária inclusa.' },
    { q: 'Aceitam planos de saúde pet?', a: 'Sim. Atendemos os principais planos: PetLove Saúde, ePet, Petsi, Porto Seguro e outros. Consulte sua cobertura na recepção ou pelo WhatsApp.' },
    { q: 'Posso parcelar tratamentos?', a: 'Sim. Oferecemos parcelamento em até 12x para cirurgias e tratamentos prolongados, e pacotes preventivos com desconto para vacinação anual e check-up.' },
  ];

  return (
    <section className="section">
      <div className="container">
        <div className="faq-grid">
          <div>
            <span className="eyebrow">07 · Perguntas frequentes</span>
            <h2 className="display-lg" style={{margin:'16px 0 24px'}}>
              Dúvidas?<br/>
              <span className="italic" style={{color:'var(--teal-700)'}}>Temos respostas.</span>
            </h2>
            <p className="body-lg" style={{maxWidth:380}}>
              Não encontrou o que precisa? Fale com a gente pelo WhatsApp.
            </p>
            <a href="https://wa.me/5511999900000" className="btn btn-primary" style={{marginTop:24}}>
              <Icon.Whatsapp size={16}/> Falar no WhatsApp
            </a>
          </div>

          <div>
            {items.map((it, i) => (
              <div key={i} className="faq-item">
                <button onClick={() => setOpen(open === i ? -1 : i)} className="faq-q">
                  <span style={{fontFamily:'var(--font-serif)', fontSize:22}}>{it.q}</span>
                  <span style={{
                    transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                    transition: 'transform 0.3s var(--ease)',
                    display:'inline-flex', flexShrink:0, marginLeft:16,
                  }}>
                    <Icon.Plus size={20}/>
                  </span>
                </button>
                <div style={{
                  maxHeight: open === i ? 240 : 0,
                  overflow: 'hidden',
                  transition: 'max-height 0.4s var(--ease)',
                }}>
                  <p className="body" style={{padding:'0 0 24px', maxWidth:560}}>{it.a}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .faq-grid {
          display: grid;
          gap: 48px;
          grid-template-columns: 1fr;
        }
        @media (min-width: 1024px) {
          .faq-grid { grid-template-columns: 1fr 1.5fr; gap: 80px; }
        }
        .faq-item {
          border-top: 1px solid var(--ink-200);
        }
        .faq-item:last-child {
          border-bottom: 1px solid var(--ink-200);
        }
        .faq-q {
          width: 100%;
          padding: 24px 0;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          text-align: left;
          color: var(--ink-900);
        }
        .faq-q:hover { color: var(--teal-700); }
      `}</style>
    </section>
  );
}

// ============================================
// WHY TRUST — sales / value proposition section
// ============================================
function WhyTrust() {
  const items = [
    { num:'01', t:'Plantão 24h sem espera', d:'Centro de emergência aberto 365 dias. Triagem em menos de 15 minutos.' },
    { num:'02', t:'Laboratório próprio', d:'Hemograma, bioquímica, raio-X e ultrassom no local — resultado em 2h.' },
    { num:'03', t:'Equipe especializada', d:'22 profissionais. Cirurgia, cardio, derma, oftalmo, ortopedia e exóticos.' },
    { num:'04', t:'Pet shop com curadoria', d:'800+ produtos selecionados pela nossa equipe veterinária. Sem mercadoria sem sentido.' },
    { num:'05', t:'Hospedagem premium', d:'Câmeras 24h, quartos privativos, check-up veterinário diário.' },
    { num:'06', t:'Transparência total', d:'Tabela de preços pública. Orçamento por escrito. Parcelamos em até 12x.' },
  ];
  return (
    <section className="section" style={{background:'var(--cream-50)', position:'relative', overflow:'hidden'}}>
      <FloatDeco speed={0.2} style={{position:'absolute', top:'8%', left:'-3%', opacity:0.04, pointerEvents:'none'}}>
        <Illust.Paw size={160} color="var(--ink-900)"/>
      </FloatDeco>
      <div className="container">
        <div style={{display:'grid', gap:48, gridTemplateColumns:'1fr', marginBottom:64}} className="trust-head">
          <Reveal>
            <div>
              <span className="eyebrow">Por que confiar em nós</span>
              <h2 className="display-lg" style={{margin:'16px 0 0'}}>
                Seis razões pelas quais<br/>
                <span className="italic" style={{color:'var(--teal-700)'}}>14 mil tutores</span> escolheram a Clinical Vet.
              </h2>
            </div>
          </Reveal>
          <Reveal delay={150}>
            <p className="body-lg" style={{maxWidth:420, color:'var(--ink-700)'}}>
              Cuidar de um pet é uma decisão de família. Toda relação começa com confiança — por isso somos rigorosos sobre cada detalhe da experiência.
            </p>
          </Reveal>
        </div>

        <div className="trust-grid">
          {items.map((it, i) => (
            <Reveal key={i} delay={i*80} y={24}>
              <article className="trust-card">
                <div className="trust-card-num">{it.num}</div>
                <h3 className="display-sm" style={{margin:'12px 0 8px'}}>{it.t}</h3>
                <p className="body-sm" style={{margin:0}}>{it.d}</p>
              </article>
            </Reveal>
          ))}
        </div>
      </div>

      <style>{`
        @media (min-width: 1024px) {
          .trust-head { grid-template-columns: 1.4fr 1fr !important; gap: 80px !important; align-items: flex-end; }
        }
        .trust-grid {
          display: grid;
          gap: 1px;
          grid-template-columns: 1fr;
          background: var(--ink-200);
          border: 1px solid var(--ink-200);
          border-radius: var(--r-lg);
          overflow: hidden;
        }
        @media (min-width: 600px) { .trust-grid { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }
        .trust-card {
          background: var(--white);
          padding: 32px;
          transition: background 0.3s var(--ease);
        }
        .trust-card:hover { background: var(--cream-100); }
        .trust-card-num {
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.16em;
          color: var(--teal-700);
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Hero, Marquee, Excellence, PetshopTeaser, SpeciesCare, Testimonials, Specialists, FAQ, WhyTrust });