// Hair L2 — sidebar nav

function HairSidebar({ activeId }) {
  const [open, setOpen] = React.useState(true);
  return (
    <aside className="l2-nav">
      <div className="l2-nav-h">Browse Beauty</div>

      <div className={`l2-sec active ${open ? "open" : ""}`}>
        <button className="l2-sec-h" onClick={() => setOpen(o => !o)}>
          <span className="tag"><span className="dot" /> Hair</span>
          <span className="caret">
            <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 4l3 3 3-3" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </span>
        </button>
        <ul className="l2-sublist">
          {SUBCATS.map((s) => (
            <li key={s.id}>
              <a href={`#${s.id}`} className={activeId === s.id ? "cur" : ""}>
                {s.title}
              </a>
            </li>
          ))}
        </ul>
      </div>

      {SIDEBAR_OTHER.map((o) => (
        <div key={o.label} className="l2-sec">
          <button className="l2-sec-h" onClick={() => {}}>
            <span className="tag">{o.label}</span>
            <span className="caret">
              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 4l3 3 3-3" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </span>
          </button>
        </div>
      ))}

      <div className="l2-nav-foot">
        <a href="/">← Back to home</a>
        <a href="/en/hair/">Index A–Z</a>
      </div>
    </aside>
  );
}

Object.assign(window, { HairSidebar });