// tgp-personal-identity.jsx v4 — Identity: clean cards (like Taken), hero blijft editorial, titels in serif

// ─── Shared tokens ────────────────────────────────────────────────────────
const ID_ACCENTS = {
  sage:      '#6B8F6F',
  terracotta:'#C86B4B',
  lavender:  '#8B7EC4',
  sand:      '#C8B48F',
};
const ID_SERIF_ITALIC = { fontFamily: '"Instrument Serif", Georgia, serif', fontStyle: 'italic', fontWeight: 400, letterSpacing: '-0.3px' };
const ID_SERIF        = { fontFamily: '"Instrument Serif", Georgia, serif', fontWeight: 400, letterSpacing: '-0.4px' };
const ID_SANS         = { fontFamily: 'Inter, system-ui, sans-serif' };

// Clean card — subtle grey like the task rows in Taken
const CLEAN_CARD = {
  background: 'rgba(116,116,128,0.08)',
  borderRadius: 18,
  padding: 16,
};

// Serif section title (outside or inside a card)
const SectionTitle = ({ children, size=21, style }) => (
  <h3 style={{
    ...ID_SERIF, fontSize: size, color: '#020100',
    margin: '0 0 10px', lineHeight: 1.1, ...style,
  }}>{children}</h3>
);

// Small uppercase meta label (for secondary metadata only)
const IdLabel = ({ children, color='rgba(2,1,0,0.45)', style }) => (
  <span style={{
    ...ID_SANS, fontSize: 10.5, fontWeight: 700, color,
    textTransform: 'uppercase', letterSpacing: '0.08em',
    display: 'block', ...style,
  }}>{children}</span>
);

// Soft chip / outlined pill
const IdChip = ({ children, color='#020100', bg='rgba(2,1,0,0.04)', border='rgba(2,1,0,0.08)', style }) => (
  <span style={{
    ...ID_SANS, fontSize: 11.5, fontWeight: 600, color,
    padding: '4px 11px', borderRadius: 999,
    background: bg, border: `1px solid ${border}`,
    display: 'inline-flex', alignItems: 'center', gap: 5, ...style,
  }}>{children}</span>
);

