/* ============================================ SHARED COMPONENTS — Clinical Vet Header, Footer, Icons, Mobile Menu ============================================ */ const { useState, useEffect, useRef, useMemo } = React; // ============================================ // Base path helper — works from root or /servicos/ /admin/ // ============================================ const BASE = (() => { const p = window.location.pathname; if (/\/(servicos|admin)\//.test(p)) return '../'; return ''; })(); const B = (path) => BASE + path; // ============================================ // Auth helper (lightweight — shared between site & admin) // ============================================ const CV_AUTH_KEY = 'cv_user_v1'; function readAuth() { try { return JSON.parse(localStorage.getItem(CV_AUTH_KEY) || 'null'); } catch { return null; } } function clearAuth() { try { localStorage.removeItem(CV_AUTH_KEY); } catch {} window.dispatchEvent(new Event('cv_auth_change')); } function useHeaderAuth() { const [u, setU] = useState(() => readAuth()); useEffect(() => { const refresh = () => setU(readAuth()); window.addEventListener('cv_auth_change', refresh); window.addEventListener('storage', refresh); return () => { window.removeEventListener('cv_auth_change', refresh); window.removeEventListener('storage', refresh); }; }, []); return u; } // ============================================ // ICONS // ============================================ const Icon = { Arrow: ({ size = 16 }) => ( ), ArrowDown: ({ size = 16 }) => ( ), Phone: ({ size = 16 }) => ( ), Whatsapp: ({ size = 16 }) => ( ), Mail: ({ size = 16 }) => ( ), Pin: ({ size = 16 }) => ( ), Clock: ({ size = 16 }) => ( ), Heart: ({ size = 16 }) => ( ), Paw: ({ size = 16 }) => ( ), Check: ({ size = 16 }) => ( ), Plus: ({ size = 16 }) => ( ), Minus: ({ size = 16 }) => ( ), Close: ({ size = 16 }) => ( ), Menu: ({ size = 16 }) => ( ), Star: ({ size = 16, filled = true }) => ( ), Stethoscope: ({ size = 16 }) => ( ), Microscope: ({ size = 16 }) => ( ), Bag: ({ size = 16 }) => ( ), Home: ({ size = 16 }) => ( ), Scissors: ({ size = 16 }) => ( ), Shield: ({ size = 16 }) => ( ), Cart: ({ size = 16 }) => ( ), Calendar: ({ size = 16 }) => ( ), Sparkle: ({ size = 16 }) => ( ), Cat: ({ size = 16 }) => ( ), Dog: ({ size = 16 }) => ( ), Instagram: ({ size = 16 }) => ( ), Facebook: ({ size = 16 }) => ( ), }; // ============================================ // HEADER — Megamenu desktop + nested off-canvas mobile // ============================================ function Header({ active, dark = false }) { const [menuOpen, setMenuOpen] = useState(false); const [submenu, setSubmenu] = useState(null); // 'services' | 'shop' | null (desktop) const [mobSubmenu, setMobSubmenu] = useState(null); // mobile nested const [scrolled, setScrolled] = useState(false); const [userMenuOpen, setUserMenuOpen] = useState(false); const hoverTimer = useRef(null); const userMenuRef = useRef(null); const user = useHeaderAuth(); useEffect(() => { document.body.style.overflow = menuOpen ? 'hidden' : ''; }, [menuOpen]); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); useEffect(() => { const onClick = (e) => { if (userMenuRef.current && !userMenuRef.current.contains(e.target)) setUserMenuOpen(false); }; document.addEventListener('click', onClick); return () => document.removeEventListener('click', onClick); }, []); // Close submenu on Escape useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') { setSubmenu(null); setMenuOpen(false); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); const openSub = (id) => { clearTimeout(hoverTimer.current); setSubmenu(id); }; const closeSubDelayed = () => { clearTimeout(hoverTimer.current); hoverTimer.current = setTimeout(() => setSubmenu(null), 160); }; const services = [ { href: 'servicos/consulta.html', label: 'Consulta clínica', desc: 'Consultas e check-ups', icon: }, { href: 'servicos/vacinacao.html', label: 'Vacinação', desc: 'V10, V4, antirrábica e mais', icon: }, { href: 'servicos/cirurgia.html', label: 'Cirurgia', desc: 'Centro cirúrgico equipado', icon: }, { href: 'servicos/castracao.html', label: 'Castração', desc: 'Simulador por porte e raça', icon: }, { href: 'servicos/exames.html', label: 'Exames & laboratório', desc: 'Resultado em 2 horas', icon: }, { href: 'servicos/especialidades.html', label: 'Especialidades', desc: 'Cardio, derma, oftalmo, ortopedia', icon: }, { href: 'servicos/emergencia.html', label: 'Emergência 24h', desc: 'Plantão ininterrupto', icon: , accent: true }, { href: 'banho-tosa.html', label: 'Banho & tosa', desc: 'Spa pet hipoalergênico', icon: }, ]; const shop = [ { href: 'petshop.html?cat=racao', label: 'Rações premium', desc: 'Royal Canin, Hills, Premier', icon: }, { href: 'petshop.html?cat=petisco', label: 'Petiscos naturais', desc: 'Snacks saudáveis', icon: }, { href: 'petshop.html?cat=brinquedo', label: 'Brinquedos', desc: 'Enriquecimento e diversão', icon: }, { href: 'petshop.html?cat=acessorio', label: 'Acessórios', desc: 'Coleiras, camas, comedouros', icon: }, { href: 'petshop.html?cat=higiene', label: 'Higiene', desc: 'Shampoo, areia, antipulgas', icon: }, { href: 'petshop.html?cat=suplemento', label: 'Suplementos', desc: 'Articular, vitamínicos', icon: }, ]; const mainLinks = [ { id:'home', label:'Início', href:'index.html' }, { id:'about', label:'Sobre', href:'sobre.html' }, { id:'services', label:'Serviços', href:'servicos.html', sub:'services' }, { id:'shop', label:'Pet Shop', href:'petshop.html', sub:'shop' }, { id:'daycare', label:'Day Care', href:'daycare.html' }, { id:'planos', label:'Planos', href:'planos.html' }, { id:'blog', label:'Blog', href:'blog.html' }, { id:'contact', label:'Contato', href:'contato.html' }, ]; return ( <>
Emergência 24h · (11) 9999-0000 · Av. Paulista, 1900 — São Paulo
Clinical Vet desde 2008 · são paulo
{user ? (
{userMenuOpen && (
{user.avatar || user.name?.slice(0,2).toUpperCase()}
{user.name || 'Tutor(a)'}
{user.email}
{user.role === 'admin' ? ( Painel admin → ) : ( Meus pets )} Meus agendamentos Histórico Configurações
)}
) : ( Entrar )} Agendar consulta
{/* DESKTOP MEGAMENU */}
clearTimeout(hoverTimer.current)} onMouseLeave={closeSubDelayed}>
{submenu === 'services' && (
Serviços veterinários
Cuidado completo, da prevenção à cirurgia.

Equipe especializada com plantão 24h e protocolos adaptados para cada espécie, porte e raça.

Ver todos serviços
{services.map((s, i) => (
{s.icon}
{s.label}
{s.desc}
 ))}
)} {submenu === 'shop' && (
Pet Shop · Boutique
Curadoria veterinária para a vida toda.

800+ produtos selecionados pela nossa equipe. Delivery em 2h na zona sul.

Ver catálogo completo
{shop.map((s, i) => (
{s.icon}
{s.label}
{s.desc}
 ))}
)}
{/* MOBILE OFF-CANVAS */}
cv Clinical Vet
{/* Main panel */}
{mainLinks.map((l, i) => (
{l.sub ? ( ) : ( {l.label} {String(i+1).padStart(2,'0')} )}
))}
{user ? (
{user.avatar || user.name?.slice(0,2).toUpperCase()}
{user.name || 'Tutor(a)'}
{user.email}
) : ( Entrar / Criar conta )} Agendar consulta WhatsApp 24h
Av. Paulista, 1900 — São Paulo
Seg–Sáb 7h–22h · Emergência 24h
{/* Sub panels */}

