// Top nav + footer + root composition
const Nav = () => (
  <header className="nav">
    <div className="wrap nav-inner">
      <a className="nav-logo" href="#">
        <span className="nav-mark"></span>
        Datagio
      </a>
      <ul className="nav-links">
        <li><a href="#features">Платформа</a></li>
        <li><a href="#dev">Разработчикам</a></li>
        <li><a href="#enterprise">Enterprise</a></li>
        <li><a href="#pricing">Тарифы</a></li>
        <li><a href="#docs">Docs</a></li>
      </ul>
      <div className="nav-cta">
        <a className="btn btn-link" href="#">Войти</a>
        <a className="btn btn-primary" href="#" style={{ padding: "9px 16px", fontSize: 14 }}>
          Начать бесплатно
        </a>
      </div>
    </div>
  </header>
);

const Footer = () => (
  <footer>
    <div className="wrap">
      <div className="foot-grid">
        <div className="foot-col">
          <a className="nav-logo" href="#" style={{ marginBottom: 16, display: "inline-flex" }}>
            <span className="nav-mark"></span>
            Datagio
          </a>
          <p style={{ fontSize: 14, color: "var(--fg-3)", maxWidth: 320, marginBottom: 18 }}>
            Глобальная инфраструктура, спроектированная инженерами. От первой строчки кода до миллиона запросов в секунду.
          </p>
          <div style={{ display: "flex", gap: 10 }}>
            {["github", "twitter", "discord"].map((s) => (
              <a key={s} href="#" style={{ width: 36, height: 36, borderRadius: 999, border: "1px solid var(--line)", display: "grid", placeItems: "center", color: "var(--fg-3)" }}>
                <Icon name={s} size={15} />
              </a>
            ))}
          </div>
        </div>
        <div className="foot-col">
          <h4>Платформа</h4>
          <ul>
            <li><a href="#">Compute</a></li>
            <li><a href="#">Postgres</a></li>
            <li><a href="#">Redis</a></li>
            <li><a href="#">Object Storage</a></li>
            <li><a href="#">Edge CDN</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h4>Разработчикам</h4>
          <ul>
            <li><a href="#">Документация</a></li>
            <li><a href="#">API Reference</a></li>
            <li><a href="#">CLI</a></li>
            <li><a href="#">SDK</a></li>
            <li><a href="#">Status</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h4>Компания</h4>
          <ul>
            <li><a href="#">О нас</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Customers</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Press</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h4>Доверие</h4>
          <ul>
            <li><a href="#">Security</a></li>
            <li><a href="#">Compliance</a></li>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Terms</a></li>
            <li><a href="#">SLA</a></li>
          </ul>
        </div>
      </div>
      <div className="foot-bottom">
        <span>© 2026 Datagio Systems · Все права защищены</span>
        <span style={{ display: "flex", gap: 14, alignItems: "center" }}>
          <span className="status-pill" style={{ padding: "5px 11px 5px 9px" }}>
            <span className="status-dot" /> All systems operational
          </span>
        </span>
      </div>
    </div>
  </footer>
);

// Tweaks
const DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": 240,
  "violetHue": 295,
  "showBgGrid": true,
  "headlineStyle": "gradient",
  "ctaCopy": "Начать бесплатно"
}/*EDITMODE-END*/;

const App = () => {
  const [t, setTweak] = window.useTweaks ? window.useTweaks(DEFAULTS) : [DEFAULTS, () => {}];

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--blue", `oklch(0.72 0.18 ${t.accentHue})`);
    root.style.setProperty("--violet", `oklch(0.68 0.22 ${t.violetHue})`);
    root.style.setProperty(
      "--grad-primary",
      `linear-gradient(135deg, oklch(0.72 0.18 ${t.accentHue}) 0%, oklch(0.68 0.22 ${t.violetHue}) 100%)`
    );
    root.style.setProperty(
      "--grad-soft",
      `linear-gradient(135deg, oklch(0.72 0.18 ${t.accentHue} / 0.18) 0%, oklch(0.68 0.22 ${t.violetHue} / 0.18) 100%)`
    );
    document.body.style.setProperty("--bg-grid-display", t.showBgGrid ? "block" : "none");
    document.body.classList.toggle("no-bg-grid", !t.showBgGrid);
  }, [t.accentHue, t.violetHue, t.showBgGrid]);

  // Override CTA copy
  React.useEffect(() => {
    document.querySelectorAll("[data-cta]").forEach((el) => { el.textContent = t.ctaCopy; });
  }, [t.ctaCopy]);

  const TweaksPanel = window.TweaksPanel;
  const TweakSection = window.TweakSection;
  const TweakSlider = window.TweakSlider;
  const TweakToggle = window.TweakToggle;
  const TweakRadio = window.TweakRadio;
  const TweakText = window.TweakText;

  return (
    <>
      <Nav />
      <main>
        <HeroSection />
        <MetricsBand />
        <DeveloperSection />
        <FeaturesSection />
        <BusinessSection />
        <PricingSection />
        <TestimonialsSection />
        <DocsSection />
        <FaqSection />
        <CtaBanner />
      </main>
      <Footer />
      {TweaksPanel && (
        <TweaksPanel>
          <TweakSection title="Brand">
            <TweakSlider label="Accent hue (blue)" value={t.accentHue} min={180} max={300} step={2} onChange={(v) => setTweak("accentHue", v)} />
            <TweakSlider label="Secondary hue (violet)" value={t.violetHue} min={250} max={340} step={2} onChange={(v) => setTweak("violetHue", v)} />
          </TweakSection>
          <TweakSection title="Background">
            <TweakToggle label="Точечная сетка" value={t.showBgGrid} onChange={(v) => setTweak("showBgGrid", v)} />
          </TweakSection>
          <TweakSection title="Copy">
            <TweakText label="CTA copy" value={t.ctaCopy} onChange={(v) => setTweak("ctaCopy", v)} />
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
};

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