// tgp-shared.jsx v2 — Design tokens, icons, shared primitives (makeover)

const COLORS = {
  bg:      '#F2F2F7',   // iOS system background
  card:    '#FFFFFF',
  primary: '#020100',
  muted:   '#8E8E93',
  border:  'rgba(0,0,0,0.08)',
  blue:    '#007AFF',
  orange:  '#FF4D1A',
  yellow:  '#F5C518',
  green:   '#34C759',
  red:     '#FF3B30',
};

const IMG = {
  lisa:  './uploads/keesjan.png',
  mark:  './uploads/jelle.png',
  sara:  'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop&crop=face',
  tom:   './uploads/joep.png',
  nina:  './uploads/melissa.png',
  eva:   'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=80&h=80&fit=crop&crop=face',
  anna:  'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=80&h=80&fit=crop&crop=face',
  joep:  './uploads/kevin.png',
  garden:    'https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=600&h=400&fit=crop',
  meetup:    'https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=600&h=400&fit=crop',
  nature:    'https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=600&h=400&fit=crop',
  team:      'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=600&h=400&fit=crop',
  solar:     'https://images.unsplash.com/photo-1509391366360-2e959784a276?w=600&h=400&fit=crop',
  books:     'https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=600&h=400&fit=crop',
  meditation:'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=600&h=400&fit=crop',
  sports:    'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=600&h=400&fit=crop',
  tech:      'https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&h=400&fit=crop',
  repair:    'https://images.unsplash.com/photo-1581092160607-ee22621dd758?w=600&h=400&fit=crop',
  finance:   'https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=600&h=400&fit=crop',
  meeting:   'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=600&h=400&fit=crop',
  cooking:   'https://images.unsplash.com/photo-1466637574441-749b8f19452f?w=600&h=400&fit=crop',
  park:      'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=600&h=400&fit=crop',

  // Community photos — artistic, abstract, evocative
  cOBE:        'https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?w=800&h=500&fit=crop',
  cMeditatie:  'https://images.unsplash.com/photo-1499209974431-9dddcece7f88?w=800&h=500&fit=crop',
  cHomeschool: 'https://images.unsplash.com/photo-1455390582262-044cdead277a?w=800&h=500&fit=crop',
  cCreatief:   'https://images.unsplash.com/photo-1513364776144-60967b0f800f?w=800&h=500&fit=crop',
  cGym:        'https://images.unsplash.com/photo-1558611848-73f7eb4001a1?w=800&h=500&fit=crop',
  cOffroad:    'https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=800&h=500&fit=crop',
  cTinyhouse:  'https://images.unsplash.com/photo-1518780664697-55e3ad937233?w=800&h=500&fit=crop',
  cHolacracy:  'https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=800&h=500&fit=crop',
  cWildkampeer:'https://images.unsplash.com/photo-1511497584788-876760111969?w=800&h=500&fit=crop',
  cBushcraft:  'https://images.unsplash.com/photo-1475113548554-5a36f1f523d6?w=800&h=500&fit=crop',
};

// Base icon component
const Ic = ({ size=20, sw=1.6, children, style, color }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke={color||'currentColor'} strokeWidth={sw}
    strokeLinecap="round" strokeLinejoin="round" style={style}>
    {children}
  </svg>
);

