// Footer with contact, hours, links, social.

const FOOTER_SOCIALS_ORDER = ["Facebook", "YouTube", "Instagram", "Tripadvisor", "X (Twitter)"];

function Footer() {
  // Render socials in the requested order regardless of the SOCIAL_LINKS source array
  const orderedSocials = FOOTER_SOCIALS_ORDER
    .map((label) => SOCIAL_LINKS.find((s) => s.label === label))
    .filter(Boolean);

  return (
    <footer style={{ background: "#070708", color: "var(--bone)", borderTop: "1px solid var(--line-on-dark)" }}>
      <div className="wrap" style={{ padding: "80px 20px 40px" }}>
        <div className="footer-grid" style={{
          display: "grid", gap: 40,
          marginBottom: 48,
        }}>
          {/* BRAND */}
          <div className="footer-brand">
            <img src="assets/logo.webp" alt="Shubie River Wranglers" style={{ height: 72, filter: "drop-shadow(0 4px 12px rgba(0,0,0,0.4))" }} />
            <p style={{ marginTop: 18, color: "rgba(246,243,238,0.6)", fontSize: 14.5, lineHeight: 1.6, maxWidth: 380 }}>
              Award-winning tidal bore rafting on the Shubenacadie River. Family-run since 2013. Bay of Fundy, Nova Scotia.
            </p>
            <div style={{ marginTop: 20, display: "flex", gap: 8 }}>
              {orderedSocials.map(({ Ic, href, label }) => (
                <a key={label} href={href} target="_blank" rel="noopener noreferrer" aria-label={label} style={{
                  width: 40, height: 40,
                  border: "1px solid var(--line-on-dark)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  borderRadius: 2,
                  transition: "background .15s ease, color .15s ease, border-color .15s ease",
                }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = "var(--red)"; e.currentTarget.style.borderColor = "var(--red)"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.borderColor = "var(--line-on-dark)"; }}
                >
                  <Ic size={16} />
                </a>
              ))}
            </div>
          </div>

          {/* QUICK LINKS */}
          <div>
            <h4 className="narrow" style={{ fontSize: 12, color: "var(--red)", letterSpacing: ".22em", margin: "0 0 18px" }}>QUICK LINKS</h4>
            <ul className="clean" style={{ display: "flex", flexDirection: "column", gap: 12, fontSize: 14.5, color: "rgba(246,243,238,0.85)" }}>
              <li><a href="#about">About Us</a></li>
              <li><a href="#book">Book Now</a></li>
              <li><a href="#tides">Tide Schedule</a></li>
              <li><a href="#faq">FAQ</a></li>
              <li><a href="#contact">Contact Us</a></li>
              <li><a href="#waiver">Waiver</a></li>
            </ul>
          </div>

          {/* CONTACT INFO */}
          <div>
            <h4 className="narrow" style={{ fontSize: 12, color: "var(--red)", letterSpacing: ".22em", margin: "0 0 18px" }}>CONTACT INFO</h4>
            <ul className="clean" style={{ display: "flex", flexDirection: "column", gap: 14, fontSize: 14.5 }}>
              <li style={{ display: "flex", gap: 10, alignItems: "flex-start", color: "rgba(246,243,238,0.85)" }}>
                <IconLocation size={16} style={{ color: "var(--red)", flexShrink: 0, marginTop: 3 }} />
                <span>90 Phillips Rd<br/>Green Oaks, Nova Scotia</span>
              </li>
              <li>
                <a href="mailto:shubiewranglers@gmail.com" style={{ display: "inline-flex", alignItems: "flex-start", gap: 10, color: "rgba(246,243,238,0.85)" }}>
                  <IconMail size={16} style={{ color: "var(--red)", flexShrink: 0, marginTop: 3 }} />
                  <span>shubiewranglers@gmail.com</span>
                </a>
              </li>
              <li>
                <a href="tel:+19024562673" style={{ display: "inline-flex", alignItems: "center", gap: 10, color: "rgba(246,243,238,0.85)" }}>
                  <IconPhone size={16} style={{ color: "var(--red)" }} />
                  <span>+1 902-456-2673</span>
                </a>
              </li>
              <li>
                <a href="tel:+18008565061" style={{ display: "inline-flex", alignItems: "center", gap: 10, color: "rgba(246,243,238,0.85)" }}>
                  <IconPhone size={16} style={{ color: "var(--red)" }} />
                  <span>+1 800-856-5061 <span style={{ opacity: 0.55, fontSize: 12 }}>(toll-free)</span></span>
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div style={{
          paddingTop: 24, borderTop: "1px solid var(--line-on-dark)",
          fontSize: 12, color: "rgba(246,243,238,0.5)",
          textAlign: "center",
        }}>
          © 2026 Shubie River Wranglers — Nova Scotia's Favourite Rafting Company. All Rights Reserved.
        </div>
      </div>

      <style>{`
        .footer-grid { grid-template-columns: 1fr; }
        @media (min-width: 640px) {
          .footer-grid { grid-template-columns: 1fr 1fr; }
          .footer-brand { grid-column: 1 / -1; }
        }
        @media (min-width: 960px) {
          .footer-grid {
            grid-template-columns: 2fr 1fr 1.2fr;
            gap: 56px;
          }
          .footer-brand { grid-column: auto; }
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, { Footer });