/* ==========================================================================
   PSLFooter.jsx  —  @role
   Shared footer, self-contained styles. Quick Links / Resources / Contact / Legal. Prop: minimal (bool) tweaks columns. Links in PSL_FOOTER_LINKS; some destinations are intentional TODO placeholders (see annotations).
   ========================================================================== */
/* PSLFooter.jsx — single canonical footer used across every PSL page.
   Self-contained styles so it renders identically regardless of which
   stylesheet a page loads. Exposed as window.PSLFooter for use anywhere. */

const PSL_FOOTER_STYLE_ID = "__psl-footer-style";
function ensurePSLFooterStyles() {
  if (typeof document === "undefined") return;
  if (document.getElementById(PSL_FOOTER_STYLE_ID)) return;
  const s = document.createElement("style");
  s.id = PSL_FOOTER_STYLE_ID;
  s.textContent = `
    .psl-footer {
      background: #0D0042;
      color: rgba(255,255,255,0.7);
      font-family: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      padding: 64px 0 28px;
    }
    .psl-footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 32px;
    }
    .psl-footer-top {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
      gap: 48px;
      padding-bottom: 40px;
      border-bottom: 1px solid rgba(255,255,255,0.10);
    }
    .psl-footer-brand img {
      height: 38px; width: auto; display: block; margin-bottom: 18px;
    }
    .psl-footer-tag {
      font-size: 14px;
      line-height: 1.6;
      color: rgba(255,255,255,0.7);
      max-width: 320px;
      margin: 0;
    }
    .psl-footer-col h4 {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      margin: 0 0 18px;
    }
    .psl-footer-col ul {
      list-style: none; padding: 0; margin: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px 24px;
    }
    .psl-footer-col.psl-footer-contact ul {
      display: flex; flex-direction: column; gap: 12px;
    }
    .psl-footer-col a {
      color: rgba(255,255,255,0.78);
      text-decoration: none;
      font-size: 14px;
      transition: color 0.2s ease;
    }
    .psl-footer-col a:hover { color: #fff; }
    .psl-footer-contact-row {
      display: flex; align-items: center; gap: 10px;
      color: rgba(255,255,255,0.78);
    }
    .psl-footer-contact-row svg {
      flex-shrink: 0;
      color: rgba(255,255,255,0.55);
    }
    .psl-footer-bottom {
      margin-top: 28px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
    }
    .psl-footer-bottom-left {
      display: flex; align-items: center; gap: 18px;
      flex-wrap: wrap;
      font-size: 12px;
      color: rgba(255,255,255,0.5);
    }
    .psl-footer-bottom-left a {
      color: rgba(255,255,255,0.6);
      text-decoration: none;
      transition: color 0.2s ease;
    }
    .psl-footer-bottom-left a:hover { color: #fff; }
    .psl-footer-social {
      display: flex; align-items: center; gap: 10px;
    }
    .psl-footer-social a {
      width: 32px; height: 32px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 8px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      color: rgba(255,255,255,0.78);
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }
    .psl-footer-social a:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.22);
      color: #fff;
      transform: translateY(-1px);
    }
    .psl-footer-social svg { width: 16px; height: 16px; }
    @media (max-width: 980px) {
      .psl-footer-top { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
      .psl-footer-brand { grid-column: 1 / -1; }
    }
    @media (max-width: 640px) {
      .psl-footer { padding: 56px 0 24px; }
      .psl-footer-inner { padding: 0 20px; }
      .psl-footer-top { grid-template-columns: 1fr; gap: 32px; }
      .psl-footer-col ul { grid-template-columns: 1fr; }
      .psl-footer-bottom { flex-direction: column; align-items: flex-start; }
    }
    /* Container-query duplicates so the footer adapts inside .psl-page containers (e.g. mobile artboards) */
    @container pslpage (max-width: 980px) {
      .psl-footer-top { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
      .psl-footer-brand { grid-column: 1 / -1; }
    }
    @container pslpage (max-width: 640px) {
      .psl-footer { padding: 56px 0 24px; }
      .psl-footer-inner { padding: 0 20px; }
      .psl-footer-top { grid-template-columns: 1fr; gap: 32px; }
      .psl-footer-col ul { grid-template-columns: 1fr; }
      .psl-footer-bottom { flex-direction: column; align-items: flex-start; }
    }
    /* Same for Individuals' .psl-i container scope */
    @container psli (max-width: 980px) {
      .psl-footer-top { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
      .psl-footer-brand { grid-column: 1 / -1; }
    }
    @container psli (max-width: 640px) {
      .psl-footer { padding: 56px 0 24px; }
      .psl-footer-inner { padding: 0 20px; }
      .psl-footer-top { grid-template-columns: 1fr; gap: 32px; }
      .psl-footer-col ul { grid-template-columns: 1fr; }
      .psl-footer-bottom { flex-direction: column; align-items: flex-start; }
    }
    /* Same for Method's .psl-method container scope */
    @container pslmethod (max-width: 980px) {
      .psl-footer-top { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
      .psl-footer-brand { grid-column: 1 / -1; }
    }
    @container pslmethod (max-width: 640px) {
      .psl-footer { padding: 56px 0 24px; }
      .psl-footer-inner { padding: 0 20px; }
      .psl-footer-top { grid-template-columns: 1fr; gap: 32px; }
      .psl-footer-col ul { grid-template-columns: 1fr; }
      .psl-footer-bottom { flex-direction: column; align-items: flex-start; }
    }
    /* Same for Insights' .psl-insights container scope */
    @container pslinsights (max-width: 980px) {
      .psl-footer-top { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
      .psl-footer-brand { grid-column: 1 / -1; }
    }
    @container pslinsights (max-width: 640px) {
      .psl-footer { padding: 56px 0 24px; }
      .psl-footer-inner { padding: 0 20px; }
      .psl-footer-top { grid-template-columns: 1fr; gap: 32px; }
      .psl-footer-col ul { grid-template-columns: 1fr; }
      .psl-footer-bottom { flex-direction: column; align-items: flex-start; }
    }
    /* Same for Teams' .psl-teams container scope */
    @container pslteams (max-width: 980px) {
      .psl-footer-top { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
      .psl-footer-brand { grid-column: 1 / -1; }
    }
    @container pslteams (max-width: 640px) {
      .psl-footer { padding: 56px 0 24px; }
      .psl-footer-inner { padding: 0 20px; }
      .psl-footer-top { grid-template-columns: 1fr; gap: 32px; }
      .psl-footer-col ul { grid-template-columns: 1fr; }
      .psl-footer-bottom { flex-direction: column; align-items: flex-start; }
    }

    /* ============================================================
       MINIMAL VARIANT — passed via <PSLFooter minimal />.
       Three-column layout (brand · links · contact), tighter padding,
       brand tag paragraph removed. Used on the Home Page Minimal.
       ============================================================ */
    .psl-footer--minimal {
      padding: 36px 0 22px;
    }
    .psl-footer--minimal .psl-footer-top {
      grid-template-columns: 1.4fr 1fr 1.2fr;
      gap: 40px;
      padding-bottom: 26px;
    }
    .psl-footer--minimal .psl-footer-brand img {
      height: 32px; margin-bottom: 0;
    }
    .psl-footer--minimal .psl-footer-tag { display: none; }
    .psl-footer--minimal .psl-footer-col ul {
      grid-template-columns: 1fr 1fr; gap: 10px 24px;
    }
    .psl-footer--minimal .psl-footer-col.psl-footer-contact {
      justify-self: end;
      text-align: left;
    }
    .psl-footer--minimal .psl-footer-col.psl-footer-contact ul {
      grid-template-columns: 1fr;
    }
    .psl-footer--minimal .psl-footer-bottom { margin-top: 18px; }
    @container pslpage (max-width: 880px) {
      .psl-footer--minimal .psl-footer-top {
        grid-template-columns: 1fr 1fr; gap: 28px;
      }
      .psl-footer--minimal .psl-footer-col.psl-footer-contact { justify-self: start; }
    }
    @container pslpage (max-width: 540px) {
      .psl-footer--minimal .psl-footer-top { grid-template-columns: 1fr; }
    }
  `;
  document.head.appendChild(s);
}