const Ico = {
  Msg:      (p) => <Ic {...p}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></Ic>,
  Bell:     (p) => <Ic {...p}><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></Ic>,
  X:        (p) => <Ic {...p}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></Ic>,
  ChevR:    (p) => <Ic {...p}><polyline points="9 18 15 12 9 6"/></Ic>,
  ChevL:    (p) => <Ic {...p}><polyline points="15 18 9 12 15 6"/></Ic>,
  Plus:     (p) => <Ic {...p}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></Ic>,
  Search:   (p) => <Ic {...p}><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></Ic>,
  Cal:      (p) => <Ic {...p}><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></Ic>,
  Pin:      (p) => <Ic {...p}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></Ic>,
  Check:    (p) => <Ic {...p}><polyline points="20 6 9 17 4 12"/></Ic>,
  Gear:     (p) => <Ic {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></Ic>,
  Help:     (p) => <Ic {...p}><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></Ic>,
  UserPlus: (p) => <Ic {...p}><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></Ic>,
  Info:     (p) => <Ic {...p}><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></Ic>,
  ArrowL:   (p) => <Ic {...p}><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></Ic>,
  Users:    (p) => <Ic {...p}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></Ic>,
  Img:      (p) => <Ic {...p}><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></Ic>,
  Doc:      (p) => <Ic {...p}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></Ic>,
  Quote:    (p) => <Ic {...p}><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"/></Ic>,
  Chat:     (p) => <Ic {...p}><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></Ic>,
  Heart:    (p) => <Ic {...p}><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></Ic>,
  Clock:    (p) => <Ic {...p}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></Ic>,
  Mail:     (p) => <Ic {...p}><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></Ic>,
  Link:     (p) => <Ic {...p}><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></Ic>,
  Globe:    (p) => <Ic {...p}><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></Ic>,
  CheckSq:  (p) => <Ic {...p}><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></Ic>,
  Grid:     (p) => <Ic {...p}><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></Ic>,
  List:     (p) => <Ic {...p}><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></Ic>,
  Zap:      (p) => <Ic {...p}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></Ic>,
  Bulb:     (p) => <Ic {...p}><line x1="9" y1="18" x2="15" y2="18"/><line x1="10" y1="22" x2="14" y2="22"/><path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"/></Ic>,
};

// ─── Primitives ────────────────────────────────────────────────────────────

// Display title — "History" style (900 weight, tight)
const DisplayTitle = ({ children, style, sub }) => (
  <div style={style}>
    <h1 style={{
      fontFamily: '"Instrument Serif", Georgia, serif',
      fontWeight: 400, fontSize: 46, letterSpacing: '-1.2px',
      color: '#020100', margin: 0, lineHeight: 1.0,
    }}>{children}</h1>
    {sub && <p style={{ fontSize: 13, color: '#8E8E93', margin: '5px 0 0', fontFamily: 'Inter, system-ui, sans-serif', fontWeight: 400 }}>{sub}</p>}
  </div>
);

// White card surface
const Card = ({ children, style, onClick, pad = 16 }) => (
  <div onClick={onClick} style={{
    background: '#FFFFFF', borderRadius: 20,
    boxShadow: '0 1px 3px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05)',
    padding: pad,
    cursor: onClick ? 'pointer' : 'default',
    ...style,
  }}>{children}</div>
);

// Filter Pill — App 3 "All / Paid / Unpaid" style
const Pill = ({ active, children, onClick, style }) => (
  <button onClick={onClick} style={{
    padding: '7px 16px', borderRadius: 999, border: 'none',
    background: active ? '#020100' : 'rgba(116,116,128,0.12)',
    color: active ? '#FFFFFF' : '#020100',
    fontSize: 13, fontWeight: active ? 600 : 500,
    cursor: 'pointer', whiteSpace: 'nowrap', flexShrink: 0,
    fontFamily: 'Inter, system-ui, sans-serif',
    transition: 'all 0.15s', outline: 'none',
    display: 'inline-flex', alignItems: 'center', gap: 6,
    ...style,
  }}>{children}</button>
);

// Section label
const SecLabel = ({ children, center, right, style, action, onAction }) => (
  <div style={{ display: 'flex', alignItems: 'center', justifyContent: center ? 'center' : 'space-between', marginBottom: 12, ...style }}>
    <span style={{
      fontSize: 18, fontWeight: 700, letterSpacing: '-0.3px',
      color: '#020100', fontFamily: 'Inter, system-ui, sans-serif',
    }}>{children}</span>
    {action && <button onClick={onAction} style={{ background: 'none', border: 'none', color: '#007AFF', fontSize: 13, fontWeight: 500, cursor: 'pointer', fontFamily: 'Inter, system-ui, sans-serif' }}>{action}</button>}
  </div>
);

// Small muted label
const MetaLabel = ({ children, style }) => (
  <span style={{ fontSize: 12, color: '#8E8E93', fontFamily: 'Inter, system-ui, sans-serif', ...style }}>{children}</span>
);

// Avatar
const Av = ({ src, name, size=36, bg='#E5E5EA', letter, textColor='#020100', style }) => {
  if (src) return <img src={src} alt={name} style={{ width: size, height: size, borderRadius: '50%', objectFit: 'cover', flexShrink: 0, ...style }} />;
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%', background: bg,
      flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size * 0.4, fontWeight: 700, color: textColor, ...style,
    }}>{letter||(name&&name[0])||'?'}</div>
  );
};

