// Main app: routing, intro, tweaks
const { useState: useS, useEffect: useE, useRef: useR } = React;

function Intro({ onDone }) {
  const [done, setDone] = useS(false);
  useE(() => {
    const t = setTimeout(() => setDone(true), 1500);
    const t2 = setTimeout(onDone, 2300);
    return () => { clearTimeout(t); clearTimeout(t2); };
  }, []);
  return (
    <div className={`intro ${done ? 'done' : ''}`}>
      <div className="intro-content">
        <div className="intro-mark">Z</div>
        <div className="intro-name">Zeeshah Butt — Game Developer</div>
        <div className="intro-bar"><div className="fill"></div></div>
        <div className="intro-status">
          <span>INITIALIZING</span>
          <span>v2026.05</span>
        </div>
      </div>
    </div>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "editor",
  "typepair": "geist-mono",
  "cardstyle": "media",
  "hero": "split",
  "density": "cozy",
  "accent": "amber"
}/*EDITMODE-END*/;

const ACCENT_HUES = {
  amber: { dark: 'oklch(0.78 0.14 60)', light: 'oklch(0.62 0.16 35)', swatch: '#e5a662' },
  cyan:  { dark: 'oklch(0.82 0.16 220)', light: 'oklch(0.62 0.18 230)', swatch: '#5dc3ee' },
  green: { dark: 'oklch(0.78 0.14 145)', light: 'oklch(0.55 0.15 145)', swatch: '#7bc99c' },
  pink:  { dark: 'oklch(0.78 0.18 350)', light: 'oklch(0.6 0.2 350)', swatch: '#e57bb2' },
};

function App() {
  const [page, setPage] = useS('home');
  const [introDone, setIntroDone] = useS(false);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useE(() => {
    const r = document.documentElement;
    r.setAttribute('data-theme', t.theme);
    r.setAttribute('data-typepair', t.typepair);
    r.setAttribute('data-cardstyle', t.cardstyle);
    r.setAttribute('data-density', t.density);
    const accentMap = ACCENT_HUES[t.accent] || ACCENT_HUES.amber;
    const accent = t.theme === 'light' ? accentMap.light : accentMap.dark;
    r.style.setProperty('--accent', accent);
  }, [t.theme, t.typepair, t.cardstyle, t.density, t.accent]);

  const onNav = (target) => {
    if (target === 'home') {
      setPage('home');
      setTimeout(() => window.scrollTo({ top: 0, behavior: 'smooth' }), 50);
    } else {
      setPage('home');
      setTimeout(() => {
        const el = document.getElementById(target);
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 100);
    }
  };

  const openProject = (id) => {
    setPage({ kind: 'project', id });
    setTimeout(() => window.scrollTo({ top: 0, behavior: 'instant' }), 10);
  };

  const projects = window.PROJECTS;
  const featured = projects[0];
  const currentProject = page && page.kind === 'project' ? projects.find((p) => p.id === page.id) : null;

  return (
    <>
      {!introDone && <Intro onDone={() => setIntroDone(true)} />}
      <Nav onNav={onNav} current={currentProject ? '' : 'home'} />
      {currentProject ? (
        <ProjectDetail
          key={currentProject.id}
          project={currentProject}
          allProjects={projects}
          onNav={onNav}
          onOpen={openProject}
        />
      ) : (
        <div className="page" key="home">
          {t.hero === 'split' && <HeroSplit featured={featured} onOpen={openProject} />}
          {t.hero === 'big' && <HeroBig onOpen={openProject} />}
          {t.hero === 'reel' && <HeroReel featured={featured} onOpen={openProject} />}
          <Marquee />
          <FeaturedWork projects={projects.filter(p => p.status !== 'proto')} onOpen={openProject} />
          <Prototypes projects={projects} onOpen={openProject} />
          <TechStack stack={window.TECH_STACK} />
          <About />
          <Experience items={window.EXPERIENCE} />
          <NowPlaying onOpen={openProject} />
          <Archive projects={projects} onOpen={openProject} />
          <Footer />
        </div>
      )}

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakSelect
          label="Mode"
          value={t.theme}
          options={[
            { value: 'editor', label: 'Editor (dark)' },
            { value: 'cinematic', label: 'Cinematic Neon' },
            { value: 'aaa', label: 'AAA Studio' },
            { value: 'light', label: 'Light' },
          ]}
          onChange={(v) => setTweak('theme', v)}
        />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={[
            { value: 'amber', color: ACCENT_HUES.amber.swatch },
            { value: 'cyan', color: ACCENT_HUES.cyan.swatch },
            { value: 'green', color: ACCENT_HUES.green.swatch },
            { value: 'pink', color: ACCENT_HUES.pink.swatch },
          ]}
          onChange={(v) => setTweak('accent', v)}
        />

        <TweakSection label="Layout" />
        <TweakRadio
          label="Hero"
          value={t.hero}
          options={[
            { value: 'split', label: 'Split' },
            { value: 'big', label: 'Big' },
            { value: 'reel', label: 'Reel' },
          ]}
          onChange={(v) => setTweak('hero', v)}
        />
        <TweakRadio
          label="Cards"
          value={t.cardstyle}
          options={[
            { value: 'media', label: 'Media' },
            { value: 'magazine', label: 'Mag' },
            { value: 'compact', label: 'Compact' },
          ]}
          onChange={(v) => setTweak('cardstyle', v)}
        />
        <TweakRadio
          label="Density"
          value={t.density}
          options={[
            { value: 'compact', label: 'Tight' },
            { value: 'cozy', label: 'Cozy' },
            { value: 'spacious', label: 'Roomy' },
          ]}
          onChange={(v) => setTweak('density', v)}
        />

        <TweakSection label="Typography" />
        <TweakSelect
          label="Pairing"
          value={t.typepair}
          options={[
            { value: 'geist-mono', label: 'Geist + JetBrains Mono' },
            { value: 'space-mono', label: 'Space Grotesk + IBM Plex' },
            { value: 'serif-mono', label: 'Fraunces + Inter' },
            { value: 'helvetica', label: 'Helvetica Neue' },
          ]}
          onChange={(v) => setTweak('typepair', v)}
        />
      </TweaksPanel>
    </>
  );
}

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