// ─── Identity Tab ─────────────────────────────────────────────────────────
const IdentityTab = () => {
  const [sub, setSub] = React.useState('Overzicht');
  const subTabs = ['Overzicht','Gene Keys','Rollen','Persoonlijkheid'];

  return (
    <div>
      {/* Hero — dark profile tile */}
      <div style={{
        background: '#020100',
        borderRadius: 22,
        padding: 20,
        marginBottom: 18,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
          <img src={IMG.joep} alt="" style={{
            width: 64, height: 64, borderRadius: 18, objectFit: 'cover',
            flexShrink: 0,
          }} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <h2 style={{ ...ID_SERIF, fontSize: 28, color: '#FFFFFF', margin: '0 0 2px', lineHeight: 1.05 }}>Kevin Cucks</h2>
            <span style={{ ...ID_SANS, fontSize: 13, color: 'rgba(255,255,255,0.55)', fontWeight: 500 }}>De Verbinder · Ontwerper · Eersel</span>
          </div>
        </div>

        <p style={{
          ...ID_SERIF_ITALIC, fontSize: 15,
          color: 'rgba(255,255,255,0.72)', lineHeight: 1.4,
          margin: '0 0 14px',
        }}>
          "Kweeeeeenie maaaaan"
        </p>

        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          <IdChip color="#A8C4AB" bg="rgba(107,143,111,0.18)" border="rgba(107,143,111,0.35)">Gene Key 37 · Gelijkheid</IdChip>
          <IdChip color="#BDB2DA" bg="rgba(139,126,196,0.18)" border="rgba(139,126,196,0.35)">INFJ</IdChip>
          <IdChip color="rgba(255,255,255,0.7)" bg="rgba(255,255,255,0.06)" border="rgba(255,255,255,0.12)">Human Design · Projector</IdChip>
        </div>
      </div>

      {/* Sub-tab pills */}
      <div style={{ display: 'flex', gap: 6, overflowX: 'auto', scrollbarWidth: 'none', marginBottom: 18, padding: 1 }}>
        {subTabs.map(t => (
          <button key={t} onClick={() => setSub(t)} style={{
            padding: '8px 14px', borderRadius: 999, border: 'none',
            background: sub === t ? '#020100' : 'rgba(116,116,128,0.12)',
            color: sub === t ? '#FFFFFF' : 'rgba(2,1,0,0.7)',
            fontSize: 12.5, fontWeight: sub === t ? 600 : 500, cursor: 'pointer', whiteSpace: 'nowrap',
            ...ID_SANS, flexShrink: 0, transition: 'all 0.15s',
          }}>{t}</button>
        ))}
      </div>

      {sub === 'Overzicht'       && <IdentityOverview />}
      {sub === 'Gene Keys'       && <IdentityGeneKeys />}
      {sub === 'Rollen'          && <IdentityRollen />}
      {sub === 'Persoonlijkheid' && <IdentityPersonality />}
    </div>
  );
};

// ─── Overzicht ────────────────────────────────────────────────────────────
const IdentityOverview = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>

    {/* Kernvraag */}
    <div style={CLEAN_CARD}>
      <SectionTitle>Kernvraag</SectionTitle>
      <p style={{ ...ID_SERIF_ITALIC, fontSize: 19, color: '#020100', lineHeight: 1.3, margin: 0 }}>
        "Hoe breng ik mensen dichter bij hun authentieke kracht, zonder mezelf te verliezen?"
      </p>
      <IdLabel style={{ marginTop: 14 }}>Laatst bijgewerkt · 3 dagen geleden</IdLabel>
    </div>

    {/* Stats — 3 compact cards */}
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
      {[
        ['4', 'Rollen',      ID_ACCENTS.sage],
        ['3', 'Projecten',   ID_ACCENTS.terracotta],
        ['2', 'Communities', ID_ACCENTS.lavender],
      ].map(([n, l, c]) => (
        <div key={l} style={{ ...CLEAN_CARD, padding: '16px 8px', textAlign: 'center' }}>
          <div style={{ ...ID_SERIF, fontSize: 34, color: c, lineHeight: 1, marginBottom: 4 }}>{n}</div>
          <div style={{ ...ID_SANS, fontSize: 11, color: 'rgba(2,1,0,0.55)', fontWeight: 500 }}>{l}</div>
        </div>
      ))}
    </div>

    {/* Kernkwaliteiten */}
    <div style={CLEAN_CARD}>
      <SectionTitle>Kernkwaliteiten</SectionTitle>
      {[['Empathie', 92], ['Creativiteit', 85], ['Strategisch denken', 78], ['Verbinden', 95]].map(([k, p]) => (
        <div key={k} style={{ marginBottom: 12 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5 }}>
            <span style={{ ...ID_SANS, fontSize: 13, fontWeight: 500, color: '#020100' }}>{k}</span>
            <span style={{ ...ID_SANS, fontSize: 11, color: 'rgba(2,1,0,0.45)' }}>{p}%</span>
          </div>
          <div style={{ background: 'rgba(2,1,0,0.08)', borderRadius: 9, height: 5, overflow: 'hidden' }}>
            <div style={{ width: `${p}%`, height: '100%', background: ID_ACCENTS.sage, borderRadius: 9 }} />
          </div>
        </div>
      ))}
    </div>

    {/* Kernwaarden */}
    <div style={CLEAN_CARD}>
      <SectionTitle>Kernwaarden</SectionTitle>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {[
          ['Openheid',       ID_ACCENTS.sage],
          ['Gelijkwaardigheid', ID_ACCENTS.lavender],
          ['Rust',           ID_ACCENTS.sand],
          ['Diepgang',       '#020100'],
          ['Ambacht',        ID_ACCENTS.terracotta],
          ['Verbinding',     ID_ACCENTS.sage],
        ].map(([v, c]) => (
          <IdChip key={v} color={c} bg="rgba(255,255,255,0.7)" border={`${c}35`}>{v}</IdChip>
        ))}
      </div>
    </div>

    {/* Hoe anderen jou zien */}
    <div style={CLEAN_CARD}>
      <SectionTitle>Hoe anderen jou zien</SectionTitle>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {['Betrouwbaar', 'Inspirerend', 'Luisteraar', 'Creatief', 'Rustig', 'Doordacht'].map(t => (
          <IdChip key={t} bg="rgba(255,255,255,0.7)" border="rgba(2,1,0,0.08)" color="rgba(2,1,0,0.75)">{t}</IdChip>
        ))}
      </div>
    </div>

    {/* Groeireis */}
    <div style={CLEAN_CARD}>
      <SectionTitle>Groeireis</SectionTitle>
      {[
        { when: 'Mrt 2026', title: 'Delegeren leren',      desc: 'Werken aan taken uit handen geven zonder controle te verliezen.', color: ID_ACCENTS.terracotta },
        { when: 'Jan 2026', title: 'Grenzen stellen',      desc: 'Bewust nee zeggen tegen projecten die niet resoneren.',           color: ID_ACCENTS.sage },
        { when: 'Nov 2025', title: 'Diepere luisterhouding', desc: 'Meer ruimte laten voor anderen in vergaderingen.',             color: ID_ACCENTS.lavender },
      ].map((g, i, arr) => (
        <div key={g.title} style={{
          display: 'flex', gap: 14,
          paddingBottom: i === arr.length - 1 ? 0 : 12,
          marginBottom: i === arr.length - 1 ? 0 : 12,
          borderBottom: i === arr.length - 1 ? 'none' : '1px solid rgba(2,1,0,0.06)',
        }}>
          <div style={{ flexShrink: 0, width: 10, paddingTop: 4 }}>
            <span style={{ display: 'block', width: 9, height: 9, borderRadius: '50%', background: g.color }} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <IdLabel style={{ marginBottom: 3, color: 'rgba(2,1,0,0.4)' }}>{g.when}</IdLabel>
            <div style={{ ...ID_SANS, fontSize: 14, fontWeight: 600, color: '#020100', marginBottom: 2 }}>{g.title}</div>
            <p style={{ ...ID_SANS, fontSize: 12.5, color: 'rgba(2,1,0,0.55)', lineHeight: 1.5, margin: 0 }}>{g.desc}</p>
          </div>
        </div>
      ))}
    </div>
  </div>
);

// ─── Gene Keys ────────────────────────────────────────────────────────────
const IdentityGeneKeys = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>

    {/* Life Gene Key */}
    <div style={CLEAN_CARD}>
      <IdLabel style={{ marginBottom: 6 }}>Jouw Levens Gene Key</IdLabel>
      <SectionTitle size={26} style={{ margin: '0 0 16px' }}>
        Gene Key 37 — <span style={ID_SERIF_ITALIC}>Familie</span>
      </SectionTitle>

      {[
        { icon: '🌑', label: 'Schaduw · Zwakte',   tone: ID_ACCENTS.terracotta, desc: 'De neiging om je kracht weg te geven aan anderen, ten koste van jezelf.' },
        { icon: '🌿', label: 'Gift · Gelijkheid',  tone: ID_ACCENTS.sage,       desc: 'Het vermogen om iedereen als gelijke te zien, ongeacht status of achtergrond.' },
        { icon: '✨', label: 'Siddhi · Tederheid', tone: ID_ACCENTS.lavender,   desc: 'Pure, onvoorwaardelijke liefde die elke barrière oplost.' },
      ].map(({ icon, label, tone, desc }) => (
        <div key={label} style={{
          background: 'rgba(255,255,255,0.65)',
          borderRadius: 13,
          padding: '12px 14px', marginBottom: 8,
          display: 'flex', gap: 12, alignItems: 'flex-start',
        }}>
          <div style={{
            width: 32, height: 32, borderRadius: 10,
            background: `${tone}15`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 15, flexShrink: 0,
          }}>{icon}</div>
          <div style={{ flex: 1 }}>
            <div style={{ ...ID_SANS, fontSize: 13, fontWeight: 700, color: tone, marginBottom: 2 }}>{label}</div>
            <div style={{ ...ID_SANS, fontSize: 12.5, color: 'rgba(2,1,0,0.6)', lineHeight: 1.5 }}>{desc}</div>
          </div>
        </div>
      ))}
    </div>

    {/* Profiel Gene Keys */}
    <div style={CLEAN_CARD}>
      <SectionTitle>Profiel Gene Keys</SectionTitle>
      {[
        [22, 'Genade',       'Evolutie',      ID_ACCENTS.sage],
        [55, 'Vrijheid',     'Roeping',       ID_ACCENTS.terracotta],
        [36, 'Menselijkheid','Relatie',       ID_ACCENTS.lavender],
        [49, 'Revolutie',    'Transformatie', ID_ACCENTS.sand],
      ].map(([num, gift, siddhi, c], i, arr) => (
        <div key={num} style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '10px 0',
          borderBottom: i === arr.length - 1 ? 'none' : '1px solid rgba(2,1,0,0.06)',
        }}>
          <div style={{
            width: 38, height: 38, borderRadius: 11,
            background: `${c}15`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            ...ID_SERIF, fontSize: 17, color: c, flexShrink: 0,
          }}>{num}</div>
          <div style={{ flex: 1 }}>
            <div style={{ ...ID_SANS, fontSize: 14, fontWeight: 600, color: '#020100' }}>Gene Key {num} · {gift}</div>
            <div style={{ ...ID_SANS, fontSize: 11.5, color: 'rgba(2,1,0,0.5)' }}>Siddhi: {siddhi}</div>
          </div>
          <Ico.ChevR size={15} color="rgba(2,1,0,0.3)" />
        </div>
      ))}
    </div>
  </div>
);

