/* === Zebra Insurtech — App root === */

const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "orange",
  "heroVariant": "stripes",
  "heroCopy": "default",
  "density": "comfy",
  "showBanner": true
}/*EDITMODE-END*/;

function paletteVars(p) {
  switch (p) {
    case "magenta": return { '--orange': '#FF2D87', '--orange-2': '#FF5FA3', '--orange-deep': '#9E0050' };
    case "electric": return { '--orange': '#3D7BFF', '--orange-2': '#6D9BFF', '--orange-deep': '#0033A0' };
    case "lime":     return { '--orange': '#B5FF2B', '--orange-2': '#CCFF66', '--orange-deep': '#5C8A00' };
    case "orange":
    default:         return { '--orange': '#FF6B1A', '--orange-2': '#FF8A47', '--orange-deep': '#C24500' };
  }
}

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

  useEffectA(() => {
    const vars = paletteVars(tweaks.palette);
    Object.entries(vars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
  }, [tweaks.palette]);

  useEffectA(() => {
    document.documentElement.style.setProperty('--density-pad', tweaks.density === "tight" ? '80px' : tweaks.density === "spacious" ? '160px' : '120px');
    document.querySelectorAll('.section-dark, .section-light, .section-paper').forEach(s => {
      s.style.paddingTop = `var(--density-pad)`;
      s.style.paddingBottom = `var(--density-pad)`;
    });
  }, [tweaks.density]);

  return (
    <React.Fragment>
      <Nav />
      <main id="main">
        <Hero key={`hero-${tweaks.heroVariant}-${tweaks.heroCopy}`} />
        <LogoBar />
        <Problema />
        <Solucion />
        <ComoFunciona />
        <DashboardDemo />
        <ParaQuien />
        <Testimonios />
        <CtaFinal />
      </main>
      <Footer />

      {tweaks.showBanner && (
        <div className="demo-banner" data-comment-anchor="vortik-banner">
          <span className="dot"></span>
          <span>Redesign demo · by <strong>Vortik</strong> · outbound to Zebra</span>
        </div>
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand & palette">
          <TweakColor
            label="Primary accent"
            value={tweaks.palette}
            options={[
              ['#FF6B1A', '#FF8A47', '#0A0A0A'],
              ['#FF2D87', '#FF5FA3', '#0A0A0A'],
              ['#3D7BFF', '#6D9BFF', '#0A0A0A'],
              ['#B5FF2B', '#CCFF66', '#0A0A0A'],
            ]}
            onChange={(arr) => {
              const map = { '#FF6B1A': 'orange', '#FF2D87': 'magenta', '#3D7BFF': 'electric', '#B5FF2B': 'lime' };
              setTweak('palette', map[arr[0]] || 'orange');
            }}
          />
        </TweakSection>
        <TweakSection label="Layout">
          <TweakRadio
            label="Section density"
            value={tweaks.density}
            options={[
              { value: 'tight', label: 'Tight' },
              { value: 'comfy', label: 'Comfy' },
              { value: 'spacious', label: 'Spacious' },
            ]}
            onChange={(v) => setTweak('density', v)}
          />
          <TweakToggle
            label="Show Vortik banner"
            value={tweaks.showBanner}
            onChange={(v) => setTweak('showBanner', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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