/* App entry — Angel App Studio landing page */
const { useState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#EBA8F2",
  "bg": "#EFECE8",
  "ink": "#1A1A1A",
  "headline": "paying-clients",
  "showAnnotations": true
}/*EDITMODE-END*/;

function applyTokens(t){
  const r = document.documentElement;
  r.style.setProperty('--accent', t.accent);
  r.style.setProperty('--bg', t.bg);
  r.style.setProperty('--ink', t.ink);
}

const App = () => {
  const [t, setTweak] = window.useTweaks
    ? window.useTweaks(TWEAK_DEFAULTS)
    : [TWEAK_DEFAULTS, ()=>{}];

  React.useEffect(()=>{ applyTokens(t); }, [t.accent, t.bg, t.ink]);

  const { Nav, Hero, Marquee, Pain, Solution, Build, HowItWorks, Eligibility, Pricing, FAQs, FinalCTA, Footer } = window.AAS;

  return (
    <div>
      <Nav />
      <Hero headlineId={t.headline} />
      <Marquee />
      <Pain />
      <Solution />
      <Build />
      <HowItWorks />
      <Eligibility />
      <Pricing />
      <FAQs />
      <FinalCTA />
      <Footer />

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Hero headline">
            <window.TweakSelect
              label="Headline"
              value={t.headline}
              onChange={v=>setTweak('headline', v)}
              options={[
                { value:'original',         label:'…built the way YOU want' },
                { value:'paying-clients',   label:'…that turns followers into paying clients' },
                { value:'somewhere-to-pay', label:'…somewhere to pay you' },
                { value:'one-app',          label:'…infinite clients without the 1:1s' },
                { value:'productised',      label:'…your methodology, productised' },
                { value:'beyond-call',      label:'…to scale beyond the call' },
                { value:'believers',        label:'…followers → believers & buyers' },
                { value:'attention-income', label:'…attention into income' },
                { value:'creator-founder',  label:'…creator to founder, in 90 days' },
                { value:'not-another-reel', label:'…not another reel' },
              ]}
            />
          </window.TweakSection>
          <window.TweakSection title="Color">
            <window.TweakColor label="Accent" value={t.accent} onChange={v=>setTweak('accent', v)} />
            <window.TweakColor label="Background" value={t.bg} onChange={v=>setTweak('bg', v)} />
            <window.TweakColor label="Ink" value={t.ink} onChange={v=>setTweak('ink', v)} />
          </window.TweakSection>
          <window.TweakSection title="Vibe">
            <window.TweakRadio
              label="Accent preset"
              value={t.accent}
              onChange={v=>setTweak('accent', v)}
              options={[
                { value:'#EBA8F2', label:'Lilac' },
                { value:'#F2C8A8', label:'Peach' },
                { value:'#A8E2D2', label:'Mint' },
                { value:'#F2E5A8', label:'Butter' },
              ]}
            />
            <window.TweakRadio
              label="Background"
              value={t.bg}
              onChange={v=>setTweak('bg', v)}
              options={[
                { value:'#EFECE8', label:'Cream' },
                { value:'#F4F1EC', label:'Bone' },
                { value:'#1A1A1A', label:'Ink' },
              ]}
            />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </div>
  );
};

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