// ─── Rollen ───────────────────────────────────────────────────────────────
const IdentityRollen = () => {
  const roles = [
    { role: 'Ontwerper',    circle: 'Bosgym Bouwen',       purpose: 'Vertalen van ideeën naar heldere, bruikbare opstellingen.',             accountabilities: ['Visuele communicatie', 'Ontwerp feedback', 'Plattegrond-consistentie'],    color: ID_ACCENTS.sage,       status: 'Actief' },
    { role: 'Facilitator',  circle: 'Holacracy Ondernemen', purpose: 'Zorgen dat vergaderingen en processen soepel verlopen.',                 accountabilities: ['Governance vergaderingen', 'Holacracy principes', 'Spanning-verwerking'],   color: ID_ACCENTS.terracotta, status: 'Actief' },
    { role: 'Deelnemer',    circle: 'Eerste Keer OBE',     purpose: 'Actief oefenen en eigen ervaring delen met de groep.',                   accountabilities: ['Journal bijhouden', 'Sessies bijwonen', 'Feedback op audio-cues'],          color: ID_ACCENTS.lavender,   status: 'Actief' },
    { role: 'Content Lead', circle: 'Les Module 1',        purpose: 'Creëren en cureren van leermateriaal voor thuisonderwijs-gezinnen.',     accountabilities: ['Werkboekteksten', 'Contentkalender', 'Samenwerken met ouders'],             color: ID_ACCENTS.sand,       status: 'Nieuw' },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {roles.map(({ role, circle, purpose, accountabilities, color, status }) => (
        <div key={role + circle} style={CLEAN_CARD}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
            <div style={{
              width: 42, height: 42, borderRadius: 13,
              background: `${color}18`,
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              ...ID_SERIF, fontSize: 20, color,
            }}>{role[0]}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <SectionTitle size={18} style={{ margin: 0 }}>{role}</SectionTitle>
              <div style={{ ...ID_SANS, fontSize: 12, color: 'rgba(2,1,0,0.55)', marginTop: 1 }}>{circle}</div>
            </div>
            <IdChip
              color={status === 'Actief' ? ID_ACCENTS.sage : ID_ACCENTS.terracotta}
              bg={status === 'Actief' ? 'rgba(107,143,111,0.1)' : 'rgba(200,107,75,0.1)'}
              border={status === 'Actief' ? 'rgba(107,143,111,0.3)' : 'rgba(200,107,75,0.3)'}
            >{status}</IdChip>
          </div>

          <p style={{
            ...ID_SERIF_ITALIC, fontSize: 14,
            color: 'rgba(2,1,0,0.65)', lineHeight: 1.5,
            margin: '0 0 12px', paddingLeft: 12,
            borderLeft: `2px solid ${color}45`,
          }}>{purpose}</p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
            {accountabilities.map(a => (
              <div key={a} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                <span style={{ width: 5, height: 5, borderRadius: '50%', background: `${color}aa`, flexShrink: 0 }} />
                <span style={{ ...ID_SANS, fontSize: 12.5, color: 'rgba(2,1,0,0.6)' }}>{a}</span>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

// ─── Persoonlijkheid ──────────────────────────────────────────────────────
const IdentityPersonality = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>

    {/* MBTI */}
    <div style={CLEAN_CARD}>
      <IdLabel style={{ marginBottom: 6 }}>Persoonlijkheidstype</IdLabel>
      <div style={{ ...ID_SERIF, fontSize: 52, color: '#020100', lineHeight: 0.95, margin: '2px 0 6px', letterSpacing: '-2px' }}>INFJ</div>
      <p style={{
        ...ID_SERIF_ITALIC, fontSize: 14.5,
        color: 'rgba(2,1,0,0.55)', lineHeight: 1.4,
        margin: '0 0 20px',
      }}>De Advocaat — idealistisch, principieel, compassievol.</p>

      {[
        ['Introvert',  'Extravert',  35, ID_ACCENTS.sage],
        ['Intuïtief',  'Observerend',20, ID_ACCENTS.lavender],
        ['Voelend',    'Denkend',    30, ID_ACCENTS.terracotta],
        ['Oordelend',  'Waarnemend', 40, ID_ACCENTS.sand],
      ].map(([left, right, pct, c]) => (
        <div key={left} style={{ marginBottom: 12 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5 }}>
            <span style={{ ...ID_SANS, fontSize: 11.5, fontWeight: 700, color: '#020100' }}>{left}</span>
            <span style={{ ...ID_SANS, fontSize: 11.5, color: 'rgba(2,1,0,0.4)', fontWeight: 500 }}>{right}</span>
          </div>
          <div style={{ background: 'rgba(2,1,0,0.08)', borderRadius: 9, height: 5, overflow: 'hidden' }}>
            <div style={{ width: `${pct}%`, height: '100%', background: c, borderRadius: 9 }} />
          </div>
        </div>
      ))}
    </div>

    {/* Jij in een projectgroep */}
    <div style={CLEAN_CARD}>
      <SectionTitle>Jij in een projectgroep</SectionTitle>
      {[
        ['Jouw rol',            'Visionair & mediator'],
        ['Communicatiestijl',   'Diepgaand, luisterend'],
        ['Werkt het beste met', 'ENTP · ENFP · INTJ'],
        ['Groeipunt',           'Meer delegeren, minder vasthouden'],
      ].map(([label, value], i, arr) => (
        <div key={label} style={{
          padding: '10px 0',
          borderBottom: i === arr.length - 1 ? 'none' : '1px solid rgba(2,1,0,0.06)',
        }}>
          <IdLabel style={{ marginBottom: 3 }}>{label}</IdLabel>
          <div style={{ ...ID_SANS, fontSize: 14, fontWeight: 600, color: '#020100' }}>{value}</div>
        </div>
      ))}
    </div>

    {/* Schaduwkant */}
    <div style={CLEAN_CARD}>
      <SectionTitle>Schaduwkant</SectionTitle>
      <p style={{
        ...ID_SERIF_ITALIC, fontSize: 14.5,
        color: 'rgba(2,1,0,0.62)', lineHeight: 1.45,
        margin: '0 0 12px',
      }}>
        "INFJ's raken snel overprikkeld door conflict en dragen dat lang mee. Gun jezelf stilte na intense momenten."
      </p>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        {['Perfectionisme', 'Overdenken', 'Self-neglect', 'Confrontatie-vermijdend'].map(s => (
          <IdChip key={s} color={ID_ACCENTS.terracotta} bg="rgba(255,255,255,0.7)" border="rgba(200,107,75,0.28)">{s}</IdChip>
        ))}
      </div>
    </div>
  </div>
);

Object.assign(window, { IdentityTab, IdentityOverview, IdentityGeneKeys, IdentityRollen, IdentityPersonality });