// ───────────────────────────────────────────────
// App root + Tweaks panel
// ───────────────────────────────────────────────

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headlineVariant": "A",
  "ctaVariant": "A",
  "accent": "#5dd9c2"
}/*EDITMODE-END*/;

// Accent palette options — variants of teal/azul-esverdeado
const ACCENT_OPTIONS = [
  '#5dd9c2', // teal (default — azul esverdeado)
  '#6ee0d6', // cyan refinado
  '#7fc9d4', // mais azul
  '#4ec79c'  // mais verde
];

// Map accent → tone derivatives (no need to pre-compute all — use color-mix in CSS)
function applyAccent(hex) {
  const root = document.documentElement;
  root.style.setProperty('--accent', hex);
  // derive: lighter, deeper, soft, tint, glow, on-accent
  root.style.setProperty('--accent-hi', shade(hex, 12));
  root.style.setProperty('--accent-soft', shade(hex, -18));
  root.style.setProperty('--accent-deep', shade(hex, -50));
  root.style.setProperty('--accent-tint', hexA(hex, 0.10));
  root.style.setProperty('--accent-glow', hexA(hex, 0.18));
  // pick dark/light text on accent
  const lum = luma(hex);
  root.style.setProperty('--on-accent', lum > 0.6 ? '#062722' : '#eafaf6');
  // Also update grid bg accent overlay
  root.style.setProperty('--accent-overlay-5', hexA(hex, 0.05));
}

function hexA(hex, a) {
  const {r, g, b} = parseHex(hex);
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}
function shade(hex, pct) {
  const {r, g, b} = parseHex(hex);
  const f = (c) => {
    if (pct >= 0) return Math.round(c + (255 - c) * (pct / 100));
    return Math.round(c * (1 + pct / 100));
  };
  return '#' + [f(r), f(g), f(b)].map(c => c.toString(16).padStart(2, '0')).join('');
}
function parseHex(hex) {
  const h = hex.replace('#', '');
  return {
    r: parseInt(h.slice(0, 2), 16),
    g: parseInt(h.slice(2, 4), 16),
    b: parseInt(h.slice(4, 6), 16)
  };
}
function luma(hex) {
  const {r, g, b} = parseHex(hex);
  return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
}

// Reveal animation removed — content is always visible.
function useReveal() {}

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

  React.useEffect(() => {
    applyAccent(t.accent || '#5dd9c2');
  }, [t.accent]);

  useReveal();

  return (
    <>
      <ShaderBackground />
      <Nav />
      <main>
        <Hero headlineVariant={t.headlineVariant} ctaVariant={t.ctaVariant} />
        <TrustStrip />
        <Problem />
        <DataCallout />
        <Method />
        <Benefits />
        <Cases />
        <Offer ctaVariant={t.ctaVariant} />
        <Objections />
        <Guarantee />
        <Urgency />
        <FAQ />
        <FinalCTA ctaVariant={t.ctaVariant} />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks · PáduaPRO LP">
        <TweakSection label="Headline · Bloco 1 (A/B/C)" />
        <TweakRadio
          label="Variante"
          value={t.headlineVariant}
          options={['A', 'B', 'C']}
          onChange={(v) => setTweak('headlineVariant', v)}
        />
        <div className="pp-tweak-preview">
          <em>{HERO_VARIANTS[t.headlineVariant].em}</em>
          <span>{HERO_VARIANTS[t.headlineVariant].pre} · {HERO_VARIANTS[t.headlineVariant].post.slice(0, 38)}…</span>
        </div>

        <TweakSection label="CTA · Bloco 4 (A/B)" />
        <TweakRadio
          label="Variante"
          value={t.ctaVariant}
          options={['A', 'B']}
          onChange={(v) => setTweak('ctaVariant', v)}
        />
        <div className="pp-tweak-preview">
          <em>{t.ctaVariant === 'A' ? 'Ação direta' : 'Benefício'}</em>
          <span>{CTA_VARIANTS[t.ctaVariant].label}</span>
        </div>

        <TweakSection label="Accent · cor de marca" />
        <TweakColor
          label="Tom"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak('accent', v)}
        />
      </TweaksPanel>
    </>
  );
}

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