/* ============================================================
   HERMES Connect Hub — Reusable content widgets
   ============================================================ */

/* Initials avatar placeholder (no photos on file) */
function Avatar({ name, size = 'md' }) {
  const initials = name.split(' ').filter(Boolean).slice(0, 2).map((w) => w[0]).join('');
  const dims = size === 'lg' ? 96 : 72;
  return (
    <div className="avatar" style={{ width: dims, height: dims }} aria-hidden="true">
      <span>{initials}</span>
    </div>
  );
}

/* Person card (board / office / chapters) */
function PersonCard({ p }) {
  return (
    <div className="person card card--hover">
      <Avatar name={p.name} />
      <div className="person__body">
        <div className="person__name">{p.name}</div>
        {p.role && <div className="person__role">{p.role}</div>}
        {(p.org || p.region) && <div className="person__org">{p.region || p.org}{p.region && p.org ? ` · ${p.org}` : ''}</div>}
      </div>
    </div>
  );
}

/* Event card */
function EventCard({ ev, lang, onOpen, compact }) {
  const { eventTypes, t } = HC;
  return (
    <div className={`evt card card--hover ${compact ? 'evt--compact' : ''}`} onClick={() => onOpen && onOpen(ev)}>
      <div className="evt__date">
        <span className="evt__wd">{tr(ev.weekday, lang)}</span>
        <span className="evt__day">{ev.day}</span>
        <span className="evt__mon">{tr(ev.mon, lang)}</span>
      </div>
      <div className="evt__body">
        <div className="evt__tags">
          <span className={`chip ${ev.type === 'flagship' ? '' : 'chip--soft'}`} style={ev.type === 'flagship' ? null : null}>{tr(eventTypes[ev.type], lang)}</span>
          {ev.members && <span className="chip chip--navy">Members only</span>}
        </div>
        <h3 className="evt__title">{ev.title}</h3>
        <div className="evt__meta">
          <span className="evt__metaline"><Ico name="clock" /> {ev.time}</span>
          <span className="evt__metaline"><Ico name="pin" /> {ev.place}</span>
        </div>
      </div>
      {!compact && (
        <div className="evt__cta">
          <span className="linkarrow">{tr(t.details, lang)} <span className="arr">→</span></span>
        </div>
      )}
    </div>
  );
}

/* Logo wall */
function LogoWall({ items, columns }) {
  return (
    <div className="logowall" style={columns ? { '--cols': columns } : null}>
      {items.map((m) => (
        <div key={m.file} className="logowall__cell" title={m.name}>
          <img src={`assets/members/${m.file}`} alt={m.name} loading="lazy" />
        </div>
      ))}
    </div>
  );
}

/* Small inline icons (line style) */
function Ico({ name, size = 17 }) {
  const paths = {
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></>,
    pin: <><path d="M12 21s7-5.5 7-11a7 7 0 10-14 0c0 5.5 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></>,
    arrow: <path d="M5 12h14M13 6l6 6-6 6"/>,
    check: <path d="M4 12.5l5 5 11-12"/>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M4 7l8 6 8-6"/></>,
    doc: <><path d="M7 3h7l5 5v13a1 1 0 01-1 1H7a1 1 0 01-1-1V4a1 1 0 011-1z"/><path d="M14 3v5h5"/></>,
    spark: <path d="M12 3l2.2 6.3L20 12l-5.8 2.7L12 21l-2.2-6.3L4 12l5.8-2.7z"/>,
    users: <><circle cx="9" cy="8" r="3.2"/><path d="M3.5 20a5.5 5.5 0 0111 0"/><path d="M16 5.5a3.2 3.2 0 010 5M16.5 20a5.5 5.5 0 00-2.5-4.6"/></>,
    globe: <><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.8 3 2.8 15 0 18M12 3c-2.8 3-2.8 15 0 18"/></>,
    arrowright: <path d="M5 12h14M13 6l6 6-6 6"/>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {paths[name]}
    </svg>
  );
}

/* Page hero (sub-pages) */
function PageHero({ eyebrow, title, lede, lang, children }) {
  return (
    <section className="pagehero">
      <div className="wrap">
        <Reveal>
          <div className="eyebrow">{tr(eyebrow, lang)}</div>
          <h1 className="display h-l pagehero__title">{tr(title, lang)}</h1>
          {lede && <p className="lede measure" style={{ marginTop: 22 }}>{tr(lede, lang)}</p>}
          {children}
        </Reveal>
      </div>
      <div className="pagehero__bracket" aria-hidden="true"><BracketMark size={150} stroke={2.5} color="rgba(10,86,148,.16)" /></div>
    </section>
  );
}

Object.assign(window, { Avatar, PersonCard, EventCard, LogoWall, Ico, PageHero });