/* global React, ReactDOM */
// App composition + Tweaks panel

const { useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FF4103",
  "bg": "#0F1115",
  "heroMascotOpacity": 0.12,
  "showIntro": true,
  "showTicker": true,
  "showCalculator": true,
  "showTestimonials": true,
  "showCompare": true,
  "showSecurity": true,
  "showGrain": true,
  "fontScale": 1,
  "density": "regular",
  "radius": "default",
  "ctaCopy": "Comece grátis 90 dias"
}/*EDITMODE-END*/;

const ACCENT_PALETTE = {
  "#FF4103": { soft: "#FFC247", deep: "#E63A00", glow: "rgba(255,65,3,.4)"  }, // OFICIAL — Laranja Energia
  "#FFA000": { soft: "#FFD24A", deep: "#C77600", glow: "rgba(255,160,0,.4)"   }, // âmbar
  "#3b82f6": { soft: "#60a5fa", deep: "#1d4ed8", glow: "rgba(59,130,246,.35)" }, // electric blue
  "#84cc16": { soft: "#a3e635", deep: "#65a30d", glow: "rgba(132,204,22,.35)" }, // lime
  "#e11d48": { soft: "#fb7185", deep: "#9f1239", glow: "rgba(225,29,72,.35)"  }, // crimson
  "#F2F2F4": { soft: "#ffffff", deep: "#8D939C", glow: "rgba(242,242,244,.25)"}, // mono
};

const BG_PALETTE = {
  "#0F1115": { soft: "#14171C", card: "#1A1D25", elev: "#232730", line: "#2A2E35", lineSoft: "#20242B" }, // OFICIAL — Preto Carbon
  "#000000": { soft: "#0A0A0C", card: "#101013", elev: "#16161B", line: "#1F1F25", lineSoft: "#16161D" }, // black hole
  "#161922": { soft: "#1B1F29", card: "#21262F", elev: "#2A2F38", line: "#363B45", lineSoft: "#2A2F38" }, // grafite soft
};

