Responsive Neuronal Background

import React from "react";
import { Component } from "@/components/ui/responsive-neuronal-background";
import { useEffect, useState } from "react";

const useHtmlDarkMode = () => {
  const getIsDark = () => {
    if (typeof document === "undefined") return false;
    return document.documentElement.classList.contains("dark");
  };

  const [isDark, setIsDark] = useState(getIsDark);

  useEffect(() => {
    if (typeof document === "undefined") return;

    const root = document.documentElement;
    const updateTheme = () => setIsDark(root.classList.contains("dark"));

    updateTheme();

    const observer = new MutationObserver(() => {
      updateTheme();
    });

    observer.observe(root, {
      attributes: true,
      attributeFilter: ["class"],
    });

    return () => observer.disconnect();
  }, []);

  return isDark;
}

const APP_STYLES = {
  light: {
    sectionStyle: {
      background: "linear-gradient(180deg, #f8fbff 0%, #eaf2ff 100%)",
    },
    eyebrow: "text-blue-600/80",
    title: "text-slate-900",
    body: "text-slate-600",
    button:
      "rounded-2xl border border-blue-300/60 bg-white/70 px-6 py-3 text-slate-900 shadow-sm backdrop-blur hover:bg-white",
  },
  dark: {
    sectionStyle: {
      background: "linear-gradient(180deg, #07111f 0%, #0b1528 100%)",
    },
    eyebrow: "text-cyan-300/80",
    title: "text-white",
    body: "text-slate-300",
    button:
      "rounded-2xl border border-cyan-400/30 bg-cyan-400/10 px-6 py-3 text-white backdrop-blur hover:bg-cyan-400/15",
  },
} as const;

export default function DemoOne() {
  const isDark = useHtmlDarkMode();

  return (
    <section className="relative flex min-h-[100vh] w-full items-center justify-center overflow-hidden bg-[linear-gradient(180deg,#f8fbff_0%,#eaf2ff_100%)] dark:bg-[linear-gradient(180deg,#07111f_0%,#0b1528_100%)]">
      <Component
        theme={isDark ? "dark" : "light"}
        config={{
          signalActivityOverall: 0.34,
          signalActivityNearMouse: 0.8,
          neuronDensity: 1.9,
          opacity: isDark ? 0.3 : 0.8
        }}
      />

      <div className="relative z-10 mx-auto flex w-full max-w-7xl justify-center px-6 py-28">
        <div className="max-w-3xl text-center">
          <p className="mb-4 text-sm font-semibold uppercase tracking-[0.2em] text-black-900/80 dark:text-cyan-300/80">
            Cognitive infrastructure
          </p>

          <h1 className="text-5xl font-semibold leading-tight text-slate-900 md:text-7xl dark:text-white">
            Build products that think at network speed.
          </h1>

          <p className="mt-6 mx-auto max-w-2xl text-lg text-slate-600 dark:text-slate-300">
            A living interface that routes intelligence, adapts to intent,
            and keeps the user focused on the action that matters.
          </p>

          <div className="mt-8 flex justify-center">
            <button className="rounded-2xl border border-blue-300/60 bg-white/70 px-6 py-3 text-slate-900 shadow-sm backdrop-blur hover:bg-white dark:border-cyan-400/30 dark:bg-cyan-400/10 dark:text-white dark:hover:bg-cyan-400/15">
              Get started
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}