/* Shell.jsx — Header, footer, marquee, navigation */

// Tiny hook: returns a CMS value that re-renders when /api/cms finishes loading.
function useCMS(key, fallback) {
  const initial = (window.CMS && window.CMS.get) ? window.CMS.get(key, fallback) : fallback;
  const [v, setV] = React.useState(initial);
  React.useEffect(() => {
    const onReady = () => {
      if (window.CMS && window.CMS.get) setV(window.CMS.get(key, fallback));
    };
    if (window.CMS && window.CMS._ready) onReady();
    else window.addEventListener("cms:ready", onReady);
    return () => window.removeEventListener("cms:ready", onReady);
  }, [key, fallback]);
  return v;
}
window.useCMS = useCMS;

const NAV_ITEMS = [
  { id: "home", label: "Home" },
  { id: "camps", label: "Camps" },
  { id: "programs", label: "Programs" },
  { id: "gallery", label: "Gallery" },
  { id: "venice", label: "Venice Island" },
  { id: "mece-choir", label: "MECE Choir" },
  { id: "collaboration", label: "Partners" },
  { id: "workshop", label: "Workshops" },
];

function Logo({ onClick, isShop }) {
  return (
    <a
      href="#home"
      onClick={onClick}
      style={{
        display: "flex",
        alignItems: "center",
        gap: 10,
        textDecoration: "none",
        color: "var(--c-ink)",
      }}
    >
      {/* CR #224: header logo is the "Find Your Path" badge from the footer,
          recolored to terracotta orange (#D8552B). Same 44x44 size as the
          previous custom SVG logo. CR #268: on the /shop page the badge
          swaps to a red recolor so the header matches the page palette. */}
      <img
        src={isShop ? "/img/find-your-path-red.png" : "/img/find-your-path-orange.png"}
        alt="Find Your Path -- Performing Arts"
        width="44"
        height="44"
        style={{ display: "block" }}
      />
      <div style={{ lineHeight: 1.05 }}>
        <div
          style={{
            fontFamily: "var(--f-display)",
            fontWeight: 800,
            fontSize: 18,
            letterSpacing: "-0.02em",
          }}
        >
          Performing Arts
        </div>
        <div
          style={{
            fontFamily: "var(--f-mono)",
            fontSize: 9.5,
            letterSpacing: "0.14em",
            textTransform: "uppercase",
            color: "var(--c-ink-soft)",
          }}
        >
          Philadelphia Parks &amp; Recreation
        </div>
      </div>
    </a>
  );
}

function Header({ route, setRoute }) {
  const [open, setOpen] = React.useState(false);
  const handleNav = (id) => (e) => {
    e.preventDefault();
    setRoute(id);
    setOpen(false);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
    <header
      style={{
        position: "sticky",
        top: 0,
        zIndex: 50,
        background: "var(--c-cream)",
        borderBottom: "2px solid var(--c-ink)",
      }}
    >
      <div
        className="container"
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "16px 32px",
          gap: 24,
        }}
      >
        <Logo onClick={handleNav("home")} isShop={route === "shop" || route === "shop-success"} />

        <nav
          className="nav-desktop"
          style={{
            display: "flex",
            alignItems: "center",
            gap: 4,
          }}
        >
          {NAV_ITEMS.map((item) => {
            const active = route === item.id;
            return (
              <a
                key={item.id}
                href={`#${item.id}`}
                onClick={handleNav(item.id)}
                style={{
                  padding: "9px 14px",
                  borderRadius: 999,
                  textDecoration: "none",
                  fontFamily: "var(--f-display)",
                  fontWeight: 600,
                  fontSize: 14.5,
                  letterSpacing: "-0.005em",
                  color: active ? "var(--c-paper)" : "var(--c-ink)",
                  background: active ? "var(--c-ink)" : "transparent",
                  transition: "background 120ms",
                }}
                onMouseEnter={(e) => {
                  if (!active) e.currentTarget.style.background = "var(--c-cream-deep)";
                }}
                onMouseLeave={(e) => {
                  if (!active) e.currentTarget.style.background = "transparent";
                }}
              >
                {item.label}
              </a>
            );
          })}
          <a href="#camps" onClick={handleNav("camps")} className="btn ochre small" style={{ marginLeft: 8 }}>
            Register →
          </a>
        </nav>

        <button
          className="nav-mobile-toggle"
          onClick={() => setOpen(!open)}
          aria-label="Open menu"
          style={{
            display: "none",
            background: "var(--c-paper)",
            border: "2px solid var(--c-ink)",
            borderRadius: 12,
            padding: "8px 14px",
            fontFamily: "var(--f-display)",
            fontWeight: 700,
          }}
        >
          {open ? "Close" : "Menu"}
        </button>
      </div>

      {open && (
        <div
          className="nav-mobile"
          style={{
            borderTop: "2px solid var(--c-ink)",
            background: "var(--c-paper)",
            padding: "14px 24px 22px",
          }}
        >
          {NAV_ITEMS.map((item) => (
            <a
              key={item.id}
              href={`#${item.id}`}
              onClick={handleNav(item.id)}
              style={{
                display: "block",
                padding: "12px 8px",
                borderBottom: "1px solid var(--c-line)",
                textDecoration: "none",
                color: "var(--c-ink)",
                fontFamily: "var(--f-display)",
                fontWeight: 600,
                fontSize: 18,
              }}
            >
              {item.label}
            </a>
          ))}
        </div>
      )}

      <style>{`
        @media (max-width: 980px) {
          .nav-desktop { display: none !important; }
          .nav-mobile-toggle { display: inline-flex !important; }
        }
      `}</style>
    </header>
  );
}

