/* ============================================
   SQUISHY SKIN — APP (Router + Tweaks)
   ============================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryPink": "#F4A7BB",
  "bgStyle": "cream",
  "cornerRadius": 18,
  "animationsOn": true,
  "heroVariant": "editorial",
  "heroOverlay": 0.4
}/*EDITMODE-END*/;

function App() {
  const [currentPage, setCurrentPage] = React.useState('Home');
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  /* Apply tweaks as CSS custom properties */
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--pink', t.primaryPink);
    /* Derive hover from pink */
    root.style.setProperty('--radius', t.cornerRadius + 'px');
    root.style.setProperty('--radius-lg', (t.cornerRadius + 6) + 'px');
    if (t.bgStyle === 'white') {
      root.style.setProperty('--cream', '#FFFFFF');
    } else {
      root.style.setProperty('--cream', '#FFF9F5');
    }
  }, [t]);

  /* Disable scroll animations if turned off */
  React.useEffect(() => {
    if (!t.animationsOn) {
      document.querySelectorAll('.scroll-animate').forEach(el => el.classList.add('animate-in'));
    }
  }, [t.animationsOn, currentPage]);

  const renderPage = () => {
    switch (currentPage) {
      case 'Services': return <ServicesPage />;
      case 'About': return <AboutPage />;
      case 'Gallery': return <GalleryPage />;
      case 'Contact': return <ContactPage />;
      default: return <HomePage setCurrentPage={setCurrentPage} heroVariant={t.heroVariant} heroOverlay={t.heroOverlay} />;
    }
  };

  return (
    <>
      <Navigation currentPage={currentPage} setCurrentPage={setCurrentPage} />
      <PageTransition pageKey={currentPage}>
        <main>{renderPage()}</main>
      </PageTransition>
      <Footer setCurrentPage={setCurrentPage} />
      <PhoneFloatButton />

      <TweaksPanel title="Squishy Skin Tweaks">
        <TweakSection label="Home Hero">
          <TweakSelect label="Hero Layout" value={t.heroVariant}
            options={[
              { value: 'classic', label: 'Classic — Split (current)' },
              { value: 'fullbleed', label: 'Full Bleed — Dark Overlay' },
              { value: 'poster', label: 'Poster — Zine Style' },
              { value: 'vsplit', label: 'Vertical Split — Editorial' },
              { value: 'editorial', label: 'Editorial — Light Overlay' },
              { value: 'bold', label: 'Bold Type — Oversized' },
              { value: 'collage', label: 'Collage — Multi-image' },
            ]}
            onChange={v => setTweak('heroVariant', v)} />
          <TweakSelect label="Editorial Overlay" value={String(t.heroOverlay)}
            options={[
              { value: '0.4', label: 'Light — image pops' },
              { value: '0.62', label: 'Medium (default)' },
              { value: '0.8', label: 'Strong — text-first' },
              { value: '0.92', label: 'Heavy — subtle image' },
            ]}
            onChange={v => setTweak('heroOverlay', parseFloat(v))} />
        </TweakSection>
        <TweakSection label="Brand">
          <TweakColor label="Primary Pink" value={t.primaryPink}
            options={['#F4A7BB', '#E8A0C9', '#D4918A', '#C9889E', '#B88BA8', '#E091A3', '#D4A0A0', '#C48B9F', '#A78BBE', '#8BBEAF']}
            onChange={v => setTweak('primaryPink', v)} />
          <TweakRadio label="Background" value={t.bgStyle}
            options={['cream', 'white']}
            onChange={v => setTweak('bgStyle', v)} />
        </TweakSection>
        <TweakSection label="Style">
          <TweakSlider label="Corner Radius" value={t.cornerRadius}
            min={8} max={32} step={2}
            onChange={v => setTweak('cornerRadius', v)} />
          <TweakToggle label="Scroll Animations" value={t.animationsOn}
            onChange={v => setTweak('animationsOn', v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

Object.assign(window, { App });