// v4-app.jsx — Nav, Footer, App shell for 9mith Advisory v4 (Awesomic skin)
const { useState, useEffect } = React;

function Nav({ page, onNavigate }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);

  useEffect(() => { window.scrollTo(0, 0); setScrolled(false); }, [page]);

  const darkHero = !scrolled && ['home', 'contact', 'network'].includes(page);
  const cls = `v4-nav${scrolled ? ' scrolled' : ''}${darkHero ? ' v4-nav--light' : ''}`;

  const links = [
    { label: 'What We Do',  id: 'what-we-do'  },
    { label: 'How We Work', id: 'how-we-work'  },
    { label: 'Network',     id: 'network'      },
    { label: 'About',       id: 'about'        },
    { label: 'Contact',     id: 'contact'      },
  ];

  const go = (id) => { onNavigate(id); setMenuOpen(false); };

  return (
    <>
      <nav className={cls}>
        <Logo dark={darkHero} compact onClick={() => go('home')} />
        <ul className="v4-nav-links">
          {links.map(l => (
            <li key={l.id}>
              <button className={`v4-nav-btn${page === l.id ? ' active' : ''}`} onClick={() => go(l.id)}>
                {l.label}
              </button>
            </li>
          ))}
        </ul>
        <button className="v4-hamburger" aria-label="Menu" onClick={() => setMenuOpen(true)}>
          <span/><span/><span/>
        </button>
      </nav>

      {menuOpen && (
        <div className="v4-mobile-menu" style={{ display: 'flex' }}>
          <button className="v4-mobile-close" onClick={() => setMenuOpen(false)}>✕</button>
          {links.map(l => (
            <button key={l.id} onClick={() => go(l.id)}>{l.label}</button>
          ))}
        </div>
      )}
    </>
  );
}

function Footer({ onNavigate }) {
  const C = window.AdvC;
  return (
    <footer className="v4-footer">
      <Logo compact onClick={() => onNavigate('home')} />
      <p style={{ fontFamily: 'var(--font-cosmica)', fontSize: 13, color: C.steel }}>
        Confidential engagements by referral and direct introduction only.
      </p>
      <p style={{ fontFamily: 'var(--font-cosmica)', fontSize: 11, color: C.ash, letterSpacing: '0.5px' }}>
        © 9mith Advisory · 2026
      </p>
    </footer>
  );
}

function App() {
  const [page, setPage] = useState('home');
  const [tab, setTab] = useState(0);

  const navigate = (id, initialTab) => {
    setPage(id);
    if (initialTab !== undefined) setTab(initialTab);
  };

  const renderPage = () => {
    switch (page) {
      case 'home':        return <HomePage       onNavigate={navigate} />;
      case 'what-we-do':  return <WhatWeDoPage   onNavigate={navigate} initialTab={tab} />;
      case 'how-we-work': return <HowWeWorkPage  onNavigate={navigate} />;
      case 'network':     return <NetworkPage     onNavigate={navigate} />;
      case 'about':       return <AboutPage       onNavigate={navigate} />;
      case 'contact':     return <ContactPage />;
      default:            return <HomePage       onNavigate={navigate} />;
    }
  };

  return (
    <div>
      <Nav page={page} onNavigate={navigate} />
      {renderPage()}
      {page !== 'contact' && <Footer onNavigate={navigate} />}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);