/* global React, ReactDOM */
const { useEffect: useEffectM, useState: useStateM, useMemo: useMemoM } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "language": "fr",
  "theme": "dark",
  "showPricing": false,
  "goldHue": 44
}/*EDITMODE-END*/;

function Portfolio() {
  // Read tweak defaults & wire to global edit-mode protocol
  const tweaks = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : null;
  const t = tweaks ? tweaks[0] : TWEAK_DEFAULTS;
  const setTweak = tweaks ? tweaks[1] : () => {};

  // Apply gold hue
  useEffectM(() => {
    document.documentElement.style.setProperty('--gold-h', String(t.goldHue));
  }, [t.goldHue]);

  // Apply theme
  useEffectM(() => {
    if (t.theme === 'light') document.body.classList.add('theme-light');
    else document.body.classList.remove('theme-light');
  }, [t.theme]);

  // Lightbox: any image can call window.openLightbox(src) to open the viewer.
  const [lbSrc, setLbSrc] = useStateM(null);
  useEffectM(() => {
    window.openLightbox = (src) => setLbSrc(src);
    return () => { delete window.openLightbox; };
  }, []);

  const lang = t.language || 'fr';
  const C = window.PORTFOLIO_CONTENT[lang];
  const cover = C.cover;

  return (
    <React.Fragment>
      {/* Persistent floating language toggle */}
      <div className="lang-toggle">
        <button aria-pressed={lang === 'fr'} onClick={() => setTweak('language', 'fr')}>FR</button>
        <button aria-pressed={lang === 'en'} onClick={() => setTweak('language', 'en')}>EN</button>
      </div>

      <deck-stage>
        <SlideCover c={cover} who={C.who} />
        <SlideWhat c={C.what} cover={cover} />
        <SlideDivider c={C.divider} cover={cover} />

        {C.cases.map((cs, i) => (
          <React.Fragment key={cs.id}>
            <CaseHero
              caseData={cs}
              idx={i}
              cover={cover}
              label={`${String(4 + i*2).padStart(2,'0')} ${cs.id} hero`}
            />
            <CaseDetail
              caseData={cs}
              idx={i}
              cover={cover}
              labels={C.caseLabels}
              label={`${String(5 + i*2).padStart(2,'0')} ${cs.id} detail`}
            />
          </React.Fragment>
        ))}

        <SlideMore c={C.more} cover={cover} />
        <SlideStack c={C.stack} cover={cover} />
        <SlideBackground c={C.background} cover={cover} />
        <SlideTestimonials c={C.testimonials} cover={cover} />
        {/* "How I work" moved here — process info lands hardest after testimonials */}
        <SlideHow c={C.how} cover={cover} />
        {t.showPricing ? <SlidePricing c={C.pricing} cover={cover} /> : null}
        <SlideWhy c={C.why} cover={cover} />
        <SlideLanguages c={C.languages} cover={cover} />
        <SlideContact c={C.contact} cover={cover} />
      </deck-stage>

      {/* Image lightbox (lives outside deck-stage so it overlays the whole viewport) */}
      {lbSrc && window.Lightbox ? <window.Lightbox src={lbSrc} onClose={() => setLbSrc(null)} /> : null}

      {/* Tweaks panel */}
      {window.TweaksPanel ? (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection label="Language">
            <window.TweakRadio
              label="FR / EN"
              value={t.language}
              options={[{ value: 'fr', label: 'FR' }, { value: 'en', label: 'EN' }]}
              onChange={(v) => setTweak('language', v)}
            />
          </window.TweakSection>
          <window.TweakSection label="Theme">
            <window.TweakRadio
              label="Slide variant"
              value={t.theme}
              options={[{ value: 'dark', label: 'Dark' }, { value: 'light', label: 'Light' }]}
              onChange={(v) => setTweak('theme', v)}
            />
          </window.TweakSection>
          <window.TweakSection label="Brand">
            <window.TweakSlider
              label="Gold hue"
              min={0} max={60} step={1} unit="°"
              value={t.goldHue}
              onChange={(v) => setTweak('goldHue', v)}
            />
          </window.TweakSection>
          <window.TweakSection label="Pages">
            <window.TweakToggle
              label="Show pricing slide"
              value={!!t.showPricing}
              onChange={(v) => setTweak('showPricing', v)}
            />
          </window.TweakSection>
        </window.TweaksPanel>
      ) : null}
    </React.Fragment>
  );
}

/* mount */
ReactDOM.createRoot(document.getElementById('root')).render(<Portfolio />);