Serviços

Cuidado integral, da prevenção à cirurgia.

{services.map((s, i) => (
{s.icon}
{s.label}
{s.desc}
 ))}

Pet Shop

Curadoria veterinária. 800+ produtos.

{shop.map((s, i) => (
{s.icon}
{s.label}
{s.desc}
 ))}
); } // ============================================ // FOOTER // ============================================ function Footer() { return ( ); } // ============================================ // SHARED CTA STRIP — used in many pages // ============================================ function CTAStrip() { return (
● Plantão 24 horas

Vidas não esperam.
Nós também não.

Centro cirúrgico, UTI veterinária e equipe de plantão prontos para emergências a qualquer hora do dia ou da noite. Sem agendamento, basta chegar.

); } // ============================================ // IMAGE PLACEHOLDER component // ============================================ function ImgPh({ label, ratio = '4/3', variant = '', style = {}, className = '' }) { return (
[ {label} ]
); } // Photo with stripe placeholder bg + emoji-free label function Photo({ label, ratio = '4/3', tone = 'cream', style = {}, className = '' }) { const bgs = { cream: 'linear-gradient(135deg, #EAE0CA, #F5EDDC)', teal: 'linear-gradient(135deg, #1E6E63, #2A8F80)', ink: 'linear-gradient(135deg, #1A2421, #3F4A47)', coral: 'linear-gradient(135deg, #DC6042, #E8775B)', blue: 'linear-gradient(135deg, #4B6E8B, #6E94B0)', sage: 'linear-gradient(135deg, #8FA787, #B5C6AD)', }; const colors = { cream: 'var(--ink-700)', teal: 'var(--cream-100)', ink: 'var(--cream-100)', coral: 'var(--white)', blue: 'var(--white)', sage: 'var(--white)', }; return (
[ {label} ]
); } // Export Object.assign(window, { Icon, Header, Footer, CTAStrip, ImgPh, Photo });