// tgp-profile.jsx — Profile overlay (opens from top-right avatar, clean Identity-style cards)

const PROFILE_ACCENTS = {
  blue:   '#007AFF',
  orange: '#FF4D1A',
  green:  '#34C759',
  yellow: '#F5C518',
  purple: '#7C3AED',
  red:    '#FF3B30',
};
const P_SERIF        = { fontFamily: '"Instrument Serif", Georgia, serif', fontWeight: 400, letterSpacing: '-0.4px' };
const P_SERIF_ITALIC = { fontFamily: '"Instrument Serif", Georgia, serif', fontStyle: 'italic', fontWeight: 400, letterSpacing: '-0.3px' };
const P_SANS         = { fontFamily: 'Inter, system-ui, sans-serif' };
const P_CARD = {
  background: 'rgba(116,116,128,0.08)',
  borderRadius: 18,
  padding: 16,
};

const PSectionTitle = ({ children, size = 22, style }) => (
  <h3 style={{
    ...P_SERIF, fontSize: size, color: '#020100',
    margin: '0 0 12px', lineHeight: 1.05, ...style,
  }}>{children}</h3>
);

const PLabel = ({ children, style }) => (
  <span style={{
    ...P_SANS, fontSize: 10.5, fontWeight: 700,
    color: 'rgba(2,1,0,0.45)',
    textTransform: 'uppercase', letterSpacing: '0.08em',
    display: 'block', ...style,
  }}>{children}</span>
);

const PChip = ({ children, color = '#020100', bg = 'rgba(255,255,255,0.7)', border = 'rgba(2,1,0,0.08)', style }) => (
  <span style={{
    ...P_SANS, fontSize: 12, fontWeight: 600, color,
    padding: '5px 11px', borderRadius: 999,
    background: bg, border: `1px solid ${border}`,
    display: 'inline-flex', alignItems: 'center', gap: 5, ...style,
  }}>{children}</span>
);

