/* ═══════════════════════════════════════════════
   AUREAL — App Shell
   Routing, scroll management, tweaks integration
   ═══════════════════════════════════════════════ */

const FONT_MAP = {
  rubik: "'Laro Soft', 'Qanelas Soft', 'Rubik', system-ui, sans-serif",
};

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = React.useState('home');
  const [cart, setCart] = React.useState([]);

  const addToCart = React.useCallback((product) => {
    setCart(prev => {
      const key = `${product.org}__${product.name}__${product.size}`;
      const existing = prev.find(i => i.key === key);
      if (existing) return prev.map(i => i.key === key ? { ...i, qty: i.qty + product.qty } : i);
      return [...prev, { ...product, key }];
    });
  }, []);

  const removeFromCart = React.useCallback((key) => {
    setCart(prev => prev.filter(i => i.key !== key));
  }, []);

  const updateQty = React.useCallback((key, delta) => {
    setCart(prev => prev.map(i => i.key === key ? { ...i, qty: Math.max(0, i.qty + delta) } : i).filter(i => i.qty > 0));
  }, []);

  const cartCount = cart.reduce((s, i) => s + i.qty, 0);

  // Hash-based routing
  React.useEffect(() => {
    const readHash = () => {
      const h = window.location.hash.replace('#/', '').replace('#', '') || 'home';
      setPage(h);
    };
    readHash();
    window.addEventListener('hashchange', readHash);
    return () => window.removeEventListener('hashchange', readHash);
  }, []);

  const navigate = React.useCallback((p) => {
    window.location.hash = '#/' + p;
    setPage(p);
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, []);

  // Build resolved tweaks with font family string
  const resolved = {
    ...tweaks,
    fontFamily: FONT_MAP.rubik,
  };

  // Apply font to display elements
  React.useEffect(() => {
    document.documentElement.style.setProperty('--font-display', resolved.fontFamily);
  }, [resolved.fontFamily]);

  // Apply type scale
  React.useEffect(() => {
    document.documentElement.style.fontSize = (16 * (tweaks.typeScale || 1)) + 'px';
    return () => { document.documentElement.style.fontSize = ''; };
  }, [tweaks.typeScale]);

  const pageProps = { tweaks: resolved, navigate, cart, addToCart, removeFromCart, updateQty, setTweak };

  return (
    <React.Fragment>
      <Nav currentPage={page} navigate={navigate} cartCount={cartCount} />

      <main style={{ minHeight: '100vh' }}>
        {page === 'home' && <HomePage {...pageProps} />}
        {page === 'custom' && <CustomPage {...pageProps} />}
        {page === 'pricing' && <PricingPage {...pageProps} />}
        {page === 'community' && <CommunityPage {...pageProps} />}
        {page === 'about' && <AboutPage {...pageProps} />}
        {page === 'join' && <JoinPage {...pageProps} />}
        {page === 'contact' && <ContactPage {...pageProps} />}
        {page === 'cart' && <CartPage {...pageProps} />}
      </main>

      <Footer navigate={navigate} />

      <TweaksPanel>
        <TweakSection title="Hero">
          <TweakRadio
            label="Layout"
            tweakKey="heroStyle"
            value={tweaks.heroStyle}
            options={['dawn', 'horizon', 'editorial']}
            labels={['Dawn', 'Horizon', 'Editorial']}
            onChange={v => setTweak('heroStyle', v)}
          />
          <TweakText
            label="Headline"
            tweakKey="heroHeadline"
            value={tweaks.heroHeadline}
            onChange={v => setTweak('heroHeadline', v)}
          />
          <TweakText
            label="CTA Text"
            tweakKey="ctaText"
            value={tweaks.ctaText}
            onChange={v => setTweak('ctaText', v)}
          />
        </TweakSection>

        <TweakSection title="Typography">

          <TweakSlider
            label="Type Scale"
            tweakKey="typeScale"
            value={tweaks.typeScale}
            min={0.85}
            max={1.15}
            step={0.01}
            onChange={v => setTweak('typeScale', v)}
          />
        </TweakSection>

        <TweakSection title="Sections">
          <TweakToggle
            label="Show About Teaser"
            tweakKey="showAbout"
            value={tweaks.showAbout}
            onChange={v => setTweak('showAbout', v)}
          />
          <TweakToggle
            label="Show Product Showcase"
            tweakKey="showProducts"
            value={tweaks.showProducts}
            onChange={v => setTweak('showProducts', v)}
          />
        </TweakSection>

        <TweakSection title="Founder Portrait">
          <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.55)', lineHeight: 1.45, marginBottom: 4 }}>
            With Tweaks open you can also drag the photo to pan and scroll to zoom.
          </div>
          <TweakSelect
            label="Aspect Ratio"
            tweakKey="founderAspect"
            value={tweaks.founderAspect}
            options={[
              { value: '3/4', label: '3:4 (default)' },
              { value: '4/5', label: '4:5' },
              { value: '1/1', label: '1:1 square' },
              { value: '2/3', label: '2:3' },
              { value: '9/16', label: '9:16 tall' },
            ]}
            onChange={v => setTweak('founderAspect', v)}
          />
          <TweakSlider
            label="Zoom"
            tweakKey="founderZoom"
            value={tweaks.founderZoom}
            min={1}
            max={4}
            step={0.01}
            onChange={v => setTweak('founderZoom', v)}
          />
          <TweakSlider
            label="Pan X"
            tweakKey="founderX"
            value={tweaks.founderX}
            min={-150}
            max={150}
            step={0.5}
            onChange={v => setTweak('founderX', v)}
          />
          <TweakSlider
            label="Pan Y"
            tweakKey="founderY"
            value={tweaks.founderY}
            min={-150}
            max={150}
            step={0.5}
            onChange={v => setTweak('founderY', v)}
          />
          <TweakButton
            label="Reset crop"
            onClick={() => setTweak({ founderZoom: 1, founderX: 0, founderY: 0, founderAspect: '3/4' })}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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