const DENSITY_PADDING = { compact: 80, regular: 120, comfy: 160 };
const RADIUS = {
  sharp:   { sm: 2,  md: 4,  lg: 6,  xl: 10 },
  default: { sm: 8,  md: 14, lg: 20, xl: 28 },
  pillow:  { sm: 12, md: 20, lg: 28, xl: 40 },
};

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

  // Apply tweaks → CSS variables
  useEffectApp(() => {
    const root = document.documentElement;
    const acc = ACCENT_PALETTE[t.accent] || ACCENT_PALETTE["#ec5a1c"];
    root.style.setProperty('--accent', t.accent);
    root.style.setProperty('--accent-soft', acc.soft);
    root.style.setProperty('--accent-deep', acc.deep);
    root.style.setProperty('--accent-glow', acc.glow);

    const bg = BG_PALETTE[t.bg] || BG_PALETTE["#0c0c0e"];
    root.style.setProperty('--bg', t.bg);
    root.style.setProperty('--bg-soft', bg.soft);
    root.style.setProperty('--bg-card', bg.card);
    root.style.setProperty('--bg-elev', bg.elev);
    root.style.setProperty('--line', bg.line);
    root.style.setProperty('--line-soft', bg.lineSoft);

    root.style.fontSize = (16 * t.fontScale) + 'px';

    document.querySelectorAll('section').forEach(s => {
      // skip sections with their own fixed padding (ticker, gorilla impact)
      if (s.classList.contains('ticker') || s.classList.contains('gimpact')) return;
      s.style.setProperty('padding-top',  DENSITY_PADDING[t.density] + 'px');
      s.style.setProperty('padding-bottom', DENSITY_PADDING[t.density] + 'px');
    });

    const r = RADIUS[t.radius] || RADIUS.default;
    root.style.setProperty('--r-sm', r.sm + 'px');
    root.style.setProperty('--r',    r.md + 'px');
    root.style.setProperty('--r-lg', r.lg + 'px');
    root.style.setProperty('--r-xl', r.xl + 'px');

    document.body.classList.toggle('no-grain', !t.showGrain);
  }, [t]);

  return (
    <>
      {t.showIntro && <IntroSplash />}
      <Nav />
      <Hero ctaCopy={t.ctaCopy} mascotOpacity={t.heroMascotOpacity} />
      {t.showTicker && <StatsTicker />}
      <HowItWorks />
      <Features />
      <GorillaImpact variant="rage" />
      {t.showCompare && <Compare />}
      <Integrations />
      {t.showCalculator && <Calculator />}
      {t.showTestimonials && <Testimonials />}
      <GorillaImpact variant="calm" />
      <Pricing />
      {t.showSecurity && <Security />}
      <FAQ />
      <FinalCTA />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Cor & Background" />
        <TweakColor
          label="Accent color"
          value={t.accent}
          options={Object.keys(ACCENT_PALETTE)}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakColor
          label="Background"
          value={t.bg}
          options={Object.keys(BG_PALETTE)}
          onChange={(v) => setTweak('bg', v)}
        />
        <TweakToggle
          label="Grão / textura"
          value={t.showGrain}
          onChange={(v) => setTweak('showGrain', v)}
        />

        <TweakSection label="Hero" />
        <TweakSlider
          label="Mascote · opacidade"
          value={t.heroMascotOpacity}
          min={0} max={0.4} step={0.005}
          onChange={(v) => setTweak('heroMascotOpacity', v)}
        />
        <TweakText
          label="CTA principal"
          value={t.ctaCopy}
          onChange={(v) => setTweak('ctaCopy', v)}
        />

        <TweakSection label="Layout" />
        <TweakRadio
          label="Densidade"
          value={t.density}
          options={['compact', 'regular', 'comfy']}
          onChange={(v) => setTweak('density', v)}
        />
        <TweakRadio
          label="Cantos"
          value={t.radius}
          options={['sharp', 'default', 'pillow']}
          onChange={(v) => setTweak('radius', v)}
        />
        <TweakSlider
          label="Escala de fonte"
          value={t.fontScale}
          min={0.85} max={1.15} step={0.01}
          onChange={(v) => setTweak('fontScale', v)}
        />

        <TweakSection label="Seções" />
        <TweakToggle label="Intro fullscreen"     value={t.showIntro}        onChange={(v) => setTweak('showIntro', v)} />
        <TweakToggle label="Ticker de stats"      value={t.showTicker}       onChange={(v) => setTweak('showTicker', v)} />
        <TweakToggle label="Comparativo"          value={t.showCompare}      onChange={(v) => setTweak('showCompare', v)} />
        <TweakToggle label="Calculadora"          value={t.showCalculator}   onChange={(v) => setTweak('showCalculator', v)} />
        <TweakToggle label="Depoimentos"          value={t.showTestimonials} onChange={(v) => setTweak('showTestimonials', v)} />
        <TweakToggle label="LGPD / Segurança"     value={t.showSecurity}     onChange={(v) => setTweak('showSecurity', v)} />
      </TweaksPanel>
    </>
  );
}

// Pass mascotOpacity / ctaCopy through to Hero — overwrite the component definition
// Lightweight wrap: re-define Hero accepting props (so we don't fork sections-hero.jsx)
const OriginalHero = window.Hero;
window.Hero = function HeroWrap({ ctaCopy, mascotOpacity }) {
  useEffectApp(() => {
    const el = document.querySelector('.hero-mascot');
    if (el && typeof mascotOpacity === 'number') el.style.opacity = mascotOpacity;
    if (ctaCopy) {
      const btn = document.querySelector('.hero-ctas .btn-primary');
      if (btn) {
        // first text node only
        for (const n of btn.childNodes) {
          if (n.nodeType === 3) { n.nodeValue = ctaCopy + ' '; break; }
        }
      }
    }
  }, [ctaCopy, mascotOpacity]);
  return <OriginalHero />;
};

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