/* =========================================================
   App entry — composes all sections + tweaks panel
   ========================================================= */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0FBF61",
  "density": "comfortable",
  "showTicker": true,
  "showCalculator": true,
  "showStickers": true,
  "darkCalculator": true,
  "heroLayout": "dashboard"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks via CSS variables on body
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--green', t.accent);
    // derive bright + soft from accent (works for any green-y hue)
    root.style.setProperty('--green-bright', shade(t.accent, 1.12));

    // Density spacing
    const map = {
      compact:    { sec: '64px', card: '20px' },
      comfortable:{ sec: '96px', card: '28px' },
      spacious:   { sec: '128px',card: '36px' },
    };
    root.style.setProperty('--sec-pad', map[t.density].sec);
    root.style.setProperty('--card-pad', map[t.density].card);

    // Sticker visibility
    document.querySelectorAll('.sticker').forEach(s => {
      s.style.display = t.showStickers ? '' : 'none';
    });
  }, [t]);

  return (
    <>
      <Nav />
      <Hero />
      {t.showTicker && <Ticker />}
      <Logos />
      <Stats />
      <Cases />
      <Services />
      <Process />
      <Comparison />
      <TechStack />
      <Verticals />
      {t.showCalculator && <Calculator />}
      <Testimonials />
      <Team />
      <Blog />
      <FAQ />
      <CTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand">
          <TweakColor
            label="Accent green"
            value={t.accent}
            options={['#0FBF61', '#00D26A', '#1E9E5C', '#84CC16', '#10B981', '#0EA5E9']}
            onChange={v => setTweak('accent', v)}
          />
        </TweakSection>

        <TweakSection title="Layout">
          <TweakRadio
            label="Density"
            value={t.density}
            options={[
              { value: 'compact', label: 'Compact' },
              { value: 'comfortable', label: 'Comfortable' },
              { value: 'spacious', label: 'Spacious' },
            ]}
            onChange={v => setTweak('density', v)}
          />
          <TweakToggle
            label="Live ticker bar"
            description="Auto-scrolling wins under the hero"
            value={t.showTicker}
            onChange={v => setTweak('showTicker', v)}
          />
          <TweakToggle
            label="ROI calculator"
            description="Interactive section with sliders"
            value={t.showCalculator}
            onChange={v => setTweak('showCalculator', v)}
          />
          <TweakToggle
            label="Hero stickers"
            description="Floating client testimonial stickers"
            value={t.showStickers}
            onChange={v => setTweak('showStickers', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

/* Helper — brighten hex */
function shade(hex, amount) {
  const c = hex.replace('#', '');
  const r = Math.min(255, Math.round(parseInt(c.slice(0,2), 16) * amount));
  const g = Math.min(255, Math.round(parseInt(c.slice(2,4), 16) * amount));
  const b = Math.min(255, Math.round(parseInt(c.slice(4,6), 16) * amount));
  return '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');
}

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