const Nav = ({ current, go }) => {
  const items = [
    { id: "home", label: "Home" },
    { id: "gifts", label: "Gift Guides" },
    { id: "shop", label: "Categories" },
    { id: "finder", label: "Gift Finder" },
    { id: "about", label: "About" },
  ];
  const [left, right] = [items.slice(0, 3), items.slice(3)];
  return (
    <nav className="nav-root">
      <div className="nav-inner">
        <div className="nav-left">
          {left.map(it => (
            <div key={it.id}
              className={"nav-link" + (current === it.id ? " active" : "")}
              onClick={() => go(it.id)}>{it.label}</div>
          ))}
        </div>
        <div className="nav-brand" onClick={() => go("home")}>
          <div className="wordmark">Little Lamb</div>
          <div className="sub">Boutique</div>
        </div>
        <div className="nav-right">
          {right.map(it => (
            <div key={it.id}
              className={"nav-link" + (current === it.id ? " active" : "")}
              onClick={() => go(it.id)}>{it.label}</div>
          ))}
          <div className="nav-link" style={{opacity: 0.5}}>♡ Saved</div>
        </div>
      </div>
    </nav>
  );
};

const Footer = ({ go }) => (
  <footer className="footer">
    <div className="container">
      <div style={{display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 60, marginBottom: 60}}>
        <div>
          <div className="display" style={{fontSize: 44, color: "var(--pink)", marginBottom: 8}}>Little Lamb</div>
          <div className="script" style={{fontSize: 28, color: "var(--cream)", opacity: 0.7, marginTop: -10}}>Boutique</div>
          <p style={{maxWidth: 340, marginTop: 24, opacity: 0.75, fontFamily: "var(--f-body)", fontSize: 15}}>
            The family corner of the HowTo network. Recommendations from real parents, for the little people in your life.
          </p>
        </div>
        <div>
          <div className="allcaps" style={{color: "var(--pink)", marginBottom: 18}}>Shop by</div>
          <div className="stack" style={{gap: 10, fontSize: 14, opacity: 0.85}}>
            <div onClick={() => go("shop")} style={{cursor: "pointer"}}>Toys</div>
            <div onClick={() => go("shop")} style={{cursor: "pointer"}}>Clothing</div>
            <div onClick={() => go("shop")} style={{cursor: "pointer"}}>Nursery</div>
            <div onClick={() => go("shop")} style={{cursor: "pointer"}}>Books</div>
            <div onClick={() => go("shop")} style={{cursor: "pointer"}}>Gear</div>
          </div>
        </div>
        <div>
          <div className="allcaps" style={{color: "var(--pink)", marginBottom: 18}}>Guides</div>
          <div className="stack" style={{gap: 10, fontSize: 14, opacity: 0.85}}>
            <div onClick={() => go("gifts")} style={{cursor: "pointer"}}>By occasion</div>
            <div onClick={() => go("gifts")} style={{cursor: "pointer"}}>By age</div>
            <div onClick={() => go("finder")} style={{cursor: "pointer"}}>Gift finder</div>
            <div onClick={() => go("guide")} style={{cursor: "pointer"}}>This week's picks</div>
          </div>
        </div>
        <div>
          <div className="allcaps" style={{color: "var(--pink)", marginBottom: 18}}>Follow</div>
          <div className="stack" style={{gap: 10, fontSize: 14, opacity: 0.85}}>
            <div>Instagram</div>
            <div>Pinterest</div>
            <div>Newsletter</div>
          </div>
        </div>
      </div>
      <div style={{display: "flex", justifyContent: "space-between", paddingTop: 30, borderTop: "1px solid rgba(255,255,255,0.15)", fontFamily: "var(--f-ui)", fontSize: 12, opacity: 0.6}}>
        <div>© 2026 The Little Lamb Boutique · An affiliate property of the HowTo Network</div>
        <div>thelittlelambboutique.com</div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Nav, Footer });