// WNN Live — app composer, tweaks, device preview
const { useTweaks, TweaksPanel, TweakSection, TweakRadio } = window;
const AIcon = window.WNNIcon;

const params = new URLSearchParams(location.search);
const BARE = params.has('bare');
function decodeTw() {
  try { return JSON.parse(decodeURIComponent(params.get('tw') || '')) || {}; } catch (e) { return {}; }
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "device": "desktop",
  "heroScheme": "scheme-1",
  "pricingScheme": "scheme-1"
}/*EDITMODE-END*/;

function Page({ tw }) {
  return (
    <WNNReserveProvider>
      <WNNAnnouncementBar />
      <WNNNav />
      <main>
        <WNNHero scheme={tw.heroScheme} />
        <WNNProofWall />
        <WNNAuthority />
        <WNNProblem />
        <WNNMechanism />
        <WNNLeihua />
        <WNNAgenda />
        <WNNPricing scheme={tw.pricingScheme} />
        <WNNFAQ />
        <WNNClosing />
      </main>
      <WNNFooter />
    </WNNReserveProvider>
  );
}

function MobilePreview({ tw }) {
  const src = '?bare=1&tw=' + encodeURIComponent(JSON.stringify({
    heroScheme: tw.heroScheme, pricingScheme: tw.pricingScheme,
  }));
  return (
    <div className="deviceStage">
      <div>
        <div className="deviceLabel">
          <AIcon name="phone" size={16} color="#cdd3d4" /> Mobile preview · 414&nbsp;px · live, scrollable
        </div>
        <div className="phoneFrame">
          <div className="notch"></div>
          <iframe src={src} title="WNN Live — mobile preview"></iframe>
        </div>
      </div>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  if (BARE) {
    const tw = decodeTw();
    return <Page tw={{ heroScheme: tw.heroScheme || 'scheme-1', pricingScheme: tw.pricingScheme || 'scheme-1' }} />;
  }

  const tw = { heroScheme: t.heroScheme, pricingScheme: t.pricingScheme };

  return (
    <>
      {t.device === 'mobile' ? <MobilePreview tw={tw} /> : <Page tw={tw} />}

      <TweaksPanel>
        <TweakSection label="Preview" />
        <TweakRadio label="Device" value={t.device}
          options={[{ value: 'desktop', label: 'Desktop' }, { value: 'mobile', label: 'Mobile' }]}
          onChange={(v) => setTweak('device', v)} />
        <TweakSection label="Section backgrounds" />
        <TweakRadio label="Hero" value={t.heroScheme}
          options={[{ value: 'scheme-1', label: 'Gold' }, { value: 'scheme-2', label: 'Cream' }, { value: 'scheme-3', label: 'White' }]}
          onChange={(v) => setTweak('heroScheme', v)} />
        <TweakRadio label="Pricing" value={t.pricingScheme}
          options={[{ value: 'scheme-1', label: 'Gold' }, { value: 'scheme-2', label: 'Cream' }]}
          onChange={(v) => setTweak('pricingScheme', v)} />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('wnn-app')).render(<App />);