// EYEQ — Root App

const { useRef: useRefApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headlineIdx": 0,
  "goldIdx": 0,
  "hoverStyle": "zoom"
}/*EDITMODE-END*/;

function applyGold(idx) {
  const g = window.GOLD_OPTIONS[idx];
  if (!g) return;
  const r = document.documentElement.style;
  r.setProperty('--gold', g.value);
  r.setProperty('--gold-deep', g.deep);
  r.setProperty('--gold-bright', g.bright);
  r.setProperty('--gold-soft', g.soft);
  r.setProperty('--gold-line', g.line);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const ctaRef = useRefApp(null);

  useEffectApp(() => { applyGold(t.goldIdx); }, [t.goldIdx]);

  const onStartProject = () => ctaRef.current?.scrollTo();

  return (
    <>
      <Grain />
      <Letterbox />
      <CameraZoom />
      <HUD />
      <Nav onStartProject={onStartProject} />

      <Hero headlineIdx={t.headlineIdx} />

      <Marquee
        items={[
          'Director of Photography · Aria Shah',
          'Colorist · Iris Tanaka',
          'Editor · Marcus Vey',
          '8K. 6.5K. 35mm.',
          'Cannes 2025 · Shortlist',
          'AICP · Selected',
          'Mumbai · Delhi · Los Angeles',
          'EYEQ Studios · Est. 2014',
        ]}
        italic={[0, 2, 5, 7]}
      />

      <ServicesBento />

      <IrisDivider label="CUT TO — FEATURED WORK" />

      <FeaturedWork />

      <Marquee
        items={[
          'Cannes Lions 2025',
          'AICP Show',
          'D&AD Wood Pencil',
          'Webby Honoree',
          'Kyoorius Black Elephant',
          'IDA Nominee',
        ]}
        italic={[0, 2, 4]}
      />

      <Gallery hoverStyle={t.hoverStyle} />

      <FilmReel />

      <ColorReveal />

      <IrisDivider label="CUT TO — PROCESS" />

      <Process />
      <Stats />
      <Awards />
      <Testimonials />
      <Clients />

      <CTASection ref={ctaRef} />

      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio
          label="Headline"
          value={t.headlineIdx}
          options={[
            { value: 0, label: 'Visual Storytelling, Redefined.' },
            { value: 1, label: 'Capturing Vision. Creating Legacy.' },
            { value: 2, label: 'Frames That Outlive Moments.' },
            { value: 3, label: 'Cinema for Brands & Lives.' },
          ]}
          onChange={(v) => setTweak('headlineIdx', v)}
        />

        <TweakSection label="Accent" />
        <TweakColor
          label="Gold shade"
          value={window.GOLD_OPTIONS[t.goldIdx]?.value}
          options={window.GOLD_OPTIONS.map(o => o.value)}
          onChange={(v) => {
            const idx = window.GOLD_OPTIONS.findIndex(o => o.value === v);
            if (idx >= 0) setTweak('goldIdx', idx);
          }}
        />

        <TweakSection label="Gallery" />
        <TweakRadio
          label="Hover preview"
          value={t.hoverStyle}
          options={['zoom', 'tilt', 'play']}
          onChange={(v) => setTweak('hoverStyle', v)}
        />
      </TweaksPanel>
    </>
  );
}

// TweakRadio's renderLabel isn't part of the starter — fallback to plain.
// Override by checking if starter supports it; if not, options must be strings.
// Easier: rewrite as TweakSelect with string options.

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