// ─── APP ──────────────────────────────────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentBlue": "#F62E33",
  "accentViolet": "#D60457",
  "accentCyan": "#6E0240",
  "accentAmber": "#FFC71C",
  "showOrbs": true
}/*EDITMODE-END*/;

function App() {
  const { tweaks, setTweak } = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const el = document.getElementById('twk-vars') || (() => { const s=document.createElement('style'); s.id='twk-vars'; document.head.appendChild(s); return s; })();
    el.textContent = `
      .grad-text { background: linear-gradient(95deg, ${tweaks.accentAmber} 0%, #FB761F 30%, ${tweaks.accentBlue} 55%, ${tweaks.accentViolet} 80%, ${tweaks.accentCyan} 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
      .btn-primary { background: linear-gradient(95deg, ${tweaks.accentBlue} 0%, ${tweaks.accentViolet} 60%, ${tweaks.accentCyan} 100%) !important; }
      .btn-primary:hover { box-shadow: 0 14px 32px -8px ${tweaks.accentViolet}99 !important; }
      .orb-1, .orb-2 { display: ${tweaks.showOrbs?'block':'none'} !important; }
    `;
  }, [tweaks]);

  return (
    <LangProvider>
      <MagicLayer />
      <NewNav />
      <Hero />
      <ValueBadges />
      <Testimonials />
      <WhatWeBuild />
      <SampleWorkByIndustry />
      <BeforeAfterSection />
      <NewPackages />
      <AddOns />
      <WhatYouReceive />
      <WhyWorkWithUs />
      <Bilingual />
      <Founder />
      <NewFAQ />
      <QuoteForm />
      <NewFooter />
      <TweaksPanel>
        <TweakSection label="Accent Colors">
          <TweakColor label="Red" value={tweaks.accentBlue} onChange={v => setTweak('accentBlue', v)} />
          <TweakColor label="Magenta" value={tweaks.accentViolet} onChange={v => setTweak('accentViolet', v)} />
          <TweakColor label="Plum" value={tweaks.accentCyan} onChange={v => setTweak('accentCyan', v)} />
          <TweakColor label="Amber" value={tweaks.accentAmber} onChange={v => setTweak('accentAmber', v)} />
        </TweakSection>
        <TweakSection label="Visual">
          <TweakToggle label="Background Orbs" value={tweaks.showOrbs} onChange={v => setTweak('showOrbs', v)} />
        </TweakSection>
      </TweaksPanel>
    </LangProvider>
  );
}

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