// Interior Lab — main App + state routing.

function App() {
  const [route, setRoute] = React.useState({ name: 'home' });

  // Hash-based routing for shareable URLs
  React.useEffect(() => {
    const fromHash = () => {
      const h = window.location.hash.replace(/^#\/?/, '');
      if (!h) { setRoute({ name: 'home' }); return; }
      const [name, slug] = h.split('/');
      if (name === 'project' && slug) setRoute({ name: 'project', slug });
      else if (['portfolio', 'studio', 'services', 'journal', 'contact', 'home'].includes(name))
        setRoute({ name });
      else setRoute({ name: 'home' });
    };
    fromHash();
    window.addEventListener('hashchange', fromHash);
    return () => window.removeEventListener('hashchange', fromHash);
  }, []);

  const go = (r) => {
    setRoute(r);
    const hash = r.name === 'home'
      ? '#/'
      : r.name === 'project'
        ? `#/project/${r.slug}`
        : `#/${r.name}`;
    if (window.location.hash !== hash) window.location.hash = hash;
    window.scrollTo({ top: 0, behavior: 'auto' });
  };

  let page;
  switch (route.name) {
    case 'portfolio': page = <PortfolioPage go={go} />; break;
    case 'project': page = <ProjectPage slug={route.slug} go={go} />; break;
    case 'studio': page = <StudioPage go={go} />; break;
    case 'services': page = <ServicesPage go={go} />; break;
    case 'contact': page = <ContactPage go={go} initialTab={route.tab} />; break;
    case 'journal': page = <JournalPage go={go} />; break;
    default: page = <HomePage go={go} />;
  }

  // screen-label for comment context
  const screenLabel = ({
    home: '01 Home', portfolio: '02 Portfolio', project: '03 Project Case Study',
    studio: '04 Studio', services: '05 Disciplines', journal: '06 Journal', contact: '07 Start a project',
  })[route.name] || '01 Home';

  return (
    <div className="il-app" data-screen-label={screenLabel}>
      <Nav route={route} go={go} />
      {page}
      <Footer go={go} />

      {/* Persistent WhatsApp FAB */}
      <a className="il-fab" href="https://wa.me/971563326825?text=Hi%20Interior%20Lab%2C%20I%27d%20like%20to%20start%20a%20project..." target="_blank" rel="noreferrer" aria-label="WhatsApp the studio">
        <svg viewBox="0 0 32 32" width="22" height="22" aria-hidden="true">
          <path fill="currentColor" d="M16 3C8.8 3 3 8.8 3 16c0 2.5.7 4.8 1.9 6.8L3 29l6.4-1.8c2 1.1 4.2 1.7 6.6 1.7 7.2 0 13-5.8 13-13S23.2 3 16 3zm0 23.6c-2.1 0-4.1-.6-5.8-1.6l-.4-.2-3.8 1 1-3.7-.3-.4A10.6 10.6 0 1 1 26.6 16 10.6 10.6 0 0 1 16 26.6zM21.7 18c-.3-.2-1.8-.9-2.1-1s-.5-.2-.7.2-.8 1-1 1.2-.3.2-.6 0a8.7 8.7 0 0 1-2.5-1.6 9.6 9.6 0 0 1-1.8-2.2c-.2-.3 0-.5.1-.7l.5-.6.3-.5a.5.5 0 0 0 0-.5l-.7-1.7c-.2-.4-.4-.4-.6-.4h-.5a1 1 0 0 0-.8.4 3.2 3.2 0 0 0-1 2.4 5.6 5.6 0 0 0 1.1 2.9c.2.2 2 3 4.8 4.2a16.2 16.2 0 0 0 1.6.6 3.8 3.8 0 0 0 1.8.1c.5 0 1.7-.7 2-1.3a2.3 2.3 0 0 0 .2-1.3c-.1-.2-.3-.2-.6-.4z"/>
        </svg>
        <span>WhatsApp</span>
      </a>
    </div>
  );
}

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