// Strategic Technology Solutions — shared components
// Logo, SiteHeader (routing + theme toggle), SiteFooter, scroll-reveal hook.

// ---- Valicen logo (official brand lockup). Light page -> navy; dark -> reversed. ----
function Logo({ variant = "auto", theme }) {
  const reversed = variant === "dark" || variant === "auto" && theme === "dark";
  const src = reversed ? "assets/valicen-logo-white-accent.svg" : "assets/valicen-logo-navy.svg";
  return <img className="logo-img" src={src} alt="Valicen — Strategic Technology Solutions" />;
}

// ---- Scroll reveal: adds .in when element scrolls into view ----
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.in)");
    if (!("IntersectionObserver" in window)) {
      els.forEach((e) => e.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((en) => {
          if (en.isIntersecting) {
            en.target.classList.add("in");
            io.unobserve(en.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
    );
    els.forEach((e, i) => {
      e.style.transitionDelay = Math.min(i % 6, 5) * 60 + "ms";
      io.observe(e);
    });
    return () => io.disconnect();
  });
}

// ---- Animated count-up for stat numbers ----
// The FINAL value is the default render (so crawlers, print, throttled tabs,
// and reduced-motion users always see real numbers). The count-up is purely an
// enhancement, and small values (< 10) don't animate at all.
function CountUp({ value, suffix = "", prefix = "", duration = 1400 }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (value < 10 || reduce || !("IntersectionObserver" in window)) return;
    let started = false;
    const io = new IntersectionObserver((ents) => {
      ents.forEach((e) => {
        if (e.isIntersecting && !started) {
          started = true;
          io.disconnect();
          const start = performance.now();
          const tick = (now) => {
            const p = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            el.textContent = prefix + Math.round(value * eased) + suffix;
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.5 });
    io.observe(el);
    return () => io.disconnect();
  }, [value, suffix, prefix, duration]);
  return <span ref={ref}>{prefix}{value}{suffix}</span>;
}

// ---- Header ----
function SiteHeader({ page, go, theme, toggleTheme }) {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {window.lucide && lucide.createIcons();});
  const links = [
  { id: "services", label: "Services" },
  { id: "about", label: "About" },
  { id: "work", label: "Case studies" },
  { id: "contact", label: "Contact" }];

  const nav = (id) => {go(id);setOpen(false);};
  return (
    <header className="hdr">
      <div className="wrap hdr-in">
        <a href="#" onClick={(e) => {e.preventDefault();nav("home");}} aria-label="Valicen home"><Logo theme={theme} /></a>
        <nav className="hdr-nav">
          {links.map((l) =>
          <a key={l.id} href="#" className={page === l.id ? "active" : ""}
          onClick={(e) => {e.preventDefault();nav(l.id);}}>{l.label}</a>
          )}
        </nav>
        <div className="hdr-right">
          <button className="theme-btn" onClick={toggleTheme} aria-label="Toggle theme" title="Toggle light/dark">
            <i data-lucide={theme === "dark" ? "sun" : "moon"}></i>
          </button>
          <button className="btn btn-primary" onClick={() => nav("contact")}>Get started</button>
        </div>
        <button className="burger" onClick={() => setOpen((o) => !o)} aria-label="Menu">
          <i data-lucide={open ? "x" : "menu"}></i>
        </button>
      </div>
      <div className={"mobile-menu" + (open ? " open" : "")}>
        {links.map((l) =>
        <a key={l.id} href="#" onClick={(e) => {e.preventDefault();nav(l.id);}}>{l.label}</a>
        )}
        <a href="#" onClick={(e) => {e.preventDefault();toggleTheme();}}>
          {theme === "dark" ? "Light mode" : "Dark mode"}
        </a>
        <button className="btn btn-primary btn-lg btn-block" style={{ marginTop: 14 }} onClick={() => nav("contact")}>Get started</button>
      </div>
    </header>);

}

// ---- Footer ----
function SiteFooter({ go }) {
  const cols = [
  { h: "Services", items: [["Cybersecurity", "services"], ["Networking", "services"], ["Data center & servers", "services"], ["Managed workstations", "services"], ["Cloud services", "services"], ["Data protection", "services"]] },
  { h: "Company", items: [["About us", "about"], ["How we do business", "commitments"], ["Case studies", "work"], ["Examples of our work", "samples"], ["Contact", "contact"]] },
  { h: "Get started", items: [["Get a quote", "contact"], ["Talk to an engineer", "contact"]] }];

  return (
    <footer className="ftr">
      <div className="wrap">
        <div className="ftr-top">
          <div>
            <Logo variant="dark" />
            <p className="ftr-blurb">Valicen™ is an IT managed services provider, cybersecurity-infused. Secure, practical technology your business can trust.</p>
          </div>
          {cols.map((c) =>
          <div key={c.h}>
              <h5>{c.h}</h5>
              <ul>{c.items.map(([label, id]) =>
              <li key={label}><a href="#" onClick={(e) => {e.preventDefault();go(id);}}>{label}</a></li>
              )}</ul>
            </div>
          )}
        </div>
        <div className="ftr-bot">
          <span>© 2026 Valicen LLC. All rights reserved.</span>
          <span className="sp"></span>
          <a href="#" onClick={(e) => { e.preventDefault(); go("privacy"); }}>Privacy</a>
          <a href="#" onClick={(e) => { e.preventDefault(); go("terms"); }}>Terms</a>
          <a href="#" onClick={(e) => { e.preventDefault(); go("downloads"); }}>Downloads</a>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Logo, useReveal, CountUp, SiteHeader, SiteFooter });