/* ============================================================
   Considered · Components  (window.GGComp)
   Adapted from prototype: removes dv-toolbar (snav handles it),
   replaces multi-column footer with site footer pass-through,
   removes tweaks/image-slot, always text-only card mode.
   ============================================================ */
const { useState: useStateC, useContext, createContext } = React;
const Ic = window.GGIcons;
const U  = window.GGUtil;
const DATA = window.GG;

/* Navigation context */
const NavContext = createContext(null);
const useNav = () => useContext(NavContext);

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

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

/* ---------- Tag chip ---------- */
const TAG_TINT = {
  Heritage:'b-sky','Royal warrant':'b-coral',Centenarian:'b-butter',
  Bicentenarian:'b-plum','Family-run':'',Handmade:'b-pistachio',
};
const Tag = ({ children, tint, className = '', ...rest }) => (
  <span className={`gg-chip ${tint || TAG_TINT[children] || ''} ${className}`.trim()} {...rest}>{children}</span>
);

/* ---------- Heritage badge ---------- */
const HeritageBadge = ({ brand, withNote }) => {
  const h = U.heritageBadge(brand);
  if (!h) return null;
  return (
    <span className={`gg-chip b-${h.tint}`} title={h.note}>
      <Ic.Crown size={13} strokeWidth={2} />{h.label}
      {withNote && <span style={{ opacity:0.6, fontWeight:600 }}>· {h.note}</span>}
    </span>
  );
};

/* ---------- Price band ---------- */
const Price = ({ band, style }) => (
  <span title={DATA.PRICE[band]?.label} style={{ fontFamily:'var(--font-display)', fontWeight:800, color:'var(--plum-800)', letterSpacing:'0.02em', ...style }}>
    <span>{DATA.PRICE[band]?.glyph}</span>
    <span style={{ opacity:0.28 }}>{'£'.repeat(Math.max(0, 4 - band))}</span>
  </span>
);

/* ---------- Country / est. line ---------- */
const CountryMeta = ({ brand, sep = ' · ' }) => (
  <span className="gg-meta">
    {brand.country}{brand.founded ? <>{sep}<span className="gg-meta-mono">est. {brand.founded}</span></> : null}
  </span>
);

/* ---------- WellName — coloured header carrying brand name ---------- */
const WellName = ({ brand, minHeight = 118, nameSize = 24, showMeta = true, showPrice = true, showHeritage = true, flush = false }) => {
  const h = U.heritageBadge(brand);
  return (
    <div className={`gg-well gg-well-name t-${brand.tint}`}
      style={{ minHeight, display:'flex', flexDirection:'column', justifyContent:'space-between', gap:10, padding:'13px 16px 14px', borderBottom: flush ? 'none' : undefined }}>
      {(showHeritage || showPrice) && (
        <div className="gg-spread" style={{ alignItems:'flex-start', gap:8 }}>
          {showHeritage && h ? <HeritageBadge brand={brand} /> : <span />}
          {showPrice && <Price band={brand.priceBand} style={{ fontSize:13 }} />}
        </div>
      )}
      <div>
        <h3 className="gg-display" style={{ fontSize:nameSize, lineHeight:1.02, letterSpacing:'-0.01em' }}>{brand.name}</h3>
        {showMeta && <div style={{ marginTop:4 }}><CountryMeta brand={brand} /></div>}
      </div>
    </div>
  );
};

/* ---------- BrandCard — text-only (no image wells) ---------- */
const BrandCard = ({ brand }) => {
  const nav = useNav();
  const go = () => nav.go('brand', { slug: brand.slug });
  const famous = U.famousFor(brand);
  return (
    <article className="gg-card gg-card-hover gg-enter" onClick={go}
      style={{ padding:0, overflow:'hidden', display:'flex', flexDirection:'column' }}>
      <WellName brand={brand} minHeight={114} nameSize={24} />
      <div style={{ padding:'13px 17px 16px', display:'flex', flexDirection:'column', gap:10, flex:1 }}>
        <p style={{ margin:0, fontSize:14, lineHeight:1.5, color:'var(--fg-2)' }}>{famous}</p>
        <div className="gg-wrap" style={{ marginTop:'auto', paddingTop:4 }}>
          <Tag tint="b-solid">{brand.primary}</Tag>
          <HeritageBadge brand={brand} />
        </div>
      </div>
    </article>
  );
};

