// GetContent — creatorprofiel. Wordt geopend vanuit de reacties op een opdracht.
// Toont foto, rol, locatie, rating/reviews, vanaf-prijs en portfolio.
function CreatorProfile({ onNav }) {
  const NS = window.GetContentDesignSystem_aa0f52;
  const { Button } = NS;
  const s = window.useStore();
  if (!s.auth) return null;
  const c = (window.GC_DATA.creators || [])[(s.ui || {}).creatorId] || null;

  if (!c) {
    return (
      <window.AppPage title="Creator niet gevonden" back={{ to: 'job', label: 'Terug' }} onNav={onNav}>
        <window.EmptyState icon="user-x" title="Profiel niet beschikbaar" text="Ga terug naar de opdracht en probeer opnieuw." cta="Terug" onCta={() => onNav('job')} />
      </window.AppPage>
    );
  }

  const card = { background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)' };

  return (
    <window.AppPage back={{ to: 'job', label: 'Terug naar opdracht' }} onNav={onNav} title={c.name} maxWidth="760px">
      <div style={Object.assign({}, card, { padding: 'clamp(22px, 3vw, 30px)', marginTop: -8, marginBottom: 28 })}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
          <img src={c.avatar} alt="" style={{ width: 76, height: 76, flex: 'none', borderRadius: '50%', objectFit: 'cover', boxShadow: '0 0 0 2px var(--accent)' }} />
          <div style={{ flex: 1, minWidth: 200 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontSize: 20, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>{c.name}</span>
              {c.verified && <i data-lucide="badge-check" style={{ width: 18, height: 18, color: 'var(--accent)' }}></i>}
            </div>
            <div style={{ fontSize: 14.5, color: 'var(--text-muted)', marginTop: 3 }}>{c.role}</div>
            <div style={{ display: 'flex', gap: '6px 18px', flexWrap: 'wrap', marginTop: 10, fontSize: 13.5, color: 'var(--text-body)', fontWeight: 'var(--fw-medium)' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><i data-lucide="map-pin" style={{ width: 14, height: 14, color: 'var(--accent)' }}></i>{c.location}</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><i data-lucide="star" style={{ width: 14, height: 14, color: 'var(--accent)', fill: 'var(--accent)' }}></i>{c.rating} · {c.reviews} reviews</span>
            </div>
          </div>
          <div style={{ textAlign: 'right', flex: 'none' }}>
            <div style={{ fontSize: 22, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)' }}>{c.startingPrice}</div>
            <div style={{ fontSize: 12.5, color: 'var(--text-muted)' }}>vanaf</div>
          </div>
        </div>
      </div>

      <h2 style={{ fontSize: 18, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', margin: '4px 0 16px' }}>Portfolio</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="gc-portfolio-grid">
        {(c.portfolio || []).map((src, i) => (
          <img key={i} src={src} alt="" style={{ width: '100%', aspectRatio: '1 / 1', objectFit: 'cover', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)' }} />
        ))}
      </div>
    </window.AppPage>
  );
}
window.CreatorProfile = CreatorProfile;