// landing-app.jsx — top-level App with Tweaks

const { Nav, Hero, Problem } = window.LandingS1;
const { Personas, SkillGraph } = window.LandingS2;
const { Compare, Deploy, ROI, Trust, Pricing, FAQ, FinalCTA, Footer } = window.LandingS3;

const HEADLINES = {
  default: [
    'Your next hire ',
    { kind: 'accent', text: 'already badged in' },
    ' this morning.',
  ],
  candid: [
    'People stay ',
    { kind: 'accent', text: '41% longer' },
    ' when they can move inside.',
  ],
  punch: [
    { kind: 'strike', text: 'Post a JD.' },
    ' Match the people you already employ.',
  ],
  cfo: [
    'Reskill from within. ',
    { kind: 'accent', text: '2.5× cheaper' },
    ' than hiring outside.',
  ],
};

function App() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "headline": "default",
    "rival": "legacy",
    "billing": "annual"
  }/*EDITMODE-END*/;
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const onPrimary = () => {
    document.getElementById('roi')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <>
      <Nav onPrimary={onPrimary} />
      <Hero headline={HEADLINES[tweaks.headline] || HEADLINES.default} onPrimary={onPrimary} />
      <Problem />
      <Personas />
      <SkillGraph />
      <Compare rival={tweaks.rival} />
      <Deploy />
      <ROI />
      <Trust />
      <Pricing billing={tweaks.billing} />
      <FAQ />
      <FinalCTA onPrimary={onPrimary} />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero headline" />
        <TweakRadio label="Voice" value={tweaks.headline}
          options={['default', 'candid', 'punch', 'cfo']}
          onChange={v => setTweak('headline', v)} />

        <TweakSection label="Comparison column" />
        <TweakRadio label="Displacing" value={tweaks.rival}
          options={['legacy', 'inhouse']}
          onChange={v => setTweak('rival', v)} />

        <TweakSection label="Pricing" />
        <TweakRadio label="Billing" value={tweaks.billing}
          options={['annual', 'monthly']}
          onChange={v => setTweak('billing', v)} />
      </TweaksPanel>
    </>
  );
}

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