// Creators Access ، new feature: hire/collaborate with creators
const { useState: useStateC } = React;

const PF_CREATORS = [
  {
    id:'c1', name:'أحمد المنصور', avatar:'👨‍💻',
    role:'كاتب محتوى', accent:'blue',
    rating:4.9, projects:32,
    bio:'متخصص بمحتوى التكنولوجيا والريفيوهات بنبرة عربية أصيلة',
    works:['blue','indigo','purple'],
  },
  {
    id:'c2', name:'سارة العلي', avatar:'👩‍🎨',
    role:'مونتيرة', accent:'pink',
    rating:5.0, projects:48,
    bio:'مونتاج فيديوهات قصيرة وطويلة ، يوتيوب، تيك توك، ريلز',
    works:['pink','orange','amber'],
  },
  {
    id:'c3', name:'خالد الراشد', avatar:'👨‍🎤',
    role:'معلق صوتي', accent:'amber',
    rating:4.8, projects:24,
    bio:'صوت احترافي للإعلانات والوثائقيات والمحتوى التعليمي',
    works:['amber','green','teal'],
  },
  {
    id:'c4', name:'ليلى المطيري', avatar:'👩‍🎬',
    role:'مصورة', accent:'green',
    rating:4.9, projects:19,
    bio:'تصوير محترف للمنتجات والـreels والبودكاست المرئي',
    works:['green','teal','blue'],
  },
];

function CreatorCard({ creator }) {
  const c = window.pfChip(creator.accent);
  return (
    <div className="creator-card">
      <div className="creator-card-top" style={{background: c.bg, borderColor: c.bar}}>
        <div className="creator-avatar" style={{borderColor: c.bar}}>
          <span style={{fontSize:32}}>{creator.avatar}</span>
        </div>
        <span className="creator-badge" style={{color: c.text, background:'rgba(255,255,255,0.85)', borderColor: c.bar}}>
          {creator.role}
        </span>
      </div>
      <div className="creator-card-body">
        <div className="creator-name">{creator.name}</div>
        <div className="creator-rating">
          <span className="creator-stars">⭐</span>
          <span className="creator-rating-num">{creator.rating}</span>
          <span className="creator-projects">· {creator.projects} مشروع</span>
        </div>
        <p className="creator-bio">{creator.bio}</p>
        <div className="creator-works">
          {creator.works.map((w, i) => {
            const wc = window.pfChip(w);
            return (
              <div key={i} className="creator-work" style={{
                background:`linear-gradient(135deg, ${wc.bg} 0%, ${wc.mid}33 100%)`,
                borderColor: wc.bar,
              }}>
                <span className="creator-work-icon">▶</span>
              </div>
            );
          })}
        </div>
        <div className="creator-actions">
          <button className="creator-btn-primary">تواصل</button>
          <button className="creator-btn-secondary">اعرض الملف</button>
        </div>
      </div>
    </div>
  );
}

function CreatorsAccessSection() {
  return (
    <section className="section creators-section" style={{background:'var(--white)'}}>
      <div className="container">
        <div className="eyebrow">الوصول للمبدعين</div>
        <h2 className="section-title">بإمكانك التعاقد أو التعاون مع المبدعين بمحتواك</h2>
        <p className="section-sub">
          لو تحتاج كاتب محتوى أو ممنتج أو حتى مصور، بتقدر توصل للمبدع وتشيك على أعماله. لا تشيل هم، تم اختيارهم بعناية لرفع جودة المحتوى العربي.
        </p>

        <div className="creators-grid">
          {PF_CREATORS.map(c => <CreatorCard key={c.id} creator={c}/>)}
        </div>

        <div className="creators-bar">
          <div className="creators-bar-stack">
            {['👨‍💻','👩‍🎨','👨‍🎤','👩‍🎬','👨‍🎨','👩‍💻'].map((e, i) => (
              <span key={i} className="creators-bar-avatar" style={{insetInlineStart: `${i*16}px`, zIndex: 10-i}}>{e}</span>
            ))}
          </div>
          <div className="creators-bar-text">
            <strong>+45 مبدع معتمد</strong> جاهز للعمل
          </div>
          <button className="creators-bar-cta">
            تصفح كل المبدعين <ArrowLeft size={14}/>
          </button>
        </div>
      </div>
    </section>
  );
}

window.CreatorsAccessSection = CreatorsAccessSection;