/* ============================================================
   Catered · components  (window.CATComp)
   Loaded after icons.jsx. Carries the Domovoi shell: the dark
   tool-bar, the light product nav with tabs, footer, shared UI.
   ============================================================ */
const { useState: useStateC, useEffect: useEffectC, useRef: useRefC } = React;
const Ic = window.CATIcons;

const TABS = [
  { id: 'recipes',  label: 'Recipes',  icon: Ic.Fork },
  { id: 'week',     label: 'The week',  icon: Ic.Calendar },
  { id: 'shopping', label: 'Shopping',  icon: Ic.Cart },
  { id: 'export',   label: 'Add to calendar',    icon: Ic.CalendarPlus },
];

/* ---------- Eyebrow ---------- */
const Eyebrow = ({ children, style }) => (
  <span className="gg-eyebrow" style={style}>
    <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--coral-300)', display: 'inline-block' }} />
    {children}
  </span>
);

/* ---------- Button ---------- */
const Btn = ({ variant = 'pop', block, sm, lg, leftIcon, rightIcon, children, className = '', ...rest }) => (
  <button className={`gg-btn gg-btn-${variant}${block ? ' gg-btn-block' : ''}${sm ? ' gg-btn-sm' : ''}${lg ? ' cat-btn-lg' : ''} ${className}`.trim()} {...rest}>
    {leftIcon}{children}{rightIcon}
  </button>
);

/* ---------- Chip ---------- */
const Chip = ({ tint, children, ...rest }) => (
  <span className={`gg-chip ${tint ? 'b-' + tint : ''}`.trim()} {...rest}>{children}</span>
);

/* ---------- Segmented control ---------- */
const Segmented = ({ value, onChange, options, size }) => (
  <div className={`cat-seg${size === 'sm' ? ' sm' : ''}`} role="tablist">
    {options.map((o) => (
      <button key={o.value} role="tab" aria-selected={value === o.value}
        className={`cat-seg-btn${value === o.value ? ' active' : ''}`}
        onClick={() => onChange(o.value)}>
        {o.icon ? <o.icon size={15} /> : null}{o.label}
      </button>
    ))}
  </div>
);

/* ---------- Modal ---------- */
const Modal = ({ open, onClose, title, subtitle, children, maxWidth = 560 }) => {
  useEffectC(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div className="cat-modal-back" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="cat-modal gg-enter" style={{ maxWidth }}>
        <div className="cat-modal-head">
          <div>
            <h3 className="gg-display" style={{ fontSize: 24 }}>{title}</h3>
            {subtitle ? <div className="gg-meta" style={{ marginTop: 4 }}>{subtitle}</div> : null}
          </div>
          <button className="cat-iconbtn" onClick={onClose} aria-label="Close"><Ic.X size={18} /></button>
        </div>
        {children}
      </div>
    </div>
  );
};

/* ---------- Toast ---------- */
const Toast = ({ msg }) => {
  if (!msg) return null;
  return <div className="cat-toast gg-enter">{msg}</div>;
};

/* ---------- Top navigation (dark tool-bar + light product nav with tabs) ---------- */
const TopNav = ({ tab, setTab, counts, weekLabel }) => {
  const [menuOpen, setMenuOpen] = useStateC(false);
  return (
    <>
      <div className="dv-toolbar">
        <div className="gg-container row" style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <a className="dv-home" href="../">
            <img src="assets/mascot-idle.png" alt="" aria-hidden="true" />
            <span className="dv-word">domovoi</span>
          </a>
          <span className="dv-sep" aria-hidden="true">/</span>
          <span className="dv-tools-label">Free tools</span>
          <a className="dv-tool active" href="./">Catered</a>
          <a className="dv-tool" href="../considered/">Considered</a>
          <div style={{ flex: 1 }} />
          <a className="dv-tool dv-mainlink" href="../">Home</a>
          <a className="dv-tool dv-mainlink" href="../app.html">The app</a>
          <a className="dv-tool dv-mainlink" href="../about.html">About</a>
          <a className="dv-alpha" href="../app.html#waitlist"><span className="dv-pulse" />Join the alpha</a>
        </div>
      </div>

      <nav className="gg-nav cat-nav">
        <div className="gg-container row">
          <div className="gg-wordmark" onClick={() => setTab('recipes')}>
            Catered<span className="dot">.</span>
            <span className="gg-subbrand">a Domovoi tool</span>
          </div>

          <div className="cat-tabs" role="tablist">
            {TABS.map((t) => {
              const n = counts[t.id];
              return (
                <button key={t.id} role="tab" aria-selected={tab === t.id}
                  className={`cat-tab${tab === t.id ? ' active' : ''}`} onClick={() => setTab(t.id)}>
                  <t.icon size={16} />
                  <span className="cat-tab-label">{t.label}</span>
                  {n ? <span className="cat-tab-count">{n}</span> : null}
                </button>
              );
            })}
          </div>

          <div style={{ flex: 1 }} />
          {weekLabel ? <span className="cat-nav-week gg-hide-mobile"><Ic.Calendar size={15} />{weekLabel}</span> : null}
          <button className="gg-btn gg-btn-secondary gg-btn-sm cat-menu-btn" aria-label="Menu" onClick={() => setMenuOpen((o) => !o)} style={{ padding: 9 }}>
            {menuOpen ? <Ic.X size={18} /> : <Ic.Menu size={18} />}
          </button>
        </div>
        {menuOpen && (
          <div className="cat-mobiletabs">
            {TABS.map((t) => (
              <button key={t.id} className={tab === t.id ? 'active' : ''} onClick={() => { setTab(t.id); setMenuOpen(false); }}>
                <t.icon size={18} />{t.label}{counts[t.id] ? <span className="cat-tab-count">{counts[t.id]}</span> : null}
              </button>
            ))}
          </div>
        )}
      </nav>
    </>
  );
};

/* ---------- Footer ---------- */
const Footer = () => (
  <footer className="site">
    <span>© 2026 Domovoi</span>
    <span className="links">
      <a href="../about.html">About</a>
      <span className="dot"></span>
      <a href="../privacy.html">Privacy</a>
      <span className="dot"></span>
      <a href="../terms.html">Terms</a>
    </span>
    <span className="right">Made for two<span className="heart"></span></span>
  </footer>
);

window.CATComp = { TABS, Eyebrow, Btn, Chip, Segmented, Modal, Toast, TopNav, Footer };