/* ---------- MiniBrand — compact related-brand card ---------- */
const MiniBrand = ({ brand }) => {
  const nav = useNav();
  return (
    <article className="gg-card gg-card-hover" onClick={() => nav.go('brand', { slug: brand.slug })}
      style={{ padding:0, overflow:'hidden' }}>
      <div className={`gg-well gg-well-name t-${brand.tint}`}
        style={{ minHeight:92, display:'flex', flexDirection:'column', justifyContent:'flex-end', gap:3, padding:'12px 14px 13px', borderBottom:'none' }}>
        <h3 className="gg-display" style={{ fontSize:18, lineHeight:1.04 }}>{brand.name}</h3>
        <CountryMeta brand={brand} />
      </div>
    </article>
  );
};

/* ---------- Mascot ---------- */
const Mascot = ({ size = 120, style }) => (
  <img src="../assets/mascot-idle.png" alt="" aria-hidden="true"
    style={{ width:size, height:'auto', filter:'drop-shadow(0 12px 22px rgba(26,10,46,0.18))', ...style }} />
);

/* ---------- TopNav (Considered-specific bar, sits below the snav) ---------- */
const NAVITEMS = [
  { id:'browse',  label:'Browse',     route:'browse' },
  { id:'quiz',    label:'Find a gift',route:'quiz'   },
  { id:'about',   label:'About',      route:'about'  },
];
const TopNav = () => {
  const nav = useNav();
  const [q, setQ] = useStateC('');
  const [open, setOpen] = useStateC(false);
  const [searchOpen, setSearchOpen] = useStateC(false);
  const submit = (e) => {
    e.preventDefault();
    if (q.trim()) { nav.go('search', { q: q.trim() }); setQ(''); setOpen(false); }
  };
  const cur = nav.route.name;
  return (
    <>
      <nav className="gg-nav">
        <div className="gg-container row">
          <div className="gg-wordmark" onClick={() => nav.go('home')}>
            Considered<span className="dot">.</span>
            <span className="gg-subbrand">a Domovoi tool</span>
          </div>
          <div className="gg-nav-links" style={{ marginLeft:8 }}>
            {NAVITEMS.map(it => (
              <a key={it.id} className={cur === it.route ? 'active' : ''} onClick={() => nav.go(it.route)}>{it.label}</a>
            ))}
          </div>
          <div style={{ flex:1 }} />
          <form className={`gg-nav-search${searchOpen ? ' expanded' : ''}`} onSubmit={submit} onClick={() => setSearchOpen(true)}>
            <Ic.Search size={16} style={{ color:'var(--plum-800)', flexShrink:0 }} />
            <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search brands, makers…" aria-label="Search" />
          </form>
          <button className="gg-btn gg-btn-pop gg-btn-sm gg-hide-mobile" onClick={() => nav.go('quiz')} style={{ flexShrink:0 }}>
            <Ic.Gift size={16} />Find a gift
          </button>
          <button className="gg-btn gg-btn-secondary gg-btn-sm gg-nav-menu-btn" onClick={() => setOpen(o => !o)} aria-label="Menu" style={{ padding:9, flexShrink:0 }}>
            {open ? <Ic.X size={18} /> : <Ic.Menu size={18} />}
          </button>
        </div>
      </nav>
      {open && (
        <div className="gg-mobilemenu">
          {NAVITEMS.map(it => <a key={it.id} onClick={() => { nav.go(it.route); setOpen(false); }}>{it.label}</a>)}
        </div>
      )}
    </>
  );
};

window.GGComp = {
  NavContext, useNav,
  Eyebrow, Btn, Tag, HeritageBadge, Price, CountryMeta,
  WellName, BrandCard, MiniBrand, Mascot, TopNav,
};