// Main App — Hafiz Time

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "split",
  "fontPairing": "cormorant",
  "palette": "forest",
  "darkMode": false,
  "density": 1,
  "showReviews": true,
  "showBrands": true,
  "showLookbook": true,
  "showEssentials": true,
  "showPress": true,
  "showShop": true,
  "showBooking": true,
  "showNewsletter": true
}/*EDITMODE-END*/;

const fontPairings = {
  cormorant: {
    display: "'Cormorant Garamond', serif",
    body: "'Manrope', sans-serif"
  },
  playfair: {
    display: "'Playfair Display', serif",
    body: "'DM Sans', sans-serif"
  },
  italiana: {
    display: "'Italiana', serif",
    body: "'Geist', sans-serif"
  },
  dm: {
    display: "'DM Serif Display', serif",
    body: "'Manrope', sans-serif"
  }
};

const palettes = {
  forest: {
    primary: '#283a2e',
    bg: '#f5f4ef',
    fg: '#283a2e',
    accent: '#b8935b',
    surface: '#fdfcfa'
  },
  bone: {
    primary: '#2a2622',
    bg: '#faf9f7',
    fg: '#2a2622',
    accent: '#c49a6c',
    surface: '#ffffff'
  },
  sage: {
    primary: '#3a4435',
    bg: '#f2f3ed',
    fg: '#3a4435',
    accent: '#a48861',
    surface: '#fefffe'
  },
  dark: {
    primary: '#283a2e',
    bg: '#1a1816',
    fg: '#f5f4ef',
    accent: '#d4af7a',
    surface: '#252321'
  }
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const appRef = React.useRef();

  // Apply tweaks to CSS custom properties
  React.useEffect(() => {
    const fonts = fontPairings[t.fontPairing];
    const colors = t.darkMode ? palettes.dark : palettes[t.palette];
    
    document.documentElement.style.setProperty('--font-display', fonts.display);
    document.documentElement.style.setProperty('--font-body', fonts.body);
    document.documentElement.style.setProperty('--primary', colors.primary);
    document.documentElement.style.setProperty('--bg', colors.bg);
    document.documentElement.style.setProperty('--fg', colors.fg);
    document.documentElement.style.setProperty('--accent', colors.accent);
    document.documentElement.style.setProperty('--surface', colors.surface);
    document.documentElement.style.setProperty('--density', t.density.toString());
  }, [t.fontPairing, t.palette, t.darkMode, t.density]);

  // GSAP ScrollTrigger animations
  React.useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);

    // Refresh on font/density change
    ScrollTrigger.refresh();

    // Hero image reveal
    gsap.to('.hero-img', {
      opacity: 1,
      duration: 1.2,
      ease: 'power2.out',
      delay: 0.3
    });

    // Fade reveals
    gsap.utils.toArray('.reveal-fade').forEach(el => {
      gsap.fromTo(el, 
        { opacity: 0 },
        {
          opacity: 1,
          duration: 1,
          ease: 'power2.out',
          scrollTrigger: {
            trigger: el,
            start: 'top 85%',
            end: 'top 60%',
            scrub: 1
          }
        }
      );
    });

    // Up reveals
    gsap.utils.toArray('.reveal-up').forEach((el, i) => {
      gsap.fromTo(el,
        { opacity: 0, y: 60 },
        {
          opacity: 1,
          y: 0,
          duration: 0.8,
          ease: 'power3.out',
          scrollTrigger: {
            trigger: el,
            start: 'top 90%',
            toggleActions: 'play none none none'
          },
          delay: i * 0.1
        }
      );
    });

    // Left reveals
    gsap.utils.toArray('.reveal-left').forEach((el, i) => {
      gsap.fromTo(el,
        { opacity: 0, x: -60 },
        {
          opacity: 1,
          x: 0,
          duration: 0.8,
          ease: 'power3.out',
          scrollTrigger: {
            trigger: el,
            start: 'top 90%',
            toggleActions: 'play none none none'
          },
          delay: i * 0.15
        }
      );
    });

    // Right reveals
    gsap.utils.toArray('.reveal-right').forEach((el, i) => {
      gsap.fromTo(el,
        { opacity: 0, x: 60 },
        {
          opacity: 1,
          x: 0,
          duration: 0.8,
          ease: 'power3.out',
          scrollTrigger: {
            trigger: el,
            start: 'top 90%',
            toggleActions: 'play none none none'
          },
          delay: i * 0.15
        }
      );
    });

    // Scale reveals
    gsap.utils.toArray('.reveal-scale').forEach((el, i) => {
      gsap.fromTo(el,
        { opacity: 0, scale: 0.9 },
        {
          opacity: 1,
          scale: 1,
          duration: 0.8,
          ease: 'back.out(1.2)',
          scrollTrigger: {
            trigger: el,
            start: 'top 90%',
            toggleActions: 'play none none none'
          },
          delay: i * 0.1
        }
      );
    });

    return () => {
      ScrollTrigger.getAll().forEach(trigger => trigger.kill());
    };
  }, [t.fontPairing, t.density, t.heroLayout]);

  return (
    <div ref={appRef}>
      <Hero layout={t.heroLayout} />
      {t.showReviews && <Reviews />}
      {t.showBrands && <Brands />}
      {t.showLookbook && <Lookbook />}
      {t.showEssentials && <Essentials />}
      {t.showPress && <Press />}
      {t.showShop && <Shop />}
      {t.showBooking && <Booking />}
      {t.showNewsletter && <Newsletter />}
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio
          label="Layout"
          value={t.heroLayout}
          options={['split', 'full', 'centered']}
          onChange={(v) => setTweak('heroLayout', v)}
        />

        <TweakSection label="Typography" />
        <TweakRadio
          label="Font pairing"
          value={t.fontPairing}
          options={['cormorant', 'playfair', 'italiana', 'dm']}
          onChange={(v) => setTweak('fontPairing', v)}
        />

        <TweakSection label="Colors" />
        <TweakRadio
          label="Palette"
          value={t.palette}
          options={['forest', 'bone', 'sage']}
          onChange={(v) => setTweak('palette', v)}
        />
        <TweakToggle
          label="Dark mode"
          value={t.darkMode}
          onChange={(v) => setTweak('darkMode', v)}
        />

        <TweakSection label="Spacing" />
        <TweakSlider
          label="Density"
          value={t.density}
          min={0.7}
          max={1.3}
          step={0.1}
          onChange={(v) => setTweak('density', v)}
        />

        <TweakSection label="Sections" />
        <TweakToggle
          label="Reviews"
          value={t.showReviews}
          onChange={(v) => setTweak('showReviews', v)}
        />
        <TweakToggle
          label="Brands"
          value={t.showBrands}
          onChange={(v) => setTweak('showBrands', v)}
        />
        <TweakToggle
          label="Lookbook"
          value={t.showLookbook}
          onChange={(v) => setTweak('showLookbook', v)}
        />
        <TweakToggle
          label="Essentials"
          value={t.showEssentials}
          onChange={(v) => setTweak('showEssentials', v)}
        />
        <TweakToggle
          label="Press"
          value={t.showPress}
          onChange={(v) => setTweak('showPress', v)}
        />
        <TweakToggle
          label="Shop"
          value={t.showShop}
          onChange={(v) => setTweak('showShop', v)}
        />
        <TweakToggle
          label="Booking"
          value={t.showBooking}
          onChange={(v) => setTweak('showBooking', v)}
        />
        <TweakToggle
          label="Newsletter"
          value={t.showNewsletter}
          onChange={(v) => setTweak('showNewsletter', v)}
        />
      </TweaksPanel>
    </div>
  );
}

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