const PSL_FOOTER_LINKS = {
  quickLinks: [
  { label: "Home", href: "index.html" },
  { label: "Method", href: "method.html" },
  { label: "Teams", href: "teams.html" },
  { label: "Individuals", href: "individuals.html" },
  { label: "Diagnostic", href: "diagnostic.html" }],

  contact: [
  { label: "hello@performancesystemslab.com", href: "mailto:hello@performancesystemslab.com", icon: "mail" },
  { label: "Book a call", href: "#", icon: "phone" },
  { label: "Message us on WhatsApp", href: "#", icon: "whatsapp" }],

  social: [
  { label: "LinkedIn", href: "#", icon: "linkedin" },
  { label: "Instagram", href: "#", icon: "instagram" },
  // Placeholder for the publishing platform — the home of the
  // Insights articles is still to be confirmed (Substack, Medium,
  // own publication, etc.). Swap the `icon` + label when decided.
  { label: "Publication (coming soon)", href: "#", icon: "publication" }],

  legal: [
  { label: "Privacy", href: "privacy.html" },
  { label: "Terms", href: "terms.html" },
  { label: "Cookies", href: "cookies.html" }]

};

function PSLIcon({ name }) {
  switch (name) {
    case "mail":
      return (
        <svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <rect x="2.5" y="4" width="15" height="12" rx="1.5" />
          <path d="M2.5 6l7.5 5 7.5-5" />
        </svg>);

    case "phone":
      return (
        <svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M4.5 3.5h3l1.5 4-2 1.5a10 10 0 005 5l1.5-2 4 1.5v3a1.5 1.5 0 01-1.5 1.5A13 13 0 013 5a1.5 1.5 0 011.5-1.5z" />
        </svg>);

    case "whatsapp":
      return (
        <svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 17l1.3-3.8A7 7 0 1110 17a7 7 0 01-3.8-1.1L3 17z" />
        </svg>);

    case "linkedin":
      return (
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 11.001-4.121A2.06 2.06 0 015.34 7.43zM7.12 20.45H3.55V9h3.57v11.45z" />
        </svg>);

    case "x":
      return (
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
        </svg>);

    case "instagram":
      return (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
          <rect x="3" y="3" width="18" height="18" rx="5" />
          <circle cx="12" cy="12" r="4" />
          <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
        </svg>);

    case "youtube":
      return (
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M21.58 7.19a2.5 2.5 0 00-1.76-1.77C18.25 5 12 5 12 5s-6.25 0-7.82.42a2.5 2.5 0 00-1.76 1.77A26.1 26.1 0 002 12a26.1 26.1 0 00.42 4.81 2.5 2.5 0 001.76 1.77C5.75 19 12 19 12 19s6.25 0 7.82-.42a2.5 2.5 0 001.76-1.77A26.1 26.1 0 0022 12a26.1 26.1 0 00-.42-4.81zM10 15.02V8.98L15.2 12z" />
        </svg>);

    case "publication":
      // Generic publication / external-article icon — placeholder while
      // the home for PSL Insights articles is decided.
      return (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 4.5a1 1 0 011-1h9l4 4V19a1 1 0 01-1 1H6a1 1 0 01-1-1V4.5z" />
          <path d="M15 3.5V8h4" />
          <line x1="8" y1="12" x2="16" y2="12" />
          <line x1="8" y1="15.5" x2="14" y2="15.5" />
        </svg>);

    default:
      return null;
  }
}

