/* global React, Wordmark, AylaRouter, NewsletterSignup */
const { useState, useEffect, useCallback } = React;

const NAV = [
  { id: 'about', label: 'Our Philosophy' },
  { id: 'team', label: 'Team' },
  { id: 'journal', label: 'Blog' },
];

const SOCIAL_LINKS = [
  { id: 'instagram', label: 'Instagram', href: 'https://www.instagram.com/aylawellness.me', icon: 'fa-brands fa-instagram' },
  { id: 'linkedin', label: 'LinkedIn', href: 'https://www.linkedin.com/company/ayla-wellness', icon: 'fa-brands fa-linkedin-in' },
  // { id: 'facebook', label: 'Facebook', href: 'https://www.facebook.com/aylawellness', icon: 'fa-brands fa-facebook-f' },
  { id: 'x', label: 'X', href: 'https://x.com/aylawellness', icon: 'fa-brands fa-x-twitter' },
  { id: 'tiktok', label: 'TikTok', href: 'https://www.tiktok.com/@ayla.wellness', icon: 'fa-brands fa-tiktok' },
];

function go(setRoute, route) {
  return (e) => {
    e.preventDefault();
    setRoute(route, { smoothScroll: true });
  };
}

function navIsActive(route, id) {
  return route === id || (id === 'journal' && route.startsWith('journal-post'));
}

function Nav({ route, setRoute }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const [overHero, setOverHero] = useState(route === 'home');

  const closeMenu = useCallback(() => setMenuOpen(false), []);
  const onHome = route === 'home';

  useEffect(() => {
    closeMenu();
  }, [route, closeMenu]);

  useEffect(() => {
    if (!onHome) {
      setOverHero(false);
      return undefined;
    }

    let observer;
    const watchHero = () => {
      const hero = document.querySelector('.hero');
      if (!hero) return;
      observer = new IntersectionObserver(
        ([entry]) => setOverHero(entry.isIntersecting),
        { threshold: 0, rootMargin: '-84px 0px 0px 0px' }
      );
      observer.observe(hero);
    };

    const frame = requestAnimationFrame(() => requestAnimationFrame(watchHero));
    return () => {
      cancelAnimationFrame(frame);
      observer?.disconnect();
    };
  }, [onHome, route]);

  useEffect(() => {
    document.body.classList.toggle('nav-menu-open', menuOpen);
    return () => document.body.classList.remove('nav-menu-open');
  }, [menuOpen]);

  useEffect(() => {
    if (!menuOpen) return undefined;
    const onKey = (e) => {
      if (e.key === 'Escape') closeMenu();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [menuOpen, closeMenu]);

  const navigate = (id) => (e) => {
    go(setRoute, id)(e);
    closeMenu();
  };

  const heroVideoSrc = window.AYLA_HERO_VIDEO;
  const showNavVideo = !onHome || !overHero;

  const navClass = [
    'nav',
    menuOpen ? 'is-open' : '',
    'nav-over-hero',
    showNavVideo ? 'nav-scrolled' : '',
  ].filter(Boolean).join(' ');

  return (
    <nav className={navClass}>
      {heroVideoSrc && (
        <div className="nav-video-wrap" aria-hidden="true">
          <video
            autoPlay
            loop
            muted
            playsInline
            className="nav-bg-video"
            src={heroVideoSrc}
          />
        </div>
      )}
      <div className="nav-glass" aria-hidden="true" />
      <div className="nav-inner">
        <a className="nav-logo" href={AylaRouter.pathFor('home')} onClick={go(setRoute, 'home')}>
          <Wordmark variant="light" />
        </a>
        <div className="nav-links">
          {NAV.map((n) => (
            <a
              key={n.id}
              className={'nav-link' + (navIsActive(route, n.id) ? ' active' : '')}
              href={AylaRouter.pathFor(n.id)}
              onClick={go(setRoute, n.id)}
            >
              {n.label}
            </a>
          ))}
          <a className="nav-cta" href={AylaRouter.pathFor('waitlist')} onClick={go(setRoute, 'waitlist')}>
            Get the Cycle Guide
          </a>
        </div>
        <button
          type="button"
          className="nav-toggle"
          aria-label={menuOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={menuOpen}
          aria-controls="nav-mobile-menu"
          onClick={() => setMenuOpen((open) => !open)}
        >
          <span className="nav-toggle-bar" aria-hidden="true" />
          <span className="nav-toggle-bar" aria-hidden="true" />
          <span className="nav-toggle-bar" aria-hidden="true" />
        </button>
      </div>
      <div
        id="nav-mobile-menu"
        className="nav-mobile"
        hidden={!menuOpen}
        onClick={closeMenu}
      >
        <div className="nav-mobile-panel" onClick={(e) => e.stopPropagation()}>
          <ul className="nav-mobile-links">
            {NAV.map((n) => (
              <li key={n.id}>
                <a
                  className={'nav-mobile-link' + (navIsActive(route, n.id) ? ' active' : '')}
                  href={AylaRouter.pathFor(n.id)}
                  onClick={navigate(n.id)}
                >
                  {n.label}
                </a>
              </li>
            ))}
          </ul>
          <a className="nav-mobile-cta btn" href={AylaRouter.pathFor('waitlist')} onClick={navigate('waitlist')}>
            Get the Cycle Guide
            <span className="arr">→</span>
          </a>
        </div>
      </div>
    </nav>
  );
}

function Footer({ setRoute }) {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div className="footer-links-group">
            <div className="footer-col">
              <h6>Explore</h6>
              <ul>
                <li><a href={AylaRouter.pathFor('about')} onClick={go(setRoute, 'about')}>Our Philosophy</a></li>
                <li><a href={AylaRouter.pathFor('waitlist')} onClick={go(setRoute, 'waitlist')}>Waitlist &amp; Cycle Guide</a></li>
                <li><a href={AylaRouter.pathFor('journal')} onClick={go(setRoute, 'journal')}>Blog</a></li>
              </ul>
            </div>
            <div className="footer-col">
              <h6>Company</h6>
              <ul>
                <li><a href={AylaRouter.pathFor('team')} onClick={go(setRoute, 'team')}>About us</a></li>
                <li><a href="mailto:contact@ayla-wellness.com">Contact</a></li>
              </ul>
            </div>
          </div>
          <div className="footer-social">
            <h6>Follow</h6>
            <div className="footer-social-icons">
              {SOCIAL_LINKS.map((s) => (
                <a
                  key={s.id}
                  className="footer-social-link"
                  href={s.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={s.label}
                >
                  <i className={s.icon} aria-hidden="true" />
                </a>
              ))}
            </div>
          </div>
          <NewsletterSignup variant="footer" />
        </div>
        <div className="footer-fine">
          <span>© 2026 Ayla Wellness</span>
          <nav className="footer-fine-links" aria-label="Legal">
            <a href={AylaRouter.pathFor('privacy')} onClick={go(setRoute, 'privacy')}>Privacy Policy</a>
            <span className="footer-fine-sep" aria-hidden="true">·</span>
            <a href={AylaRouter.pathFor('terms')} onClick={go(setRoute, 'terms')}>Terms of Service</a>
          </nav>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Nav, Footer });