/* global React */

function NavBar() {
  const items = [
    ["services", "Services"],
    ["about", "About"],
    ["faq", "FAQ"],
    ["contact", "Contact"],
  ];
  return (
    <header style={navStyles.bar}>
      <a href="#top" style={navStyles.brand} onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }}>
        <img src="assets/logo.svg" alt="Parade Bookkeeping" style={{ height: 56 }} />
      </a>
      <nav style={navStyles.nav}>
        {items.map(([id, label]) => (
          <a
            key={id}
            href={`#${id}`}
            onClick={(e) => {
              e.preventDefault();
              const el = document.getElementById(id);
              if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
            }}
            style={navStyles.link}
          >
            {label}
          </a>
        ))}
      </nav>
      <div style={navStyles.actions}>
        <a href="tel:7199642095" style={navStyles.signIn}>(719) 964-2095</a>
      </div>
    </header>
  );
}

const navStyles = {
  bar: {
    position: "sticky", top: 0, zIndex: 50,
    display: "flex", alignItems: "center", justifyContent: "space-between",
    padding: "8px 40px", background: "rgba(236, 230, 218, 0.92)",
    backdropFilter: "saturate(140%) blur(8px)",
    WebkitBackdropFilter: "saturate(140%) blur(8px)",
    borderBottom: "1px solid var(--border)",
  },
  brand: { display: "flex", alignItems: "center", textDecoration: "none" },
  nav: { display: "flex", gap: 28 },
  link: {
    fontSize: 16, fontWeight: 500, color: "var(--fg)",
    textDecoration: "none", padding: "8px 0", whiteSpace: "nowrap",
    borderBottom: "2px solid transparent", transition: "all 200ms",
  },
  actions: { display: "flex", alignItems: "center", gap: 18, flexShrink: 0 },
  signIn: {
    fontSize: 16, fontWeight: 600, color: "var(--fg-muted)",
    textDecoration: "none", fontVariantNumeric: "tabular-nums",
    fontFamily: "var(--font-mono)", whiteSpace: "nowrap",
  },
};

function Footer() {
  return (
    <footer style={footerStyles.wrap}>
      <div style={footerStyles.top}>
        <img src="assets/logo-mono-light.svg" style={{ height: 36 }} alt="Parade Bookkeeping" />
        <div style={footerStyles.links}>
          <a href="#services" style={footerStyles.link}>Services</a>
          <a href="#about" style={footerStyles.link}>About</a>
          <a href="#faq" style={footerStyles.link}>FAQ</a>
          <a href="#contact" style={footerStyles.link}>Contact</a>
        </div>
      </div>
      <div style={footerStyles.btm}>
        <span>© 2026 Parade Bookkeeping.</span>
        <span style={{ fontFamily: "var(--font-mono)" }}>paradebookkeeping@gmail.com  ·  (719) 964-2095</span>
      </div>
    </footer>
  );
}

const footerStyles = {
  wrap: { background: "#1A1814", color: "#ECE6DA", padding: "48px 40px 24px" },
  top: {
    display: "flex", justifyContent: "space-between", alignItems: "center",
    maxWidth: 1180, margin: "0 auto", flexWrap: "wrap", gap: 20,
  },
  links: { display: "flex", gap: 24 },
  link: { color: "#ECE6DA", textDecoration: "none", fontSize: 14 },
  btm: {
    marginTop: 32, paddingTop: 20, borderTop: "1px solid #2A2620",
    display: "flex", justifyContent: "space-between", fontSize: 12, color: "#9C9285",
    maxWidth: 1180, marginLeft: "auto", marginRight: "auto", flexWrap: "wrap", gap: 8,
  },
};

window.NavBar = NavBar;
window.Footer = Footer;