// The Hub screen — compact 2×4 grid, no aura hero, uses webp illustrations.
const { DG, DG70, DG60, DG50, DG10, BGMINT, SPINE } = window;
const MINT32 = 'rgba(119,222,186,0.32)';
const MINT14 = 'rgba(119,222,186,0.14)';

const HubHero = () => (
  <div style={{ padding: '6px 4px 12px' }}>
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '3px 10px', background: MINT14, border: `1px solid ${DG10}`, borderRadius: 9999, fontSize: 11, color: DG70, fontWeight: 500 }}>
      <span style={{ width: 5, height: 5, borderRadius: 9999, background: SPINE, display: 'inline-block' }} />
      8 digitale assistenten · probeer er één
    </div>
    <h2 style={{ fontSize: 22, lineHeight: 1.15, color: DG, margin: '10px 0 4px', letterSpacing: '-0.02em', fontWeight: 700 }}>
      Ontmoet je digitale team.
    </h2>
    <p style={{ fontSize: 12.5, color: DG70, margin: 0, lineHeight: 1.4 }}>
      Klik een kaartje om de demo te starten. Demo-casus: <strong style={{ color: DG }}>Adam Hourmat · chronische patellapeesontsteking</strong>.
    </p>
  </div>
);

const AssistantCard = ({ a, onClick }) => {
  const [hover, setHover] = React.useState(false);
  const Ill = window.IllustrationFor;
  return (
    <button
      onClick={() => onClick(a.id)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative', textAlign: 'left', cursor: 'pointer',
        background: '#fff', border: `1px solid ${MINT32}`, borderRadius: 12,
        padding: 12, display: 'flex', flexDirection: 'column', gap: 4, fontFamily: 'inherit',
        transform: hover ? 'translateY(-1px)' : 'translateY(0)',
        boxShadow: hover ? '0 6px 18px -8px rgba(3,61,46,0.22)' : '0 1px 2px rgba(3,61,46,0.04)',
        transition: 'transform 220ms ease, box-shadow 220ms ease',
        minHeight: 112,
      }}
    >
      <span style={{ position: 'absolute', top: 8, right: 10, fontSize: 10, fontWeight: 600, color: 'rgba(3,61,46,0.40)', letterSpacing: '0.04em', fontFamily: 'ui-monospace, Menlo, monospace' }}>{a.number || a.num}</span>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        {Ill ? <Ill slug={a.slug || a.id} size={36} /> : <div style={{ width: 36, height: 36 }} />}
        {a.pillar && (
          <span style={{ fontSize: 9, padding: '1px 6px', borderRadius: 9999, background: DG, color: '#fff', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
            {a.pillar}
          </span>
        )}
      </div>
      <div style={{ fontSize: 14, fontWeight: 700, color: DG, letterSpacing: '-0.01em', lineHeight: 1.2, marginTop: 2 }}>{a.shortName || a.name}</div>
      <div style={{ fontSize: 11, color: DG70, lineHeight: 1.3, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{a.tagline}</div>
    </button>
  );
};

const Hub = ({ assistants, onPick }) => (
  <div>
    <style>{`html.is-mobile .hy-hub-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}`}</style>
    <HubHero />
    <div className="hy-hub-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
      {assistants.map((a) => <AssistantCard key={a.id} a={a} onClick={onPick} />)}
    </div>
    <div style={{ marginTop: 12, padding: '8px 12px', background: 'rgba(255,255,255,0.5)', border: `1px solid ${DG10}`, borderRadius: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
      <span style={{ color: DG, display: 'inline-flex', alignItems: 'center', flexShrink: 0 }}>{window.Ic.Shield(14)}</span>
      <span style={{ fontSize: 11, color: DG70, lineHeight: 1.4 }}>
        <strong style={{ color: DG }}>Hysio is geen medisch hulpmiddel.</strong> De fysiotherapeut blijft altijd eindverantwoordelijk.
      </span>
    </div>
  </div>
);

window.Hub = Hub;