/* Top navigation + footer. Minimal, editorial. */

const NAV_ITEMS = [
  { id: "home",     label: "Home" },
  { id: "about",    label: "About" },
  { id: "services", label: "Services" },
  { id: "work",     label: "Work" },
  { id: "tasks",    label: "Tasks", hint: "internal" },
];

function Nav({ route, setRoute }) {
  return (
    <header className="nav-wrap" data-screen-label="Nav">
      <div className="shell nav">
        <button
          className="wordmark"
          onClick={() => setRoute("home")}
          aria-label="Go home"
        >
          <span className="wordmark-by">by</span>
          <span className="wordmark-name">DELANEY<sup className="wordmark-sup">¹</sup></span>
        </button>
        <nav className="nav-links">
          {NAV_ITEMS.map((item) => (
            <button
              key={item.id}
              className={"nav-link" + (route === item.id ? " is-active" : "")}
              onClick={() => setRoute(item.id)}
            >
              {item.label}
              {item.hint && route !== item.id && (
                <span className="nav-link-hint">{item.hint}</span>
              )}
            </button>
          ))}
        </nav>
      </div>
      <hr className="divider" />
      <style>{`
        .nav-wrap {
          position: sticky;
          top: 0;
          z-index: 50;
          background: rgba(250, 247, 242, 0.92);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
        }
        .nav {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 24px;
          padding-block: 22px 20px;
        }
        .wordmark {
          background: none;
          border: 0;
          padding: 0;
          display: inline-flex;
          align-items: baseline;
          gap: 6px;
          color: var(--charcoal);
        }
        .wordmark-by {
          font-family: var(--serif);
          font-size: 14px;
          font-style: italic;
          font-weight: 400;
          color: var(--ink-3);
          letter-spacing: 0.02em;
        }
        .wordmark-name {
          font-family: var(--display);
          font-weight: 900;
          font-size: 22px;
          color: var(--charcoal);
          letter-spacing: 0.005em;
          line-height: 1;
          display: inline-flex;
          align-items: baseline;
        }
        .wordmark-sup {
          font-family: var(--display);
          font-weight: 700;
          font-size: 0.55em;
          color: var(--terracotta);
          margin-left: 1px;
          line-height: 1;
          vertical-align: super;
        }
        .nav-links {
          display: flex;
          align-items: center;
          gap: clamp(8px, 2vw, 28px);
        }
        .nav-link {
          background: none;
          border: 0;
          padding: 8px 4px;
          font-family: var(--sans);
          font-size: 14px;
          color: var(--ink-2);
          letter-spacing: 0.01em;
          transition: color var(--dur) var(--ease);
          position: relative;
          display: inline-flex;
          align-items: baseline;
          gap: 6px;
        }
        .nav-link:hover { color: var(--charcoal); }
        .nav-link.is-active { color: var(--charcoal); }
        .nav-link.is-active::after {
          content: "";
          position: absolute;
          left: 4px; right: 4px; bottom: -2px;
          height: 1px;
          background: var(--terracotta);
        }
        .nav-link-hint {
          font-size: 9px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--ink-muted);
          padding: 2px 5px;
          border: 1px solid var(--line);
          border-radius: 2px;
        }
        @media (max-width: 540px) {
          .nav-links { gap: 4px; }
          .nav-link { font-size: 13px; padding: 8px 6px; }
          .nav-link-hint { display: none; }
          .wordmark-name { font-size: 26px; }
        }
      `}</style>
    </header>
  );
}

function Footer({ setRoute }) {
  return (
    <footer className="footer">
      <div className="shell footer-inner">
        <div className="footer-mark">
          <div className="footer-by">
            <span className="footer-by-eyebrow">by</span>
            <span className="footer-by-name">DELANEY<sup className="footer-sup">¹</sup></span>
          </div>
          <div className="footer-sub">
            AI-powered marketing studio.<br />
            Remote-first, working with clients across the U.S.
          </div>
        </div>
        <div className="footer-cols">
          <div>
            <div className="eyebrow">Site</div>
            <ul>
              <li><button onClick={() => setRoute("home")}>Home</button></li>
              <li><button onClick={() => setRoute("about")}>About</button></li>
              <li><button onClick={() => setRoute("services")}>Services</button></li>
              <li><button onClick={() => setRoute("work")}>Work</button></li>
            </ul>
          </div>
          <div>
            <div className="eyebrow">Reach me</div>
            <ul>
              <li><a className="link-underline" href="mailto:hi@bydelaney.com">hi@bydelaney.com</a></li>
              <li><a className="link-underline" href="#">Instagram</a></li>
              <li><a className="link-underline" href="#">LinkedIn</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div className="shell footer-fineprint">
        <div>© {new Date().getFullYear()} Delaney Ingalls · all rights reserved</div>
        <div className="footer-tag">AI<sup className="footer-tag-sup">¹</sup> · marketing studio</div>
      </div>
      <style>{`
        .footer {
          margin-top: 120px;
          padding: 72px 0 32px;
          border-top: 1px solid var(--line);
          background: var(--cream-deep);
        }
        .footer-inner {
          display: grid;
          grid-template-columns: 1.4fr 1fr;
          gap: 64px;
        }
        .footer-by {
          display: inline-flex;
          align-items: baseline;
          gap: 8px;
          margin-bottom: 10px;
        }
        .footer-by-eyebrow {
          font-family: var(--serif);
          font-style: italic;
          font-size: 16px;
          color: var(--ink-3);
        }
        .footer-by-name {
          font-family: var(--display);
          font-weight: 900;
          font-size: 24px;
          letter-spacing: 0.005em;
          color: var(--charcoal);
          text-transform: uppercase;
          line-height: 1;
        }
        .footer-sup {
          font-family: var(--display);
          font-weight: 700;
          font-size: 0.55em;
          color: var(--terracotta);
          margin-left: 1px;
          line-height: 1;
        }
        .footer-sub { color: var(--ink-2); font-size: 14px; line-height: 1.6; max-width: 320px; }
        .footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
        .footer-cols ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
        .footer-cols button { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-2); text-align: left; }
        .footer-cols button:hover { color: var(--charcoal); }
        .footer-fineprint {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: 24px;
          margin-top: 64px;
          padding-top: 24px;
          border-top: 1px solid var(--line);
          font-size: 12px;
          color: var(--ink-3);
        }
        .footer-tag {
          font-family: var(--display);
          font-weight: 700;
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--ink-3);
        }
        .footer-tag-sup {
          color: var(--terracotta);
          font-size: 0.85em;
        }
        @media (max-width: 720px) {
          .footer-inner { grid-template-columns: 1fr; gap: 40px; }
          .footer-cols { grid-template-columns: 1fr 1fr; }
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, { Nav, Footer });