const PSLFooter = ({ minimal = false }) => {
  if (typeof window !== "undefined") ensurePSLFooterStyles();
  return (
    <footer className={"psl-footer" + (minimal ? " psl-footer--minimal" : "")} data-screen-label="Footer">
      <div className="psl-footer-inner">
        <div className="psl-footer-top">
          <div className="psl-footer-brand">
            <a href="index.html" aria-label="Performance Systems Lab">
              <img src="assets/logos/PSL-Logo-Negative.png" alt="Performance Systems Lab" />
            </a>
            {!minimal && (
              <p className="psl-footer-tag">
                PSL helps leaders, teams, and organisations build structured performance systems that hold under sustained delivery pressure.
              </p>
            )}
          </div>
          <div className="psl-footer-col">
            <h4>Quick Links</h4>
            <ul>
              {PSL_FOOTER_LINKS.quickLinks.map((l) =>
              <li key={l.label}><a href={l.href}>{l.label}</a></li>
              )}
              {/* In minimal mode, fold Resources into Quick Links so we
                  drop from 4 cols to 3 without losing the link. */}
              {minimal && <li><a href="insights.html">Insights</a></li>}
            </ul>
          </div>
          {!minimal && (
            <div className="psl-footer-col">
              <h4>Resources</h4>
              <ul>
                <li><a href="insights.html">Insights</a></li>
              </ul>
            </div>
          )}
          <div className="psl-footer-col psl-footer-contact">
            <h4>Contact</h4>
            <ul>
              {PSL_FOOTER_LINKS.contact.map((c) =>
              <li key={c.label}>
                  <a className="psl-footer-contact-row" href={c.href}>
                    <PSLIcon name={c.icon} />
                    <span>{c.label}</span>
                  </a>
                </li>
              )}
            </ul>
          </div>
        </div>
        <div className="psl-footer-bottom">
          <div className="psl-footer-bottom-left">
            <span>© 2026 Performance Systems Lab™. All rights reserved.</span>
            {PSL_FOOTER_LINKS.legal.map((l) =>
            <a key={l.label} href={l.href}>{l.label}</a>
            )}
          </div>
          <div className="psl-footer-social">
            {PSL_FOOTER_LINKS.social.map((s) =>
            <a key={s.label} href={s.href} aria-label={s.label}>
                <PSLIcon name={s.icon} />
              </a>
            )}
          </div>
        </div>
      </div>
    </footer>);

};

Object.assign(window, { PSLFooter });