// Industries (tabbed) + Modules & Marketplace sections (bilingual).

const { useState: useStateIM } = React;

const useIndustries = () => {
  const t = useT();
  return [
    {
      id: 'clinics', icon: 'stethoscope', name: t('العيادات','Clinics'),
      aiName: t('مساعد طبي','Medical assistant'), color: '#5B5BF7',
      summary: t('موظف AI طبي يحجز المواعيد، يفلتر الحالات، ويذكّر بالكشف.','A medical AI that books appointments, triages cases, and sends reminders.'),
      modules: [t('حجز المواعيد','Appointments'), t('سجلات المرضى','Patient records'), t('تذكيرات WhatsApp','WhatsApp reminders'), t('وصفات إلكترونية','E-prescriptions'), t('فواتير التأمين','Insurance billing')],
      workflow: t('استفسار → فحص حالة → حجز موعد → تذكير قبل ٢٤س','Inquiry → triage → book → 24h reminder'),
      metrics: [{ l: t('حجز تلقائي','Auto-booked'), v: t('٧٤٪','74%') }, { l: t('وقت الاستجابة','Reply time'), v: t('٨ث','8s') }, { l: t('لا حضور','No-shows'), v: t('↓ ٣٢٪','↓ 32%') }],
    },
    {
      id: 'restaurants', icon: 'utensils', name: t('المطاعم','Restaurants'),
      aiName: t('مضيف رقمي','Digital host'), color: '#E4405F',
      summary: t('استقبل الحجوزات، أرسل القائمة، خذ الطلبات — كلها على WhatsApp.','Take reservations, send the menu, and accept orders — all on WhatsApp.'),
      modules: [t('حجز الطاولات','Table reservations'), t('القائمة الرقمية','Digital menu'), t('الطلبات','Orders'), t('برنامج الولاء','Loyalty'), t('تقييمات Google','Google reviews')],
      workflow: t('حجز → تأكيد → تذكير → مراجعة بعد الزيارة','Reserve → confirm → remind → post-visit review'),
      metrics: [{ l: t('الحجوزات','Reservations'), v: t('+٤٢٪','+42%') }, { l: t('متوسط الإنفاق','Avg. spend'), v: t('+١٨٪','+18%') }, { l: t('تقييمات ٥★','5★ reviews'), v: '2.3x' }],
    },
    {
      id: 'real-estate', icon: 'home', name: t('العقارات','Real estate'),
      aiName: t('سمسار AI','AI broker'), color: '#06B6D4',
      summary: t('فلتر الاستفسارات، أرسل المعارض الافتراضية، احجز المعاينات.','Qualify inquiries, send virtual tours, book viewings.'),
      modules: [t('كتالوج العقارات','Listings'), t('تفصيل الميزانية','Budget intake'), t('جدولة المعاينات','Viewing schedule'), t('CRM الوسطاء','Broker CRM'), t('تتبع العمولات','Commission tracking')],
      workflow: t('استفسار → فهم الميزانية → اقتراح عقارات → حجز معاينة','Inquiry → budget → matches → viewing'),
      metrics: [{ l: t('استفسارات مؤهلة','Qualified leads'), v: t('٦١٪','61%') }, { l: t('معاينات','Viewings'), v: t('+٣٨٪','+38%') }, { l: t('دورة البيع','Sales cycle'), v: t('↓ ٢٢ يوم','↓ 22 days') }],
    },
    {
      id: 'legal', icon: 'scale', name: t('القانون','Legal'),
      aiName: t('مستشار قانوني','Legal counsel'), color: '#0B0B0E',
      summary: t('سرّية، احترافية، وذكية. تدير الاستشارات والقضايا والوثائق.','Confidential, professional, and intelligent — managing consults, cases, and documents.'),
      modules: [t('الاستشارات الأولية','Initial consults'), t('إدارة القضايا','Case management'), t('تنظيم الوثائق','Document hub'), t('الفوترة بالساعة','Hourly billing'), t('تذكيرات المحاكم','Court reminders')],
      workflow: t('استفسار → تصنيف → جدولة استشارة → ملف قضية','Inquiry → classify → consult → case file'),
      metrics: [{ l: t('استشارات مؤهلة','Qualified consults'), v: t('٨٢٪','82%') }, { l: t('وقت الإدارة','Admin time'), v: t('↓ ٤٧٪','↓ 47%') }, { l: t('دقة الفوترة','Billing accuracy'), v: t('٩٩٪','99%') }],
    },
    {
      id: 'cars', icon: 'car', name: t('السيارات','Auto services'),
      aiName: t('مستشار خدمة','Service advisor'), color: '#F59E0B',
      summary: t('حجوزات الصيانة، تتبع قطع الغيار، تذكيرات الفحص الدوري.','Maintenance bookings, parts tracking, and inspection reminders.'),
      modules: [t('حجز الصيانة','Service bookings'), t('تتبع المركبات','Vehicle tracking'), t('قطع الغيار','Parts'), t('التأمين','Insurance'), t('الفحص الدوري','Periodic inspection')],
      workflow: t('صورة + استفسار → تشخيص أولي → عرض سعر → حجز','Photo + inquiry → triage → quote → book'),
      metrics: [{ l: t('حجوزات الصيانة','Bookings'), v: t('+٥٦٪','+56%') }, { l: t('عملاء عائدون','Repeat customers'), v: t('+٣٤٪','+34%') }, { l: t('لا حضور','No-shows'), v: t('↓ ٢٨٪','↓ 28%') }],
    },
    {
      id: 'retail', icon: 'store', name: t('التجزئة','Retail'),
      aiName: t('مساعد مبيعات','Sales assistant'), color: '#25D366',
      summary: t('بيع داخل المحادثة. أرسل المنتجات، أكمل الطلبات، أنشئ روابط دفع.','Sell inside the conversation: product cards, payment links, order confirmation.'),
      modules: [t('كتالوج المنتجات','Catalog'), t('سلة WhatsApp','WhatsApp cart'), t('روابط الدفع','Payment links'), t('تتبع الشحنات','Shipment tracking'), t('إرجاعات','Returns')],
      workflow: t('استفسار → اقتراح منتج → رابط دفع → تأكيد + توصيل','Inquiry → product match → payment link → confirm + ship'),
      metrics: [{ l: t('تحويل المحادثات','Conv. rate'), v: t('٢٩٪','29%') }, { l: t('متوسط الطلب','AOV'), v: t('+٢١٪','+21%') }, { l: t('سرعة الرد','Reply speed'), v: t('< ١٢ث','< 12s') }],
    },
    {
      id: 'consultants', icon: 'briefcase', name: t('الاستشارات','Consulting'),
      aiName: t('مساعد استشاري','Consulting assistant'), color: '#8B5CF6',
      summary: t('احجز جلسات، أرسل العقود، تتبع الساعات والمشاريع.','Book sessions, send contracts, track hours and projects.'),
      modules: [t('جدولة الجلسات','Session scheduling'), t('إدارة العقود','Contract mgmt'), t('تتبع الساعات','Time tracking'), t('الفواتير','Invoicing'), t('تقارير العملاء','Client reports')],
      workflow: t('استفسار → اكتشاف → جلسة استكشاف → عقد + بداية','Inquiry → discovery → kickoff → contract'),
      metrics: [{ l: t('جلسات محجوزة','Sessions booked'), v: '3.2x' }, { l: t('وقت الإدارة','Admin time'), v: t('↓ ٤١٪','↓ 41%') }, { l: t('إيراد العميل','Revenue per client'), v: t('+٢٧٪','+27%') }],
    },
  ];
};

