// Omnichannel + AI Agent + AI Customization (bilingual).

const OmnichannelSection = () => {
  const t = useT();
  const channels = [
    { key: 'whatsapp',  name: t('واتساب','WhatsApp'),         sub: t('+٢ مليار مستخدم','2B+ users') },
    { key: 'messenger', name: t('ماسنجر','Messenger'),         sub: t('فيسبوك','Meta') },
    { key: 'instagram', name: t('إنستجرام','Instagram'),       sub: t('DM + Stories','DM + Stories') },
    { key: 'email',     name: t('البريد','Email'),              sub: 'IMAP/SMTP' },
    { key: 'web',       name: t('شات الموقع','Site chat'),       sub: t('ويدجت قابل للتخصيص','Customizable widget') },
    { key: 'telegram',  name: t('تيليجرام','Telegram'),          sub: 'Bots + Groups' },
    { key: 'api',       name: t('APIs مخصصة','Custom APIs'),    sub: t('تطبيقك، ERPك','Your app, your ERP') },
  ];
  return (
    <section style={{ padding: '160px 28px', background: 'var(--bg-subtle)', overflow: 'hidden', position: 'relative' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center' }}>
          <Badge variant="ai" dot>Omnichannel</Badge>
          <h2 style={{ fontSize: 'clamp(36px, 5vw, 64px)', fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.1, margin: '16px 0 16px', textWrap: 'balance' }}>
            {t(<>عملاؤك في كل مكان — <br/>أنت في مكان واحد</>, <>Customers everywhere — <br/>you, in one place</>)}
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--fg-muted)', maxWidth: 700, margin: '0 auto' }}>
            {t(
              'كل القنوات تدخل إلى صندوق وارد واحد ذكي يحمل كل تاريخ العميل الكامل.',
              'Every channel flows into one intelligent inbox carrying the complete customer history.'
            )}
          </p>
        </div>

        <div style={{ marginTop: 80, display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 40 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {channels.map((c, i) => (
              <ChannelRow key={c.key} channelKey={c.key} name={c.name} sub={c.sub} delay={i * 0.15} />
            ))}
          </div>

          <div style={{ position: 'relative', width: 280, height: 500 }}>
            <FlowConnector />
          </div>

          <UnifiedProfileMock />
        </div>
      </div>
    </section>
  );
};

const ChannelRow = ({ channelKey: k, name, sub }) => (
  <div style={{
    display: 'flex', alignItems: 'center', gap: 12,
    padding: '12px 16px', background: '#fff', border: '1px solid var(--border)',
    borderRadius: 16, boxShadow: 'var(--shadow-1)', position: 'relative',
  }}>
    <div style={{ width: 36, height: 36, borderRadius: 10, background: CHANNEL_META[k]?.color || 'var(--black)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <ChannelIcon channel={k} size={16} />
    </div>
    <div style={{ flex: 1 }}>
      <div style={{ fontSize: 14, fontWeight: 600 }}>{name}</div>
      <div style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{sub}</div>
    </div>
    <span className="live-dot" style={{ width: 6, height: 6, borderRadius: 99, background: '#10B981' }} />
  </div>
);

const FlowConnector = () => {
  const t = useT();
  return (
    <svg width="100%" height="100%" viewBox="0 0 280 500" fill="none" style={{ overflow: 'visible' }}>
      <defs>
        <linearGradient id="flowGrad" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0" stopColor="#5B5BF7" stopOpacity="0.4"/>
          <stop offset="1" stopColor="#06B6D4" stopOpacity="0.8"/>
        </linearGradient>
      </defs>
      {[36, 100, 160, 220, 280, 340, 400].map((y, i) => (
        <path key={i} d={`M 0 ${y} C 80 ${y}, 140 250, 280 250`} stroke="url(#flowGrad)" strokeWidth="1.5" />
      ))}
      {[36, 100, 160, 220, 280, 340, 400].map((y, i) => (
        <circle key={i} cx="0" cy={y} r="3" fill="#5B5BF7">
          <animateMotion dur={`${3 + i * 0.4}s`} repeatCount="indefinite" path={`M 0 0 C 80 0, 140 ${250 - y}, 280 ${250 - y}`} />
        </circle>
      ))}
      <circle cx="280" cy="250" r="42" fill="#0B0B0E" />
      <circle cx="280" cy="250" r="42" fill="none" stroke="url(#flowGrad)" strokeWidth="2" />
      <text x="280" y="248" textAnchor="middle" fill="#fff" fontSize="11" fontWeight="700">{t('صندوق','Smart')}</text>
      <text x="280" y="262" textAnchor="middle" fill="#fff" fontSize="11" fontWeight="700">{t('وارد ذكي','Inbox')}</text>
    </svg>
  );
};

const UnifiedProfileMock = () => {
  const t = useT();
  return (
    <div style={{
      background: '#fff', borderRadius: 22, border: '1px solid var(--border)',
      boxShadow: 'var(--shadow-2)', padding: 22, position: 'relative',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
        <Avatar initials={t('س.ع','S.A')} color="#5B5BF7" size={52} status="online" />
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 16, fontWeight: 700 }}>{t('سارة العبدالله','Sara Al-Abdullah')}</div>
          <div style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{t('الرياض · عميلة VIP · ١٢ طلب','Riyadh · VIP · 12 orders')}</div>
        </div>
        <Badge variant="ai">{t('AI تابع الحوار','AI tracking')}</Badge>
      </div>

      <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg-muted)', letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 10 }}>{t('القنوات المرتبطة','Linked channels')}</div>
      <div style={{ display: 'flex', gap: 6, marginBottom: 18, flexWrap: 'wrap' }}>
        {['whatsapp','instagram','email','web'].map(c => (
          <span key={c} style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '5px 9px', borderRadius: 999, background: 'var(--bg-muted)', fontSize: 11, fontWeight: 500 }}>
            <span style={{ color: CHANNEL_META[c].color }}><ChannelIcon channel={c} size={11} /></span>
            {t(CHANNEL_META[c].name, { whatsapp:'WhatsApp', instagram:'Instagram', email:'Email', web:'Website' }[c])}
          </span>
        ))}
      </div>

      <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg-muted)', letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 10 }}>{t('الخط الزمني الكامل','Complete timeline')}</div>
      <div style={{ position: 'relative', paddingInlineStart: 16 }}>
        <div style={{ position: 'absolute', insetInlineStart: 5, top: 6, bottom: 6, width: 1, background: 'var(--border)' }} />
        {[
          { ch: 'whatsapp',  text: t('محادثة جديدة · الآن','New chat · now'),                    tag: t('AI تجيب','AI replying') },
          { ch: 'instagram', text: t('تعليق على منتج · ٢س','Comment on a product · 2h'),         tag: t('مفتوحة','Open') },
          { ch: 'email',     text: t('طلب فاتورة · أمس','Invoice request · yesterday'),         tag: t('مُغلقة','Closed') },
          { ch: 'web',       text: t('زيارة صفحة الأسعار · ٣ أيام','Visited pricing · 3 days'),  tag: t('تتبع','Tracking') },
          { ch: 'whatsapp',  text: t('طلب #١٠٤٣ · ١٢ مارس','Order #1043 · Mar 12'),              tag: t('مُكتمل','Done') },
        ].map((it, i) => (
          <div key={i} style={{ position: 'relative', padding: '8px 0', display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'center' }}>
            <span style={{ position: 'absolute', insetInlineStart: -16, top: '50%', transform: 'translateY(-50%)', width: 11, height: 11, borderRadius: 99, background: CHANNEL_META[it.ch].color, border: '2px solid #fff', boxShadow: '0 0 0 1px var(--border)' }} />
            <div style={{ fontSize: 12.5, fontWeight: 500 }}>{it.text}</div>
            <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--fg-muted)', padding: '2px 7px', borderRadius: 99, background: 'var(--bg-muted)' }}>{it.tag}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

/* ===================== AI AGENT ===================== */
const AIAgentSection = () => {
  const t = useT();
  const { lang } = useLang();
  const features = [
    { icon: 'globe',      title: t('يفهم اللهجات','Understands dialects'),     sub: t('سعودي، مصري، خليجي، شامي، مغربي','Saudi, Egyptian, Gulf, Levantine, Maghrebi') },
    { icon: 'calendar',   title: t('يحجز','Books'),                            sub: t('مع الفنيين والاستشاريين تلقائيًا','Slots with providers, automatically') },
    { icon: 'users',      title: t('يحدّث CRM','Updates the CRM'),              sub: t('يكتب الملاحظات ويعلّم العميل','Writes notes, tags customers') },
    { icon: 'creditCard', title: t('يرسل روابط دفع','Sends payment links'),     sub: t('مدى، Apple Pay، STC Pay، تحويل','Mada, Apple Pay, STC Pay, transfer') },
    { icon: 'repeat',     title: t('يحوّل للبشر','Hands off to humans'),         sub: t('بسلاسة عندما يحتاج العميل','Smoothly, when a customer needs it') },
    { icon: 'workflow',   title: t('يتخذ إجراءات','Takes actions'),              sub: t('يستدعي API ويُجري عمليات حقيقية','Calls APIs and performs real operations') },
    { icon: 'eye',        title: t('يقرأ الصور والصوت','Reads images & audio'), sub: t('يفهم الإيصالات، المنتجات، الرسائل الصوتية','Understands receipts, products, voice notes') },
    { icon: 'megaphone',  title: t('يُطلق حملات استرداد','Runs recovery campaigns'), sub: t('يتابع السلال المتروكة والعملاء الصامتين','Chases abandoned carts and silent customers') },
  ];

  return (
    <section style={{ padding: '180px 28px 160px', position: 'relative', overflow: 'hidden', background: 'var(--black)', color: '#fff' }}>
      <div aria-hidden style={{ position: 'absolute', inset: 0, opacity: 0.5,
        backgroundImage: `radial-gradient(ellipse 60% 50% at 50% 0%, rgba(91,91,247,0.30), transparent 60%),
                          radial-gradient(ellipse 60% 60% at 20% 80%, rgba(6,182,212,0.20), transparent 60%),
                          radial-gradient(ellipse 50% 50% at 80% 80%, rgba(37,211,102,0.10), transparent 60%)`,
        filter: 'blur(20px)',
      }} />
      <div aria-hidden style={{ position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)',
        backgroundSize: '60px 60px',
        maskImage: 'radial-gradient(ellipse 80% 70% at center, black, transparent)',
        WebkitMaskImage: 'radial-gradient(ellipse 80% 70% at center, black, transparent)',
      }} />

      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center' }}>
          <Badge variant="ai" dot>{t('الذكاء الاصطناعي','AI')}</Badge>
          <h2 style={{ fontSize: 'clamp(36px, 5vw, 64px)', fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.1, margin: '16px 0 16px', textWrap: 'balance', color: '#fff' }}>
            {lang === 'ar' ? (
              <>موظف ذكي يفهم عملك<br/>
              <span style={{ background: 'linear-gradient(135deg, #8484FF, #38D4ED 60%, #25D366)', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>ويتخذ إجراءات حقيقية</span></>
            ) : (
              <>A teammate that knows your business<br/>
              <span style={{ background: 'linear-gradient(135deg, #8484FF, #38D4ED 60%, #25D366)', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>and takes real action</span></>
            )}
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.7, color: 'rgba(255,255,255,0.7)', maxWidth: 660, margin: '0 auto' }}>
            {t(
              'ليس مجرد قالب ردود. وكيل AI مدرب على بياناتك، متصل بأنظمتك، يتصرف باسمك.',
              'Not a template bot. An AI agent trained on your data, wired to your systems, acting on your behalf.'
            )}
          </p>
        </div>

        <div style={{ marginTop: 76 }}>
          <AIWorkflow />
        </div>

        <div style={{
          marginTop: 72, display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 14,
        }}>
          {features.map(f => (
            <div key={f.title} style={{
              background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)',
              borderRadius: 20, padding: 22, display: 'flex', flexDirection: 'column', gap: 12,
              backdropFilter: 'blur(12px)',
              transition: 'all 220ms var(--ease-out)',
            }} onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(91,91,247,0.4)'; e.currentTarget.style.background = 'rgba(91,91,247,0.06)'; }}
               onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)'; e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; }}
            >
              <div style={{ width: 44, height: 44, borderRadius: 12, background: 'linear-gradient(135deg, rgba(91,91,247,0.20), rgba(6,182,212,0.20))', color: '#8484FF', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid rgba(91,91,247,0.3)' }}>
                <Icon name={f.icon} size={22} />
              </div>
              <div>
                <div style={{ fontSize: 17, fontWeight: 600 }}>{f.title}</div>
                <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.6)', marginTop: 4, lineHeight: 1.6 }}>{f.sub}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 80, textAlign: 'center', padding: '0 24px' }}>
          <div style={{
            display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 14,
            padding: '32px 40px', borderRadius: 24,
            background: 'linear-gradient(135deg, rgba(91,91,247,0.10), rgba(6,182,212,0.10))',
            border: '1px solid rgba(91,91,247,0.30)',
          }}>
            <span style={{ fontSize: 12, fontWeight: 700, padding: '4px 10px', borderRadius: 99, background: 'rgba(240,160,16,0.18)', color: '#FFB733', letterSpacing: '0.05em' }}>★ {t('القاعدة الذهبية','The golden rule')}</span>
            <div style={{ fontSize: 'clamp(24px, 3.2vw, 36px)', fontWeight: 700, lineHeight: 1.3, letterSpacing: '-0.02em', maxWidth: 720 }}>
              {t(
                <><span style={{ color: 'rgba(255,255,255,0.5)' }}>AI لا يجيب فقط…</span><br/>بل يدير العمليات.</>,
                <><span style={{ color: 'rgba(255,255,255,0.5)' }}>AI doesn't just reply…</span><br/>it runs your operations.</>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const AIWorkflow = () => {
  const t = useT();
  return (
    <div style={{
      position: 'relative', maxWidth: 1100, margin: '0 auto',
      background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)',
      borderRadius: 24, padding: 32, overflow: 'hidden', backdropFilter: 'blur(8px)',
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr', gap: 16, alignItems: 'center' }}>
        <WFStep icon="chat"     label={t('رسالة','Message')}     sub={t('سارة · واتساب','Sara · WhatsApp')} color="#25D366" />
        <WFArrow />
        <WFStep icon="sparkles" label={t('تحليل AI','AI analysis')} sub={t('نية شراء · لهجة سعودية','Purchase intent · Saudi dialect')} color="#5B5BF7" highlighted />
        <WFArrow />
        <WFStep icon="workflow" label={t('إجراءات','Actions')}    sub={t('حجز مخزون + رابط دفع + تحديث CRM','Reserve · payment link · CRM update')} color="#06B6D4" />
      </div>
      <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
        {[
          { icon: 'creditCard', label: t('رابط دفع أُنشئ','Payment link created'),  val: t('٤٩٨ ر.س','SAR 498') },
          { icon: 'package',    label: t('حجز مخزون','Inventory reserved'),         val: t('٢ قطعة','2 units') },
          { icon: 'calendar',   label: t('موعد توصيل','Delivery slot'),              val: t('الثلاثاء','Tuesday') },
          { icon: 'users',      label: t('CRM مُحدّث','CRM updated'),               val: t('✓ تم','✓ done') },
        ].map(o => (
          <div key={o.label} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: 'rgba(16,185,129,0.10)', border: '1px solid rgba(16,185,129,0.30)', borderRadius: 12 }}>
            <span style={{ color: '#10B981' }}><Icon name={o.icon} size={16} /></span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)' }}>{o.label}</div>
              <div style={{ fontSize: 13, fontWeight: 700 }}>{o.val}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const WFStep = ({ icon, label, sub, color, highlighted }) => (
  <div style={{
    background: highlighted ? 'linear-gradient(135deg, rgba(91,91,247,0.18), rgba(6,182,212,0.18))' : 'rgba(255,255,255,0.04)',
    border: highlighted ? '1px solid rgba(91,91,247,0.40)' : '1px solid rgba(255,255,255,0.08)',
    borderRadius: 18, padding: 18, textAlign: 'center',
  }}>
    <div style={{ width: 48, height: 48, borderRadius: 14, background: color, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 10px', boxShadow: `0 8px 24px ${color}50` }}>
      <Icon name={icon} size={22} />
    </div>
    <div style={{ fontSize: 14, fontWeight: 700, color: '#fff' }}>{label}</div>
    <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', marginTop: 4 }}>{sub}</div>
  </div>
);

const WFArrow = () => (
  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,0.4)' }}>
    <svg width="100%" height="20" viewBox="0 0 100 20" preserveAspectRatio="none">
      <line x1="5" y1="10" x2="95" y2="10" stroke="rgba(255,255,255,0.2)" strokeWidth="1.5" strokeDasharray="3 3"/>
      <polygon points="10,5 0,10 10,15" fill="rgba(255,255,255,0.4)" />
    </svg>
  </div>
);

/* ===================== AI CUSTOMIZATION ===================== */
const AICustomizationSection = () => {
  const t = useT();
  return (
    <section style={{ padding: '160px 28px', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <Badge variant="ai" dot>{t('تخصيص الذكاء الاصطناعي','AI customization')}</Badge>
            <h2 style={{ fontSize: 'clamp(36px, 4.6vw, 56px)', fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.12, margin: '16px 0 18px', textWrap: 'balance' }}>
              {t('خصص الـ AI بالكامل ليتحدث بطريقتك.','Tune the AI to sound exactly like you.')}
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--fg-muted)', maxWidth: 460 }}>
              {t(
                'الشخصية، اللهجة، النبرة، الـworkflow، الصلاحيات، وقواعد التحويل للبشر — كلها بين يديك في لوحة واحدة.',
                'Persona, dialect, tone, workflow, permissions, and handoff rules — all in one panel.'
              )}
            </p>
            <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
              {[
                ['palette',  t('الشخصية','Persona')],
                ['globe',    t('اللهجة','Dialect')],
                ['activity', t('النبرة','Tone')],
                ['workflow', 'Workflow'],
                ['shield',   t('صلاحيات AI','AI permissions')],
                ['users',    t('التحويل للبشر','Human handoff')],
              ].map(([i,l]) => (
                <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: 'var(--bg-muted)', borderRadius: 12 }}>
                  <Icon name={i} size={16} style={{ color: 'var(--indigo)' }} />
                  <span style={{ fontSize: 14, fontWeight: 500 }}>{l}</span>
                </div>
              ))}
            </div>
          </div>

          <CustomizationPanel />
        </div>
      </div>
    </section>
  );
};

const CustomizationPanel = () => {
  const t = useT();
  return (
    <div style={{
      background: '#fff', borderRadius: 24, border: '1px solid var(--border)',
      boxShadow: 'var(--shadow-3)', overflow: 'hidden', position: 'relative',
    }}>
      <div style={{
        padding: '14px 20px', borderBottom: '1px solid var(--border)',
        display: 'flex', alignItems: 'center', gap: 10, background: 'var(--bg-subtle)',
      }}>
        <div style={{ width: 28, height: 28, borderRadius: 8, background: 'linear-gradient(135deg, #5B5BF7, #06B6D4)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="bot" size={16} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 600 }}>{t('سيلاتر · موظف AI','Sellatr · AI teammate')}</div>
          <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>{t('إعدادات الشخصية والصلاحيات','Persona & permissions')}</div>
        </div>
        <Badge variant="success" dot>{t('محفوظ','Saved')}</Badge>
      </div>

      <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 18 }}>
        <Field label={t('اسم الموظف','Agent name')} value={t('ليان','Layan')} />
        <FieldSegment label={t('الشخصية','Persona')} options={[t('ودود','Friendly'), t('احترافي','Professional'), t('مرح','Playful'), t('هادئ','Calm')]} active={1} />
        <FieldSegment label={t('اللهجة','Dialect')} options={[t('فصحى','MSA'), t('سعودي','Saudi'), t('مصري','Egyptian'), t('خليجي','Gulf')]} active={1} />
        <Slider label={t('مستوى الرسمية','Formality')} value={62} />

        <div>
          <Label>{t('صلاحيات الإجراءات','Action permissions')}</Label>
          {[
            [t('إنشاء روابط الدفع','Create payment links'), true],
            [t('تأكيد الحجوزات','Confirm bookings'), true],
            [t('الرد على الشكاوى','Reply to complaints'), false],
            [t('تعديل بيانات العميل','Edit customer data'), false],
          ].map(([l, on]) => (
            <Toggle key={l} label={l} on={on} />
          ))}
        </div>

        <div style={{ padding: '14px 16px', background: 'var(--accent-bg)', border: '1px solid rgba(91,91,247,0.20)', borderRadius: 14, display: 'flex', alignItems: 'center', gap: 12 }}>
          <Icon name="sparkles" size={18} style={{ color: 'var(--indigo)' }} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--indigo-deep)' }}>{t('اختبر التغييرات','Test the changes')}</div>
            <div style={{ fontSize: 11, color: 'var(--fg-muted)' }}>{t('دردش مع AI قبل نشر الإعدادات','Chat with the AI before publishing')}</div>
          </div>
          <Button size="sm" variant="dark">{t('جرّب الآن','Try it')}</Button>
        </div>
      </div>
    </div>
  );
};

const Label = ({ children }) => (
  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg-muted)', letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 8 }}>{children}</div>
);
const Field = ({ label, value }) => (
  <div>
    <Label>{label}</Label>
    <div style={{ padding: '10px 14px', borderRadius: 12, border: '1px solid var(--border-strong)', fontSize: 14, fontWeight: 500, background: '#fff' }}>{value}</div>
  </div>
);
const FieldSegment = ({ label, options, active }) => (
  <div>
    <Label>{label}</Label>
    <div style={{ display: 'flex', gap: 4, padding: 4, background: 'var(--bg-muted)', borderRadius: 12 }}>
      {options.map((o, i) => (
        <span key={o} style={{
          flex: 1, textAlign: 'center', padding: '7px 10px', fontSize: 12.5, fontWeight: 600,
          borderRadius: 9, background: i === active ? '#fff' : 'transparent',
          color: i === active ? 'var(--fg)' : 'var(--fg-muted)',
          boxShadow: i === active ? 'var(--shadow-1)' : 'none',
        }}>{o}</span>
      ))}
    </div>
  </div>
);
const Slider = ({ label, value }) => (
  <div>
    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
      <Label>{label}</Label>
      <span className="num" style={{ fontSize: 12, fontWeight: 700, color: 'var(--indigo)' }}>{value}%</span>
    </div>
    <div style={{ height: 6, background: 'var(--bg-muted)', borderRadius: 99, position: 'relative' }}>
      <div style={{ position: 'absolute', insetInlineStart: 0, top: 0, bottom: 0, width: `${value}%`, background: 'linear-gradient(90deg, #5B5BF7, #06B6D4)', borderRadius: 99 }} />
      <div style={{ position: 'absolute', insetInlineStart: `calc(${value}% - 8px)`, top: -5, width: 16, height: 16, borderRadius: 99, background: '#fff', boxShadow: '0 2px 6px rgba(91,91,247,0.4)', border: '2px solid var(--indigo)' }} />
    </div>
  </div>
);
const Toggle = ({ label, on }) => (
  <div style={{ display: 'flex', alignItems: 'center', padding: '10px 0', borderTop: '1px solid var(--border)' }}>
    <span style={{ fontSize: 13, flex: 1 }}>{label}</span>
    <span style={{ width: 34, height: 20, borderRadius: 99, background: on ? 'var(--indigo)' : 'var(--neutral-300)', position: 'relative', transition: 'background 160ms' }}>
      <span style={{ position: 'absolute', top: 2, [on ? 'insetInlineStart' : 'insetInlineEnd']: 2, width: 16, height: 16, borderRadius: 99, background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,0.2)' }} />
    </span>
  </div>
);

window.OmnichannelSection = OmnichannelSection;
window.AIAgentSection = AIAgentSection;
window.AICustomizationSection = AICustomizationSection;