// Pellex production app — design handoff implemented without iOS frame or tweak panel.
// Keeps the handoff's mobile-first conversion design, rendered as the actual site.

function PellexLandingPage({ palette, headlineKey, density, pricingDisplay, lang, setLang }) {
  const p = PELLEX_PALETTES[palette] || PELLEX_PALETTES.forest;
  return (
    <>
      <Header p={p} lang={lang} setLang={setLang}/>
      <div className="desktop-hero-band">
        <Hero p={p} headlineKey={headlineKey} density={density} lang={lang}/>
        <AssetMachine p={p}/>
      </div>
      <Rules p={p}/>
      <Playbook p={p}/>
      <BeforeAfter p={p}/>
      <Resources p={p}/>
      <Pricing p={p} pricingDisplay={pricingDisplay}/>
      <Testimonials p={p}/>
      <FounderNote p={p}/>
      <FAQ p={p}/>
      <FinalCTA p={p}/>
      <Footer p={p}/>
    </>
  );
}

function PellexRoot({ palette, headlineKey, density, pricingDisplay, lang, setLang, scrollRef, showStickyCta }) {
  const p = PELLEX_PALETTES[palette] || PELLEX_PALETTES.forest;
  const [page] = usePellexNav();
  const showSticky = showStickyCta && page === 'landing';

  let body;
  switch (page) {
    case 'map':      body = <MapPage p={p}/>; break;
    case 'kit':      body = <KitPage p={p}/>; break;
    case 'checkout': body = <CheckoutPage p={p}/>; break;
    case 'success':  body = <SuccessPage p={p}/>; break;
    case 'resource': body = <ResourcePage p={p}/>; break;
    case 'business': body = <BusinessPage p={p}/>; break;
    default:         body = <PellexLandingPage palette={palette} headlineKey={headlineKey} density={density} pricingDisplay={pricingDisplay} lang={lang} setLang={setLang}/>;
  }

  return (
    <main ref={scrollRef} className={`pellex-scroll page-${page}`} style={{
      width: '100%', height: '100%', overflowY: 'auto', overflowX: 'hidden',
      background: p.bg, color: p.text,
      fontFamily: PELLEX_FONTS.body,
      position: 'relative',
    }} data-screen-label={page}>
      {body}
      {showSticky && <StickyCTA p={p} scrollRef={scrollRef} enabled={true}/>}
    </main>
  );
}

function App() {
  const t = window.TWEAK_DEFAULTS || {};
  const [lang, setLang] = useState('en');
  const scrollRef = useRef(null);
  useEffect(() => {
    const apply = () => window.applyPellexTranslations && window.applyPellexTranslations(lang);
    apply();
    const observer = new MutationObserver(() => requestAnimationFrame(apply));
    observer.observe(document.getElementById('root'), { childList: true, subtree: true });
    return () => observer.disconnect();
  }, [lang]);

  return (
    <div className="pellex-shell" data-screen-label="Pellex">
      <PellexRoot
        palette={t.palette || 'forest'}
        headlineKey={t.headline || 'asset'}
        density={t.density || 'airy'}
        pricingDisplay={t.pricingDisplay || 'strike'}
        lang={lang}
        setLang={setLang}
        scrollRef={scrollRef}
        showStickyCta={t.showStickyCta !== false}
      />
    </div>
  );
}

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