// Prodz — Profile (own + others). Tabs: Prods · Moments · Gear · (Shoutouts, me) · About.
// Others: Follow / Collab / Message + Recommend (after following). "Me" exposes
// language, Saved items, and the Shoutouts (job calls) you posted — review, link, edit.
function PersonProfile({ id }) {
  const { L, lang, setLang } = useL();
  const nav = useNav();
  const { Avatar, Button, Tabs, Tag, StatusDot } = window.ProdzDesignSystem_d0b87b;
  const isMe = id === 'me';
  const p = PEOPLE[id] || PEOPLE.me;
  const [tab, setTab] = useStateS('prods');
  const [following, setFollowing] = useStateS(false);
  const [showRec, setShowRec] = useStateS(false);
  const [stars, setStars] = useStateS(5);
  const [review, setReview] = useStateS('');
  const [statSheet, setStatSheet] = useStateS(null);   // 'network' | 'collab' | 'recs'

  const rec = nav.recOf(id);
  const recAvg = rec.count ? (rec.sum / rec.count).toFixed(1) : '—';

  const gear = [
  { name: 'Sony FX6', kind: { it: 'Cinema camera', en: 'Cinema camera' }, sn: 'FX6-0042', img: IMG.camera, ready: true },
  { name: 'Sigma 85mm f/1.4', kind: { it: 'Obiettivo', en: 'Lens' }, sn: 'ART-1185', img: IMG.lens, ready: true },
  { name: 'Aputure 600d', kind: { it: 'Illuminazione', en: 'Lighting' }, sn: 'AP-600-7', img: null, ready: false }];

  const specialties = ['EDITORIAL', 'LOW LIGHT', 'FASHION', 'COMMERCIAL'];
  const interests = ['Moda', 'Ritratto', 'Commercial'];

  const submitRec = () => {
    nav.recommend(id, stars, review);
    setShowRec(false);
    nav.toast(L('Raccomandazione inviata · grazie!', 'Recommendation sent · thanks!'), null);
    setStars(5);setReview('');
  };

  // people lists behind the stat tiles
  const followingList = (id === 'me' ? FOLLOWING : Object.keys(PEOPLE).filter((x) => x !== id && x !== 'me')).filter((x) => PEOPLE[x]);
  const collabList = collaboratorsOf(id);
  const recEntries = rec.entries || [];

  const tabs = [
  { id: 'prods', label: L('Prod', 'Prods') },
  { id: 'moments', label: 'Moments' },
  { id: 'gear', label: 'Gear' },
  ...(isMe ? [{ id: 'shouts', label: 'Shoutout' }] : []),
  { id: 'about', label: L('Info', 'About') }];

  return (
    <div className="pz-screen-enter" style={{ paddingBottom: 28 }}>
      <TopBar title={L('Profilo', 'Profile')} onBack={nav.pop} showLang={false} />

      {/* cover + avatar */}
      <div style={{ position: 'relative', height: 132, background: `var(--surface-card) url(${IMG.fashion}) center/cover` }}>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(10,10,10,0.1), rgba(10,10,10,0.85))' }} />
      </div>
      <div style={{ padding: '0 16px', marginTop: -42, position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
          <Avatar src={p.avatar} alt={p.name} size={84} ring={p.ring} status={p.online ? 'online' : null} style={{ boxShadow: 'none' }} />
          {isMe ?
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
              <button onClick={() => nav.openSaved()} aria-label={L('Elementi salvati', 'Saved items')} style={{ width: 38, height: 38, borderRadius: '50%', border: 'none', cursor: 'pointer', background: 'var(--surface-raised)', boxShadow: 'var(--ring-inset-hairline)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Ic n="Bookmark" s={18} color="var(--prodz-teal)" />
              </button>
              <LangToggle compact={false} />
            </div> :

          <div style={{ display: 'flex', gap: 8, marginBottom: 6 }}>
              <Button variant={following ? 'secondary' : 'primary'} size="sm" glow={!following}
            leadingIcon={<Ic n={following ? 'Check' : 'UserPlus'} s={15} />}
            onClick={() => setFollowing((v) => !v)}>{following ? L('Segui già', 'Following') : L('Segui', 'Follow')}</Button>
              <Button variant="secondary" size="sm" leadingIcon={<Ic n="Handshake" s={15} />} onClick={() => nav.sendCollab(p)}>Collab</Button>
            </div>
          }
        </div>
        <div style={{ marginTop: 12 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <h1 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 23, fontWeight: 800, letterSpacing: '-0.02em', color: 'var(--text-primary)' }}>{p.name}</h1>
            {p.online && <StatusDot label={L('Online', 'Online')} />}
          </div>
          <div style={{ fontSize: 13.5, color: 'var(--text-muted)', marginTop: 3 }}>{tr(L, p.role)} · {p.city}</div>
        </div>

        {/* Recommend — appears once you follow this person (feeds their Recs stat) */}
        {!isMe && following &&
        <Button variant="secondary" size="md" fullWidth style={{ marginTop: 14 }} leadingIcon={<Ic n="Star" s={16} color="var(--prodz-gold)" />}
        onClick={() => setShowRec(true)}>{L('Raccomanda', 'Recommend')}</Button>
        }
        {/* Saved items entry — own profile */}
        {isMe &&
        <button onClick={() => nav.openSaved()} style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', marginTop: 14, padding: '12px 14px', border: 'none', cursor: 'pointer', textAlign: 'left', borderRadius: 'var(--radius-md)', background: 'var(--surface-card)', boxShadow: 'var(--ring-inset-hairline)' }}>
            <Ic n="Bookmark" s={18} color="var(--prodz-teal)" />
            <span style={{ flex: 1 }}>
              <span style={{ display: 'block', fontSize: 14, fontWeight: 700, color: 'var(--text-primary)' }}>{L('Elementi salvati', 'Saved items')}</span>
              <span style={{ display: 'block', fontSize: 12, color: 'var(--text-muted)', marginTop: 1 }}>{L('Produzioni, location e gear in moodboard', 'Productions, locations & gear in moodboards')}</span>
            </span>
            <Ic n="ChevronRight" s={18} color="var(--text-subtle)" />
          </button>
        }
      </div>

      {/* stats — tap to see the people / recommendations behind each number */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 8, padding: '16px 16px 0' }}>
        <StatTileX value="18" label={L('Prod', 'Prods')} onClick={() => setTab('prods')} />
        <StatTileX value="172" label="Collab" onClick={() => setStatSheet('collab')} />
        <StatTileX value={String(FOLLOWING_COUNT)} label="Network" onClick={() => setStatSheet('network')} />
        <StatTileX value={recAvg} suffix="/5" label={`Recs (${rec.count})`} accent="var(--prodz-gold)" onClick={() => setStatSheet('recs')} />
      </div>

      {/* tabs */}
      <div style={{ padding: '16px 16px 0' }}>
        <Tabs value={tab} onChange={setTab} tabs={tabs} />
      </div>

      <div style={{ padding: '16px 16px 0' }}>
        {tab === 'prods' &&
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {PRODUCTIONS.concat(PRODUCTIONS.slice(0, 1)).map((pr, i) =>
          <button key={i} onClick={() => nav.openProduction(pr.id)} style={{ position: 'relative', height: 130, padding: 0, border: 'none', cursor: 'pointer', borderRadius: 'var(--radius-md)', overflow: 'hidden', background: `url(${pr.image}) center/cover`, boxShadow: 'var(--ring-inset-hairline)' }}>
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 45%, rgba(15,15,17,0.85))' }} />
                <div style={{ position: 'absolute', left: 10, right: 10, bottom: 9, textAlign: 'left' }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: '#fff' }}>{pr.title}</div>
                  <div style={{ fontSize: 10.5, color: 'var(--gray-200)' }}>{tr(L, pr.meta)}</div>
                </div>
              </button>
          )}
          </div>
        }
        {tab === 'moments' &&
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
            {MOMENTS.map((m) =>
          <div key={m.id} style={{ aspectRatio: '1/1', borderRadius: 10, overflow: 'hidden', background: `url(${m.image}) center/cover`, boxShadow: 'var(--ring-inset-hairline)' }} />
          )}
          </div>
        }
        {tab === 'gear' &&
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <p style={{ fontSize: 12, color: 'var(--text-subtle)', margin: '0 2px 2px', lineHeight: 1.4 }}>{L('Attrezzatura e disponibilità sul set.', 'Toolkit & on-set availability.')}</p>
            {gear.map((g) =>
          <div key={g.sn} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 12, background: 'var(--surface-card)', borderRadius: 'var(--radius-md)', boxShadow: 'var(--ring-inset-hairline)' }}>
                <span style={{ width: 48, height: 48, borderRadius: 10, flexShrink: 0, background: g.img ? `url(${g.img}) center/cover` : 'var(--surface-raised)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--ring-inset-hairline)' }}>
                  {!g.img && <Ic n="Lightbulb" s={20} color="var(--text-muted)" />}
                </span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)' }}>{g.name}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--text-subtle)' }}>{tr(L, g.kind)} · SN {g.sn}</div>
                </div>
                <StatusDot label={g.ready ? L('Pronto', 'Ready') : L('In uso', 'In use')} color={g.ready ? 'var(--green)' : 'var(--yellow)'} glow={g.ready} />
              </div>
          )}
          </div>
        }
        {tab === 'shouts' && isMe &&
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <p style={{ fontSize: 12, color: 'var(--text-subtle)', margin: '0 2px 2px', lineHeight: 1.4 }}>{L('Le job call e collab che hai pubblicato — rivedi, collega ed edita.', 'The job calls & collabs you posted — review, link and edit.')}</p>
            {MY_SHOUTOUTS.map((s) => {
            const prod = PRODUCTIONS.find((x) => x.id === s.prod);
            const open = s.status === 'open';
            return (
              <div key={s.id} style={{ padding: 14, background: 'var(--surface-card)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--ring-inset-hairline)', opacity: open ? 1 : 0.72 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 10, fontWeight: 800, letterSpacing: '0.06em', textTransform: 'uppercase', color: s.kind === 'job' ? 'var(--prodz-gold)' : 'var(--prodz-teal)' }}>
                      <Ic n={s.kind === 'job' ? 'Megaphone' : 'Handshake'} s={12} color="currentColor" />{s.kind === 'job' ? L('Job Call', 'Job Call') : 'Collab'}
                    </span>
                    {s.paid && <Tag tone="gold">{L('Retribuito', 'Paid')}</Tag>}
                    <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11, fontWeight: 700, color: open ? 'var(--green)' : 'var(--text-subtle)' }}>
                      <span style={{ width: 7, height: 7, borderRadius: '50%', background: open ? 'var(--green)' : 'var(--text-subtle)' }} />{open ? L('Aperta', 'Open') : L('Chiusa', 'Closed')}
                    </span>
                  </div>
                  <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)', marginTop: 10, lineHeight: 1.3 }}>{tr(L, s.title)}</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 8, fontSize: 11.5, color: 'var(--text-muted)' }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><Ic n="Clapperboard" s={13} color="var(--prodz-teal)" />{prod.title}</span>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><Ic n="Calendar" s={13} color="var(--text-subtle)" />{tr(L, s.date)}</span>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><Ic n="Users" s={13} color="var(--text-subtle)" />{s.applicants}</span>
                  </div>
                  <div style={{ display: 'flex', gap: 8, marginTop: 13 }}>
                    <Button variant="primary" size="sm" fullWidth leadingIcon={<Ic n="Inbox" s={14} />} onClick={() => nav.openInbox()}>{L('Candidature', 'Applicants')}</Button>
                    <Button variant="secondary" size="sm" leadingIcon={<Ic n="Link" s={14} />} onClick={() => nav.openProduction(s.prod)} aria-label={L('Collega', 'Link')}>{L('Collega', 'Link')}</Button>
                    <Button variant="secondary" size="sm" leadingIcon={<Ic n="Pencil" s={14} />} onClick={() => nav.toast(L('Apertura editor…', 'Opening editor…'), null)} aria-label={L('Modifica', 'Edit')}>{L('Modifica', 'Edit')}</Button>
                  </div>
                </div>);

          })}
          </div>
        }
        {tab === 'about' &&
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div>
              <Eyebrow style={{ marginBottom: 8 }}>{L('Biografia', 'Biography')}</Eyebrow>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--text-body)', margin: 0 }}>
                {L('Direttrice della fotografia con base a Milano. Lavoro su moda editoriale e commercial, con un approccio a naturali motivati e luci pratiche.', 'Cinematographer based in Milan. I work across editorial fashion and commercial with a motivated-naturals, practical-light approach.')}
              </p>
            </div>
            <div>
              <Eyebrow style={{ marginBottom: 8 }}>{L('Specialità', 'Specialties')}</Eyebrow>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>{specialties.map((s) => <Tag key={s} tone="teal">{s}</Tag>)}</div>
            </div>
            {isMe &&
          <div>
                <Eyebrow style={{ marginBottom: 8 }}>{L('Dal tuo profilo', 'From your profile')}</Eyebrow>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  <ProfileRow icon="Briefcase" label={L('Ruolo', 'Role')} value={tr(L, p.role)} />
                  <ProfileRow icon="MapPin" label={L('Città', 'City')} value={p.city} />
                  <ProfileRow icon="Heart" label={L('Interessi', 'Interests')} value={interests.map((x) => x).join(' · ')} />
                  <ProfileRow icon="Target" label={L('Obiettivo', 'Goal')} value={L('Trovare collaborazioni', 'Find collaborations')} />
                </div>
              </div>
          }
          </div>
        }
      </div>

      {/* Recommend sheet — stars (1–5) + review feed the Recs average */}
      <Sheet open={showRec} onClose={() => setShowRec(false)}>
        <Eyebrow color="var(--prodz-gold)" style={{ marginBottom: 6 }}>{L('Raccomanda', 'Recommend')}</Eyebrow>
        <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>{p.name}</div>
        <p style={{ fontSize: 12.5, color: 'var(--text-muted)', margin: '4px 0 14px', lineHeight: 1.4 }}>{L('Il tuo voto si somma e media nella sua statistica “Recs”.', 'Your rating sums and averages into their “Recs” stat.')}</p>
        <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginBottom: 16 }}>
          {[1, 2, 3, 4, 5].map((n) =>
          <button key={n} onClick={() => setStars(n)} aria-label={n + ' stars'} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4 }}>
              <Ic n="Star" s={34} color={n <= stars ? 'var(--prodz-gold)' : 'var(--ink-700)'} fill={n <= stars ? 'var(--prodz-gold)' : 'none'} />
            </button>
          )}
        </div>
        <textarea value={review} onChange={(e) => setReview(e.target.value)} placeholder={L('Scrivi una recensione (facoltativa)…', 'Write a review (optional)…')}
        style={{ width: '100%', minHeight: 84, resize: 'none', padding: '12px 14px', borderRadius: 'var(--radius-md)', border: 'none', outline: 'none', background: 'var(--surface-raised)', boxShadow: 'var(--ring-inset-hairline)', color: 'var(--text-body)', fontSize: 14, lineHeight: 1.5, fontFamily: 'var(--font-ui)' }} />
        <div style={{ marginTop: 14 }}>
          <Button variant="primary" glow fullWidth leadingIcon={<Ic n="Send" s={16} />} onClick={submitRec}>{L('Invia raccomandazione', 'Send recommendation')}</Button>
        </div>
      </Sheet>

      {/* Network stat → people in your network (those you follow) */}
      <Sheet open={statSheet === 'network'} onClose={() => setStatSheet(null)}>
        <StatSheetHead icon="Users" tint="var(--prodz-teal)"
          eyebrow={L('La tua rete', 'Your network')}
          title={`${FOLLOWING_COUNT} ${L('persone che segui', 'people you follow')}`} />
        <div style={statListWrap}>
          {followingList.map((pid) => <PersonStatRow key={pid} pid={pid} onTap={() => { setStatSheet(null); nav.openProfile(pid); }} L={L} />)}
        </div>
      </Sheet>

      {/* Collab stat → people you've collaborated with */}
      <Sheet open={statSheet === 'collab'} onClose={() => setStatSheet(null)}>
        <StatSheetHead icon="Handshake" tint="var(--prodz-teal)"
          eyebrow={L('Collaborazioni', 'Collaborations')}
          title={L('Persone con cui hai collaborato', 'People you’ve collaborated with')} />
        <div style={statListWrap}>
          {collabList.map((c) => {
            const prods = c.prods.map((pid) => { const pr = PRODUCTIONS.find((x) => x.id === pid); return pr ? pr.title : null; }).filter(Boolean);
            return <PersonStatRow key={c.id} pid={c.id} onTap={() => { setStatSheet(null); nav.openProfile(c.id); }} L={L}
              context={prods.length ? prods.join(' · ') : L('Collaborazione', 'Collaboration')} contextIcon="Clapperboard" />;
          })}
        </div>
      </Sheet>

      {/* Recs stat → who recommended this person, with the content */}
      <Sheet open={statSheet === 'recs'} onClose={() => setStatSheet(null)}>
        <StatSheetHead icon="Star" tint="var(--prodz-gold)"
          eyebrow={`${recAvg}/5 · ${rec.count} ${L('raccomandazioni', 'recommendations')}`}
          title={L('Chi ti ha raccomandato', 'Who recommended you')} />
        {recEntries.length === 0 ?
          <p style={{ fontSize: 13, color: 'var(--text-subtle)', textAlign: 'center', padding: '18px 0' }}>{L('Ancora nessuna raccomandazione con recensione.', 'No written recommendations yet.')}</p> :
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxHeight: 380, overflowY: 'auto' }}>
            {recEntries.map((e, i) => {
              const person = PEOPLE[e.by] || PEOPLE.me;
              return (
                <div key={i} style={{ display: 'flex', gap: 11, padding: '4px 2px' }}>
                  <Avatar src={person.avatar} alt={person.name} size={38} ring={person.ring} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--text-primary)' }}>{person.name}{e.by === 'me' && L(' · Tu', ' · You')}</span>
                      <span style={{ display: 'inline-flex', gap: 1, marginLeft: 'auto' }}>
                        {[1, 2, 3, 4, 5].map((n) => <Ic key={n} n="Star" s={12} color={n <= e.stars ? 'var(--prodz-gold)' : 'var(--ink-700)'} fill={n <= e.stars ? 'var(--prodz-gold)' : 'none'} />)}
                      </span>
                    </div>
                    {e.text && <p style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--text-body)', margin: '4px 0 0' }}>{tr(L, e.text)}</p>}
                    <span style={{ fontSize: 11, color: 'var(--text-subtle)', marginTop: 3, display: 'block' }}>{tr(L, e.time)}</span>
                  </div>
                </div>);

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

}

// Shared header for the stat detail sheets.
function StatSheetHead({ icon, tint, eyebrow, title }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 14 }}>
      <span style={{ width: 40, height: 40, borderRadius: 12, flexShrink: 0, background: 'var(--surface-raised)', boxShadow: 'var(--ring-inset-hairline)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Ic n={icon} s={20} color={tint} />
      </span>
      <div style={{ minWidth: 0 }}>
        <Eyebrow color={tint}>{eyebrow}</Eyebrow>
        <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--text-primary)', marginTop: 2 }}>{title}</div>
      </div>
    </div>);

}

