// Add form-section script tag
const DEFAULTS = JSON.parse(document.getElementById("vialkit-defaults").textContent);

function deriveAccent(hex) {
  // Generate soft + deep variants with simple hex math
  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);
  const formRef = React.useRef(null);

  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}", Georgia, 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]);

  const scrollToForm = () => {
    document.getElementById("start")?.scrollIntoView?.({ behavior: "smooth", block: "start" });
  };
  const scrollToPricing = () => {
    document.getElementById("pricing")?.scrollIntoView?.({ behavior: "smooth", block: "start" });
  };

  return (
    <>
      {/* Nav */}
      <header className="nav">
        <div className="container nav-inner">
          <a href="#" className="logo">
            <span className="logo-mark"></span>{tweaks.brand}
          </a>
          <nav className="nav-links">
            <a href="#problem">Why a kit</a>
            <a href="#welcome-kit">Welcome kit</a>
            <a href="#monthly">Monthly</a>
            <a href="#how">How it works</a>
            <a href="#pricing">Pricing</a>
            <a href="#faq">FAQ</a>
          </nav>
          <button className="btn btn-primary btn-sm" onClick={scrollToPricing}>Get my kit <IArrow size={14} /></button>
        </div>
      </header>

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

      <StickyCTA tweaks={tweaks} onCta={scrollToPricing} />
      <VialkitTweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

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