// ─── Trophy SVG figures — 3D style with gradients, highlights and shadows ──
const TrophyFig = ({ kind, color, size = 38 }) => {
  const uid = `${kind}-${color.replace('#','')}`;
  const common = { width: size, height: size, viewBox: '0 0 24 24' };

  const defs = (
    <defs>
      <linearGradient id={`g-main-${uid}`} x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%"   stopColor="#FFFFFF" stopOpacity="0.55" />
        <stop offset="40%"  stopColor={color}   stopOpacity="1" />
        <stop offset="100%" stopColor="#000000" stopOpacity="0.35" />
      </linearGradient>
      <linearGradient id={`g-base-${uid}`} x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%"   stopColor={color}   stopOpacity="0.85" />
        <stop offset="100%" stopColor="#000000" stopOpacity="0.55" />
      </linearGradient>
      <radialGradient id={`g-rad-${uid}`} cx="0.35" cy="0.3" r="0.9">
        <stop offset="0%"   stopColor="#FFFFFF" stopOpacity="0.75" />
        <stop offset="45%"  stopColor={color}   stopOpacity="1" />
        <stop offset="100%" stopColor="#000000" stopOpacity="0.45" />
      </radialGradient>
    </defs>
  );

  if (kind === 'cup') return (
    <svg {...common}>{defs}
      {/* Base plate shadow */}
      <ellipse cx="12" cy="21" rx="6" ry="0.9" fill="#000" opacity="0.2" />
      {/* Base pedestal */}
      <rect x="7" y="18.5" width="10" height="2.2" rx="0.6" fill={`url(#g-base-${uid})`} />
      <rect x="9" y="16" width="6" height="2.8" fill={`url(#g-base-${uid})`} />
      {/* Stem */}
      <path d="M10.3 12.2h3.4l-0.4 3.8h-2.6z" fill={`url(#g-base-${uid})`} />
      {/* Handles */}
      <path d="M6 5H3v2a3 3 0 0 0 3 3.3" fill="none" stroke={color} strokeWidth="1.7" strokeLinecap="round" />
      <path d="M18 5h3v2a3 3 0 0 1-3 3.3" fill="none" stroke={color} strokeWidth="1.7" strokeLinecap="round" />
      <path d="M6 5H3v2a3 3 0 0 0 3 3.3" fill="none" stroke="#FFF" strokeWidth="0.6" strokeLinecap="round" opacity="0.45" transform="translate(-0.3 -0.3)" />
      {/* Cup body */}
      <path d="M6 3h12v5a6 6 0 0 1-12 0V3z" fill={`url(#g-main-${uid})`} />
      {/* Rim */}
      <rect x="5.5" y="3" width="13" height="1.2" rx="0.4" fill={color} />
      <rect x="5.5" y="3" width="13" height="0.5" rx="0.25" fill="#FFF" opacity="0.5" />
      {/* Gloss highlight */}
      <path d="M8 4.5c-0.4 1.5-0.3 3 0.4 4.2" stroke="#FFF" strokeWidth="1.1" strokeLinecap="round" opacity="0.6" fill="none" />
    </svg>
  );

  if (kind === 'medal') return (
    <svg {...common}>{defs}
      {/* Ribbon left */}
      <path d="M7 2l3 7 1.5-3.5z" fill={color} opacity="0.85" />
      <path d="M7 2l3 7 1.5-3.5z" fill="#FFF" opacity="0.2" />
      {/* Ribbon right */}
      <path d="M17 2l-3 7-1.5-3.5z" fill={color} opacity="0.7" />
      {/* Ribbon knot */}
      <rect x="9.5" y="2" width="5" height="1.5" fill={color} />
      <rect x="9.5" y="2" width="5" height="0.6" fill="#FFF" opacity="0.5" />
      {/* Medal shadow */}
      <ellipse cx="12" cy="21" rx="5.5" ry="0.7" fill="#000" opacity="0.22" />
      {/* Medal disc */}
      <circle cx="12" cy="15" r="6" fill={`url(#g-rad-${uid})`} />
      {/* Inner ring */}
      <circle cx="12" cy="15" r="4.2" fill="none" stroke="#000" strokeWidth="0.4" opacity="0.25" />
      <circle cx="12" cy="15" r="4.2" fill="none" stroke="#FFF" strokeWidth="0.4" opacity="0.35" transform="translate(-0.2 -0.2)" />
      {/* Star center */}
      <path d="M12 11.8l0.9 1.9 2.1 0.3-1.5 1.4 0.4 2.1-1.9-1-1.9 1 0.4-2.1-1.5-1.4 2.1-0.3z" fill="#FFF" opacity="0.85" />
      {/* Gloss */}
      <path d="M8.5 12c-0.6 0.8-0.9 1.7-0.9 2.5" stroke="#FFF" strokeWidth="1" strokeLinecap="round" opacity="0.6" fill="none" />
    </svg>
  );

  if (kind === 'shield') return (
    <svg {...common}>{defs}
      {/* Shadow */}
      <ellipse cx="12" cy="21.5" rx="4.5" ry="0.6" fill="#000" opacity="0.22" />
      {/* Shield body */}
      <path d="M12 2.5l8 2.8v6c0 4.5-3.5 8-8 9.2-4.5-1.2-8-4.7-8-9.2v-6l8-2.8z" fill={`url(#g-main-${uid})`} />
      {/* Rim */}
      <path d="M12 2.5l8 2.8v6c0 4.5-3.5 8-8 9.2-4.5-1.2-8-4.7-8-9.2v-6l8-2.8z" fill="none" stroke={color} strokeWidth="0.6" opacity="0.8" />
      {/* Inner bevel */}
      <path d="M12 4.5l6 2.1v4.7c0 3.5-2.7 6.3-6 7.2-3.3-0.9-6-3.7-6-7.2V6.6l6-2.1z" fill="none" stroke="#FFF" strokeWidth="0.5" opacity="0.35" />
      {/* Check mark */}
      <path d="M8.5 12l2.5 2.5 4.5-4.5" fill="none" stroke="#FFF" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" opacity="0.95" />
      {/* Top gloss */}
      <path d="M6 5.8c0.5 2 0.2 4 0 6" stroke="#FFF" strokeWidth="1" strokeLinecap="round" opacity="0.45" fill="none" />
    </svg>
  );

  if (kind === 'star') return (
    <svg {...common}>{defs}
      {/* Shadow */}
      <ellipse cx="12" cy="21.2" rx="4.5" ry="0.6" fill="#000" opacity="0.2" />
      {/* Outer star */}
      <path d="M12 3l2.6 5.7 6.2 0.8-4.6 4.3 1.2 6.1L12 17l-5.4 2.9 1.2-6.1-4.6-4.3 6.2-0.8z" fill={`url(#g-rad-${uid})`} />
      {/* Rim */}
      <path d="M12 3l2.6 5.7 6.2 0.8-4.6 4.3 1.2 6.1L12 17l-5.4 2.9 1.2-6.1-4.6-4.3 6.2-0.8z" fill="none" stroke={color} strokeWidth="0.4" opacity="0.8" />
      {/* Inner gloss star */}
      <path d="M12 6l1.3 2.8 3 0.5-2.3 2.1 0.6 3L12 13l-2.6 1.4 0.6-3-2.3-2.1 3-0.5z" fill="#FFF" opacity="0.25" />
      {/* Sparkle highlight */}
      <circle cx="9.5" cy="8.5" r="0.8" fill="#FFF" opacity="0.7" />
    </svg>
  );

  if (kind === 'book') return (
    <svg {...common}>{defs}
      {/* Shadow */}
      <ellipse cx="12" cy="20.5" rx="7" ry="0.7" fill="#000" opacity="0.22" />
      {/* Bottom pages */}
      <rect x="4" y="5" width="16" height="14" rx="1" fill="#F5F1E8" />
      <rect x="4" y="5" width="16" height="14" rx="1" fill="none" stroke="#000" strokeWidth="0.3" opacity="0.25" />
      {/* Book cover — left half */}
      <path d="M4 4h8v15H5c-0.6 0-1-0.4-1-1V4z" fill={`url(#g-main-${uid})`} />
      {/* Book cover — right half (slightly darker for 3D page fold) */}
      <path d="M12 4h8v14c0 0.6-0.4 1-1 1h-7V4z" fill={color} />
      <path d="M12 4h8v14c0 0.6-0.4 1-1 1h-7V4z" fill="#000" opacity="0.15" />
      {/* Spine highlight */}
      <rect x="11.7" y="4" width="0.6" height="15" fill="#000" opacity="0.35" />
      {/* Top cover gloss */}
      <rect x="4" y="4" width="16" height="1.2" fill="#FFF" opacity="0.35" />
      {/* Page lines */}
      <line x1="14" y1="8"  x2="18" y2="8"  stroke="#FFF" strokeWidth="0.4" opacity="0.5" />
      <line x1="14" y1="10" x2="18" y2="10" stroke="#FFF" strokeWidth="0.4" opacity="0.5" />
      {/* Bookmark ribbon */}
      <path d="M16 4v6l1-1 1 1V4z" fill="#FFF" opacity="0.85" />
      <path d="M16 4v6l1-1 1 1V4z" fill={color} opacity="0.6" />
    </svg>
  );

  if (kind === 'flame') return (
    <svg {...common}>{defs}
      {/* Shadow */}
      <ellipse cx="12" cy="21" rx="4" ry="0.6" fill="#000" opacity="0.22" />
      {/* Outer flame */}
      <path d="M12 2c1 2.5 4 4.5 4 8.5 0 3-1.8 5.5-4 5.5s-4-2.5-4-5.5c0-1.6 0.5-2.5 1-3.5 0.3 1.5 1 2.5 2 3 0-2.5 0-5 1-8z" fill={`url(#g-rad-${uid})`} />
      {/* Inner flame */}
      <path d="M12 6c0.6 1.5 2.2 3 2.2 5.8 0 1.8-1 3.2-2.2 3.2s-2.2-1.4-2.2-3.2c0-1 0.3-1.5 0.6-2 0.3 0.9 0.7 1.3 1.3 1.6 0-1.5 0-3 0.3-5.4z" fill="#FFF" opacity="0.55" />
      {/* Core */}
      <ellipse cx="12" cy="12" rx="1" ry="1.8" fill="#FFF" opacity="0.85" />
      {/* Base platform */}
      <path d="M8 16.5a4 4 0 0 0 8 0" stroke={color} strokeWidth="1.3" strokeLinecap="round" fill="none" />
      <path d="M8 16.5a4 4 0 0 0 8 0" stroke="#FFF" strokeWidth="0.5" strokeLinecap="round" fill="none" opacity="0.45" transform="translate(0 -0.3)" />
    </svg>
  );
  return null;
};