// One person row inside a stat sheet.
function PersonStatRow({ pid, onTap, L, context, contextIcon }) {
  const { Avatar } = window.ProdzDesignSystem_d0b87b;
  const p = PEOPLE[pid];
  if (!p) return null;
  return (
    <button onClick={onTap} style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: 10, background: 'var(--surface-raised)', border: 'none', cursor: 'pointer', borderRadius: 'var(--radius-md)' }}>
      <Avatar src={p.avatar} alt={p.name} size={42} ring={p.ring} status={p.online ? 'online' : null} />
      <span style={{ flex: 1, minWidth: 0, textAlign: 'left' }}>
        <span style={{ display: 'block', fontSize: 14, fontWeight: 700, color: 'var(--text-primary)' }}>{p.name}</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 12, color: 'var(--text-muted)', marginTop: 1 }}>
          {context ? <Ic n={contextIcon || 'Clapperboard'} s={12} color="var(--prodz-teal)" /> : null}
          <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{context || `${tr(L, p.role)} · ${p.city}`}</span>
        </span>
      </span>
      <Ic n="ChevronRight" s={18} color="var(--text-subtle)" />
    </button>);

}

const statListWrap = { display: 'flex', flexDirection: 'column', gap: 8, maxHeight: 380, overflowY: 'auto' };

