// Sticky nav with scroll-aware transparency + mobile menu

const Nav = ({ route, setRoute, onDarkHero, mobileOpen, setMobileOpen, lang, setLang, t }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [langOpen, setLangOpen] = React.useState(false);
  const langRef = React.useRef(null);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => {
    const onDoc = (e) => { if (langRef.current && !langRef.current.contains(e.target)) setLangOpen(false); };
    document.addEventListener('click', onDoc);
    return () => document.removeEventListener('click', onDoc);
  }, []);
  useLucide();

  const isDark = onDarkHero && !scrolled;
  const tr = t || ((k) => k);
  const langs = SITE_DATA.languages;
  const current = langs.find(l => l.code === lang) || langs[0];

  return (
    <>
      <header className={`nav ${scrolled ? 'scrolled' : ''} ${isDark ? 'on-dark' : ''}`}>
        <div className="nav-inner">
          <button className="nav-mark" onClick={() => setRoute('home')} style={{ background: 'transparent', border: 'none', padding: 0, color: 'inherit', cursor: 'pointer' }}>
            <img className="nav-logo nav-logo-dark" src="assets/logo-st.png" alt="Steffanie Ting" />
            <img className="nav-logo nav-logo-light" src="assets/logo-st-white.png" alt="Steffanie Ting" />
            <span className="mark-text">
              <span className="mark-name">steffanie ting</span>
              <span className="mark-sub">real estate</span>
            </span>
          </button>
          <nav className="nav-links">
            {SITE_DATA.nav.map(item => (
              <button
                key={item.id}
                className={`nav-link ${route === item.id ? 'active' : ''}`}
                onClick={() => setRoute(item.id)}
              >
                {tr('nav.' + item.id)}
              </button>
            ))}
          </nav>
          <div className="nav-cta">
            <div className="lang-select" ref={langRef}>
              <button
                className="lang-trigger"
                onClick={(e) => { e.stopPropagation(); setLangOpen(o => !o); }}
                aria-label="Select language"
              >
                <Icon name="globe" size={16} />
                <span>{current.label}</span>
                <Icon name="chevron-down" size={14} />
              </button>
              {langOpen && (
                <div className="lang-menu">
                  {langs.map(l => (
                    <button
                      key={l.code}
                      className={`lang-option ${l.code === lang ? 'active' : ''}`}
                      onClick={() => { setLang(l.code); setLangOpen(false); }}
                    >
                      <span className="lang-code">{l.label}</span>
                      <span className="lang-name">{l.name}</span>
                      {l.code === lang && <Icon name="check" size={14} />}
                    </button>
                  ))}
                </div>
              )}
            </div>
            <button className={isDark ? 'btn btn-ghost-on-dark' : 'btn btn-primary'} onClick={() => setRoute('contact')}>
              {tr('nav.cta')}
            </button>
            <button className="nav-hamburger" onClick={() => setMobileOpen(true)} aria-label="Open menu">
              <Icon name="menu" size={24} />
            </button>
          </div>
        </div>
      </header>

      <div className={`mobile-menu ${mobileOpen ? 'open' : ''}`}>
        <div className="mobile-menu-head">
          <div className="nav-mark">
            <img className="nav-logo nav-logo-dark" src="assets/logo-st.png" alt="Steffanie Ting" />
            <span className="mark-text">
              <span className="mark-name">steffanie ting</span>
              <span className="mark-sub">real estate</span>
            </span>
          </div>
          <button onClick={() => setMobileOpen(false)} style={{ background: 'transparent', border: 'none', padding: 8 }}>
            <Icon name="x" size={28} />
          </button>
        </div>
        {SITE_DATA.nav.map(item => (
          <button
            key={item.id}
            className="mobile-menu-link"
            onClick={() => { setRoute(item.id); setMobileOpen(false); }}
          >
            {tr('nav.' + item.id)}
          </button>
        ))}
        <div style={{ marginTop: 24, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {langs.map(l => (
            <button
              key={l.code}
              className={`filter-chip ${l.code === lang ? 'active' : ''}`}
              onClick={() => setLang(l.code)}
            >
              {l.label} · {l.name}
            </button>
          ))}
        </div>
        <div style={{ marginTop: 24, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <a href={`tel:${SITE_DATA.agent.phone}`} className="btn btn-primary">
            <Icon name="phone" size={16} /> {SITE_DATA.agent.phone}
          </a>
        </div>
      </div>
    </>
  );
};
window.Nav = Nav;

const Footer = ({ setRoute }) => {
  useLucide();
  return (
    <footer className="footer">
      <div className="container footer-inner">
        <div className="footer-brand">
          <div className="mark">
            <img src="assets/logo-st-white.png" alt="Steffanie Ting" className="footer-logo" />
            <span>steffanie ting</span>
          </div>
          <p>Vancouver real estate specialist. Twenty years of guiding buyers, sellers, and investors across Metro Vancouver — calmly, candidly, and with results that show up on the closing statement.</p>
          <div className="footer-social" style={{ marginTop: 20 }}>
            <a href="#" aria-label="Instagram"><Icon name="instagram" size={16} /></a>
            <a href="#" aria-label="Facebook"><Icon name="facebook" size={16} /></a>
            <a href="#" aria-label="YouTube"><Icon name="youtube" size={16} /></a>
          </div>
        </div>
        <div>
          <h4>Explore</h4>
          <ul>
            <li><a href="#" onClick={(e) => { e.preventDefault(); setRoute('listings'); }}>Listings</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); setRoute('sold'); }}>Sold properties</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); setRoute('insights'); }}>Market insights</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); setRoute('about'); }}>About Steffanie</a></li>
          </ul>
        </div>
        <div>
          <h4>Services</h4>
          <ul>
            {SITE_DATA.services.slice(0, 5).map(s => (
              <li key={s.id}><a href="#" onClick={(e) => { e.preventDefault(); setRoute('services'); }}>{s.title}</a></li>
            ))}
          </ul>
        </div>
        <div>
          <h4>Contact</h4>
          <ul>
            <li><a href={`tel:${SITE_DATA.agent.phone}`}>{SITE_DATA.agent.phone}</a></li>
            <li><a href={`mailto:${SITE_DATA.agent.email}`}>{SITE_DATA.agent.email}</a></li>
            <li style={{ color: 'rgba(255,255,255,0.5)', marginTop: 8 }}>{SITE_DATA.agent.brokerage}</li>
            <li style={{ color: 'rgba(255,255,255,0.5)' }}>Vancouver, BC</li>
          </ul>
        </div>
      </div>
      <div className="container">
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} Steffanie Ting Personal Real Estate Corp. All rights reserved.</span>
          <span>This is not an offer for sale. Not intended to induce or breach an existing agency agreement.</span>
        </div>
      </div>
    </footer>
  );
};
window.Footer = Footer;