// Four Users + Analytics & ROI sections (bilingual).

const FourUsersSection = () => {
  const t = useT();
  const users = [
    {
      role: t('العميل','Customer'), sub: 'Customer', icon: 'user', color: '#25D366',
      device: 'phone',
      desc: t('يدردش مع AI على القناة المفضّلة. يحجز، يدفع، يتتبع طلباته.','Chats with AI on their channel of choice. Books, pays, tracks orders.'),
      perks: [t('محادثة طبيعية','Natural chat'), t('دفع داخل المحادثة','In-chat payments'), t('تتبع الطلب','Order tracking'), t('إشعارات ذكية','Smart notifications')],
    },
    {
      role: t('الموظف','Agent'), sub: 'Agent', icon: 'headphones', color: '#5B5BF7',
      device: 'desktop',
      desc: t('صندوق وارد موحد. الـAI يجهّز ٧٠٪ من الردود — يكمل الموظف الباقي.','Unified inbox. AI handles 70% of replies — the agent finishes the rest.'),
      perks: [t('تعاون مباشر','Live collaboration'), t('قوالب ذكية','Smart templates'), t('تحويل بنقرة','One-click handoff'), t('KPI شخصي','Personal KPIs')],
    },
    {
      role: t('مقدم الخدمة','Provider'), sub: 'Provider', icon: 'stethoscope', color: '#06B6D4',
      device: 'tablet',
      desc: t('الطبيب، المحامي، الفني. يرى مواعيده والملفات ويحدّث الحالة.','The doctor, the lawyer, the technician. Sees their schedule, files, and statuses.'),
      perks: [t('تقويم اليوم','Today schedule'), t('ملف العميل','Customer file'), t('تحديث الحالة','Status updates'), t('فوترة سريعة','Quick billing')],
    },
    {
      role: t('الإدارة','Owner'), sub: 'Owner', icon: 'briefcase', color: '#0B0B0E',
      device: 'desktop',
      desc: t('لوحة مدير شاملة: الإيراد، الأداء، الفرق، التنبؤات.','An owner dashboard: revenue, performance, teams, forecasts.'),
      perks: [t('تقارير حية','Live reports'), t('ROI لكل قناة','ROI per channel'), t('تنبؤات AI','AI forecasts'), t('حوكمة الفريق','Team governance')],
    },
  ];

  return (
    <section style={{ padding: '160px 28px', background: 'var(--bg-subtle)', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center' }}>
          <Badge variant="ai" dot>{t('تجربة المستخدمين','User experiences')}</Badge>
          <h2 style={{ fontSize: 'clamp(36px, 5vw, 64px)', fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.12, margin: '16px 0 14px', textWrap: 'balance' }}>
            {t('أربع تجارب — منصة واحدة','Four experiences — one platform')}
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--fg-muted)', maxWidth: 600, margin: '0 auto' }}>
            {t(
              'كل دور يحصل على واجهة وأدوات تناسب وقته وقراره وجهازه.',
              'Each role gets a surface that matches their time, decisions, and device.'
            )}
          </p>
        </div>

        <div style={{
          marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 18,
        }}>
          {users.map(u => <UserCard key={u.sub} {...u} />)}
        </div>
      </div>
    </section>
  );
};

const UserCard = ({ role, sub, icon, color, device, desc, perks }) => (
  <div className="hover-lift" style={{
    background: '#fff', border: '1px solid var(--border)', borderRadius: 26,
    padding: 24, boxShadow: 'var(--shadow-1)', display: 'flex', flexDirection: 'column', gap: 16,
    minHeight: 460, position: 'relative', overflow: 'hidden',
  }}>
    <div aria-hidden style={{ position: 'absolute', insetInlineStart: -30, top: -30, width: 140, height: 140, background: `radial-gradient(circle, ${color}30, transparent 60%)`, filter: 'blur(20px)' }} />

    <div style={{ display: 'flex', alignItems: 'center', gap: 12, position: 'relative' }}>
      <div style={{ width: 44, height: 44, borderRadius: 12, background: color, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: `0 8px 24px ${color}40` }}>
        <Icon name={icon} size={22} />
      </div>
      <div>
        <div style={{ fontSize: 11, fontWeight: 700, color: color, letterSpacing: '0.05em', textTransform: 'uppercase' }}>{sub}</div>
        <div style={{ fontSize: 20, fontWeight: 700 }}>{role}</div>
      </div>
    </div>

    <p style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--fg-muted)', margin: 0 }}>{desc}</p>

    <DevicePreview kind={device} color={color} sub={sub} />

    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 'auto' }}>
      {perks.map(p => (
        <span key={p} style={{ padding: '5px 9px', fontSize: 11, fontWeight: 600, background: 'var(--bg-muted)', color: 'var(--fg)', borderRadius: 99 }}>{p}</span>
      ))}
    </div>
  </div>
);

