/* global React, useViewport */
const { useEffect: useEffectPpdp, useState: useStatePpdp } = React;

/* ------------------------------------------------------------------ */
/* ProjectPdpNav                                                       */
/*                                                                    */
/* Sticky-bottom prev/next ring across all routed Project PDPs.       */
/* Mirrors the order shown on the Projects index page (PROJECTS).     */
/* ------------------------------------------------------------------ */

function ProjectPdpNav({ slug, setScreen }) {
  const vw = useViewport();
  const isMobile = vw < 760;

  const list = (window.PROJECTS || []).filter(p => PROJECT_PDP_ROUTES.has(p.slug));
  if (list.length < 2) return null;

  const idx = list.findIndex(p => p.slug === slug);
  if (idx === -1) return null;

  const prev = list[(idx - 1 + list.length) % list.length];
  const next = list[(idx + 1) % list.length];

  const cell = (p, dir) => (
    <a
      onClick={() => setScreen(p.slug)}
      style={{
        flex: 1,
        display: "flex",
        flexDirection: "column",
        gap: 4,
        cursor: "pointer",
        textAlign: dir === "prev" ? "left" : "right",
        padding: isMobile ? "14px 16px" : "16px 22px",
        borderRight: dir === "prev" ? "0.5px solid rgba(26,25,23,0.18)" : "none",
      }}
    >
      <div style={{
        fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase",
        color: "#6c6862", fontWeight: 500,
      }}>
        {dir === "prev" ? "← Previous project" : "Next project →"}
      </div>
      <div style={{
        fontFamily: "var(--font-display, Poppins, sans-serif)",
        fontSize: isMobile ? 14 : 16,
        fontWeight: 500,
        color: "#1a1917",
        letterSpacing: "-0.01em",
      }}>
        {p.name}
      </div>
    </a>
  );

  return (
    <div style={{
      position: "sticky",
      bottom: 0,
      left: 0,
      right: 0,
      zIndex: 20,
      background: "#f5f3ef",
      borderTop: "0.5px solid rgba(26,25,23,0.18)",
      display: "flex",
      alignItems: "stretch",
    }}>
      {cell(prev, "prev")}
      {cell(next, "next")}
    </div>
  );
}

const PROJECT_PDP_ROUTES = new Set([
  "project-adelaide",
  "project-cairns",
  "project-dfw",
  "project-jubilee-place",
  "project-australia-post",
  "project-bnym-gilead",
  "project-computershare",
  "project-ipswich-rail",
  "project-uni-melbourne",
  "project-buho",
  "project-brookfield",
  "project-living-edge",
  "project-sydney-contemporary",
  "project-61-mary",
  "project-arthur-st",
  "project-aut",
  "project-abc",
  "project-space-discovery",
  "project-bnz",
  "project-best-hub",
  "project-birubi-st",
  "project-by-artisans",
  "project-canadian-academy",
  "project-casa-cultura",
  "project-chester-bakery",
  "project-chester-residence",
  "project-coca-cola",
  "project-currumbin-surf",
  "project-immigration",
  "project-embassy-au",
  "project-flinders-fest",
  "project-flinders",
  "project-green-square",
  "project-happyco",
  "project-ipc",
  "project-ipswich-court",
  "project-jcu",
  "project-kyocera",
  "project-lone-pine",
  "project-longueville",
  "project-macquarie",
  "project-mirabilia",
  "project-mk-lawyers",
  "project-mobo",
  "project-monash",
  "project-moore",
  "project-morning-after",
  "project-nab",
  "project-ownworld",
  "project-ptw-2026",
  "project-penfolds",
  "project-perth-airport",
  "project-perth-childrens",
  "project-piccadilly",
  "project-ping-pong",
  "project-portland",
  "project-powerhouse",
  "project-pwc",
  "project-pulteney",
  "project-qanstruct",
  "project-qag-hall",
  "project-qag-store",
  "project-san-diego",
  "project-santa-monica",
  "project-st-leonards",
  "project-state-lib-tas",
  "project-stokehouse",
  "project-student-one",
  "project-suncorp",
  "project-syd-olympic",
  "project-telethon",
  "project-temc-2019",
  "project-cathedral",
  "project-hedberg",
  "project-tonsley",
  "project-uq",
  "project-usc",
  "project-wsu",
  "project-whittlesea",
  "project-woodcroft",
  "project-wb-perth",
  "project-woolly-mammoth",
  "project-yolk",
  "project-ndy",
]);

window.ProjectPdpNav = ProjectPdpNav;
window.PROJECT_PDP_ROUTES = PROJECT_PDP_ROUTES;