// Tweaks app for the Asymptotic landing page.
// Edits the live DOM via data-tw selectors + CSS variables.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "navCta": "Book a demo",
  "heroBeta": "Now in private beta",
  "heroVersion": "v0.9.0 · Apr 2026",
  "heroHeadline": "Batteries aren't black boxes anymore.",
  "heroLead": "Fast-track battery system development with Asymptotic's physics-based models.",
  "heroCta": "Book a demo",
  "problemHeadline": "Battery innovation is accelerating. Understanding is not.",
  "solutionHeadline": "A faster, deeper way to understand batteries.",
  "teamHeadline": "THE TEAM",
  "ctaHeadline": "Bring physics to your BMS development.",
  "ctaLead": "Tell us what challenges you’re tackling and we’ll set up a working session.",
  "accent": "#1155CC",
  "bg": "#1C1C1E",
  "bgDeep": "#0A0A0B",
  "radiusCard": 16,
  "radiusBtn": 6,
  "showProblem": true,
  "showMetrics": false,
  "showSolution": true,
  "showTeam": true,
  "showCta": true
}/*EDITMODE-END*/;

// ── helpers ────────────────────────────────────────────────────────────────

const TEXT_BINDINGS = {
  "nav.cta":           "navCta",
  "hero.beta":         "heroBeta",
  "hero.version":      "heroVersion",
  "hero.headline":     "heroHeadline",
  "hero.lead":         "heroLead",
  "hero.cta":          "heroCta",
  "problem.headline":  "problemHeadline",
  "solution.headline": "solutionHeadline",
  "team.headline":     "teamHeadline",
  "cta.headline":      "ctaHeadline",
  "cta.lead":          "ctaLead",
};

const SECTION_BINDINGS = {
  problem:  "showProblem",
  metrics:  "showMetrics",
  solution: "showSolution",
  team:     "showTeam",
  cta:      "showCta",
};

// Lighten/darken a hex color toward white/black by `amt` (0..1).
function shift(hex, amt) {
  const m = hex.replace('#', '');
  const r = parseInt(m.slice(0, 2), 16);
  const g = parseInt(m.slice(2, 4), 16);
  const b = parseInt(m.slice(4, 6), 16);
  const f = (c, t) => Math.round(c + (t - c) * amt);
  const tr = amt > 0 ? 255 : 0;
  const nr = f(r, tr), ng = f(g, tr), nb = f(b, tr);
  const toHex = (v) => Math.max(0, Math.min(255, v)).toString(16).padStart(2, '0');
  return `#${toHex(nr)}${toHex(ng)}${toHex(nb)}`;
}

// ── app ────────────────────────────────────────────────────────────────────

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

  // Apply text edits
  React.useEffect(() => {
    Object.entries(TEXT_BINDINGS).forEach(([sel, key]) => {
      const el = document.querySelector(`[data-tw="${sel}"]`);
      if (el && el.textContent !== t[key]) {
        // preserve children that aren't text (e.g. trailing arrow svg) — for our
        // tagged elements text is the only content, so a direct set is fine.
        el.textContent = t[key];
      }
    });
  }, [t.navCta, t.heroBeta, t.heroVersion, t.heroHeadline, t.heroLead, t.heroCta,
      t.problemHeadline, t.solutionHeadline, t.teamHeadline, t.ctaHeadline, t.ctaLead]);

  // Apply colors + radii via CSS vars
  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--tw-accent', t.accent);
    r.setProperty('--tw-accent-hover', shift(t.accent, 0.18));
    r.setProperty('--tw-accent-press', shift(t.accent, -0.12));
    r.setProperty('--tw-bg', t.bg);
    r.setProperty('--tw-bg-deep', t.bgDeep);
    r.setProperty('--tw-radius-card', `${t.radiusCard}px`);
    r.setProperty('--tw-radius-btn', `${t.radiusBtn}px`);
  }, [t.accent, t.bg, t.bgDeep, t.radiusCard, t.radiusBtn]);

  // Apply section visibility
  React.useEffect(() => {
    Object.entries(SECTION_BINDINGS).forEach(([id, key]) => {
      const el = document.querySelector(`[data-tw-section="${id}"]`);
      if (el) el.style.display = t[key] ? '' : 'none';
    });
  }, [t.showProblem, t.showMetrics, t.showSolution, t.showTeam, t.showCta]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero" />
      <TweakText label="Status pill" value={t.heroBeta}
                 onChange={(v) => setTweak('heroBeta', v)} />
      <TweakText label="Version" value={t.heroVersion}
                 onChange={(v) => setTweak('heroVersion', v)} />
      <TweakText label="Headline" value={t.heroHeadline}
                 onChange={(v) => setTweak('heroHeadline', v)} />
      <TweakText label="Lead" value={t.heroLead}
                 onChange={(v) => setTweak('heroLead', v)} />
      <TweakText label="Hero CTA" value={t.heroCta}
                 onChange={(v) => setTweak('heroCta', v)} />
      <TweakText label="Nav CTA" value={t.navCta}
                 onChange={(v) => setTweak('navCta', v)} />

      <TweakSection label="Section headlines" />
      <TweakText label="Problem" value={t.problemHeadline}
                 onChange={(v) => setTweak('problemHeadline', v)} />
      <TweakText label="Platform" value={t.solutionHeadline}
                 onChange={(v) => setTweak('solutionHeadline', v)} />
      <TweakText label="Team" value={t.teamHeadline}
                 onChange={(v) => setTweak('teamHeadline', v)} />
      <TweakText label="Final CTA" value={t.ctaHeadline}
                 onChange={(v) => setTweak('ctaHeadline', v)} />
      <TweakText label="CTA lead" value={t.ctaLead}
                 onChange={(v) => setTweak('ctaLead', v)} />

      <TweakSection label="Color" />
      <TweakColor label="Accent" value={t.accent}
                  onChange={(v) => setTweak('accent', v)} />
      <TweakColor label="Canvas" value={t.bg}
                  onChange={(v) => setTweak('bg', v)} />
      <TweakColor label="Hero / deep" value={t.bgDeep}
                  onChange={(v) => setTweak('bgDeep', v)} />

      <TweakSection label="Shape" />
      <TweakSlider label="Card radius" value={t.radiusCard} min={0} max={32} unit="px"
                   onChange={(v) => setTweak('radiusCard', v)} />
      <TweakSlider label="Button radius" value={t.radiusBtn} min={0} max={24} unit="px"
                   onChange={(v) => setTweak('radiusBtn', v)} />

      <TweakSection label="Sections" />
      <TweakToggle label="Problem"  value={t.showProblem}
                   onChange={(v) => setTweak('showProblem', v)} />
      <TweakToggle label="Metrics"  value={t.showMetrics}
                   onChange={(v) => setTweak('showMetrics', v)} />
      <TweakToggle label="Platform" value={t.showSolution}
                   onChange={(v) => setTweak('showSolution', v)} />
      <TweakToggle label="Team"     value={t.showTeam}
                   onChange={(v) => setTweak('showTeam', v)} />
      <TweakToggle label="Final CTA" value={t.showCta}
                   onChange={(v) => setTweak('showCta', v)} />
    </TweaksPanel>
  );
}

const __twRoot = document.getElementById('tweaks-root');
if (__twRoot) ReactDOM.createRoot(__twRoot).render(<TweaksApp />);