const DEFAULTS = JSON.parse(document.getElementById("vialkit-defaults").textContent);

function deriveAccent(hex) {
  const h = hex.replace("#", "");
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  const mix = (a, t) => Math.round(a + (255 - a) * t);
  const dark = (a, t) => Math.round(a * (1 - t));
  const toHex = (c) => c.toString(16).padStart(2, "0");
  const soft = `#${toHex(mix(r, 0.85))}${toHex(mix(g, 0.85))}${toHex(mix(b, 0.85))}`;
  const deep = `#${toHex(dark(r, 0.35))}${toHex(dark(g, 0.35))}${toHex(dark(b, 0.35))}`;
  return { soft, deep };
}

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

  React.useEffect(() => {
    const root = document.documentElement;
    const { soft, deep } = deriveAccent(tweaks.accent);
    root.style.setProperty("--accent", tweaks.accent);
    root.style.setProperty("--accent-soft", soft);
    root.style.setProperty("--accent-deep", deep);
    root.style.setProperty("--font-display", `"${tweaks.fontDisplay}", system-ui, sans-serif`);
    root.style.setProperty("--font-body", `"${tweaks.fontBody}", system-ui, sans-serif`);
    root.dataset.dark = tweaks.darkMode ? "true" : "false";
    document.body.classList.add("ready");
  }, [tweaks.accent, tweaks.fontDisplay, tweaks.fontBody, tweaks.darkMode]);

  return (
    <>
      {/* Nav — Night room */}
      <header className="nav">
        <div className="container nav-inner">
          <a href="#" className="logo">
            <img src="assets/lockup-horizontal-yellow.png" alt="vialprep" className="logo-mark-img" />
          </a>
          <nav className="nav-links">
            <a href="#welcome-kit">Prep kit</a>
            <a href="#monthly">Monthly refill</a>
            <a href="#how">How it works</a>
            <a href="#pricing">Pricing</a>
            <a href="#faq">FAQ</a>
          </nav>
          <a className="btn btn-accent btn-sm" href="/waitlist/" onClick={() => gtag('event', 'waitlist_click', { event_category: 'conversion', link_location: 'nav' })}>Join the waitlist <IArrow size={14} /></a>
        </div>
      </header>

      <Hero tweaks={tweaks} />
      <FearRecognition />
      <WelcomeKit />
      <MonthlyKit />
      <HowItWorks />
      <ThreePromises />
      <Pricing tweaks={tweaks} />
      <FAQ />
      <SiteFooter tweaks={tweaks} />

      <VialkitTweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

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