// Trophy / badge card
const TrophyBadge = ({ kind, label, sub, color, earned }) => (
  <div style={{
    flex: 1, minWidth: 0,
    background: '#FFFFFF',
    borderRadius: 16,
    padding: '14px 8px 12px',
    textAlign: 'center',
    opacity: earned ? 1 : 0.42,
    position: 'relative',
    border: earned ? `1px solid ${color}22` : '1px solid rgba(2,1,0,0.05)',
  }}>
    <div style={{
      width: 52, height: 52, margin: '0 auto 8px',
      borderRadius: 16,
      background: `radial-gradient(circle at 35% 30%, ${color}22, ${color}0a 70%)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      filter: earned ? `drop-shadow(0 2px 4px ${color}40)` : 'none',
    }}>
      <TrophyFig kind={kind} color={color} size={38} />
    </div>
    <div style={{ ...P_SERIF, fontSize: 15, color: '#020100', marginBottom: 2, lineHeight: 1.1 }}>{label}</div>
    <div style={{ ...P_SANS, fontSize: 9.5, color: 'rgba(2,1,0,0.45)', fontWeight: 500 }}>{sub}</div>
    {!earned && (
      <div style={{
        position: 'absolute', top: 8, right: 8,
        ...P_SANS, fontSize: 8, fontWeight: 700,
        color: 'rgba(2,1,0,0.4)',
      }}>Nog te behalen</div>
    )}
  </div>
);

// ─── Future goal row (expandable) ──────────────────────────────────────────
const GoalRow = ({ goal, color, isFirst, isLast }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ display: 'flex', gap: 12, alignItems: 'stretch' }}>
      {/* Timeline rail */}
      <div style={{ width: 14, display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
        <div style={{ width: 2, height: isFirst ? 0 : 8, background: 'rgba(2,1,0,0.1)' }} />
        <div style={{
          width: 12, height: 12, borderRadius: '50%',
          background: color, border: '3px solid #FFFFFF',
          boxShadow: `0 0 0 2px ${color}44`,
          flexShrink: 0,
        }} />
        <div style={{ width: 2, flex: 1, background: isLast ? 'transparent' : 'rgba(2,1,0,0.1)', minHeight: 8 }} />
      </div>

      {/* Content */}
      <div style={{ flex: 1, paddingBottom: isLast ? 0 : 14 }}>
        <button onClick={() => setOpen(o => !o)} style={{
          width: '100%', background: 'rgba(255,255,255,0.7)',
          border: 'none', borderRadius: 13, padding: '11px 13px',
          display: 'flex', alignItems: 'flex-start', gap: 10,
          textAlign: 'left', cursor: 'pointer',
        }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ ...P_SANS, fontSize: 13.5, fontWeight: 700, color: '#020100', lineHeight: 1.25 }}>{goal.title}</div>
            {!open && goal.teaser && (
              <div style={{ ...P_SANS, fontSize: 11.5, color: 'rgba(2,1,0,0.5)', marginTop: 2 }}>{goal.teaser}</div>
            )}
          </div>
          <span style={{
            width: 22, height: 22, borderRadius: '50%',
            background: `${color}18`, color,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            flexShrink: 0, fontSize: 13,
            transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
            transition: 'transform 0.2s',
          }}>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
          </span>
        </button>
        {open && (
          <div style={{
            marginTop: 8,
            padding: '12px 14px',
            background: `${color}0d`,
            border: `1px solid ${color}26`,
            borderRadius: 12,
          }}>
            <p style={{ ...P_SANS, fontSize: 12.5, color: 'rgba(2,1,0,0.75)', lineHeight: 1.5, margin: '0 0 10px' }}>{goal.desc}</p>
            {goal.steps && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
                {goal.steps.map((s, i) => (
                  <div key={i} style={{ display: 'flex', gap: 7, alignItems: 'flex-start' }}>
                    <span style={{
                      ...P_SANS, fontSize: 10, fontWeight: 700, color,
                      width: 16, flexShrink: 0, marginTop: 1,
                    }}>{String(i + 1).padStart(2, '0')}</span>
                    <span style={{ ...P_SANS, fontSize: 12, color: 'rgba(2,1,0,0.75)', lineHeight: 1.4 }}>{s}</span>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
};

const ProfilePage = ({ isOpen, onClose }) => {
  const [allCommunitiesOpen, setAllCommunitiesOpen] = React.useState(false);
  React.useEffect(() => {
    if (!isOpen) return;
  }, [isOpen]);

  const futureTimeline = [
    {
      when: 'Dit kwartaal', color: '#020100',
      goals: [
        { title: 'Regeneratieve community opzetten', teaser: 'Startgroep van 12 mensen in Eersel', desc: 'Een lokaal regeneratief netwerk bouwen in Eersel, met focus op kennisdelen en onderlinge hulp. Eerste bijeenkomsten in het dorpshuis, later naar buiten.', steps: ['Kernteam van 4 mensen werven','Eerste bijeenkomst plannen voor juni','Manifest en ritme vastleggen','Onboarding voor nieuwe leden'] },
        { title: 'Workshop-serie Holocratie afronden', teaser: '3 van 6 sessies gedaan', desc: 'Een hands-on serie waarin deelnemers zelf een holocratische structuur bouwen voor hun eigen project. Resultaat: werkende rol-structuur.', steps: ['Sessie 4: Spanning en processen','Sessie 5: Rol-evolutie','Sessie 6: Eigen adoptieplan'] },
      ],
    },
    {
      when: 'Dit jaar', color: '#6E6E73',
      goals: [
        { title: 'Eerste boek over holocratie publiceren', teaser: 'Eigen ervaringen en praktijk-gidsen', desc: 'Een toegankelijk boek voor Nederlandstalige lezers, gebaseerd op 4 jaar praktijk. Niet theoretisch, maar met échte voorbeelden.', steps: ['Outline afronden (Q2)','Eerste draft (Q3)','Review met 10 lezers','Publicatie via onafhankelijke uitgeverij'] },
        { title: 'Studio openen voor co-creatie', teaser: 'Fysieke plek in regio Eindhoven', desc: 'Een kleine werkplek waar initiatieven samenkomen. Deels studio, deels ontmoetingsruimte.', steps: ['Locatie zoeken in regio','Financiering via coöperatie','Inrichten met 6 kernmensen'] },
      ],
    },
    {
      when: 'Later', color: '#AEAEB2',
      goals: [
        { title: 'Fysieke plek voor regeneratieve economie', teaser: '5+ jaar horizon', desc: 'Een hub waar projecten wonen, leren en bouwen — een combinatie van werkplek, leerplek en gemeenschap.', steps: ['Visie uitwerken met 20 mensen','Partners zoeken','Locatie en financiering','Bouwen en openen'] },
        { title: 'Coöperatief platform voor initiatieven', teaser: 'Iedereen mede-eigenaar', desc: 'Een structuur waarbij gebruikers stem en aandeel hebben. Geen investeerders, wel contributors.', steps: ['Juridische structuur','Governance-model','Bèta met 100 mensen'] },
      ],
    },
  ];

  const myCommunities = [
    { name: 'OBE Nederland',          role: 'Lead Link',    members: 186, scope: 'Nationaal',      themes: ['Bewustzijn','Meditatie'],        img: IMG.cOBE        },
    { name: 'Holacracy Ondernemen',   role: 'Facilitator',  members: 94,  scope: 'Nationaal',      themes: ['Organisatie','Economie'],        img: IMG.cHolacracy  },
    { name: 'Homeschooling NL',       role: 'Content Lead', members: 234, scope: 'Nationaal',      themes: ['Onderwijs','Gezin'],             img: IMG.cHomeschool },
    { name: 'Tinyhouse Nederland',    role: 'Ontwerper',    members: 287, scope: 'Nationaal',      themes: ['Bouwen','Duurzaamheid'],         img: IMG.cTinyhouse  },
    { name: 'Eigen Gym Bouwen',       role: 'Oprichter',    members: 67,  scope: 'Lokaal',         themes: ['Sport','Bouwen'],                img: IMG.cGym        },
    { name: '4x4 Off-road NL',        role: 'Lid',          members: 312, scope: 'Internationaal', themes: ['Avontuur','Outdoor'],            img: IMG.cOffroad    },
    { name: 'Meditatie Thuis',        role: 'Lid',          members: 124, scope: 'Nationaal',      themes: ['Meditatie','Welzijn'],           img: IMG.cMeditatie  },
  ];
  const scopeColors = { 'Lokaal':PROFILE_ACCENTS.green, 'Nationaal':PROFILE_ACCENTS.blue, 'Internationaal':PROFILE_ACCENTS.orange };
  const shownCommunities = allCommunitiesOpen ? myCommunities : myCommunities.slice(0, 3);

  const highlights = [
    { when: '2026', what: 'Ambassadeur TGP platform'             },
    { when: '2025', what: 'Oprichter Regeneratieve Buurt DH'     },
    { when: '2024', what: '3 practicals meer dan 1000x gebruikt' },
    { when: '2023', what: 'Keynote op Community Design Summit'   },
  ];

  return (
    <>
      {/* Backdrop */}
      <div
        onClick={onClose}
        style={{
          position: 'absolute', inset: 0, zIndex: 250,
          background: 'rgba(20,18,16,0.38)',
          backdropFilter: 'blur(3px)',
          WebkitBackdropFilter: 'blur(3px)',
          opacity: isOpen ? 1 : 0,
          pointerEvents: isOpen ? 'auto' : 'none',
          transition: 'opacity 0.25s',
        }}
      />

      {/* Profile overlay */}
      <div style={{
        position: 'absolute',
        top: 12, right: 12, bottom: 95, left: 14,
        background: '#FFFFFF',
        borderRadius: 26,
        zIndex: 260,
        overflow: 'hidden',
        boxShadow: '0 24px 60px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.04)',
        transformOrigin: 'top right',
        transform: isOpen ? 'scale(1)' : 'scale(0.02)',
        opacity: isOpen ? 1 : 0,
        transition: 'transform 0.38s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.26s',
        pointerEvents: isOpen ? 'auto' : 'none',
      }}>
        {/* Close button */}
        <button onClick={onClose} style={{
          position: 'absolute', top: 14, right: 14,
          width: 32, height: 32, borderRadius: '50%',
          background: 'rgba(116,116,128,0.15)', border: 'none',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer', zIndex: 10,
        }}>
          <Ico.X size={14} />
        </button>

        {/* Scrollable content */}
        <div style={{
          height: '100%', overflowY: 'auto',
          scrollbarWidth: 'none', WebkitOverflowScrolling: 'touch',
        }}>
          {/* Header */}
          <div style={{ padding: '26px 22px 18px' }}>
            <img src={IMG.joep} alt="" style={{
              width: 88, height: 88, borderRadius: 24, objectFit: 'cover',
              marginBottom: 14,
            }} />
            <h1 style={{ ...P_SERIF, fontSize: 34, color: '#020100', margin: '0 0 2px', lineHeight: 1 }}>Kevin Cucks</h1>
            <div style={{ ...P_SANS, fontSize: 13.5, color: 'rgba(2,1,0,0.55)', fontWeight: 500, marginBottom: 10 }}>
              De Verbinder · Ontwerper · Eersel
            </div>
            <p style={{
              ...P_SERIF, fontSize: 22,
              color: 'rgba(2,1,0,0.78)', lineHeight: 1.25,
              margin: '0 0 14px',
            }}>
              "Kweeeeeenie maaaaan"
            </p>
            <div style={{ display: 'flex', gap: 8 }}>
              <button style={{
                flex: 1, padding: '10px 0', borderRadius: 999,
                background: '#020100', color: '#FFFFFF', border: 'none',
                ...P_SANS, fontSize: 13, fontWeight: 600, cursor: 'pointer',
              }}>Profiel aanpassen</button>
              <button style={{
                padding: '10px 16px', borderRadius: 999,
                background: 'rgba(116,116,128,0.12)', color: '#020100', border: 'none',
                ...P_SANS, fontSize: 13, fontWeight: 600, cursor: 'pointer',
              }}>Delen</button>
            </div>
          </div>

          <div style={{ padding: '0 18px 26px', display: 'flex', flexDirection: 'column', gap: 16 }}>

            {/* Trophy cabinet */}
            <div style={P_CARD}>
              <PSectionTitle>Trofeeënkast</PSectionTitle>
              <PLabel style={{ marginBottom: 10 }}>4 van 6 behaald</PLabel>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
                <TrophyBadge kind="cup"    label="Ambassadeur"   sub="Platform · 2026"   color={PROFILE_ACCENTS.yellow} earned />
                <TrophyBadge kind="medal"  label="Early Member"  sub="Eerste 100"        color={PROFILE_ACCENTS.green}  earned />
                <TrophyBadge kind="shield" label="Facilitator"   sub="Gecertificeerd"    color={PROFILE_ACCENTS.purple} earned />
                <TrophyBadge kind="star"   label="Project Lead"  sub="3 projecten"       color={PROFILE_ACCENTS.orange} earned />
                <TrophyBadge kind="book"   label="Knowledge"     sub="10 practicals"     color={PROFILE_ACCENTS.blue}   />
                <TrophyBadge kind="flame"  label="Streak Keeper" sub="100 dagen"         color={PROFILE_ACCENTS.red}    />
              </div>
            </div>

            {/* Wat ik aanbied */}
            <div style={P_CARD}>
              <PSectionTitle>Wat ik aanbied</PSectionTitle>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {[
                  { icon: '🎨', title: 'Design review & feedback',  desc: 'Visuele- en UX-reviews voor projecten.',           color: PROFILE_ACCENTS.green },
                  { icon: '🧭', title: 'Facilitatie & holocratie',  desc: 'Governance-sessies en spanning-verwerking.',       color: PROFILE_ACCENTS.purple },
                  { icon: '☕', title: '1-op-1 koffie gesprekken',  desc: '30 min om sparren over je initiatief.',            color: PROFILE_ACCENTS.orange },
                  { icon: '📖', title: 'Practical schrijven',       desc: 'Samen kennis vastleggen tot een deelbare gids.',   color: PROFILE_ACCENTS.blue },
                ].map(o => (
                  <div key={o.title} style={{
                    background: 'rgba(255,255,255,0.7)',
                    borderRadius: 13,
                    padding: '11px 13px',
                    display: 'flex', gap: 11, alignItems: 'flex-start',
                  }}>
                    <div style={{
                      width: 32, height: 32, borderRadius: 10,
                      background: `${o.color}18`,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 15, flexShrink: 0,
                    }}>{o.icon}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ ...P_SANS, fontSize: 13.5, fontWeight: 700, color: '#020100', marginBottom: 1 }}>{o.title}</div>
                      <div style={{ ...P_SANS, fontSize: 12, color: 'rgba(2,1,0,0.6)', lineHeight: 1.4 }}>{o.desc}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Geïnteresseerd in */}
            <div style={P_CARD}>
              <PSectionTitle>Geïnteresseerd in</PSectionTitle>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {[
                  ['Bewustzijn',        PROFILE_ACCENTS.purple],
                  ['Duurzaamheid',      PROFILE_ACCENTS.green],
                  ['Gemeenschap',       PROFILE_ACCENTS.orange],
                  ['Permacultuur',      PROFILE_ACCENTS.green],
                  ['Holocratie',        PROFILE_ACCENTS.purple],
                  ['Systeem-denken',    PROFILE_ACCENTS.blue],
                  ['Regeneratief ontwerp', PROFILE_ACCENTS.green],
                  ['Filosofie',         PROFILE_ACCENTS.yellow],
                  ['Meditatie',         PROFILE_ACCENTS.purple],
                  ['Economie 3.0',      PROFILE_ACCENTS.orange],
                  ['Storytelling',      PROFILE_ACCENTS.blue],
                  ['Kunst & cultuur',   PROFILE_ACCENTS.yellow],
                ].map(([s, c]) => (
                  <PChip key={s} color={c} bg="rgba(255,255,255,0.7)" border={`${c}35`}>{s}</PChip>
                ))}
              </div>
            </div>

            {/* Waar ik heen wil — expandable timeline */}
            <div style={P_CARD}>
              <PSectionTitle>Waar ik heen wil</PSectionTitle>
              <PLabel style={{ marginBottom: 14 }}>Tijdlijn — tik om uit te klappen</PLabel>
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                {futureTimeline.map((segment, segIdx) => (
                  <div key={segment.when}>
                    <div style={{
                      display: 'flex', alignItems: 'center', gap: 8,
                      marginBottom: 8, marginTop: segIdx === 0 ? 0 : 6,
                    }}>
                      <span style={{
                        ...P_SERIF, fontSize: 16, color: segment.color, lineHeight: 1,
                      }}>{segment.when}</span>
                      <span style={{ flex: 1, height: 1, background: `${segment.color}33` }} />
                    </div>
                    {segment.goals.map((g, i) => (
                      <GoalRow
                        key={g.title}
                        goal={g}
                        color={segment.color}
                        isFirst={segIdx === 0 && i === 0}
                        isLast={segIdx === futureTimeline.length - 1 && i === segment.goals.length - 1}
                      />
                    ))}
                  </div>
                ))}
              </div>
            </div>

            {/* Communities — card-style list */}
            <div style={P_CARD}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                <PSectionTitle style={{ margin: 0 }}>Communities</PSectionTitle>
                <button onClick={() => setAllCommunitiesOpen(v => !v)} style={{
                  border: 'none', background: 'none',
                  color: 'var(--accent,#007AFF)',
                  ...P_SANS, fontSize: 13, fontWeight: 600,
                  cursor: 'pointer', padding: 0,
                  display: 'inline-flex', alignItems: 'center', gap: 3,
                }}>
                  {allCommunitiesOpen ? 'Minder' : `Alle (${myCommunities.length})`}
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ transform: allCommunitiesOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }}>
                    <polyline points="6 9 12 15 18 9"/>
                  </svg>
                </button>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {shownCommunities.map(c => {
                  const col = scopeColors[c.scope] || PROFILE_ACCENTS.green;
                  return (
                    <div key={c.name} style={{
                      display: 'flex', gap: 12, alignItems: 'stretch',
                      background: '#FFFFFF',
                      borderRadius: 14,
                      overflow: 'hidden',
                      border: '1px solid rgba(2,1,0,0.06)',
                      cursor: 'pointer',
                    }}>
                      <div style={{
                        width: 78, flexShrink: 0,
                        background: `${col}14`,
                      }}>
                        <img src={c.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                      </div>
                      <div style={{ flex: 1, minWidth: 0, padding: '10px 12px 10px 0', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                        <div style={{ ...P_SANS, fontSize: 13.5, fontWeight: 700, color: '#020100', letterSpacing: '-0.2px', lineHeight: 1.2, marginBottom: 4 }}>{c.name}</div>
                        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginBottom: 6 }}>
                          <span style={{ ...P_SANS, fontSize: 10, fontWeight: 600, padding: '2px 7px', borderRadius: 999, background: `${col}18`, color: col }}>{c.scope}</span>
                          {c.themes.slice(0, 2).map(t => (
                            <span key={t} style={{ ...P_SANS, fontSize: 10, padding: '2px 7px', borderRadius: 999, background: 'rgba(116,116,128,0.1)', color: '#8E8E93' }}>{t}</span>
                          ))}
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                          <Ico.Users size={10} color="#C7C7CC" />
                          <span style={{ ...P_SANS, fontSize: 11, color: '#8E8E93' }}>{c.members} leden</span>
                          <span style={{ ...P_SANS, fontSize: 11, color: 'rgba(2,1,0,0.35)', margin: '0 4px' }}>·</span>
                          <span style={{ ...P_SANS, fontSize: 11, fontWeight: 600, color: '#020100' }}>{c.role}</span>
                        </div>
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', paddingRight: 12 }}>
                        <Ico.ChevR size={15} color="rgba(2,1,0,0.3)" />
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

            {/* Record — stats */}
            <div style={P_CARD}>
              <PSectionTitle>Record</PSectionTitle>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                {[
                  { n: '12', l: 'Projecten afgerond'    },
                  { n: '8',  l: 'Events gehost'         },
                  { n: '24', l: 'Practicals gemaakt'    },
                  { n: '156',l: 'Reflecties geschreven' },
                ].map(s => (
                  <div key={s.l} style={{
                    background: 'rgba(255,255,255,0.7)',
                    borderRadius: 13,
                    padding: '12px 14px',
                  }}>
                    <div style={{ ...P_SERIF, fontSize: 30, color: '#020100', lineHeight: 1, marginBottom: 2 }}>{s.n}</div>
                    <div style={{ ...P_SANS, fontSize: 11, color: 'rgba(2,1,0,0.55)', fontWeight: 500 }}>{s.l}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Hoogtepunten — own prominent card */}
            <div style={{
              ...P_CARD,
              background: 'linear-gradient(160deg,#1A1A1A 0%,#020100 100%)',
              padding: 18,
            }}>
              <PSectionTitle size={26} style={{ color: '#FFFFFF', margin: '0 0 4px' }}>Hoogtepunten</PSectionTitle>
              <span style={{
                ...P_SANS, fontSize: 10.5, fontWeight: 700,
                color: 'rgba(255,255,255,0.45)',
                textTransform: 'uppercase', letterSpacing: '0.08em',
                display: 'block', marginBottom: 14,
              }}>Mijlpalen door de jaren</span>

              <div style={{ display: 'flex', flexDirection: 'column' }}>
                {highlights.map((h, i, arr) => {
                  const isLast = i === arr.length - 1;
                  return (
                    <div key={h.what} style={{ display: 'flex', gap: 14, alignItems: 'stretch' }}>
                      {/* Year column */}
                      <div style={{
                        width: 56, flexShrink: 0, textAlign: 'right',
                        paddingTop: 4,
                      }}>
                        <div style={{ ...P_SERIF, fontSize: 22, color: 'rgba(255,255,255,0.85)', lineHeight: 1 }}>{h.when}</div>
                      </div>

                      {/* Rail */}
                      <div style={{ width: 14, display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
                        <div style={{
                          width: 12, height: 12, borderRadius: '50%',
                          background: '#FFFFFF',
                          boxShadow: '0 0 0 4px rgba(255,255,255,0.18)',
                          marginTop: 6,
                          flexShrink: 0,
                        }} />
                        {!isLast && <div style={{ width: 2, flex: 1, background: 'rgba(255,255,255,0.14)', minHeight: 22 }} />}
                      </div>

                      {/* Content */}
                      <div style={{ flex: 1, paddingBottom: isLast ? 0 : 16 }}>
                        <div style={{ ...P_SANS, fontSize: 14, fontWeight: 600, color: '#FFFFFF', lineHeight: 1.35 }}>{h.what}</div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

          </div>
        </div>
      </div>
    </>
  );
};

Object.assign(window, { ProfilePage });