const DevicePreview = ({ kind, color, sub }) => {
  const t = useT();
  if (kind === 'phone') {
    return (
      <div style={{ alignSelf: 'center', width: 160, height: 220, background: '#0B0B0E', borderRadius: 26, padding: 8, boxShadow: 'var(--shadow-2)' }}>
        <div style={{ width: '100%', height: '100%', background: '#fff', borderRadius: 18, padding: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ height: 18, display: 'flex', alignItems: 'center', gap: 4 }}>
            <span style={{ width: 18, height: 18, borderRadius: 5, background: color, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <ChannelIcon channel="whatsapp" size={9} />
            </span>
            <span style={{ fontSize: 8, fontWeight: 600 }}>{t('متجر بسمة','Basma Store')}</span>
          </div>
          <MiniBubble side="them" />
          <MiniBubble side="us" />
          <MiniBubble side="them" small />
          <div style={{ marginTop: 'auto', display: 'flex', gap: 4, alignItems: 'center', padding: 4, background: 'var(--bg-muted)', borderRadius: 8 }}>
            <span style={{ flex: 1, height: 10, background: '#fff', borderRadius: 4 }} />
            <span style={{ width: 14, height: 14, borderRadius: 4, background: color }} />
          </div>
        </div>
      </div>
    );
  }
  if (kind === 'tablet') {
    return (
      <div style={{ alignSelf: 'center', width: 220, height: 160, background: '#0B0B0E', borderRadius: 18, padding: 6, boxShadow: 'var(--shadow-2)' }}>
        <div style={{ width: '100%', height: '100%', background: '#fff', borderRadius: 12, padding: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontSize: 9, fontWeight: 700 }}>{t('تقويم اليوم','Today')}</span>
            <span style={{ fontSize: 8, color: 'var(--fg-muted)' }}>{t('الإثنين ٢٢ مايو','Mon May 22')}</span>
          </div>
          {[
            [t('٩:٠٠','9:00'),    t('فحص دوري','Checkup'),    '#5B5BF7'],
            [t('١٠:٣٠','10:30'),  t('استشارة','Consult'),     color],
            [t('١:٠٠','1:00'),    t('متابعة','Follow-up'),    '#10B981'],
          ].map((r, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '5px 7px', borderRadius: 6, background: i === 1 ? `${color}18` : 'var(--bg-muted)' }}>
              <span style={{ fontSize: 9, fontWeight: 600, color: 'var(--fg-muted)', minWidth: 26 }}>{r[0]}</span>
              <span style={{ fontSize: 9, fontWeight: 500, flex: 1 }}>{r[1]}</span>
              <span style={{ width: 5, height: 5, borderRadius: 99, background: r[2] }} />
            </div>
          ))}
        </div>
      </div>
    );
  }
  // desktop
  return (
    <div style={{ alignSelf: 'center', width: 240, height: 160, background: '#fff', border: '1px solid var(--border)', borderRadius: 12, overflow: 'hidden', boxShadow: 'var(--shadow-2)' }}>
      <div style={{ height: 16, display: 'flex', alignItems: 'center', gap: 4, padding: '0 6px', background: 'var(--bg-muted)', borderBottom: '1px solid var(--border)' }}>
        <span style={{ width: 6, height: 6, borderRadius: 99, background: '#EF4444' }} />
        <span style={{ width: 6, height: 6, borderRadius: 99, background: '#F59E0B' }} />
        <span style={{ width: 6, height: 6, borderRadius: 99, background: '#10B981' }} />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '60px 1fr', height: 'calc(100% - 16px)' }}>
        <div style={{ background: 'var(--bg-subtle)', padding: 6, borderInlineEnd: '1px solid var(--border)' }}>
          {[1,2,3,4].map(i => <div key={i} style={{ height: 9, marginBottom: 4, borderRadius: 4, background: i === 1 ? color : 'var(--bg-muted)' }} />)}
        </div>
        <div style={{ padding: 8 }}>
          {sub === 'Agent' ? <AgentMini color={color} /> : <OwnerMini color={color} />}
        </div>
      </div>
    </div>
  );
};

