// hybrid-app.jsx — app shell + tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "switch",
  "hours": 40,
  "palette": "orange",
  "showProduct": true,
  "showStack": true,
  "showSteps": true,
  "showTrust": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [hours, setHours] = React.useState(t.hours);

  const paletteClass =
    t.palette === 'forest' ? 'palette-forest' :
    t.palette === 'ink' ? 'palette-ink' : '';

  return (
    <div className={paletteClass} data-screen-label="01 Hybrid Homepage" style={{ background: 'var(--bg)', minHeight: '100vh' }}>
      <HybridNav />
      <HybridHero hours={hours} variant={t.headline} />
      {t.showTrust && <TrustBar />}
      <CalcSection hours={hours} setHours={setHours} />
      {t.showProduct && <ProductWindow />}
      {t.showStack && <StackSection />}
      {t.showSteps && <HowItWorks />}
      <CalBookingSection />
      <FinalCTA />
      <HybridFooter />

      <TweaksPanel title="Hybrid · tweaks">
        <TweakSection label="Hero headline" />
        <TweakSelect
          label="Hook"
          value={t.headline}
          options={[
            { value: 'itemized', label: 'Your support tab, itemized.' },
            { value: 'saved',    label: 'Save real money on real support.' },
            { value: 'switch',   label: 'Pay support by the minute. Keep the receipts.' },
          ]}
          onChange={(v) => setTweak('headline', v)}
        />

        <TweakSection label="Palette" />
        <TweakRadio
          label="Accent"
          value={t.palette}
          options={['orange', 'forest', 'ink']}
          onChange={(v) => setTweak('palette', v)}
        />

        <TweakSection label="Sections" />
        <TweakToggle label="Trust bar" value={t.showTrust} onChange={(v) => setTweak('showTrust', v)} />
        <TweakToggle label="Product workspace" value={t.showProduct} onChange={(v) => setTweak('showProduct', v)} />
        <TweakToggle label="Stack section" value={t.showStack} onChange={(v) => setTweak('showStack', v)} />
        <TweakToggle label="How it works" value={t.showSteps} onChange={(v) => setTweak('showSteps', v)} />

        <TweakSection label="Calculator" />
        <TweakNumber label="Weekly hours" value={hours} min={0} max={168} unit="h" onChange={setHours} />
        <TweakButton label="Reset to 40" secondary onClick={() => setHours(40)} />
      </TweaksPanel>
    </div>
  );
}

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