/* App shell — MarketingMixWebsite */
const { Nav, Footer, HomePage, ServicesHub, ServiceDetailAI, CasesHub, CaseDetail, AIPage, AboutPage, ContactPage, InsightsPage, IndustriesHub, IndustryDetail } = window;

function MarketingMixWebsite() {
  const [activePage, setActivePage]   = useState('home');
  const [caseSlug, setCaseSlug]       = useState('crystal-tax');
  const [serviceSlug, setServiceSlug] = useState('ai-seo');
  const [industrySlug, setIndustrySlug] = useState('saas');
  const [lang, setLang]               = useState('EN');
  const [openMobile, setOpenMobile]   = useState(false);

  function navigate(target) {
    setActivePage(target);
    window.scrollTo({ top: 0, behavior: 'instant' in window ? 'instant' : 'auto' });
  }
  function openCase(slug)     { setCaseSlug(slug);     setActivePage('case-detail');     window.scrollTo(0,0); }
  function openService(slug)  { setServiceSlug(slug);  setActivePage('service-detail');  window.scrollTo(0,0); }
  function openIndustry(slug) { setIndustrySlug(slug); setActivePage('industry-detail'); window.scrollTo(0,0); }

  const routeMap = {
    home: '/',
    services: '/services',
    'service-detail': `/services/${serviceSlug}`,
    cases: '/cases',
    'case-detail': `/cases/${caseSlug}`,
    ai: '/ai-marketing',
    industries: '/industries',
    'industry-detail': `/industries/${industrySlug}`,
    about: '/about',
    contact: '/contact',
    insights: '/insights',
  };

  let body = null;
  switch (activePage) {
    case 'home':            body = <HomePage onNavigate={navigate} onOpenCase={openCase} onOpenIndustry={openIndustry} />; break;
    case 'services':        body = <ServicesHub onNavigate={navigate} onOpenService={openService} />; break;
    case 'service-detail':  body = <ServiceDetailAI onNavigate={navigate} onOpenCase={openCase} onOpenService={openService} slug={serviceSlug} />; break;
    case 'cases':           body = <CasesHub onNavigate={navigate} onOpenCase={openCase} />; break;
    case 'case-detail':     body = <CaseDetail slug={caseSlug} onNavigate={navigate} onOpenCase={openCase} />; break;
    case 'ai':              body = <AIPage onNavigate={navigate} onOpenService={openService} />; break;
    case 'industries':      body = <IndustriesHub onNavigate={navigate} onOpenIndustry={openIndustry} />; break;
    case 'industry-detail': body = <IndustryDetail slug={industrySlug} onNavigate={navigate} onOpenIndustry={openIndustry} onOpenCase={openCase} />; break;
    case 'about':           body = <AboutPage onNavigate={navigate} />; break;
    case 'contact':         body = <ContactPage onNavigate={navigate} />; break;
    case 'insights':        body = <InsightsPage onNavigate={navigate} />; break;
    default:                body = <HomePage onNavigate={navigate} onOpenCase={openCase} onOpenIndustry={openIndustry} />;
  }

  return (
    <div className="min-h-screen bg-paper text-ink">
      <Nav
        activePage={activePage}
        onNavigate={navigate}
        onOpenService={openService}
        onOpenCase={openCase}
        onOpenIndustry={openIndustry}
        openMobile={openMobile}
        setOpenMobile={setOpenMobile}
        lang={lang}
        setLang={setLang}
      />
      {body}
      <Footer onNavigate={navigate} />

      {/* Bottom-left route chip (prototype helper) */}
      <div className="fixed bottom-4 left-4 z-40 hidden md:flex items-center gap-2 px-3 py-1.5 bg-ink/85 text-paper rounded-full backdrop-blur" style={{fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase'}}>
        <span className="w-1.5 h-1.5 rounded-full bg-yellow"></span>
        <span>route</span>
        <span className="text-paper/60">·</span>
        <span>{routeMap[activePage]}</span>
        <span className="text-paper/60">·</span>
        <span>lang {lang.toLowerCase()}</span>
      </div>
    </div>
  );
}

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