const MiniBubble = ({ side, small }) => (
  <div style={{ display: 'flex', justifyContent: side === 'us' ? 'flex-end' : 'flex-start' }}>
    <div style={{ width: small ? '50%' : '70%', height: 16, borderRadius: 8, background: side === 'us' ? '#DCF8C6' : 'var(--bg-muted)' }} />
  </div>
);

const AgentMini = ({ color }) => {
  const t = useT();
  const times = [t('الآن','now'), t('٢د','2m'), t('١٢د','12m'), t('٢٢د','22m')];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      {[0,1,2,3].map(i => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '3px 6px', borderRadius: 4, background: i === 0 ? `${color}18` : 'transparent' }}>
          <span style={{ width: 10, height: 10, borderRadius: 99, background: color }} />
          <span style={{ flex: 1, height: 4, borderRadius: 2, background: 'var(--bg-muted)' }} />
          <span style={{ fontSize: 6, color: 'var(--fg-muted)' }}>{times[i]}</span>
        </div>
      ))}
    </div>
  );
};

const OwnerMini = ({ color }) => {
  const t = useT();
  return (
    <div>
      <div style={{ fontSize: 8, fontWeight: 700, color: 'var(--fg-muted)' }}>{t('إجمالي اليوم','Today total')}</div>
      <div className="num" style={{ fontSize: 16, fontWeight: 800 }}>{t('١٢,٤٨٠','12,480')}</div>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 2, height: 30, marginTop: 4 }}>
        {[40, 65, 50, 80, 70, 95, 88].map((h,i) => (
          <div key={i} style={{ flex: 1, height: `${h}%`, borderRadius: 2, background: i >= 5 ? color : 'var(--bg-muted)' }} />
        ))}
      </div>
    </div>
  );
};

