/* SFS website prototype — client review shell (Home + Company + mega-menu) */
const { TopBar, Header, Footer } = window.SFSChrome;

/* Shown when a mega-menu link points at a page that isn't part of this review. */
function ComingSoonPage({ onNavigate }) {
  return (
    <main className="sfs-site">
      <section className="sfs-section" style={{ paddingTop: 'var(--space-8)', paddingBottom: 'var(--space-8)' }}>
        <div className="sfs-shell" style={{ maxWidth: 720, textAlign: 'center' }}>
          <p style={{ font: 'var(--text-overline)', letterSpacing: 'var(--tracking-overline)', textTransform: 'uppercase', color: 'var(--red-600)', marginBottom: 'var(--space-3)' }}>Prototype review</p>
          <h1 style={{ font: 'var(--text-h3)', marginBottom: 'var(--space-3)' }}>This page is not part of this review</h1>
          <p style={{ font: 'var(--text-body)', color: 'var(--gray-600)', marginBottom: 'var(--space-5)' }}>This prototype covers the Home page, the Company page, and the navigation mega-menu.</p>
          <div style={{ display: 'flex', gap: 'var(--space-3)', justifyContent: 'center' }}>
            <a href="#" className="sfs-arrow-link" onClick={(e) => { e.preventDefault(); onNavigate('home'); }}>Back to Home</a>
            <a href="#" className="sfs-arrow-link" onClick={(e) => { e.preventDefault(); onNavigate('company'); }}>View Company page</a>
          </div>
        </div>
      </section>
    </main>
  );
}

function SFSPrototypeApp() {
  const [page, setPage] = React.useState('home');

  const go = (raw) => {
    const [p, hash] = String(raw).split('#');
    setPage(p);
    window.scrollTo({ top: 0 });
    if (hash) {
      setTimeout(() => {
        const el = document.getElementById(hash);
        if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 90, behavior: 'smooth' });
      }, 80);
    }
  };

  const base = page.split(':')[0];
  let View;
  switch (base) {
    case 'home': View = window.SFSHomePage; break;
    case 'company': View = window.SFSCompanyPage; break;
    default: View = ComingSoonPage;
  }

  return (
    <div className="sfs-site">
      <TopBar onNavigate={go} />
      <Header page={page} onNavigate={go} />
      <View onNavigate={go} />
      <Footer onNavigate={go} />
    </div>
  );
}

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