// Footer.jsx
const Footer = ({ navigate }) => (
  <footer style={{background: "var(--tp-navy)", color: "var(--tp-cream)", marginTop: 64}}>
    <div className="tp-stitch-divider" style={{background: "var(--tp-navy-deep)"}}></div>
    <div style={{maxWidth: "var(--max-w)", margin: "0 auto", padding: "56px 24px 32px"}}>
      <div className="footer-grid" style={{
        display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr",
        gap: 40,
      }}>
        <div>
          <div style={{marginBottom: 16}}><LogoLockup height={56}/></div>
          <p style={{fontSize: 14, lineHeight: 1.6, color: "rgba(245,236,217,0.8)", maxWidth: 280}}>
            Sports Cards & Memorabilia, Served from a real shop counter since 1988
          </p>
          <div style={{display: "flex", gap: 8, marginTop: 16}}>
            {[Icons.Insta, Icons.Facebook, Icons.TikTok].map((Ic, i) => (
              <a key={i} style={{
                width: 36, height: 36, borderRadius: 999,
                border: "1px solid rgba(245,236,217,0.25)",
                color: "var(--tp-cream)", display: "flex",
                alignItems: "center", justifyContent: "center", cursor: "pointer",
              }}><Ic size={16}/></a>
            ))}
          </div>
        </div>
        <FooterCol title="Browse" links={[
          ["Home", "home"], ["Coming Soon", "soon"], ["Our Story", "about"], ["Visit", "visit"]
        ]} navigate={navigate}/>
        <FooterCol title="Hours" links={[
          "Mon–Fri · 11am–6pm",
          "Sat · 11am–5pm",
          "Sun · Closed",
          "Call about Holidays Hours",
        ]}/>
        <FooterCol title="Visit Us" links={[
          <span key="addr"><Icons.Pin size={14} style={{verticalAlign:"-2px", marginRight: 6}}/>399 S State St #15, Westerville OH 43081</span>,
          "(614) 899-7066",
          "TriplePlayOhio@gmail.com",
        ]}/>
      </div>
      <div style={{
        marginTop: 48, paddingTop: 20,
        borderTop: "1px solid rgba(245,236,217,0.15)",
        display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12,
        fontSize: 13, color: "rgba(245,236,217,0.6)",
      }}>
        <div>© {new Date().getFullYear()} Triple Play Sports Cards. Established 1988.</div>
      </div>
    </div>
  </footer>
);

const FooterCol = ({ title, links, navigate }) => (
  <div>
    <div style={{
      fontFamily: "var(--font-display)", fontSize: 14,
      letterSpacing: "0.08em", textTransform: "uppercase",
      color: "var(--tp-cream)", marginBottom: 16,
    }}>{title}</div>
    <ul style={{listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10}}>
      {links.map((l, i) => {
        const isLink = Array.isArray(l);
        return (
          <li key={i} onClick={() => isLink && navigate && navigate(l[1])} style={{
            fontSize: 14, color: "rgba(245,236,217,0.75)",
            cursor: isLink ? "pointer" : "default",
          }}>{isLink ? l[0] : l}</li>
        );
      })}
    </ul>
  </div>
);

Object.assign(window, { Footer });