// Stat tile — tappable to open the people / recommendations behind the number.
function StatTileX({ value, suffix, label, onClick, accent }) {
  const interactive = !!onClick;
  return (
    <div
      onClick={onClick}
      role={interactive ? 'button' : undefined}
      tabIndex={interactive ? 0 : undefined}
      onKeyDown={interactive ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(); } } : undefined}
      style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2, padding: '12px 6px', background: 'var(--teal-surface)', borderRadius: 'var(--radius-md)', boxShadow: 'var(--ring-teal)', cursor: interactive ? 'pointer' : 'default', WebkitTapHighlightColor: 'transparent' }}>
      <span style={{ fontFamily: 'var(--font-ui)', fontSize: 18, fontWeight: 700, color: accent || 'var(--text-primary)', lineHeight: 1.2 }}>
        {value}{suffix && <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-subtle)' }}>{suffix}</span>}
      </span>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontFamily: 'var(--font-ui)', fontSize: 9.5, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>
        {label}{interactive && <Ic n="ChevronRight" s={10} color="var(--text-subtle)" />}
      </span>
    </div>);

}

function ProfileRow({ icon, label, value }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 12px', background: 'var(--surface-card)', borderRadius: 'var(--radius-md)', boxShadow: 'var(--ring-inset-hairline)' }}>
      <Ic n={icon} s={17} color="var(--prodz-teal)" />
      <span style={{ fontSize: 12.5, color: 'var(--text-subtle)', width: 78, flexShrink: 0 }}>{label}</span>
      <span style={{ flex: 1, fontSize: 13.5, fontWeight: 600, color: 'var(--text-body)', textAlign: 'right' }}>{value}</span>
    </div>);

}

Object.assign(window, { PersonProfile, ProfileRow, StatTileX, StatSheetHead, PersonStatRow });