// Footer — address, contact, social, link columns, copyright row.
// Mirrors components/footer-03 from the Relume export, simplified.

const PIPCAST_SPOTIFY_URL = "https://open.spotify.com/show/1abK9Ij9eAfBMxWCxhbvIi";

// Main Kid Link socials, used on every page except the Parents page.
const KIDLINK_FACEBOOK = "https://www.facebook.com/kidlinkOT/";
const KIDLINK_INSTAGRAM = "https://www.instagram.com/kidlinkot/";
// Parent-facing Instagram, used on the Parents page.
const PARENTS_INSTAGRAM = "https://www.instagram.com/kidlinkot.community/";

function Footer() {
  const { route, go } = useRoute();
  // On the Parents page, point Instagram at the parent-facing account (when set).
  const instagramUrl = route === "parents" && PARENTS_INSTAGRAM ? PARENTS_INSTAGRAM : KIDLINK_INSTAGRAM;
  const navLinks = [
    { id: "home",          label: "Home" },
    { id: "parents",       label: "Parents & Caregivers" },
    { id: "clinicians",    label: "Clinicians" },
    { id: "educators",     label: "Educators" },
    { id: "organisations", label: "Organisations" },
    { id: "team",          label: "Meet the team" },
    { id: "events",        label: "Upcoming Events" },
    { id: "fees",          label: "Fees" },
  ];
  const colLeft = navLinks.slice(0, 4);
  const colRight = navLinks.slice(4);
  const socials = [
    { name: "facebook",  url: KIDLINK_FACEBOOK },
    { name: "instagram", url: instagramUrl },
  ];

  return (
    <footer className="scheme-2" style={{ padding: "80px 5% 32px" }}>
      <Container>
        <div className="kl-split" style={{ gap: "4vw", paddingBottom: 64 }}>
          <div>
            {/* All three logos side by side — each links out; heights tuned to feel balanced */}
            <div style={{ display: "flex", alignItems: "center", flexWrap: "wrap", gap: 28, marginBottom: 32 }}>
              <a href="#" onClick={(e) => { e.preventDefault(); go("home"); }} aria-label="Kid Link home" style={{ display: "inline-flex" }}>
                <img src="../../assets/images/kidlink-logo-wordmark.png" alt="Kid Link" style={{ height: 74, width: "auto" }} />
              </a>
              <a href="https://kidlinkeducation.com.au" target="_blank" rel="noopener noreferrer" aria-label="Kid Link Education" style={{ display: "inline-flex" }}>
                <img src="../../assets/logos/KL-Education-Logo-CMYK-Primary.png" alt="Kid Link Education" style={{ height: 36, width: "auto" }} />
              </a>
              <a href={PIPCAST_SPOTIFY_URL} target="_blank" rel="noopener noreferrer" aria-label="PipCast on Spotify" style={{ display: "inline-flex" }}>
                <img src="../../assets/logos/PIP-Cast-Logo-Draft-v3.jpg" alt="PipCast" style={{ height: 62, width: "auto", borderRadius: 8 }} />
              </a>
            </div>
            <p style={{ fontSize: "var(--kl-text-small)", fontWeight: 600, marginBottom: 4 }}>Address:</p>
            <p style={{ fontSize: "var(--kl-text-small)", marginBottom: 24 }}>
              2 Brunswick Road, Mitcham, VIC
            </p>
            <p style={{ fontSize: "var(--kl-text-small)", fontWeight: 600, marginBottom: 4 }}>Contact:</p>
            <a href="tel:+61398797019" style={{ fontSize: "var(--kl-text-small)", display: "block", textDecoration: "underline", textUnderlineOffset: "0.2em" }}>(03) 9879 7019</a>
            <a href="mailto:admin@kidlink.net.au" style={{ fontSize: "var(--kl-text-small)", display: "block", textDecoration: "underline", textUnderlineOffset: "0.2em" }}>admin@kidlink.net.au</a>
            <p style={{ fontSize: "var(--kl-text-small)", fontWeight: 600, marginTop: 24, marginBottom: 4 }}>Hours:</p>
            <p style={{ fontSize: "var(--kl-text-small)", marginBottom: 0 }}>Monday to Friday, 9am to 5pm AEST</p>
            <div style={{ marginTop: 28 }}>
              <p style={{ fontSize: "var(--kl-text-small)", fontWeight: 600, marginBottom: 12 }}>Follow us</p>
              <div style={{ display: "flex", gap: 14 }}>
                {socials.map((s) => (
                  <a
                    key={s.name}
                    href={s.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label={`Kid Link on ${s.name}`}
                    className="kl-social"
                    style={{
                      display: "inline-flex", alignItems: "center", justifyContent: "center",
                      width: 44, height: 44, borderRadius: 999, background: "var(--kl-plum)",
                    }}
                  >
                    {/* White simple-icons mark on the brand-plum chip. */}
                    <span
                      aria-hidden="true"
                      style={{
                        display: "inline-block", width: 22, height: 22,
                        background: "var(--kl-white)",
                        WebkitMaskImage: `url(https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/${s.name}.svg)`,
                        maskImage: `url(https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/${s.name}.svg)`,
                        WebkitMaskSize: "contain", maskSize: "contain",
                        WebkitMaskRepeat: "no-repeat", maskRepeat: "no-repeat",
                        WebkitMaskPosition: "center", maskPosition: "center",
                      }}
                    />
                  </a>
                ))}
              </div>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
            {[colLeft, colRight].map((col, i) => (
              <ul key={i} style={{ listStyle: "none", padding: 0, margin: 0 }}>
                {col.map((l) => (
                  <li key={l.id} style={{ padding: "8px 0", fontSize: "var(--kl-text-small)", fontWeight: 600 }}>
                    <a href="#" onClick={(e) => { e.preventDefault(); go(l.id); }}>{l.label}</a>
                  </li>
                ))}
              </ul>
            ))}
          </div>
        </div>

        <div style={{ height: 1, background: "var(--kl-border)" }} />
        <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16, padding: "24px 0 0", fontSize: "var(--kl-text-small)" }}>
          <p>
            © 2026 Kid Link Occupational Therapy Pty Ltd. All rights reserved.<br />
            <span style={{ color: "var(--kl-fg-2)" }}>Registered NDIS Provider · ABN 37 165 431 470</span>
          </p>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", gap: 24 }}>
            <li style={{ textDecoration: "underline", textUnderlineOffset: "0.2em" }}><a href="#" onClick={(e) => { e.preventDefault(); go("policies"); }}>Policies</a></li>
          </ul>
        </div>
      </Container>
    </footer>
  );
}

window.Footer = Footer;