// Root app: Header, Footer, theme toggle, composition

const Logo = () => (
  <div className="flex items-center">
    <span className="font-display text-[18px] font-extrabold tracking-[-0.045em] leading-none">
      Компас<span className="text-primary">.</span>
    </span>
  </div>
);

const Header = ({ dark, setDark }) => {
  const [open, setOpen] = React.useState(false);
  const navItems = [
    ["Проблемы", "#pains"],
    ["Что даёт", "#values"],
    ["Как работает", "#features"],
    ["Безопасность", "#security"],
    ["Калькулятор", "#roi"],
    ["Внедрение", "#rollout"],
    ["Документация", "/docs"],
  ];
  return (
    <header className="sticky top-0 z-40 h-14 border-b border-border bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/75">
      <div className="mx-auto max-w-7xl h-full px-6 lg:px-10 flex items-center justify-between gap-6">
        <a href="#hero"><Logo /></a>
        <nav className="hidden lg:flex items-center gap-7 text-[13.5px]">
          {navItems.map(([l,h])=>(
            <a key={l} href={h} className="text-muted-foreground hover:text-foreground transition-colors">{l}</a>
          ))}
        </nav>
        <div className="flex items-center gap-2">
          <button onClick={()=>setDark(d=>!d)}
            aria-label={dark?"Светлая тема":"Тёмная тема"}
            className="grid h-9 w-9 place-items-center rounded-md border border-border hover:bg-muted transition-colors">
            {dark ? <I.Sun size={15} /> : <I.Moon size={15} />}
          </button>
          <MagneticCTA><Button variant="primary" size="sm" icon={I.ArrowRight} href="/dashboard" className="hidden sm:inline-flex">
            Записаться на консультацию
          </Button></MagneticCTA>
          <button onClick={()=>setOpen(o=>!o)} className="lg:hidden grid h-9 w-9 place-items-center rounded-md border border-border" aria-label="Меню">
            {open ? <I.X size={16} /> : <I.Menu size={16} />}
          </button>
        </div>
      </div>
      {open && (
        <div className="lg:hidden border-t border-border bg-background">
          <div className="mx-auto max-w-7xl px-6 py-3 flex flex-col">
            {navItems.map(([l,h])=>(
              <a key={l} href={h} onClick={()=>setOpen(false)} className="py-2.5 text-[14px] text-muted-foreground hover:text-foreground">{l}</a>
            ))}
          </div>
        </div>
      )}
    </header>
  );
};

const Footer = () => (
  <footer className="border-t border-border py-10">
    <div className="mx-auto max-w-7xl px-6 lg:px-10 flex flex-col md:flex-row md:items-center md:justify-between gap-6">
      <div className="flex items-center gap-4">
        <Logo />
        <span className="text-[12px] text-muted-foreground">· Контроль дебиторки на данных 1С · 2026</span>
      </div>
      <div className="flex flex-wrap items-center gap-x-5 gap-y-2 text-[13px] text-muted-foreground">
        {["Документация","Интеграции","Поддержка","Демо-доступ","Для малого бизнеса"].map(l=>(
          <a key={l} href="#" className="hover:text-foreground transition-colors">{l}</a>
        ))}
      </div>
    </div>
  </footer>
);

function App() {
  const [dark, setDark] = React.useState(()=> {
    try {
      const v = localStorage.getItem("kompas.dark");
      if (v === "0") return false;
    } catch(e){}
    return true;
  });
  React.useEffect(()=>{
    document.documentElement.classList.toggle("dark", dark);
    try { localStorage.setItem("kompas.dark", dark?"1":"0"); } catch(e){}
  }, [dark]);

  return (
    <div className="min-h-screen">
      <ScrollProgress />
      <Header dark={dark} setDark={setDark} />
      <main>
        <HeroSection />
        <PainsSection />
        <ValuesSection />
        <FeaturesSection />
        <TrustSection />
        <ROISection />
        <RolloutSection />
        <FinalCTA />
      </main>
      <Footer />
    </div>
  );
}

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