// 10x Newsletter - Header / Footer / shared chrome

const { useState, useEffect, useRef, useMemo } = React;

function Header({ route, navigate, accent }) {
  const links = [
    { to: "archive", label: "Archive" },
    { to: "about", label: "About" },
  ];
  return (
    <header className="nl-header">
      <a
        href="#/"
        className="nl-logo"
        onClick={(e) => { e.preventDefault(); navigate("home"); }}
        aria-label="10x Newsletter, home"
      >
        <span className="nl-logo-mark">10&times;</span>
        <span className="nl-logo-word">Newsletter</span>
      </a>
      <nav className="nl-nav">
        {links.map((l) => (
          <a
            key={l.to}
            href={`#/${l.to}`}
            onClick={(e) => { e.preventDefault(); navigate(l.to); }}
            className={"nl-nav-link" + (route.startsWith(l.to) ? " is-active" : "")}
          >
            {l.label}
          </a>
        ))}
      </nav>
    </header>
  );
}

function Footer({ navigate }) {
  return (
    <footer className="nl-footer">
      <div className="nl-footer-inner">
        <div className="nl-footer-line">
          <span>&copy; 2026 10xnewsletter.ai</span>
          <span className="nl-dot">&middot;</span>
          <a href="/rss.xml" target="_blank" rel="noopener noreferrer">RSS</a>
          <span className="nl-dot">&middot;</span>
          <a href="#/about" onClick={(e) => { e.preventDefault(); navigate("about"); }}>About</a>
        </div>
        <div className="nl-footer-tag">Read for the decade, not the day.</div>
      </div>
    </footer>
  );
}

window.Header = Header;
window.Footer = Footer;