// Footer — 4 columns: Shop / About / Visit / Stay close.

function FooterCol({ title, items }) {
  return (
    <div>
      <div className="mono" style={{ color: "var(--c-yellow)", marginBottom: 16 }}>{title}</div>
      <ul style={{ margin: 0, padding: 0, listStyle: "none",
                    display: "flex", flexDirection: "column", gap: 10 }}>
        {items.map(i => (
          <li key={i.l}>
            <a href={i.h}
               target={i.external ? "_blank" : "_self"}
               rel={i.external ? "noopener" : ""}
               style={{ color: "var(--c-cream)", textDecoration: "none",
                        fontSize: 14, opacity: 0.85 }}>{i.l}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

function SiteFooter() {
  const C = "var(--c-cream)";
  return (
    <footer className="deep" style={{ padding: "80px 0 32px" }}>
      <div className="wrap">
        {/* Top row — wordmark + 4 columns */}
        <div style={{
          display: "grid", gridTemplateColumns: "minmax(0, 1.2fr) repeat(4, 1fr)",
          gap: 48, alignItems: "start", marginBottom: 56,
        }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 14 }}>
              <img src="assets/basket-mark.png" alt="" style={{ width: 56, height: 56 }} />
              <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                <span style={{ fontFamily: "var(--font-wordmark)", fontSize: 22,
                                letterSpacing: "-0.01em", color: C, textTransform: "uppercase",
                                lineHeight: 0.9 }}>EVERYDAY</span>
                <span style={{ fontFamily: "var(--font-wordmark)", fontSize: 22,
                                letterSpacing: "-0.01em", color: C, textTransform: "uppercase",
                                lineHeight: 0.9 }}>WORKS</span>
              </div>
            </div>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, maxWidth: "36ch",
                         color: "color-mix(in oklab, " + C + " 78%, transparent)" }}>
              Coffee shop and market built in Oak Cliff for better everyday choices.
              Consume with Purpose.
            </p>
            <div className="mono" style={{ color: C, opacity: 0.65 }}>
              516 S Hampton Rd · 75208
            </div>
          </div>

          <FooterCol title="Shop" items={[
            { l: "Coffee + Drinks", h: "menu.html" },
            { l: "Guest Kitchen", h: "kitchen.html" },
            { l: "Market", h: "market.html" },
            { l: "Gift Cards", h: "gift-cards.html" },
            { l: "Order Pickup", h: "https://www.clover.com/online-ordering/everyday-works-dallas", external: true },
          ]}/>
          <FooterCol title="About" items={[
            { l: "Our story", h: "about.html" },
            { l: "Mission", h: "about.html#mission" },
            { l: "Cook with us", h: "kitchen.html" },
            { l: "Community", h: "community.html" },
            { l: "Visit", h: "visit.html" },
          ]}/>
          <FooterCol title="Visit" items={[
            { l: "Hours", h: "visit.html#hours" },
            { l: "Map", h: "https://maps.google.com/?q=516+S+Hampton+Rd+Suite+180,+Dallas,+TX+75208", external: true },
            { l: "Parking", h: "visit.html#parking" },
            { l: "Host an event", h: "host.html" },
            { l: "Vendor application", h: "apply.html" },
          ]}/>
          <FooterCol title="Stay close" items={[
            { l: "The Everyday List", h: "#everyday-list" },
            { l: "Instagram", h: "https://www.instagram.com/everydayworkscoffee", external: true },
            { l: "TikTok", h: "https://www.tiktok.com/@everydayworkscoffee", external: true },
            { l: "Facebook", h: "https://www.facebook.com/everydayworkscoffee", external: true },
          ]}/>
        </div>

        <hr style={{ border: 0, borderTop: "1px solid color-mix(in oklab, " + C + " 18%, transparent)" }} />

        {/* Bottom row */}
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          paddingTop: 22, gap: 18, flexWrap: "wrap",
          fontFamily: "var(--font-mono)", fontSize: 10.5,
          letterSpacing: "0.14em", textTransform: "uppercase",
          color: "color-mix(in oklab, " + C + " 65%, transparent)",
        }}>
          <span>© 2026 Everyday Works · Made in Oak Cliff</span>
          <span style={{ display: "inline-flex", gap: 22 }}>
            <span style={{ color: "inherit", opacity: 0.6 }}>Privacy</span>
            <span style={{ color: "inherit", opacity: 0.6 }}>Accessibility</span>
            <span style={{ color: "inherit", opacity: 0.6 }}>Press</span>
          </span>
          <span style={{ color: "var(--c-yellow)" }}>Consume with Purpose.</span>
        </div>
      </div>
    </footer>
  );
}

window.SiteFooter = SiteFooter;