/* Shared prev/next project navigation — sits between last section and Footer */

function ProjectNav({ prev, next }) {
  const base = {
    display: "flex",
    flexDirection: "column",
    gap: 10,
    textDecoration: "none",
    padding: "28px 32px",
    borderRadius: 16,
    border: "1px solid var(--page-line)",
    background: "var(--page-card)",
    transition: "border-color 150ms, background 150ms",
    flex: 1,
    minWidth: 0,
  }

  const onEnter = (e) => {
    e.currentTarget.style.borderColor = "var(--page-line-strong)"
    e.currentTarget.style.background = "var(--page-bg)"
  }
  const onLeave = (e) => {
    e.currentTarget.style.borderColor = "var(--page-line)"
    e.currentTarget.style.background = "var(--page-card)"
  }

  return (
    <nav
      style={{
        borderTop: "1px solid var(--page-line)",
        background: "var(--page-bg)",
        padding: "56px 0",
      }}
    >
      <div
        className="wrap"
        style={{ display: "flex", gap: 16, alignItems: "stretch" }}
      >
        {prev ? (
          <a
            href={prev.href}
            style={{ ...base, alignItems: "flex-start" }}
            onMouseEnter={onEnter}
            onMouseLeave={onLeave}
          >
            <span
              style={{
                fontFamily: "var(--font-mono)",
                fontSize: 11,
                fontWeight: "bolder",
                letterSpacing: "0.08em",
                textTransform: "uppercase",
                color: "var(--page-muted)",
                display: "flex",
                alignItems: "center",
                gap: 6,
              }}
            >
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <line x1="19" y1="12" x2="5" y2="12"/>
                <polyline points="12 19 5 12 12 5"/>
              </svg>
              Previous
            </span>
            <span
              style={{
                fontFamily: "var(--font-display)",
                fontStyle: "italic",
                fontSize: "clamp(18px, 1.8vw, 22px)",
                lineHeight: 1.25,
                color: "var(--page-fg)",
              }}
            >
              {prev.title}
            </span>
          </a>
        ) : (
          <div style={{ flex: 1 }} />
        )}

        {next ? (
          <a
            href={next.href}
            style={{ ...base, alignItems: "flex-end", textAlign: "right" }}
            onMouseEnter={onEnter}
            onMouseLeave={onLeave}
          >
            <span
              style={{
                fontFamily: "var(--font-mono)",
                fontSize: 11,
                fontWeight: "bolder",
                letterSpacing: "0.08em",
                textTransform: "uppercase",
                color: "var(--page-muted)",
                display: "flex",
                alignItems: "center",
                gap: 6,
              }}
            >
              Next
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <line x1="5" y1="12" x2="19" y2="12"/>
                <polyline points="12 5 19 12 12 19"/>
              </svg>
            </span>
            <span
              style={{
                fontFamily: "var(--font-display)",
                fontStyle: "italic",
                fontSize: "clamp(18px, 1.8vw, 22px)",
                lineHeight: 1.25,
                color: "var(--page-fg)",
              }}
            >
              {next.title}
            </span>
          </a>
        ) : (
          <div style={{ flex: 1 }} />
        )}
      </div>
      <style>{`
        @media (max-width: 600px) {
          .project-nav-wrap { flex-direction: column !important; }
        }
      `}</style>
    </nav>
  )
}

window.ProjectNav = ProjectNav