// SiteFooter — brand footer with contact + phoenix crest.
function SiteFooter({ onNav }) {
  return (
    <footer className="bp-sec" style={{ background: "var(--surface-raised)", padding: "56px 48px 32px", borderTop: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 40 }}>
        <div style={{ maxWidth: 320 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
            <img src={window.BP_ASSETS.logo} alt="" style={{ height: 76 }} />
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase", letterSpacing: ".06em", color: "var(--text-strong)", fontSize: 18, lineHeight: 1 }}>Blue Phoenix<br/><span style={{ fontSize: 9, letterSpacing: ".22em", color: "var(--bp-cyan-700)" }}>Sportfishing</span></div>
          </div>
          <p style={{ color: "var(--text-muted)", fontSize: 14, lineHeight: 1.6, margin: 0 }}>Private sportfishing charters out of IGY Marina, Cabo San Lucas. Tag and release or catch and keep.</p>
        </div>
        {[
          { h: "Trips", items: ["Full-Day", "Half-Day"] },
          { h: "Company", items: ["Charters", "Our Crew", "Terms & Conditions"] },
          { h: "Marina", items: ["IGY Cabo San Lucas", "+1 206 446 0449", "info@bluephoenixsportfishing.com"] },
        ].map(col => (
          <div key={col.h}>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 11, letterSpacing: ".2em", textTransform: "uppercase", color: "var(--bp-cyan-700)", marginBottom: 16 }}>{col.h}</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {col.items.map(it => {
                const target = it === "Terms & Conditions" ? "Terms" : it === "Charters" ? "Boats" : (it === "Full-Day" || it === "Half-Day") ? "Trips" : it === "Our Crew" ? "About" : null;
                return <li key={it}><a onClick={target && onNav ? () => onNav(target) : undefined} style={{ color: "var(--text-body)", fontSize: 14, cursor: target ? "pointer" : "default" }}>{it}</a></li>;
              })}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1200, margin: "36px auto 0", paddingTop: 20, borderTop: "1px solid var(--border-subtle)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-muted)" }}>© 2026 Blue Phoenix Sportfishing · Los Cabos, MX</span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-muted)" }}>22.88°N 109.90°W</span>
      </div>
    </footer>
  );
}
window.SiteFooter = SiteFooter;