// Footer — The Little Scoop website.
const { Logo: FooterLogo, Input: FooterInput, Button: FooterButton } = window.TheLittleScoopDesignSystem_cee583;

function Footer({ onNav }) {
  const cols = [
    { h: "Shop", items: ["All bins", "New arrivals", "Bestsellers", "Gift cards"] },
    { h: "Explore", items: ["Themes", "About sensory play", "Play ideas", "Contact"] },
    { h: "Help", items: ["Shipping", "Returns", "FAQ", "Track order"] },
  ];
  return (
    <footer style={{ background: "#94d1c5", color: "rgba(42,36,64,.78)", marginTop: "var(--space-9)" }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "var(--space-8) var(--container-pad) var(--space-6)",
        display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: "var(--space-6)" }}>
        <div>
          <div><FooterLogo size={36} /></div>
          <p style={{ marginTop: "var(--space-3)", maxWidth: 260, fontSize: "var(--text-sm)", lineHeight: 1.6 }}>
            Hand-packed sensory bins for curious little hands. Screen-free play, ready in one scoop.
          </p>
          <div style={{ marginTop: "var(--space-4)", maxWidth: 280 }}>
            <div style={{ display: "flex", gap: 8 }}>
              <FooterInput placeholder="Email for new drops" containerStyle={{ flex: 1 }} />
              <FooterButton variant="sunshine" size="md">Join</FooterButton>
            </div>
          </div>
        </div>
        {cols.map((c) => (
          <div key={c.h}>
            <h4 style={{ margin: "0 0 var(--space-3)", fontFamily: "var(--font-display)", fontWeight: 600, color: "var(--ink-900)", fontSize: "var(--text-md)" }}>{c.h}</h4>
            <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {c.items.map((i) => (
                <li key={i}><button onClick={() => onNav && onNav("shop")} style={{ border: "none", background: "none", color: "inherit", cursor: "pointer", fontFamily: "var(--font-body)", fontSize: "var(--text-sm)", padding: 0 }}>{i}</button></li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ borderTop: "1px solid rgba(42,36,64,.18)" }}>
        <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "var(--space-4) var(--container-pad)",
          display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 8, fontSize: "var(--text-xs)" }}>
          <span>© 2026 The Little Scoop. Made with love for messy, magical play.</span>
          <span>Privacy · Terms · Accessibility</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });