// Nav with mobile menu and language toggle
const { useState: useStateNav, useEffect: useEffectNav } = React;

const Nav = ({ t, lang, setLang }) => {
  const [scrolled, setScrolled] = useStateNav(false);
  const [mobileOpen, setMobileOpen] = useStateNav(false);
  const [active, setActive] = useStateNav('home');

  useEffectNav(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 24);
      const sections = ['home', 'about', 'services', 'process', 'gallery', 'testimonials', 'faq', 'contact'];
      const cur = sections.find(id => {
        const el = document.getElementById(id);
        if (!el) return false;
        const r = el.getBoundingClientRect();
        return r.top <= 100 && r.bottom > 100;
      });
      if (cur) setActive(cur);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { id: 'home', label: t.nav.home },
    { id: 'about', label: t.nav.about },
    { id: 'services', label: t.nav.services },
    { id: 'process', label: t.nav.process },
    { id: 'testimonials', label: t.nav.testimonials },
    { id: 'faq', label: t.nav.faq },
    { id: 'contact', label: t.nav.contact },
  ];

  const close = () => setMobileOpen(false);

  return (
    <>
      <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
        <a href="#home" className="nav-logo" onClick={close}>
          <Logo size={36} />
          <div className="logo-text">
            <div className="logo-name">ANGEL SHINE</div>
            <div className="logo-sub">HOME CLEANING LLC</div>
          </div>
        </a>
        <div className="nav-links">
          {links.map(l => (
            <a key={l.id} href={`#${l.id}`} className={`nav-link ${active === l.id ? 'active' : ''}`}>{l.label}</a>
          ))}
        </div>
        <div className="nav-right">
          <button className="lang-toggle" onClick={() => setLang(t.lang.next)} title="Language · Idioma">
            <Icon name="globe" size={14} />
            {t.lang.code}
          </button>
          <a href="https://angel-shine.pages.dev" className="btn btn-primary btn-sm">{t.cta.quoteShort} <Icon name="sparkles" size={14} /></a>
          <button className="menu-btn" onClick={() => setMobileOpen(!mobileOpen)} aria-label="Menu">
            <Icon name={mobileOpen ? 'close' : 'menu'} size={24} />
          </button>
        </div>
      </nav>
      <div className={`mobile-menu ${mobileOpen ? 'open' : ''}`}>
        {links.map(l => (
          <a key={l.id} href={`#${l.id}`} className="nav-link" onClick={close}>{l.label}</a>
        ))}
        <div style={{ marginTop: 32, display: 'flex', gap: 12 }}>
          <button className="lang-toggle" onClick={() => setLang(t.lang.next)}>
            <Icon name="globe" size={14} /> {t.lang.code}
          </button>
          <a href="https://angel-shine.pages.dev" className="btn btn-primary" onClick={close}>{t.cta.quote}</a>
        </div>
      </div>
    </>
  );
};

window.Nav = Nav;