/* PillNav — fixed top-center pill navigation with logo + GSAP liquid hover. */
const { useEffect: useEffectPN, useRef: useRefPN, useState: useStatePN } = React;

function Pill({ label, onClick, active }) {
  const pillRef = useRefPN(null);
  const circleRef = useRefPN(null);
  const labelRef = useRefPN(null);
  const labelHoverRef = useRefPN(null);
  const tlRef = useRefPN(null);

  useEffectPN(() => {
    if (!window.gsap || !pillRef.current) return;
    const pill = pillRef.current;
    const circle = circleRef.current;
    const lab = labelRef.current;
    const labH = labelHoverRef.current;

    const layout = () => {
      const w = pill.offsetWidth;
      const h = pill.offsetHeight;
      const R = (w * w / 4 + h * h) / (2 * h);
      const D = 2 * R + 2;
      const delta = R - Math.sqrt(R * R - w * w / 4) + 1;
      circle.style.width = D + 'px';
      circle.style.height = D + 'px';
      circle.style.left = '50%';
      circle.style.bottom = -delta + 'px';
      circle.style.marginLeft = -D / 2 + 'px';
      circle.style.transformOrigin = `50% ${D - delta}px`;
    };
    layout();
    window.addEventListener('resize', layout);

    const tl = window.gsap.timeline({ paused: true });
    tl.to(circle, { scale: 3, duration: 0.4, ease: 'power3.out' }, 0).
    to(lab, { y: '-100%', duration: 0.3, ease: 'power3.out' }, 0).
    fromTo(labH, { y: '100%' }, { y: '0%', duration: 0.3, ease: 'power3.out' }, 0);
    tlRef.current = tl;

    const enter = () => window.gsap.to(tl, { time: tl.duration(), duration: 0.3, ease: 'power3.out' });
    const leave = () => window.gsap.to(tl, { time: 0, duration: 0.2, ease: 'power3.out' });
    pill.addEventListener('mouseenter', enter);
    pill.addEventListener('mouseleave', leave);
    return () => {
      window.removeEventListener('resize', layout);
      pill.removeEventListener('mouseenter', enter);
      pill.removeEventListener('mouseleave', leave);
      tl.kill();
    };
  }, []);

  return (
    <button
      ref={pillRef}
      className={`pill ${active ? 'is-active' : ''}`}
      onClick={onClick}
      type="button">
      
      <span ref={circleRef} className="hover-circle" />
      <span className="label-stack">
        <span ref={labelRef} className="pill-label">{label}</span>
        <span ref={labelHoverRef} className="pill-label-hover" style={{ transform: 'translateY(100%)' }}>{label}</span>
      </span>
    </button>);

}

function PillNav({ items }) {
  const logoRef = useRefPN(null);
  const itemsRef = useRefPN(null);
  const [mobileOpen, setMobileOpen] = useStatePN(false);

  useEffectPN(() => {
    if (!window.gsap) return;
    if (logoRef.current) {
      window.gsap.fromTo(logoRef.current, { scale: 0 }, { scale: 1, duration: 0.6, ease: 'back.out(1.7)' });
    }
    if (itemsRef.current) {
      window.gsap.fromTo(itemsRef.current, { opacity: 0, y: -8 }, { opacity: 1, y: 0, duration: 0.6, ease: 'power3.out', delay: 0.1 });
    }
  }, []);

  const onLogoEnter = (e) => window.gsap && window.gsap.to(e.currentTarget.querySelector('svg'), { rotate: 360, duration: 0.6, ease: 'power2.out' });
  const onLogoLeave = (e) => window.gsap && window.gsap.set(e.currentTarget.querySelector('svg'), { rotate: 0 });

  const scrollToTop = () => window.gsap && window.gsap.to(window, { duration: 1.5, scrollTo: 0, ease: 'power3.inOut' });
  const scrollToBottom = () => window.gsap && window.gsap.to(window, { duration: 1.5, scrollTo: document.body.scrollHeight, ease: 'power3.inOut' });
  const scrollToId = (id) => {
    const el = document.getElementById(id);
    if (el && window.gsap) window.gsap.to(window, { duration: 1.2, scrollTo: { y: el, offsetY: 90 }, ease: 'power3.inOut' });
  };

  const handlerFor = (label) => {
    const l = label.toLowerCase();
    if (l === 'home') return scrollToTop;
    if (l === 'contact') return () => { window.location.href = 'tel:+18132133578'; };
    if (l === 'about') return scrollToBottom;
    if (l === 'process' || l === 'how it works') return () => scrollToId('process');
    if (l === 'blog') return () => { window.location.href = '/blog/'; };
    if (l === 'reviews') return () => { window.location.href = '/reviews/'; };
    if (l === 'faq') return () => scrollToId('faq');
    return scrollToTop;
  };

  return (
    <div className="pill-nav-container">
      <div className="pill-nav unified">
        <div className="pill-nav-items unified-pill desktop-only" style={{ margin: "8px", padding: "6px 16px 6px 18px", borderWidth: "2px", opacity: "1", borderColor: "rgb(0, 0, 0)" }}>
          <span ref={logoRef} className="inline-logo" onClick={scrollToTop} role="button" aria-label="Home" style={{ textAlign: "right" }}>
            <img
              src="assets/elevate-logo-clean.png"
              alt="Elevate Home Buyer"
              style={{ display: 'block', padding: "1px", margin: "7px", borderWidth: "0px", borderRadius: "9px", height: "58px", width: "101px", objectFit: "contain" }} />
            
          </span>
          <span className="pill-divider" aria-hidden="true" />
          <ul ref={itemsRef} className="pill-list">
            {items.map((label) =>
            <li key={label}>
                <Pill label={label} onClick={handlerFor(label)} />
              </li>
            )}
          </ul>
        </div>

        {/* Mobile-only logo pill (next to hamburger) */}
        <div className="mobile-logo mobile-only" onClick={scrollToTop} role="button" aria-label="Home">
          <img src="assets/elevate-logo-clean.png" alt="Elevate Home Buyer" />
        </div>

        {/* Mobile menu button only */}
        <button
          className="mobile-menu-button mobile-only"
          onClick={() => setMobileOpen((o) => !o)}
          aria-label="Menu"
          type="button">
          <span className="hamburger-line" style={{ transform: mobileOpen ? 'rotate(45deg) translateY(4px)' : 'none', transition: 'transform .2s' }} />
          <span className="hamburger-line" style={{ transform: mobileOpen ? 'rotate(-45deg) translateY(-4px)' : 'none', transition: 'transform .2s' }} />
        </button>
      </div>

      {mobileOpen &&
      <div className="mobile-menu-popover mobile-only" style={{ visibility: 'visible' }}>
          <ul className="mobile-menu-list">
            {items.map((label) =>
          <li key={label}>
                <a className="mobile-menu-link" onClick={() => {setMobileOpen(false);handlerFor(label)();}}>{label}</a>
              </li>
          )}
          </ul>
        </div>
      }
    </div>);

}

window.PillNav = PillNav;