// Main app — routing, tweaks, composition
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "editorial",
  "portfolioStyle": "editorial",
  "density": "regular",
  "accent": "#d4ff3a",
  "showStats": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = useState('home');
  const [caseId, setCaseId] = useState(null);
  const [devId, setDevId] = useState(null);
  const [post, setPost] = useState(null);
  const [tool, setTool] = useState(null);
  const [authScreen, setAuthScreen] = useState('login');

  const densityClass = t.density === 'compact' ? 'density-compact' : t.density === 'comfy' ? 'density-comfy' : '';

  useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
  }, [t.accent]);

  const openCase = (p) => { setCaseId(p.id); setPage('case'); window.scrollTo({top:0}); };
  const openDev = (id) => { setDevId(id); setPage('dev'); window.scrollTo({top:0}); };
  const openPost = (p) => { setPost(p); setPage('post'); window.scrollTo({top:0}); };
  const openTool = (t) => { setTool(t); setPage('tool'); window.scrollTo({top:0}); };
  const openAuth = (s) => { setAuthScreen(s); setPage('auth'); window.scrollTo({top:0}); };

  // Chrome (Nav + Footer) only shows on marketing/public pages
  const adminPages = ['cms', 'portal', 'auth', 'email', 'onboarding', 'analytics'];
  const showChrome = !adminPages.includes(page);

  return (
    <div className={densityClass}>
      {showChrome && <Nav page={page} setPage={setPage}/>}

      {page === 'home' && (
        <main className="page">
          <Hero layout={t.heroLayout}/>
          {t.showStats && <Marquee items={[
            'NEXT.JS','ASTRO','REMIX','POSTGRES','TYPESCRIPT','STRIPE','OPENAI','VERCEL','PAYLOAD CMS','TAILWIND','TRPC','PINECONE'
          ]}/>}
          <Services/>
          <Portfolio style={t.portfolioStyle} onOpen={openCase}/>
          <Team/>
          <Tools/>
          <Blog/>
          <Contact/>
        </main>
      )}

      {page === 'plan' && <main><Plan setPage={setPage}/></main>}
      {page === 'case' && <main><CaseStudy id={caseId} setPage={setPage}/></main>}
      {page === 'cms' && <main><CMS setPage={setPage}/></main>}
      {page === 'dev' && <main><DevProfile id={devId} setPage={setPage} openCase={openCase}/></main>}
      {page === 'blog' && <main><BlogIndex setPage={setPage} openPost={openPost}/></main>}
      {page === 'post' && <main><BlogPost post={post} setPage={setPage} openPost={openPost}/></main>}
      {page === 'tools' && <main><ToolsIndex setPage={setPage} openTool={openTool}/></main>}
      {page === 'tool' && <main><ToolDetail tool={tool} setPage={setPage}/></main>}
      {page === 'pricing' && <main><Pricing setPage={setPage}/></main>}
      {page === 'portal' && <main><Portal setPage={setPage}/></main>}
      {page === 'auth' && <main><Auth screen={authScreen} setAuthScreen={setAuthScreen} setPage={setPage}/></main>}
      {page === 'services' && <main><ServicesPage setPage={setPage}/></main>}
      {page === 'process' && <main><ProcessPage setPage={setPage}/></main>}
      {page === 'work' && <main><WorkPage setPage={setPage} openCase={openCase}/></main>}
      {page === 'email' && <main><EmailStudio setPage={setPage}/></main>}
      {page === 'onboarding' && <main><Onboarding setPage={setPage}/></main>}
      {page === 'analytics' && <main><Analytics setPage={setPage}/></main>}

      {showChrome && <Footer setPage={setPage}/>}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Layout"/>
        <TweakRadio label="Hero" value={t.heroLayout}
          options={['editorial','split','centered']}
          onChange={v => setTweak('heroLayout', v)}/>
        <TweakSelect label="Portfolio" value={t.portfolioStyle}
          options={[
            {value:'editorial', label:'Editorial mosaic'},
            {value:'cards', label:'Card grid'},
            {value:'list', label:'List view'}
          ]}
          onChange={v => setTweak('portfolioStyle', v)}/>
        <TweakRadio label="Density" value={t.density}
          options={['compact','regular','comfy']}
          onChange={v => setTweak('density', v)}/>

        <TweakSection label="Brand"/>
        <TweakColor label="Accent" value={t.accent}
          options={['#d4ff3a','#7c9bff','#ff8a3a','#a78bfa']}
          onChange={v => setTweak('accent', v)}/>

        <TweakSection label="Sections"/>
        <TweakToggle label="Tech marquee" value={t.showStats}
          onChange={v => setTweak('showStats', v)}/>

        <TweakSection label="Modules · public"/>
        <TweakButton label="Home" onClick={()=>{setPage('home');window.scrollTo({top:0})}}/>
        <TweakButton label="Services page (M11)" onClick={()=>{setPage('services');window.scrollTo({top:0})}}/>
        <TweakButton label="Process page (M11)" onClick={()=>{setPage('process');window.scrollTo({top:0})}}/>
        <TweakButton label="Work index (M11)" onClick={()=>{setPage('work');window.scrollTo({top:0})}}/>
        <TweakButton label="Case study (M03)" onClick={()=>openCase(PORTFOLIO[0])}/>
        <TweakButton label="Developer profile (M04)" onClick={()=>openDev(TEAM[0].id)}/>
        <TweakButton label="Blog index (M05)" onClick={()=>{setPage('blog');window.scrollTo({top:0})}}/>
        <TweakButton label="Blog post (M05)" onClick={()=>openPost(POSTS[0])}/>
        <TweakButton label="Tools index (M06)" onClick={()=>{setPage('tools');window.scrollTo({top:0})}}/>
        <TweakButton label="Tool detail (M06)" onClick={()=>openTool(TOOLS[0])}/>
        <TweakButton label="Pricing (M08)" onClick={()=>{setPage('pricing');window.scrollTo({top:0})}}/>

        <TweakSection label="Modules · admin"/>
        <TweakButton label="Project plan (M01)" onClick={()=>{setPage('plan');window.scrollTo({top:0})}}/>
        <TweakButton label="CMS admin (M07)" onClick={()=>{setPage('cms');window.scrollTo({top:0})}}/>
        <TweakButton label="Analytics studio (M12)" onClick={()=>{setPage('analytics');window.scrollTo({top:0})}}/>
        <TweakButton label="Email Studio (M13)" onClick={()=>{setPage('email');window.scrollTo({top:0})}}/>
        <TweakButton label="Onboarding (M14)" onClick={()=>{setPage('onboarding');window.scrollTo({top:0})}}/>
        <TweakButton label="Client portal (M09)" onClick={()=>{setPage('portal');window.scrollTo({top:0})}}/>

        <TweakSection label="Auth · M10"/>
        <TweakButton label="Login" onClick={()=>openAuth('login')}/>
        <TweakButton label="Signup" onClick={()=>openAuth('signup')}/>
        <TweakButton label="Forgot password" onClick={()=>openAuth('forgot')}/>
        <TweakButton label="Reset link sent" onClick={()=>openAuth('sent')}/>
        <TweakButton label="Reset password" onClick={()=>openAuth('reset')}/>
        <TweakButton label="MFA code" onClick={()=>openAuth('mfa')}/>
        <TweakButton label="Verify email" onClick={()=>openAuth('verify')}/>
        <TweakButton label="Magic link" onClick={()=>openAuth('magic')}/>
      </TweaksPanel>
    </div>
  );
}

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