/* ============ VARIABLE chrome (per-district) ============
   Top nav + announce bar + footer. Every brand string, color, link and email comes from the active
   district config via the tenant hooks — nothing here is hardcoded to a single district. */

function Logo() {
  const { star, wordmark } = useBranding();
  return (
    <div className="logo-pill">
      <StarMark size={22} primary={star.primary} secondary={star.secondary} />
      <div className="logo-word">
        <b>{wordmark.line1}</b>
        <b style={{ fontSize: "11.5px" }}>{wordmark.line2}</b>
      </div>
    </div>
  );
}

function AnnounceBar() {
  const { announce } = useChrome();
  return (
    <div className="announce">
      {announce.text}
      {announce.sub && (
        <div className="sub">
          {announce.sub.label}
          <a href={"mailto:" + announce.sub.email}>{announce.sub.email}</a>
        </div>
      )}
    </div>
  );
}

function StoreHeader({ account, onAccount, onFindSchool, onCart }) {
  const { header } = useChrome();
  const handlers = { findSchool: onFindSchool || (() => {}), login: () => {}, cart: onCart };
  return (
    <header className="hdr">
      <div className="hdr-in">
        <Logo />
        <div className="hdr-spacer" />
        <nav className="hdr-nav">
          {header.nav.map((item) => {
            if (item.action === "login" && account) {
              return (
                <button key="account" className="hdr-account" onClick={onAccount}>
                  <Avatar name={account.name} size={30} seed={account.seed} />
                  <span className="ha-name">{account.short}</span>
                  <Icon name="chevDown" size={15} />
                </button>
              );
            }
            return (
              <button key={item.id} className={"hdr-chip " + item.kind} onClick={handlers[item.action]}>
                <Icon name={item.icon} size={17} />
                <span className="lbl">{item.label}</span>
                {item.action === "findSchool" && <Icon name="chevDown" size={15} />}
              </button>
            );
          })}
        </nav>
      </div>
    </header>
  );
}

function StoreFooter() {
  const branding = useBranding();
  const { footer } = useChrome();
  return (
    <footer className="ftr">
      <div className="ftr-in">
        <div style={{ maxWidth: 280 }}>
          <div className="logo-pill" style={{ display: "inline-flex", marginBottom: 16 }}>
            <StarMark size={22} primary={branding.star.primary} secondary={branding.star.secondary} />
            <div className="logo-word">
              <b>{branding.wordmark.line1}</b>
              <b style={{ fontSize: "11.5px" }}>{branding.wordmark.line2}</b>
            </div>
          </div>
          {footer.columns.map((c, i) => (
            <React.Fragment key={c.heading}>
              <h5 style={i ? { marginTop: 14 } : null}>{c.heading}</h5>
              {c.lines.map((l) => <p key={l}>{l}</p>)}
            </React.Fragment>
          ))}
        </div>
        <div>
          <h5>{footer.linkColumn.heading}</h5>
          <ul>
            {footer.linkColumn.links.map((l) => <li key={l.label}><a href={l.href}>{l.label}</a></li>)}
          </ul>
        </div>
      </div>
      <div className="ftr-bottom">
        <div className="ftr-bottom-in">
          <span>{footer.copyright}</span>
          <span>{footer.poweredBy}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Logo, AnnounceBar, StoreHeader, StoreFooter });