/* Patterson storefront header: navy utility bar + white main bar (logo, Algolia-style search, account, cart) + category nav with flyout. */ function StoreHeader({ brand, cartCount, onAddDemo }) { const DS = window.PattersonCompaniesDesignSystem_3534f9; const { Button } = DS; const { SSearch, SUser, SCart, SChevron, SPhone } = window; const [open, setOpen] = React.useState(null); return (
setOpen(null)}> {/* utility bar */}
{brand.phone}
{/* main bar */}
e.preventDefault()} style={{ display: 'inline-flex', alignItems: 'center', gap: 11, flex: 'none' }}> Patterson {brand.sub} {/* search */}
e.preventDefault()} style={{ flex: 1, position: 'relative', display: 'flex', alignItems: 'center' }}> { e.target.style.borderColor = 'var(--pat-sky)'; e.target.style.background = '#fff'; e.target.style.boxShadow = 'var(--ring-focus)'; }} onBlur={(e) => { e.target.style.borderColor = 'var(--border-default)'; e.target.style.background = 'var(--surface-subtle)'; e.target.style.boxShadow = 'none'; }} />
{/* account + cart */}
e.preventDefault()} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--pat-navy)', fontWeight: 600, fontSize: 'var(--fs-sm)' }}> Sign In
or Register
{/* category nav */}
{brand.nav.map((n) => { const active = open === n; return (
setOpen(n)} style={{ display: 'flex', alignItems: 'center' }}> e.preventDefault()} style={{ display: 'inline-flex', alignItems: 'center', gap: 5, height: '100%', padding: '0 16px', fontSize: 'var(--fs-body)', fontWeight: 600, color: active ? 'var(--pat-navy)' : 'var(--text-body)', borderBottom: `3px solid ${active ? 'var(--pat-sky)' : 'transparent'}`, }}>{n}
); })}
{/* flyout */} {open && brand.flyout[open] && (
{brand.flyout[open].map((item) => ( e.preventDefault()} style={{ fontSize: 'var(--fs-body)', color: 'var(--text-body)', padding: '6px 0' }} onMouseEnter={(e) => e.currentTarget.style.color = 'var(--pat-sky)'} onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-body)'}>{item} ))}
)}
); } window.StoreHeader = StoreHeader;