/* Top-level app: page routing + homepage direction switcher. */

function SiteApp() {
  const [page, setPage] = React.useState('Home');
  const [variation, setVariation] = React.useState(1);

  const navigate = (p) => {
    setPage(p);
    window.scrollTo({ top: 0, behavior: 'auto' });
  };

  let view;
  if (page === 'Services') view = <Services onNavigate={navigate} />;
  else if (page === 'About') view = <About onNavigate={navigate} />;
  else if (page === 'Contact') view = <Contact onNavigate={navigate} />;
  else view = <Home variation={variation} onNavigate={navigate} />;

  const dirs = [{ n: 1, label: 'Bold black' }, { n: 2, label: 'Photo-led' }, { n: 3, label: 'Split' }];

  return (
    <div className="site">
      <Header current={page} onNavigate={navigate} />
      {view}
      <Footer onNavigate={navigate} />

      {page === 'Home' && (
        <div style={{ position: 'fixed', left: '50%', transform: 'translateX(-50%)', bottom: 20, zIndex: 80,
          display: 'flex', alignItems: 'center', gap: 6, padding: '7px 8px 7px 14px',
          background: 'rgba(12,15,19,0.92)', backdropFilter: 'blur(10px)', borderRadius: 'var(--radius-pill)',
          border: '1px solid rgba(255,255,255,0.12)', boxShadow: 'var(--shadow-lg)' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--steel-400)', marginRight: 4 }}>Hero direction</span>
          {dirs.map((d) => (
            <button key={d.n} onClick={() => setVariation(d.n)}
              style={{ border: 'none', cursor: 'pointer', borderRadius: 'var(--radius-pill)', padding: '7px 14px',
                fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12.5,
                background: variation === d.n ? 'var(--brand)' : 'transparent',
                color: variation === d.n ? '#fff' : 'var(--steel-300)',
                transition: 'background 150ms, color 150ms' }}>
              {d.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

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