function Marquee({ items }) {
  return (
    <div className="marquee" role="presentation">
      <div className="marquee-track">
        {Array.from({ length: 3 }).map((_, i) => (
          <React.Fragment key={i}>
            {items.map((t, j) => (
              <React.Fragment key={`${i}-${j}`}>
                <span>{t}</span>
                <span className="star">✦</span>
              </React.Fragment>
            ))}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function Footer({ setRoute }) {
  const handleNav = (id) => (e) => {
    e.preventDefault();
    setRoute(id);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };
  return (
    <footer
      style={{
        background: "var(--c-ink)",
        color: "var(--c-cream)",
        padding: "72px 0 40px",
      }}
    >
      <div className="container">
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1.4fr 1fr 1fr 1fr",
            gap: 40,
            marginBottom: 56,
          }}
          className="footer-grid"
        >
          <div>
            <img
              src="/img/ppr-logo.png"
              alt="Philadelphia Parks & Recreation Performing Arts logo"
              style={{
                width: 110,
                height: "auto",
                display: "block",
                marginBottom: 18,
              }}
            />
            <div
              className="display"
              style={{
                fontSize: 36,
                color: "var(--c-cream)",
                marginBottom: 16,
                lineHeight: 1,
              }}
            >
              Make some<br />noise.
            </div>
            <p style={{ color: "rgba(251,243,226,0.7)", fontSize: 14, maxWidth: 320 }}>
              The Performing Arts Office of Philadelphia Parks &amp; Recreation runs
              camps, programs, and showcases in neighborhoods across the city.
            </p>
            <SocialRow />
          </div>
          <FooterCol title="Programs">
            <FooterLink onClick={handleNav("camps")}>Summer Camps</FooterLink>
            <FooterLink onClick={handleNav("programs")}>Dance Programs</FooterLink>
            <FooterLink onClick={handleNav("programs")}>Drama Programs</FooterLink>
            <FooterLink onClick={handleNav("programs")}>Vocal Lessons</FooterLink>
            <FooterLink onClick={handleNav("mece-choir")}>MECE Choir</FooterLink>
            <FooterLink onClick={handleNav("workshop")}>Workshop Development</FooterLink>
          </FooterCol>
          <FooterCol title="Get Involved">
            <FooterLink onClick={handleNav("about")}>About Us</FooterLink>
            <FooterLink onClick={handleNav("collaboration")}>Partners</FooterLink>
            <FooterLink onClick={handleNav("volunteer")}>Volunteer Opportunities</FooterLink>
            <FooterLink onClick={handleNav("gallery")}>Photo Gallery</FooterLink>
            <FooterLink onClick={handleNav("venice")}>Venice Island PAC</FooterLink>
          </FooterCol>
          <FooterCol title="Forms">
            <FooterLink onClick={handleNav("employment")}>Employment Application</FooterLink>
            <FooterLink onClick={handleNav("promote")}>Program Submission</FooterLink>
            <FooterLink onClick={handleNav("register")}>Registration Form</FooterLink>
            <FooterLink onClick={handleNav("testimonials")}>Testimonials</FooterLink>
          </FooterCol>
          <FooterCol title="Contact">
            <div style={{ color: "rgba(251,243,226,0.7)", fontSize: 14, lineHeight: 1.7 }}>
              1515 Arch Street<br />
              10th Floor<br />
              Philadelphia, PA 19102<br /><br />
              <a href="tel:+12156853585" style={{ color: "var(--c-accent)" }}>
                (215) 685-3585
              </a><br />
              <a href="mailto:Joseph.J.Pospiech@phila.gov" style={{ color: "var(--c-accent)" }}>
                Joseph.J.Pospiech@phila.gov
              </a>
            </div>
          </FooterCol>
        </div>

        <div
          style={{
            paddingTop: 28,
            borderTop: "1px solid rgba(251,243,226,0.2)",
            display: "flex",
            justifyContent: "space-between",
            flexWrap: "wrap",
            gap: 16,
            fontFamily: "var(--f-mono)",
            fontSize: 11,
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            color: "rgba(251,243,226,0.55)",
          }}
        >
          <div>© 2026 Philadelphia Department of Parks &amp; Recreation</div>
          <div style={{ display: "flex", gap: 24, alignItems: "center" }}>
            <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Privacy</a>
            <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Right to Know</a>
            <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Terms</a>
            <a href="mailto:dev@bootsoliver.com" style={{ color: "inherit", textDecoration: "none", opacity: 0.8 }}>
              Made by Fishtown Dev Co LLC →
            </a>
          </div>
        </div>
      </div>

      <style>{`
        .footer-icon {
          width: 36px; height: 36px; border-radius: 999px;
          background: var(--c-cream); color: var(--c-ink);
          display: inline-flex; align-items: center; justify-content: center;
          text-decoration: none; font-weight: 800; font-family: var(--f-display);
          border: 2px solid var(--c-cream);
          transition: transform 120ms;
        }
        .footer-icon:hover { transform: rotate(-6deg); background: var(--c-accent); }
        @media (max-width: 880px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 520px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

function FooterCol({ title, children }) {
  return (
    <div>
      <div
        style={{
          fontFamily: "var(--f-mono)",
          fontSize: 11,
          letterSpacing: "0.16em",
          textTransform: "uppercase",
          color: "var(--c-accent)",
          marginBottom: 14,
        }}
      >
        {title}
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>{children}</div>
    </div>
  );
}

function FooterLink({ children, onClick, href }) {
  return (
    <a
      href={href || "#"}
      onClick={onClick}
      style={{
        color: "var(--c-cream)",
        textDecoration: "none",
        fontSize: 14.5,
        fontFamily: "var(--f-body)",
      }}
      onMouseEnter={(e) => (e.currentTarget.style.color = "var(--c-accent)")}
      onMouseLeave={(e) => (e.currentTarget.style.color = "var(--c-cream)")}
    >
      {children}
    </a>
  );
}

function SocialRow() {
  const fb = useCMS("social.facebook", "");
  const ig = useCMS("social.instagram", "");
  const yt = useCMS("social.youtube", "");
  const items = [
    { url: fb, label: "Facebook", glyph: "f" },
    { url: ig, label: "Instagram", glyph: "◎" },
    { url: yt, label: "YouTube", glyph: "▶" },
  ].filter(i => i.url);
  if (items.length === 0) return null;
  return (
    <div style={{ display: "flex", gap: 10, marginTop: 20 }}>
      {items.map(i => (
        <a key={i.label} href={i.url} className="footer-icon" aria-label={i.label} target="_blank" rel="noopener">{i.glyph}</a>
      ))}
    </div>
  );
}

Object.assign(window, { Header, Footer, Marquee, Logo, SocialRow });