// Inline content image
const CImg = ({ src, h=160, style }) => (
  <img src={src} alt="" style={{ width: '100%', height: h, objectFit: 'cover', borderRadius: 14, display: 'block', ...style }} />
);

// Tab slider (inner segmented)
const TabSlider = ({ tabs, active, onChange, style }) => (
  <div style={{
    display: 'flex', background: 'rgba(116,116,128,0.12)',
    borderRadius: 12, padding: 3, gap: 2, ...style,
  }}>
    {tabs.map(t => {
      const label = typeof t === 'string' ? t : t.label;
      const Icon  = typeof t === 'string' ? null : t.Icon;
      const key   = typeof t === 'string' ? t : (t.id || t.label);
      const isActive = active === label || active === key;
      return (
        <button key={key} onClick={() => onChange(label)} style={{
          flex: 1, padding: '7px 0', borderRadius: 10, border: 'none',
          background: isActive ? '#FFFFFF' : 'transparent',
          color: isActive ? '#020100' : '#8E8E93',
          fontSize: 12, fontWeight: isActive ? 600 : 500,
          cursor: 'pointer', fontFamily: 'Inter, system-ui, sans-serif',
          transition: 'all 0.15s', whiteSpace: 'nowrap',
          boxShadow: isActive ? '0 1px 4px rgba(0,0,0,0.12)' : 'none',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
        }}>
          {Icon && <Icon size={13} />}
          {label}
        </button>
      );
    })}
  </div>
);

// Scrollable pill row
const PillRow = ({ pills, active, onChange, style }) => (
  <div style={{ display: 'flex', gap: 8, overflowX: 'auto', scrollbarWidth: 'none', ...style }}>
    {pills.map(p => {
      const label = typeof p === 'string' ? p : p.label;
      const Icon  = typeof p === 'string' ? null : p.Icon;
      return (
        <Pill key={label} active={active === label} onClick={() => onChange(label)}>
          {Icon && <Icon size={13} />}
          {label}
        </Pill>
      );
    })}
  </div>
);

// Progress bar
const ProgressBar = ({ pct, color='#020100', h=4, style }) => (
  <div style={{ background: 'rgba(116,116,128,0.15)', borderRadius: 9, height: h, overflow: 'hidden', ...style }}>
    <div style={{ width: `${pct}%`, height: '100%', background: color, borderRadius: 9, transition: 'width 0.4s' }} />
  </div>
);

// Status dot
const Dot = ({ color='#34C759', size=7 }) => (
  <span style={{ display: 'inline-block', width: size, height: size, borderRadius: '50%', background: color, flexShrink: 0 }} />
);

// Separator
const Sep = ({ style }) => (
  <div style={{ height: 1, background: 'rgba(60,60,67,0.1)', margin: '0 -16px', ...style }} />
);

// Chevron row item (like History list items)
const RowItem = ({ left, title, meta, right, onClick, style }) => (
  <div onClick={onClick} style={{
    display: 'flex', alignItems: 'center', gap: 12,
    padding: '12px 16px', cursor: onClick ? 'pointer' : 'default', ...style,
  }}>
    {left}
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 15, fontWeight: 600, color: '#020100', fontFamily: 'Inter, system-ui, sans-serif', marginBottom: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{title}</div>
      {meta && <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>{meta}</div>}
    </div>
    {right !== undefined ? right : <Ico.ChevR size={16} color="#C7C7CC" />}
  </div>
);

Object.assign(window, {
  COLORS, IMG, Ic, Ico,
  DisplayTitle, Card, Pill, SecLabel, MetaLabel, Av, CImg,
  TabSlider, PillRow, ProgressBar, Dot, Sep, RowItem,
});