<!-- wp:pc/pattern {"extraClass":"pc-hg","componentId":"header-glass"} -->
<!-- wp:group {"className":"pc-hg__bar"} -->
<div class="wp-block-group pc-hg__bar">
<!-- wp:group {"className":"pc-hg__logo"} -->
<div class="wp-block-group pc-hg__logo">
<!-- wp:html -->
<svg class="pc-hg__logo-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
<!-- /wp:html -->
<!-- wp:paragraph {"className":"pc-hg__logo-text"} -->
<p class="pc-hg__logo-text">NexLite</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
<!-- wp:list {"className":"pc-hg__menu"} -->
<ul class="wp-block-list pc-hg__menu"><!-- wp:list-item --><li><a href="#">Продукты</a></li><!-- /wp:list-item --><!-- wp:list-item --><li><a href="#">Прайсинг</a></li><!-- /wp:list-item --><!-- wp:list-item --><li><a href="#">Отзывы</a></li><!-- /wp:list-item --><!-- wp:list-item --><li><a href="#">Контакты</a></li><!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- wp:buttons {"className":"pc-hg__actions"} -->
<div class="wp-block-buttons pc-hg__actions"><!-- wp:button {"className":"pc-hg__cta"} --><div class="wp-block-button pc-hg__cta"><a class="wp-block-button__link wp-element-button">Купить сейчас</a></div><!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:html -->
<button class="pc-hg__burger" aria-label="Меню"><span></span><span></span><span></span></button>
<!-- /wp:html -->
</div>
<!-- /wp:group -->
<!-- wp:group {"className":"pc-hg__panel"} -->
<div class="wp-block-group pc-hg__panel">
<!-- wp:list {"className":"pc-hg__panel-menu"} -->
<ul class="wp-block-list pc-hg__panel-menu"><!-- wp:list-item --><li><a href="#">Продукты</a></li><!-- /wp:list-item --><!-- wp:list-item --><li><a href="#">Прайсинг</a></li><!-- /wp:list-item --><!-- wp:list-item --><li><a href="#">Отзывы</a></li><!-- /wp:list-item --><!-- wp:list-item --><li><a href="#">Контакты</a></li><!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"pc-hg__cta"} --><div class="wp-block-button pc-hg__cta"><a class="wp-block-button__link wp-element-button">Купить сейчас</a></div><!-- /wp:button --></div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->
<!-- /wp:pc/pattern -->
.pc-hg{position:relative;background:#0f172a;color:#f8fafc;border-radius:14px;overflow:hidden}
.pc-hg__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 24px;margin:0}
.pc-hg__logo{display:flex;align-items:center;gap:8px;margin:0}
.pc-hg__logo-icon{width:28px;height:28px;color:#27de73;flex:none}
.pc-hg__logo-text{margin:0;font-size:1.25rem;font-weight:800;color:#f8fafc;line-height:1}
.pc-hg__menu{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.pc-hg__menu li{margin:0}
.pc-hg__menu a{color:#cbd5e1;text-decoration:none;font-weight:500;font-size:.95rem;transition:color .2s ease}
.pc-hg__menu a:hover{color:#27de73}
.pc-hg__cta .wp-block-button__link{background:#27de73;color:#06200f;border-radius:999px;padding:10px 22px;font-weight:600;border:0;transition:background .2s ease,transform .2s ease}
.pc-hg__cta .wp-block-button__link:hover{background:#1fb85f;transform:translateY(-1px)}
.pc-hg__actions{margin:0}
.pc-hg__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.pc-hg__burger span{display:block;width:24px;height:2px;background:#f8fafc;border-radius:2px;transition:transform .3s ease,opacity .3s ease}
.pc-hg__burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.pc-hg__burger.active span:nth-child(2){opacity:0}
.pc-hg__burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.pc-hg__panel{position:absolute;left:0;right:0;top:100%;background:rgba(15,23,42,.98);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:18px;padding:24px;margin:0;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease,visibility .3s ease;z-index:5;border-top:1px solid rgba(255,255,255,.08)}
.pc-hg__panel.active{opacity:1;visibility:visible;transform:translateY(0)}
.pc-hg__panel-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.pc-hg__panel-menu a{color:#f8fafc;text-decoration:none;font-size:1.1rem;font-weight:600}
.pc-hg__panel-menu a:hover{color:#27de73}
@media(max-width:768px){.pc-hg__menu{display:none}.pc-hg__bar>.pc-hg__actions{display:none}.pc-hg__burger{display:flex}}
@media(min-width:769px){.pc-hg__panel{display:none}}
WPP.register('header-glass', (root, gsap) => {
const burger = root.querySelector('.pc-hg__burger');
const panel = root.querySelector('.pc-hg__panel');
if (!burger || !panel) return;
burger.addEventListener('click', () => {
burger.classList.toggle('active');
panel.classList.toggle('active');
});
panel.querySelectorAll('a').forEach((link) => {
link.addEventListener('click', () => {
burger.classList.remove('active');
panel.classList.remove('active');
});
});
});
