/* Top navigation with mobile burger menu */

const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [hidden, setHidden] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const lastScroll = React.useRef(0);

  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      setScrolled(y > 24);
      // Hide on scroll-down past 160px, reveal on scroll-up
      if (y > 160 && y > lastScroll.current + 4) setHidden(true);
      else if (y < lastScroll.current - 4) setHidden(false);
      if (y < 60) setHidden(false);
      lastScroll.current = y;
    };
    window.addEventListener('scroll', onScroll, {passive: true});
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Lock body scroll + Esc to close when burger open
  React.useEffect(() => {
    if (!menuOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [menuOpen]);

  const links = [
    {label: 'О клинике', href: '#about'},
    {label: 'Врачи', href: '#doctors'},
    {label: 'Как это работает', href: '#process'},
    {label: 'Отзывы', href: '#reviews'},
    {label: 'Стоимость', href: '#pricing'},
  ];

  const WA_LINK = 'https://api.whatsapp.com/send?phone=972526512654&text=%D0%97%D0%B4%D1%80%D0%B0%D0%B2%D1%81%D1%82%D0%B2%D1%83%D0%B9%D1%82%D0%B5%21%20%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%B5%D1%81%D1%83%D0%B5%D1%82%20%D0%BB%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%B2%20%D0%BA%D0%BB%D0%B8%D0%BD%D0%B8%D0%BA%D0%B5%20%D0%90%D1%81%D1%81%D1%83%D1%82%D0%B0.';

  const closeMenu = () => setMenuOpen(false);

  return (
    <>
    <header className={`nav ${scrolled ? 'nav-scrolled' : ''} ${hidden ? 'nav-hidden' : ''}`}>
      <style>{`
        .nav {
          position: sticky; top: 0; z-index: 50;
          transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s, transform 0.3s ease;
          padding: 18px 0;
          will-change: transform;
        }
        .nav-scrolled {
          background: color-mix(in oklab, var(--paper) 96%, transparent);
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          box-shadow: 0 1px 0 var(--ink-10);
        }
        .nav-hidden { transform: translateY(-110%); }
        .nav-inner {
          display: grid;
          grid-template-columns: auto 1fr auto;
          align-items: center;
          gap: 40px;
        }
        .logo {
          display: inline-flex; align-items: center;
          color: var(--ink);
          line-height: 0;
        }
        .logo-svg {
          height: 44px;
          width: auto;
          display: block;
        }
        .nav-links {
          display: flex;
          justify-content: center;
          gap: 28px;
        }
        .nav-link {
          font-size: 14px;
          color: var(--ink-80);
          transition: color 0.2s;
          position: relative;
        }
        .nav-link:hover { color: var(--ink); }
        .nav-link::after {
          content:''; position:absolute; left:0; right:0; bottom: -6px;
          height:1px; background: var(--clay);
          transform: scaleX(0); transform-origin: left;
          transition: transform 0.25s ease;
        }
        .nav-link:hover::after { transform: scaleX(1); }
        .nav-right { display:flex; align-items:center; gap: 14px; }
        .phone-chip {
          display: inline-flex; align-items: center; gap: 8px;
          font-size: 14px; font-family: var(--font-mono);
          color: var(--ink);
          white-space: nowrap;
        }
        .phone-chip:hover { color: var(--clay); }

        /* Burger button — hidden on desktop */
        .nav-burger { display: none; }

        @media (max-width: 1080px) {
          .nav-links { display: none; }
          .nav-inner { grid-template-columns: auto 1fr auto; gap: 16px; }
          .nav-burger {
            display: inline-flex;
            width: 40px; height: 40px;
            border-radius: 50%;
            background: var(--ink-05);
            border: 1px solid var(--ink-10);
            align-items: center; justify-content: center;
            color: var(--ink);
            transition: background .2s;
          }
          .nav-burger:hover, .nav-burger:focus-visible { background: var(--ink-10); }
          .nav-burger svg { display: block; }
        }
        @media (max-width: 680px) {
          .phone-chip { display: none; }
          .nav-right { gap: 8px; }
          .logo-svg { height: 28px; }
          .nav-burger { width: 38px; height: 38px; }
        }

        /* Drawer */
        .menu-backdrop {
          position: fixed; inset: 0; z-index: 100;
          background: rgba(14, 30, 54, 0.55);
          backdrop-filter: blur(4px);
          -webkit-backdrop-filter: blur(4px);
          opacity: 0; pointer-events: none;
          transition: opacity .25s ease;
        }
        .menu-backdrop.open { opacity: 1; pointer-events: auto; }

        .menu-drawer {
          position: fixed; top: 0; right: 0; bottom: 0;
          width: min(360px, 86vw);
          background: var(--paper); color: var(--ink);
          z-index: 110;
          display: flex; flex-direction: column;
          padding: 24px 24px 28px;
          transform: translateX(100%);
          transition: transform .3s cubic-bezier(.2,.7,.2,1);
          overflow-y: auto;
        }
        .menu-drawer.open { transform: translateX(0); }

        .menu-head {
          display: flex; justify-content: space-between; align-items: center;
          margin-bottom: 28px;
        }
        .menu-head .logo-svg { height: 36px; }
        .menu-close {
          width: 40px; height: 40px; border-radius: 50%;
          background: var(--ink-05);
          display: grid; place-items: center;
          font-size: 22px; color: var(--ink-60);
          line-height: 1;
        }
        .menu-close:hover { background: var(--ink); color: var(--paper); }

        .menu-links {
          display: flex; flex-direction: column; gap: 2px;
          margin-bottom: 24px;
          flex: 1;
        }
        .menu-links a {
          font-family: var(--font-display);
          font-size: 22px;
          font-weight: 400;
          letter-spacing: -0.01em;
          color: var(--ink);
          padding: 14px 0;
          border-bottom: 1px solid var(--ink-10);
          display: flex; align-items: center; justify-content: space-between;
          transition: color .2s, padding-left .2s;
        }
        .menu-links a:hover { color: var(--clay-dark); padding-left: 6px; }
        .menu-links a::after {
          content: '→'; color: var(--ink-40); font-size: 16px; font-family: var(--font-body);
        }
        .menu-links a:hover::after { color: var(--clay); }

        /* Awards / certificates block */
        .menu-awards {
          display: flex; flex-direction: column; gap: 12px;
          margin-top: auto; padding-top: 20px;
          border-top: 1px dashed var(--ink-20);
        }
        .menu-awards-title {
          font-family: var(--font-mono); font-size: 10px;
          letter-spacing: 0.14em; text-transform: uppercase;
          color: var(--clay-dark);
          margin-bottom: 4px;
        }
        .menu-award {
          display: grid;
          grid-template-columns: 40px 1fr;
          gap: 12px; align-items: center;
          padding: 10px 12px;
          background: var(--paper-2);
          border-radius: var(--r-sm);
        }
        .menu-award .ic {
          width: 40px; height: 40px;
          border-radius: 10px;
          background: var(--clay-soft);
          color: var(--clay-dark);
          display: grid; place-items: center;
          flex-shrink: 0;
        }
        .menu-award .t { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; line-height: 1.15; }
        .menu-award .d { font-size: 11.5px; color: var(--ink-60); margin-top: 2px; line-height: 1.35; }

        .menu-contact { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--ink-20); }
        .menu-contact .btn { width: 100%; justify-content: center; }
        .menu-contact .phone-row {
          display: flex; align-items: center; gap: 10px;
          font-family: var(--font-mono); font-size: 14px;
          color: var(--ink); padding: 10px 0;
        }
        .menu-contact .phone-row svg { color: var(--clay-dark); }
        .menu-sla {
          display: flex; align-items: center; gap: 8px;
          font-size: 12px; color: var(--ink-60);
          margin-top: 4px;
        }
        .menu-sla .pulse {
          width: 8px; height: 8px; background: var(--sage); border-radius: 50%;
          animation: pulse 2s infinite;
        }
      `}</style>
      <div className="container nav-inner">
        <a href="#top" className="logo" aria-label="Assuta">
          <img src="assets/assuta_logo_en.svg" alt="Assuta" className="logo-svg"/>
        </a>
        <nav className="nav-links">
          {links.map(l => <a key={l.href} href={l.href} className="nav-link">{l.label}</a>)}
        </nav>
        <div className="nav-right">
          <a href="tel:+972526512654" className="phone-chip">
            <I.Phone size={14}/> +972-52-651-2654
          </a>
          <a href={WA_LINK} target="_blank" rel="noopener" className="btn btn-clay btn-sm">
            <I.WhatsApp size={14}/>
            WhatsApp
          </a>
          <button type="button" className="nav-burger" onClick={() => setMenuOpen(true)} aria-label="Открыть меню" aria-expanded={menuOpen}>
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <path d="M2 5h14M2 9h14M2 13h14"/>
            </svg>
          </button>
        </div>
      </div>

    </header>

    {/* Mobile drawer — sibling of <header> to escape nav's transform containing block */}
    <div className={`menu-backdrop ${menuOpen ? 'open' : ''}`} onClick={closeMenu} aria-hidden={!menuOpen}/>
    <aside className={`menu-drawer ${menuOpen ? 'open' : ''}`} role="dialog" aria-modal="true" aria-label="Навигация">
      <div className="menu-head">
        <img src="assets/assuta_logo_en.svg" alt="Assuta" className="logo-svg"/>
        <button type="button" className="menu-close" onClick={closeMenu} aria-label="Закрыть меню">×</button>
      </div>
      <nav className="menu-links" onClick={closeMenu}>
        {links.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
      </nav>
      <div className="menu-awards">
        <div className="menu-awards-title">Аккредитации и гарантии</div>
        <div className="menu-award">
          <div className="ic"><I.Shield size={22}/></div>
          <div>
            <div className="t">Минздрав Израиля</div>
            <div className="d">Комитет контроля качества медицинских услуг</div>
          </div>
        </div>
        <div className="menu-award">
          <div className="ic"><I.Award size={22}/></div>
          <div>
            <div className="t">JCI · США</div>
            <div className="d">Международная аккредитация качества медицины</div>
          </div>
        </div>
        <div className="menu-award">
          <div className="ic"><I.Check size={22}/></div>
          <div>
            <div className="t">ISO 9001:2015</div>
            <div className="d">Международный стандарт качества услуг</div>
          </div>
        </div>
        <div className="menu-award">
          <div className="ic"><I.Doc size={22}/></div>
          <div>
            <div className="t">Оплата напрямую в клинику</div>
            <div className="d">Без посредников, по официальному прайсу Ассута</div>
          </div>
        </div>
      </div>
      <div className="menu-contact">
        <a href={WA_LINK} target="_blank" rel="noopener" className="btn btn-clay" onClick={closeMenu}>
          <I.WhatsApp size={14}/> Написать в WhatsApp
        </a>
        <a href="tel:+972526512654" className="phone-row" onClick={closeMenu}>
          <I.Phone size={14}/> +972-52-651-2654
        </a>
        <div className="menu-sla">
          <span className="pulse"/>
          <span>Координатор Анна · ответим за ~7 минут</span>
        </div>
      </div>
    </aside>
    </>
  );
};

window.Nav = Nav;