/* Alchemy website — app shell + simple router */
const { Button, SectionHeading } = window.DS;

function Placeholder({ title, onNavigate }) {
  return (
    <section style={{ background: 'var(--bg)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'var(--space-10) var(--gutter)', textAlign: 'center' }}>
        <SectionHeading align="center" eyebrow="Coming soon" title={title} lead="This page is part of the live site, wired up here as a placeholder in the UI kit." />
        <div style={{ marginTop: 'var(--space-6)' }}>
          <Button variant="primary" onClick={() => onNavigate('home')}>← Back home</Button>
        </div>
      </div>
    </section>
  );
}

function App() {
  const [route, setRoute] = React.useState(() => {
    const h = (window.location.hash || '').replace('#', '');
    return ['login', 'daypass', 'intake', 'thanks', 'thanks-tour', 'thanks-intake'].includes(h) ? h : 'home';
  });
  const navigate = (r) => {
    setRoute(r);
    const sc = document.getElementById('kit-scroll');
    if (sc) sc.scrollTo({ top: 0, behavior: 'smooth' });
  };

  let screen;
  switch (route) {
    case 'offices': screen = <window.SpacesScreen kind="offices" onNavigate={navigate} />; break;
    case 'desks': screen = <window.SpacesScreen kind="desks" onNavigate={navigate} />; break;
    case 'meeting': screen = <window.SpacesScreen kind="meeting" onNavigate={navigate} />; break;
    case 'join': screen = <window.JoinScreen onNavigate={navigate} />; break;
    case 'daypass': screen = <window.DayPassScreen onNavigate={navigate} />; break;
    case 'tour': screen = <window.TourScreen onNavigate={navigate} />; break;
    case 'virtual-tour': screen = <Placeholder title="Virtual Tour" onNavigate={navigate} />; break;
    case 'intake': screen = <window.IntakeScreen onNavigate={navigate} />; break;
    case 'podcast': screen = <Placeholder title="The Alchemy Podcast" onNavigate={navigate} />; break;
    case 'login': screen = <window.PartnerLoginScreen onNavigate={navigate} />; break;
    case 'thanks-tour': screen = <window.ThankYouScreen variant="tour" onNavigate={navigate} />; break;
    case 'thanks-intake': screen = <window.ThankYouScreen variant="intake" onNavigate={navigate} />; break;
    case 'thanks': screen = <window.ThankYouScreen variant="generic" onNavigate={navigate} />; break;
    default: screen = <window.HomeScreen onNavigate={navigate} />;
  }

  const darkHero = ['home', 'offices', 'desks', 'meeting', 'login', 'daypass', 'intake', 'thanks', 'thanks-tour', 'thanks-intake'].includes(route);

  return (
    <div style={{ fontFamily: 'var(--font-body)', color: 'var(--text-body)', minHeight: '100%' }}>
      <window.AnnouncementBar />
      <window.Nav current={route} onNavigate={navigate} overDark={darkHero} />
      {screen}
      <window.Footer onNavigate={navigate} />
    </div>
  );
}

window.App = App;