/* ===================== ANALYTICS & ROI ===================== */
const AnalyticsSection = () => {
  const t = useT();
  const { lang } = useLang();
  return (
    <section style={{ padding: '160px 28px', overflow: 'hidden', position: 'relative' }}>
      <div aria-hidden style={{ position: 'absolute', insetInlineStart: '-10%', bottom: '-10%', width: 600, height: 600, background: 'radial-gradient(circle, rgba(6,182,212,0.10), transparent 60%)', filter: 'blur(60px)' }} />
      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center' }}>
          <Badge variant="ai" dot>{t('التحليلات وعائد الاستثمار','Analytics & ROI')}</Badge>
          <h2 style={{ fontSize: 'clamp(36px, 5vw, 64px)', fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.12, margin: '16px 0 14px', textWrap: 'balance' }}>
            {lang === 'ar' ? (
              <>من أول رسالة…<br/>
              <span style={{ background: 'linear-gradient(135deg, #5B5BF7, #06B6D4)', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>حتى الإيراد النهائي</span></>
            ) : (
              <>From the first message…<br/>
              <span style={{ background: 'linear-gradient(135deg, #5B5BF7, #06B6D4)', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>to the final revenue</span></>
            )}
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--fg-muted)', maxWidth: 600, margin: '0 auto' }}>
            {t(
              'تتبع كل محادثة كأنها صفقة. اعرف عائد كل قناة، كل حملة، كل ساعة عمل.',
              'Track every conversation like a deal. Know the ROI of every channel, campaign, and working hour.'
            )}
          </p>
        </div>

        <div style={{ marginTop: 64 }}>
          <AnalyticsDashboard />
        </div>
      </div>
    </section>
  );
};

const AnalyticsDashboard = () => {
  const t = useT();
  return (
    <div style={{
      background: '#fff', border: '1px solid var(--border)', borderRadius: 28,
      boxShadow: 'var(--shadow-2)', padding: 24, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24, flexWrap: 'wrap', gap: 12 }}>
        <div>
          <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg-muted)' }}>{t('لوحة الأداء','Performance dashboard')}</div>
          <div style={{ fontSize: 20, fontWeight: 700 }}>{t('هذا الشهر · مايو ٢٠٢٦','This month · May 2026')}</div>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          {[t('اليوم','Day'), t('الأسبوع','Week'), t('الشهر','Month'), t('السنة','Year')].map((tt, i) => (
            <span key={tt} style={{ padding: '7px 12px', fontSize: 12, fontWeight: 600, borderRadius: 10, background: i === 2 ? 'var(--black)' : 'var(--bg-muted)', color: i === 2 ? '#fff' : 'var(--fg-muted)' }}>{tt}</span>
          ))}
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 10, marginBottom: 18 }}>
        {[
          { l: 'ROI',                       v: t('٤.٢x','4.2x'),         d: t('+٠.٣x','+0.3x'),  icon: 'target',     color: '#10B981' },
          { l: t('الإيراد','Revenue'),       v: t('٢٨٤,١٢٠ ر.س','SAR 284,120'), d: t('+٢٢٪','+22%'), icon: 'money',     color: '#5B5BF7' },
          { l: t('التحويل','Conversion'),    v: t('٢٩.٤٪','29.4%'),       d: t('+٤.١٪','+4.1%'), icon: 'trending',  color: '#06B6D4' },
          { l: t('AI حلّت','AI resolved'),    v: t('٦٩٪','69%'),           d: t('+٧٪','+7%'),    icon: 'sparkles',  color: '#8B5CF6' },
          { l: 'CAC',                       v: t('٤٢ ر.س','SAR 42'),     d: t('↓ ١٨٪','↓ 18%'), icon: 'user',     color: '#F59E0B' },
        ].map(k => (
          <div key={k.l} style={{ padding: 16, background: 'var(--bg-subtle)', border: '1px solid var(--border)', borderRadius: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
              <span style={{ color: k.color }}><Icon name={k.icon} size={14} /></span>
              <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg-muted)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>{k.l}</span>
            </div>
            <div className="num" style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em' }}>{k.v}</div>
            <div style={{ fontSize: 11, fontWeight: 700, color: '#10B981', marginTop: 2 }}>{k.d}</div>
          </div>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 14 }}>
        <div style={{ padding: 22, background: 'var(--bg-subtle)', border: '1px solid var(--border)', borderRadius: 18 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg-muted)' }}>{t('الإيراد عبر الزمن','Revenue over time')}</div>
              <div className="num" style={{ fontSize: 28, fontWeight: 800, letterSpacing: '-0.02em' }}>
                {t(<>٢٨٤,١٢٠ <span style={{ fontSize: 14, color: 'var(--fg-muted)', fontWeight: 500 }}>ر.س</span></>, <>284,120 <span style={{ fontSize: 14, color: 'var(--fg-muted)', fontWeight: 500 }}>SAR</span></>)}
              </div>
            </div>
            <div style={{ display: 'flex', gap: 14, fontSize: 11 }}>
              <LegendDot color="#5B5BF7" label={t('إجمالي','Total')} />
              <LegendDot color="#25D366" label="AI" />
              <LegendDot color="#06B6D4" label={t('بشري','Human')} />
            </div>
          </div>
          <RevenueChart />
        </div>

        <div style={{ padding: 22, background: 'var(--bg-subtle)', border: '1px solid var(--border)', borderRadius: 18 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg-muted)', marginBottom: 4 }}>{t('أفضل القنوات','Top channels')}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 10 }}>
            <DonutChart />
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { ch: 'whatsapp',  label: t('واتساب','WhatsApp'),   val: 58 },
                { ch: 'instagram', label: t('إنستجرام','Instagram'), val: 22 },
                { ch: 'web',       label: t('الموقع','Website'),     val: 12 },
                { ch: 'email',     label: t('البريد','Email'),       val: 8 },
              ].map(c => (
                <div key={c.ch} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }}>
                  <span style={{ width: 8, height: 8, borderRadius: 99, background: CHANNEL_META[c.ch].color }} />
                  <span style={{ flex: 1, fontWeight: 500 }}>{c.label}</span>
                  <span className="num" style={{ fontWeight: 700 }}>{c.val}%</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div style={{ marginTop: 14, padding: 18, background: 'var(--bg-subtle)', border: '1px solid var(--border)', borderRadius: 18 }}>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 12 }}>
          <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg-muted)' }}>{t('أفضل الحملات','Top campaigns')}</span>
          <span style={{ marginInlineStart: 'auto', fontSize: 11, fontWeight: 700, color: 'var(--indigo)' }}>{t('عرض الكل ←','View all →')}</span>
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
          <thead>
            <tr style={{ color: 'var(--fg-muted)', fontWeight: 600, fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
              <th style={{ textAlign: 'start', padding: '8px 4px' }}>{t('الحملة','Campaign')}</th>
              <th style={{ textAlign: 'start', padding: '8px 4px' }}>{t('القناة','Channel')}</th>
              <th style={{ textAlign: 'start', padding: '8px 4px' }}>{t('التحويل','Conv.')}</th>
              <th style={{ textAlign: 'start', padding: '8px 4px' }}>{t('الإيراد','Revenue')}</th>
              <th style={{ textAlign: 'start', padding: '8px 4px' }}>ROI</th>
            </tr>
          </thead>
          <tbody>
            {[
              { c: t('تخفيضات رمضان','Ramadan sale'),         ch: 'whatsapp',  tt: t('٣٤٪','34%'), r: t('٨٢,٤٠٠','82,400'),  roi: '6.2x', good: true },
              { c: t('إطلاق المجموعة الصيفية','Summer launch'), ch: 'instagram', tt: t('٢٧٪','27%'), r: t('٤٢,١٠٠','42,100'),  roi: '4.8x', good: true },
              { c: t('استرداد السلة','Cart recovery'),         ch: 'email',     tt: t('١٨٪','18%'), r: t('٢٤,٣٠٠','24,300'),  roi: '3.2x', good: false },
              { c: t('حملة الولاء','Loyalty drive'),           ch: 'whatsapp',  tt: t('٤١٪','41%'), r: t('٦٨,٢٠٠','68,200'),  roi: '5.4x', good: true },
            ].map((r, i) => (
              <tr key={i} style={{ borderTop: '1px solid var(--border)' }}>
                <td style={{ padding: '10px 4px', fontWeight: 600 }}>{r.c}</td>
                <td style={{ padding: '10px 4px' }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '2px 8px', borderRadius: 99, background: `${CHANNEL_META[r.ch].color}18`, color: CHANNEL_META[r.ch].color, fontSize: 11, fontWeight: 600 }}>
                    <ChannelIcon channel={r.ch} size={10} /> {t({ whatsapp:'واتساب', instagram:'إنستجرام', email:'البريد' }[r.ch], { whatsapp:'WhatsApp', instagram:'Instagram', email:'Email' }[r.ch])}
                  </span>
                </td>
                <td className="num" style={{ padding: '10px 4px' }}>{r.tt}</td>
                <td className="num" style={{ padding: '10px 4px', fontWeight: 700 }}>{r.r} {t('ر.س','SAR')}</td>
                <td style={{ padding: '10px 4px' }}>
                  <span className="num" style={{ padding: '2px 8px', borderRadius: 99, background: r.good ? 'rgba(16,185,129,0.12)' : 'rgba(245,158,11,0.12)', color: r.good ? '#047857' : '#B45309', fontWeight: 700, fontSize: 11 }}>{r.roi}</span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

const LegendDot = ({ color, label }) => (
  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--fg-muted)', fontWeight: 500 }}>
    <span style={{ width: 8, height: 8, borderRadius: 99, background: color }} />{label}
  </span>
);

const RevenueChart = () => {
  const W = 600, H = 180, P = 20;
  const data = [40, 55, 48, 70, 65, 82, 75, 90, 95, 100, 88, 110];
  const ai =   [20, 30, 28, 42, 40, 55, 50, 62, 68, 72, 60, 80];
  const max = 130;
  const x = i => P + (i / (data.length - 1)) * (W - P * 2);
  const y = v => H - P - (v / max) * (H - P * 2);
  const totalPath = data.map((v, i) => `${i ? 'L' : 'M'}${x(i)},${y(v)}`).join(' ');
  const aiPath = ai.map((v, i) => `${i ? 'L' : 'M'}${x(i)},${y(v)}`).join(' ');
  const totalArea = totalPath + ` L${x(data.length-1)},${H-P} L${x(0)},${H-P} Z`;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: 'block' }}>
      <defs>
        <linearGradient id="revGrad" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#5B5BF7" stopOpacity="0.25"/>
          <stop offset="1" stopColor="#5B5BF7" stopOpacity="0"/>
        </linearGradient>
      </defs>
      {[0.25, 0.5, 0.75].map(p => (
        <line key={p} x1={P} x2={W-P} y1={P + p*(H-P*2)} y2={P + p*(H-P*2)} stroke="var(--border)" strokeDasharray="2 4"/>
      ))}
      <path d={totalArea} fill="url(#revGrad)"/>
      <path d={totalPath} stroke="#5B5BF7" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      <path d={aiPath} stroke="#25D366" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx={x(data.length-1)} cy={y(data[data.length-1])} r="5" fill="#5B5BF7" stroke="#fff" strokeWidth="2"/>
      <circle cx={x(ai.length-1)} cy={y(ai[ai.length-1])} r="4" fill="#25D366" stroke="#fff" strokeWidth="2"/>
    </svg>
  );
};

const DonutChart = () => {
  const t = useT();
  const segs = [
    { v: 58, c: '#25D366' },
    { v: 22, c: '#E4405F' },
    { v: 12, c: '#5B5BF7' },
    { v: 8,  c: '#52525B' },
  ];
  const C = 2 * Math.PI * 36;
  let offset = 0;
  return (
    <svg width="100" height="100" viewBox="0 0 100 100" style={{ flexShrink: 0 }}>
      <circle cx="50" cy="50" r="36" fill="none" stroke="var(--bg-muted)" strokeWidth="12"/>
      {segs.map((s, i) => {
        const len = (s.v / 100) * C;
        const dasharray = `${len} ${C}`;
        const dashoffset = -offset;
        offset += len;
        return <circle key={i} cx="50" cy="50" r="36" fill="none" stroke={s.c} strokeWidth="12" strokeDasharray={dasharray} strokeDashoffset={dashoffset} transform="rotate(-90 50 50)" strokeLinecap="butt"/>;
      })}
      <text x="50" y="48" textAnchor="middle" fontSize="14" fontWeight="800" fill="var(--fg)">{t('١٠٠٪','100%')}</text>
      <text x="50" y="62" textAnchor="middle" fontSize="8" fill="var(--fg-muted)">{t('قنوات','Channels')}</text>
    </svg>
  );
};

window.FourUsersSection = FourUsersSection;
window.AnalyticsSection = AnalyticsSection;