// 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. Two decades in Metro Vancouver real estate guiding individual buyers and sellers, and running sales and marketing for developers, calmly, candidly, and with results that show up on the closing statement.</p>
          <div className="footer-social" style={{ marginTop: 20 }}>
            <a href={SITE_DATA.agent.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram"><Icon name="instagram" size={16} /></a>
            <a href={SITE_DATA.agent.facebook} target="_blank" rel="noopener noreferrer" aria-label="Facebook"><Icon name="facebook" size={16} /></a>
            <a href={SITE_DATA.agent.youtube} target="_blank" rel="noopener noreferrer" 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;
