// ============================================================
// APP — hash routing across Home/Work/Services/About/Insights/Contact
// ============================================================

function useHashRoute() {
  const parseHash = () => {
    const h = (window.location.hash || '#home').replace(/^#/, '');
    const [path] = h.split('/');
    return path || 'home';
  };
  const [route, setRoute] = React.useState(parseHash);
  React.useEffect(() => {
    const handler = () => setRoute(parseHash());
    window.addEventListener('hashchange', handler);
    return () => window.removeEventListener('hashchange', handler);
  }, []);
  const navigate = React.useCallback((id, subpath) => {
    const hash = subpath ? `${id}/${subpath}` : id;
    window.location.hash = hash;
  }, []);
  return [route, navigate];
}

function BackToTop() {
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 600);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <button
      className={"totop" + (visible ? ' is-visible' : '')}
      aria-label="Back to top"
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
      <Icon name="arrowUp" size={20} color="#fff" />
    </button>
  );
}

function App() {
  const [route, navigate] = useHashRoute();
  // Sub-route id (e.g. case study id) — not used to render distinct page
  // but kept for future expansion. For now Work cases just scroll to top of work.
  const [caseOpen, setCaseOpen] = React.useState(null);

  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [route]);

  // Page titles
  React.useEffect(() => {
    const titles = {
      home: 'inevidence — Customer-powered growth',
      work: 'Work — inevidence',
      services: 'Services — inevidence',
      about: 'About — inevidence',
      insights: 'Insights — inevidence',
      contact: 'Let’s talk — inevidence',
    };
    document.title = titles[route] || 'inevidence';
  }, [route]);

  const onOpenCase = (id) => {
    // Stub — surfaces visually with a brief inline highlight; full case-study page TBD
    setCaseOpen(id);
    setTimeout(() => setCaseOpen(null), 1800);
  };

  return (
    <>
      <Nav active={route} onNavigate={navigate} />

      {route === 'home' && (
        <>
          <HomeHero />
          <HomePillars onNavigate={navigate} />
          <ClientTicker />
          <HomeStatBand />
          <HomePull onNavigate={navigate} />
          <HomeCTA onNavigate={navigate} />
        </>
      )}

      {route === 'work' && (
        <>
          <WorkHero />
          <WorkIndex onOpenCase={onOpenCase} />
        </>
      )}

      {route === 'services' && (
        <>
          <ServicesHero />
          <ServicesIndex onNavigate={navigate} />
        </>
      )}

      {route === 'about' && (
        <>
          <AboutHero />
          <AboutValues />
          <AboutFootprint />
          <AboutNRR />
          <AboutMetrics />
          <AboutCTA onNavigate={navigate} />
        </>
      )}

      {route === 'insights' && (
        <>
          <InsightsHero />
          <InsightsIndex />
        </>
      )}

      {route === 'contact' && <ContactPage />}

      <Footer active={route} onNavigate={navigate} />
      <BackToTop />

      {/* Toast for case-study stub */}
      {caseOpen && (
        <div style={{
          position: 'fixed', left: '50%', bottom: 96, transform: 'translateX(-50%)',
          background: 'var(--color-deep-grape)', color: '#fff',
          padding: '14px 20px', borderRadius: 'var(--radius-md)',
          boxShadow: 'var(--shadow-lg)', font: 'var(--type-label-md)',
          zIndex: 60, display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <Icon name="fileText" size={16} color="var(--color-bright-turquoise)" />
          Full case study for {caseOpen.toUpperCase()} coming soon.
        </div>
      )}
    </>
  );
}

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