// app.jsx — Renegade root: routing + tweaks
const { useState: aUseState, useEffect: aUseEffect, useRef: aUseRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "standard",
  "density": "comfortable",
  "hero": "split",
  "solarGate": "gate"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = aUseState('home');         // home | signup | portal
  const [portalPage, setPortalPage] = aUseState('overview');
  const [scrolled, setScrolled] = aUseState(false);
  const [initLookup, setInitLookup] = aUseState(null);
  const scrollHost = aUseRef(null);

  // nav scroll state (home only)
  aUseEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, [route]);

  const scrollTop = () => window.scrollTo({ top: 0, behavior: 'auto' });

  const goHome = (page, anchor) => {
    setRoute('home');
    scrollTop();
    if (anchor) setTimeout(() => { const el = document.getElementById(anchor); if (el) el.scrollIntoView({ behavior: 'smooth' }); }, 60);
  };
  const goSignup = (lookup) => { setInitLookup(lookup || null); setRoute('signup'); scrollTop(); };
  const goPortal = (page) => { setRoute('portal'); if (page) setPortalPage(page); scrollTop(); };

  const onHeroCheck = (mode, value) => goSignup({ mode, value });

  return (
    <div className="rng-app" data-accent={t.accent} data-density={t.density} ref={scrollHost}>
      {route !== 'portal' && (
        <MarketingNav onNav={(r, anchor) => r === 'signup' ? goSignup() : goHome(r, anchor)}
          mode={route === 'home' ? (scrolled ? 'solid' : 'transparent') : 'light'} onLogin={() => goPortal('overview')} />
      )}

      {route === 'home' && <MarketingHome heroVariant={t.hero} onCheck={onHeroCheck} onNav={(r, a) => r === 'signup' ? goSignup() : goHome(r, a)} />}
      {route === 'signup' && <SignupFlow solarGate={t.solarGate} initLookup={initLookup} onExitToPortal={() => goPortal('overview')} />}
      {route === 'portal' && <Portal page={portalPage} onNav={setPortalPage} onLogout={() => goHome('home')} />}

      {route !== 'portal' && <Footer onNav={(r) => r === 'signup' ? goSignup() : goHome(r)} />}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand" />
        <TweakRadio label="Accent" value={t.accent} options={['standard', 'vivid', 'muted']} onChange={v => setTweak('accent', v)} />
        <TweakRadio label="Density" value={t.density} options={['comfortable', 'compact']} onChange={v => setTweak('density', v)} />
        <TweakSection label="Homepage" />
        <TweakSelect label="Hero" value={t.hero}
          options={[{ value: 'split', label: 'Split — headline + widget' }, { value: 'stat', label: 'Stat — headline + numbers' }, { value: 'centered', label: 'Centered statement' }]}
          onChange={v => { setTweak('hero', v); if (route === 'home') scrollTop(); }} />
        <TweakSection label="Signup" />
        <TweakRadio label="If solar" value={t.solarGate} options={[{ value: 'plan', label: 'Offer solar plan' }, { value: 'gate', label: 'Decline (gate)' }]} onChange={v => setTweak('solarGate', v)} />
        <div style={{ fontSize: 11.5, color: 'var(--fg-3)', padding: '4px 2px 10px', lineHeight: 1.5 }}>
          In signup, pick the Paddington address (or simulate solar on the property card) to see this behaviour.
        </div>
        <TweakSection label="Jump to" />
        <div style={{ display: 'grid', gap: 8 }}>
          <TweakButton label="Homepage" onClick={() => goHome('home')} />
          <TweakButton label="Signup flow" onClick={() => goSignup()} />
          <TweakButton label="Customer portal" onClick={() => goPortal('overview')} />
        </div>
      </TweaksPanel>
    </div>
  );
}

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