const IndustriesSection = () => {
  const t = useT();
  const INDUSTRIES = useIndustries();
  const [active, setActive] = useStateIM(INDUSTRIES[0].id);
  const ind = INDUSTRIES.find(i => i.id === active);
  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('القطاعات','Industries')}</Badge>
          <h2 style={{ fontSize: 'clamp(36px, 5vw, 64px)', fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.12, margin: '16px 0 14px', textWrap: 'balance' }}>
            {t(<>كل قطاع يحصل على<br/>نظام مختلف بالكامل</>, <>Every sector gets<br/>a system of its own</>)}
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--fg-muted)', maxWidth: 640, margin: '0 auto' }}>
            {t(
              'ليس قالبًا واحدًا يخدم الجميع. سيلاتر يفهم منطق كل قطاع — ويُنشئ AI ومسارات و CRM مخصصًا.',
              'Not a one-size-fits-all template. Sellatr understands every sector — and ships a tailored AI, workflow, and CRM.'
            )}
          </p>
        </div>

        <div style={{
          marginTop: 56, display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'center',
          padding: 8, background: '#fff', border: '1px solid var(--border)', borderRadius: 22,
          boxShadow: 'var(--shadow-1)', maxWidth: 'fit-content', margin: '56px auto 0',
        }}>
          {INDUSTRIES.map(i => (
            <button key={i.id} onClick={() => setActive(i.id)} style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '10px 16px', borderRadius: 14, fontSize: 14, fontWeight: 600,
              background: active === i.id ? 'var(--black)' : 'transparent',
              color: active === i.id ? '#fff' : 'var(--fg-muted)',
              border: 'none', cursor: 'pointer', transition: 'all 160ms var(--ease-out)',
              whiteSpace: 'nowrap',
            }}>
              <Icon name={i.icon} size={16} />
              {i.name}
            </button>
          ))}
        </div>

        <div key={ind.id} style={{
          marginTop: 36, background: '#fff', border: '1px solid var(--border)',
          borderRadius: 28, padding: 0, overflow: 'hidden', boxShadow: 'var(--shadow-2)',
        }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr' }}>
            <div style={{ padding: 36, background: `linear-gradient(135deg, ${ind.color}10 0%, transparent 100%)`, borderInlineEnd: '1px solid var(--border)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
                <div style={{ width: 52, height: 52, borderRadius: 14, background: ind.color, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: `0 12px 32px ${ind.color}40` }}>
                  <Icon name={ind.icon} size={26} />
                </div>
                <div>
                  <div style={{ fontSize: 12, fontWeight: 600, color: ind.color, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{ind.aiName}</div>
                  <div style={{ fontSize: 22, fontWeight: 700 }}>{ind.name}</div>
                </div>
              </div>
              <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--fg-muted)', marginBottom: 24 }}>{ind.summary}</p>

              <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg-muted)', letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 10 }}>{t('الـ Workflow','Workflow')}</div>
              <div style={{ padding: '12px 14px', background: 'var(--bg-muted)', borderRadius: 12, fontSize: 13, fontWeight: 500 }}>
                {ind.workflow}
              </div>

              <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg-muted)', letterSpacing: '0.04em', textTransform: 'uppercase', margin: '20px 0 10px' }}>{t('الوحدات المضمّنة','Included modules')}</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {ind.modules.map(m => (
                  <span key={m} style={{ padding: '5px 10px', fontSize: 12, fontWeight: 500, background: '#fff', border: '1px solid var(--border)', borderRadius: 99 }}>{m}</span>
                ))}
              </div>
            </div>

            <div style={{ padding: 36, display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
                {ind.metrics.map(m => (
                  <div key={m.l} style={{ padding: 14, background: 'var(--bg-muted)', borderRadius: 14, textAlign: 'center' }}>
                    <div style={{ fontSize: 22, fontWeight: 700, color: ind.color, letterSpacing: '-0.01em' }} className="num">{m.v}</div>
                    <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 2 }}>{m.l}</div>
                  </div>
                ))}
              </div>

              <IndustryDashboard ind={ind} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const IndustryDashboard = ({ ind }) => {
  const t = useT();
  return (
    <div style={{ flex: 1, background: 'var(--neutral-50)', border: '1px solid var(--border)', borderRadius: 18, padding: 18, position: 'relative', overflow: 'hidden', minHeight: 280 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
        <span className="live-dot" style={{ width: 8, height: 8, borderRadius: 99, background: ind.color }} />
        <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg-muted)' }}>{t('لوحة تحكم','Dashboard')} · {ind.name}</span>
        <span style={{ marginInlineStart: 'auto', fontSize: 11, color: 'var(--fg-subtle)' }}>{t('محدّث الآن','Live')}</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <div style={{ background: '#fff', borderRadius: 12, padding: 12 }}>
          <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginBottom: 8 }}>{t('النشاط الحي','Live activity')}</div>
          {[
            { tt: t('محادثة جديدة','New chat'),   who: t('سارة · واتساب','Sara · WhatsApp') },
            { tt: t('حُجز موعد','Booked'),         who: t('فهد · ٣:٠٠م','Fahd · 3:00 PM') },
            { tt: t('دفع مكتمل','Payment done'),   who: t('٢٤٠ ر.س','SAR 240') },
          ].map((a, i) => (
            <div key={i} style={{ padding: '6px 0', borderTop: i ? '1px solid var(--border)' : 'none', display: 'flex', justifyContent: 'space-between', fontSize: 12 }}>
              <span style={{ fontWeight: 500 }}>{a.tt}</span>
              <span style={{ color: 'var(--fg-muted)' }}>{a.who}</span>
            </div>
          ))}
        </div>
        <div style={{ background: '#fff', borderRadius: 12, padding: 12 }}>
          <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginBottom: 4 }}>{t('محادثات الأسبوع','Conversations · 7d')}</div>
          <div className="num" style={{ fontSize: 22, fontWeight: 700, color: ind.color }}>{t('٢٨٤','284')}</div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height: 50, marginTop: 6 }}>
            {[40, 60, 50, 80, 70, 100, 88].map((h, i) => (
              <div key={i} style={{ flex: 1, height: `${h}%`, borderRadius: 3, background: i >= 5 ? ind.color : '#E4E4E8' }} />
            ))}
          </div>
        </div>
      </div>
      <div style={{ marginTop: 10, padding: '10px 12px', borderRadius: 12, background: `${ind.color}12`, border: `1px solid ${ind.color}30`, display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ color: ind.color }}><Icon name="sparkles" size={16} /></span>
        <span style={{ fontSize: 12, fontWeight: 500 }}>{t('اقتراح AI: ٣ عملاء يحتاجون متابعة اليوم','AI suggestion: 3 customers need follow-up today')}</span>
        <span style={{ marginInlineStart: 'auto', fontSize: 11, fontWeight: 700, color: ind.color }}>{t('عرض ←','View →')}</span>
      </div>
    </div>
  );
};

/* ===================== MARKETPLACE ===================== */
const MarketplaceSection = () => {
  const t = useT();
  const { lang } = useLang();
  const core = [
    { icon: 'inbox',    name: 'Inbox',      sub: t('صندوق وارد موحّد','Unified inbox') },
    { icon: 'sparkles', name: 'AI Engine',  sub: t('وكلاء ذكيون','Smart agents') },
    { icon: 'users',    name: 'CRM',        sub: t('عملاء وملفات','Customers & profiles') },
    { icon: 'workflow', name: 'Automation', sub: t('مسارات مرئية','Visual workflows') },
    { icon: 'chart',    name: 'Analytics',  sub: t('تحليلات حية','Live analytics') },
  ];

  const categories = [
    {
      name: 'Operations', color: '#5B5BF7', icon: 'workflow', modules: [
        { name: 'Bookings', icon: 'calendar',    desc: t('حجوزات ذكية لكل قطاع','Smart bookings per sector') },
        { name: 'Queue',    icon: 'users',       desc: t('طوابير وأنظمة دور','Queueing & ticketing') },
        { name: 'Tasks',    icon: 'checkCircle', desc: t('مهام الفريق والمشاريع','Team tasks & projects') },
      ]
    },
    {
      name: 'Revenue', color: '#10B981', icon: 'trending', modules: [
        { name: 'Payments',   icon: 'creditCard', desc: t('مدى · Apple Pay · STC','Mada · Apple Pay · STC') },
        { name: 'Accounting', icon: 'money',      desc: t('فواتير وقيود تلقائية','Auto invoices & entries') },
        { name: 'Billing',    icon: 'briefcase',  desc: t('فوترة متكررة واشتراكات','Recurring & subscriptions') },
      ]
    },
    {
      name: 'Marketing', color: '#E4405F', icon: 'megaphone', modules: [
        { name: 'ROI',       icon: 'target',    desc: t('عائد كل قناة وحملة','ROI per channel & campaign') },
        { name: 'Campaigns', icon: 'megaphone', desc: t('حملات WhatsApp وSMS','WhatsApp & SMS campaigns') },
        { name: 'Loyalty',   icon: 'heart',     desc: t('نقاط ومكافآت العملاء','Points & rewards') },
      ]
    },
    {
      name: 'AI', color: '#06B6D4', icon: 'sparkles', modules: [
        { name: 'Social Listening', icon: 'activity', desc: t('مراقبة الذكر والمنافسين','Mention & competitor tracking') },
        { name: 'AI Reports',       icon: 'pie',      desc: t('تقارير تكتبها الـAI','Reports written by AI') },
        { name: 'Forecasting',      icon: 'trending', desc: t('تنبؤ بالطلب والإيراد','Demand & revenue forecast') },
      ]
    },
    {
      name: 'Communication', color: '#F59E0B', icon: 'phone', modules: [
        { name: 'Video Meetings', icon: 'video',      desc: t('اجتماعات مدمجة في الـCRM','Meetings inside the CRM') },
        { name: 'VoIP',           icon: 'phone',      desc: t('مكالمات مسجّلة + AI','Recorded calls + AI') },
        { name: 'Call Center',    icon: 'headphones', desc: t('مركز اتصال كامل','Full contact center') },
      ]
    },
  ];

  const comingSoon = [
    { icon: 'cpu',     name: 'Voice AI Agent' },
    { icon: 'palette', name: 'AI Brand Studio' },
    { icon: 'package', name: 'Inventory ERP' },
    { icon: 'globe',   name: 'Multi-Branch' },
  ];

  return (
    <section style={{ padding: '180px 28px', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{ position: 'absolute', insetInlineEnd: '-10%', top: '15%', width: 700, height: 700, background: 'radial-gradient(circle, rgba(91,91,247,0.10), transparent 60%)', filter: 'blur(80px)' }} />
      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center' }}>
          <Badge variant="ai" dot>{t('الإضافات والوحدات','Add-ons & modules')}</Badge>
          <h2 style={{ fontSize: 'clamp(36px, 5vw, 64px)', fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.1, margin: '16px 0 14px', textWrap: 'balance' }}>
            {lang === 'ar' ? (
              <>نظام ينمو<br/>مع <span style={{ background: 'linear-gradient(135deg, #5B5BF7, #06B6D4)', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>أعمالك</span></>
            ) : (
              <>A system that <br/>grows <span style={{ background: 'linear-gradient(135deg, #5B5BF7, #06B6D4)', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>with you</span></>
            )}
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--fg-muted)', maxWidth: 600, margin: '0 auto' }}>
            {t(
              'ابدأ بما تحتاجه اليوم. أضف وحدات جديدة بنقرة عندما تنمو أعمالك.',
              'Start with what you need today. Add modules in one click as you scale.'
            )}
          </p>
        </div>

        <div style={{ marginTop: 64 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
            <span style={{ fontSize: 12, fontWeight: 700, padding: '5px 11px', borderRadius: 99, background: 'var(--black)', color: '#fff', letterSpacing: '0.05em' }}>{t('المنصة الأساسية','Core platform')}</span>
            <div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
            <span style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{t('مضمّنة في كل خطة','Included in every plan')}</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10 }}>
            {core.map(c => (
              <div key={c.name} className="hover-lift" style={{
                background: 'linear-gradient(180deg, #fff, #FAFAFA)', border: '1px solid var(--border)',
                borderRadius: 18, padding: 18, textAlign: 'center', boxShadow: 'var(--shadow-1)',
              }}>
                <div style={{ width: 40, height: 40, borderRadius: 12, background: 'var(--accent-bg)', color: 'var(--indigo)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 10px' }}>
                  <Icon name={c.icon} size={20} />
                </div>
                <div style={{ fontSize: 14, fontWeight: 700 }}>{c.name}</div>
                <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 3 }}>{c.sub}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 64 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
            <span style={{ fontSize: 12, fontWeight: 700, padding: '5px 11px', borderRadius: 99, background: 'rgba(91,91,247,0.10)', color: 'var(--indigo-deep)', letterSpacing: '0.05em' }}>{t('متجر الإضافات','Marketplace')}</span>
            <div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
            <span style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{t('+٤٠ وحدة وتعدّ','40+ modules and counting')}</span>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 14 }}>
            {categories.map(cat => (
              <div key={cat.name} style={{
                background: '#fff', border: '1px solid var(--border)', borderRadius: 22,
                padding: 22, boxShadow: 'var(--shadow-1)',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
                  <div style={{ width: 36, height: 36, borderRadius: 10, background: `${cat.color}18`, color: cat.color, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name={cat.icon} size={18} />
                  </div>
                  <div style={{ fontSize: 16, fontWeight: 700 }}>{cat.name}</div>
                  <span style={{ marginInlineStart: 'auto', fontSize: 11, fontWeight: 600, color: 'var(--fg-muted)', padding: '3px 8px', borderRadius: 99, background: 'var(--bg-muted)' }}>{cat.modules.length} {t('وحدات','modules')}</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {cat.modules.map(m => (
                    <div key={m.name} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 12, borderRadius: 12, background: 'var(--bg-subtle)', border: '1px solid transparent', cursor: 'pointer', transition: 'all 160ms' }}
                      onMouseEnter={e => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.boxShadow = 'var(--shadow-1)'; }}
                      onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-subtle)'; e.currentTarget.style.borderColor = 'transparent'; e.currentTarget.style.boxShadow = 'none'; }}
                    >
                      <div style={{ width: 32, height: 32, borderRadius: 9, background: '#fff', border: '1px solid var(--border)', color: cat.color, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <Icon name={m.icon} size={16} />
                      </div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 13, fontWeight: 600 }}>{m.name}</div>
                        <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>{m.desc}</div>
                      </div>
                      <span style={{ fontSize: 11, fontWeight: 700, color: cat.color }}>+ {t('إضافة','Install')}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}

            <div style={{
              background: 'linear-gradient(135deg, #0B0B0E 0%, #18181B 100%)',
              color: '#fff', border: '1px solid rgba(255,255,255,0.08)',
              borderRadius: 22, padding: 22, position: 'relative', overflow: 'hidden',
            }}>
              <div aria-hidden style={{ position: 'absolute', insetInlineEnd: -40, top: -40, width: 200, height: 200, background: 'radial-gradient(circle, rgba(91,91,247,0.3), transparent)', filter: 'blur(40px)' }} />
              <div style={{ position: 'relative' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
                  <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(255,255,255,0.08)', color: '#8484FF', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name="sparkle" size={18} />
                  </div>
                  <div style={{ fontSize: 16, fontWeight: 700 }}>{t('قادم قريبًا','Coming soon')}</div>
                  <span style={{ marginInlineStart: 'auto', fontSize: 11, fontWeight: 600, padding: '3px 8px', borderRadius: 99, background: 'rgba(240,160,16,0.18)', color: '#FFB733' }}>{t('Q2 ٢٠٢٦','Q2 2026')}</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {comingSoon.map(c => (
                    <div key={c.name} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 12, borderRadius: 12, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)' }}>
                      <div style={{ width: 32, height: 32, borderRadius: 9, background: 'rgba(91,91,247,0.18)', color: '#8484FF', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <Icon name={c.icon} size={16} />
                      </div>
                      <div style={{ flex: 1, fontSize: 13, fontWeight: 600 }}>{c.name}</div>
                      <span style={{ fontSize: 11, fontWeight: 600, color: 'rgba(255,255,255,0.5)' }}>{t('ترقّب','Soon')}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.IndustriesSection = IndustriesSection;
window.MarketplaceSection = MarketplaceSection;