// Arabic-first + Comparison + Interactive Demo sections (bilingual).
// Note: In English mode, the "Arabic-first" section becomes "MENA-native".

const { useState: useStateAC } = React;

/* ===================== ARABIC-FIRST / MENA-NATIVE ===================== */
const ArabicFirstSection = () => {
  const t = useT();
  const { lang } = useLang();
  const features = [
    { icon: 'globe',      title: t('لهجات عربية','Arabic dialects'),         sub: t('سعودي، مصري، خليجي، شامي، مغربي. الـAI يفهم ويرد بنفس اللهجة.','Saudi, Egyptian, Gulf, Levantine, Maghrebi. The AI listens and replies in the same dialect.') },
    { icon: 'layoutGrid', title: t('RTL أصيل','Native RTL'),                 sub: t('كل صفحة، كل مكوّن. ليس قشرة فوق منصة LTR.','Every page, every component. Not a skin on an LTR platform.') },
    { icon: 'calendar',   title: t('تقويم هجري','Hijri calendar'),           sub: t('دعم كامل للتاريخ الهجري والميلادي بالتوازي.','Full Hijri + Gregorian support, side by side.') },
    { icon: 'money',      title: t('عملات عربية','Regional currencies'),     sub: t('ر.س · د.إ · ج.م · د.ك · د.ب — مع تحويل تلقائي.','SAR · AED · EGP · KWD · BHD — with auto-conversion.') },
    { icon: 'whatsapp',   title: 'WhatsApp-first',                           sub: t('مبنية لثقافة الـ WhatsApp السائدة في الخليج ومصر.','Built for the WhatsApp-first culture across the Gulf and Egypt.'), isChannel: true },
  ];

  return (
    <section style={{ padding: '160px 28px', overflow: 'hidden', position: 'relative' }}>
      <div aria-hidden style={{
        position: 'absolute', insetInlineEnd: '-5%', top: '20%',
        fontFamily: 'var(--font-arabic)', fontSize: 360, fontWeight: 700,
        color: 'transparent', WebkitTextStroke: '1px var(--border)',
        userSelect: 'none', pointerEvents: 'none', lineHeight: 1, opacity: 0.6,
      }}>{lang === 'ar' ? 'ع' : 'Aa'}</div>

      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <Badge variant="ai" dot>{t('عربي أولًا','MENA-native')}</Badge>
            <h2 style={{ fontSize: 'clamp(36px, 4.8vw, 60px)', fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.1, margin: '16px 0 16px', textWrap: 'balance' }}>
              {t(<>مبني للعالم العربي<br/>من اليوم الأول.</>, <>Built for the Arab world<br/>from day one.</>)}
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--fg-muted)', maxWidth: 460, margin: '0 0 32px' }}>
              {t(
                'ليس ترجمة. ليس تكيّفًا. سيلاتر تأسس عربيًا — لغة، تصميمًا، ثقافةً.',
                'Not a translation. Not an adaptation. Sellatr was built Arabic-first — language, design, culture.'
              )}
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {features.map(f => (
                <div key={f.title} style={{
                  display: 'flex', gap: 14, padding: 16,
                  background: '#fff', border: '1px solid var(--border)',
                  borderRadius: 16, boxShadow: 'var(--shadow-1)',
                  transition: 'all 200ms var(--ease-out)',
                }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--border-strong)'; e.currentTarget.style.boxShadow = 'var(--shadow-2)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.boxShadow = 'var(--shadow-1)'; }}
                >
                  <div style={{ width: 40, height: 40, borderRadius: 12, background: f.isChannel ? '#25D366' : 'var(--accent-bg)', color: f.isChannel ? '#fff' : 'var(--indigo)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    {f.isChannel ? <ChannelIcon channel="whatsapp" size={18}/> : <Icon name={f.icon} size={18} />}
                  </div>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 700 }}>{f.title}</div>
                    <div style={{ fontSize: 13, color: 'var(--fg-muted)', marginTop: 3, lineHeight: 1.6 }}>{f.sub}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

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

const useDialectSamples = () => {
  const t = useT();
  return [
    { id: 'saudi',    flag: '🇸🇦', name: t('السعودية','Saudi'),     reply: t('هلا والله! نفس المقاس متوفر، وش رايك أرسل لك الرابط؟','Hala wallah! That size is in stock — want me to send the link?') },
    { id: 'egypt',    flag: '🇪🇬', name: t('مصر','Egyptian'),       reply: t('أهلًا بحضرتك، المقاس ده موجود فعلًا، أبعتلك اللينك؟','Ahlan! That size is in stock — shall I send the link?') },
    { id: 'emirates', flag: '🇦🇪', name: t('الإمارات','Emirati'),    reply: t('السلام عليكم، حياك الله. متوفر هذا المقاس عندنا.','Welcome — yes, we have that size in stock.') },
    { id: 'kuwait',   flag: '🇰🇼', name: t('الكويت','Kuwaiti'),      reply: t('هلا فيك! إي والله المقاس موجود، أبعث لك الرابط؟','Hala! Yes, the size is in stock — want the link?') },
    { id: 'levant',   flag: '🇸🇾', name: t('الشام','Levantine'),     reply: t('مرحبتين فيك، عنا هل المقاس، بدّك بعتلك الرابط؟','Hi there — we have that size, want me to send the link?') },
    { id: 'msa',      flag: '🌐', name: t('الفصحى','MSA'),           reply: t('مرحبًا بك، المقاس متوفر حاليًا. هل تود استلام رابط الطلب؟','Welcome. That size is currently in stock. Would you like the order link?') },
  ];
};

const DialectShowcase = () => {
  const t = useT();
  const DIALECTS = useDialectSamples();
  const [active, setActive] = useStateAC('saudi');
  const a = DIALECTS.find(d => d.id === active) || DIALECTS[0];
  return (
    <div style={{
      background: 'linear-gradient(180deg, #fff, #FAFAFA)',
      border: '1px solid var(--border)', borderRadius: 28,
      boxShadow: 'var(--shadow-2)', padding: 28, position: 'relative', overflow: 'hidden',
    }}>
      <div aria-hidden style={{ position: 'absolute', insetInlineEnd: -60, top: -60, width: 220, height: 220, background: 'radial-gradient(circle, rgba(91,91,247,0.16), transparent)', filter: 'blur(40px)' }} />
      <div style={{ position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
          <div style={{ width: 36, height: 36, borderRadius: 10, background: 'linear-gradient(135deg, #5B5BF7, #06B6D4)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="globe" size={18} />
          </div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg-muted)' }}>{t('محرّر اللهجة','Dialect editor')}</div>
            <div style={{ fontSize: 16, fontWeight: 700 }}>{t('اختر كيف يتكلم الـ AI','Choose how the AI speaks')}</div>
          </div>
        </div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 18 }}>
          {DIALECTS.map(d => (
            <button key={d.id} onClick={() => setActive(d.id)} style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '7px 12px', borderRadius: 99, border: 'none',
              fontSize: 12, fontWeight: 600, cursor: 'pointer',
              background: active === d.id ? 'var(--black)' : 'var(--bg-muted)',
              color: active === d.id ? '#fff' : 'var(--fg-muted)',
              transition: 'all 160ms var(--ease-out)',
            }}>
              <span style={{ fontSize: 14 }}>{d.flag}</span> {d.name}
            </button>
          ))}
        </div>

        <div style={{ background: 'linear-gradient(180deg, #ECE5DD, #DCD7CE)', borderRadius: 18, padding: 18, minHeight: 220, display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
            <div style={{ background: '#fff', padding: '8px 12px', borderRadius: '14px 14px 14px 4px', fontSize: 13.5, maxWidth: '78%', boxShadow: '0 1px 1px rgba(0,0,0,0.06)' }} dir="auto">
              {t('ممكن أعرف المقاسات المتوفرة؟','What sizes are available?')}
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <div key={a.id} style={{
              background: 'linear-gradient(135deg, #DCF8C6, #C5EFB0)',
              padding: '10px 14px', borderRadius: '14px 14px 4px 14px',
              fontSize: 14, fontWeight: 500, maxWidth: '82%', position: 'relative',
              boxShadow: '0 1px 1px rgba(0,0,0,0.06)',
            }} dir="auto">
              {a.reply}
              <span style={{ position: 'absolute', insetInlineEnd: 6, insetBlockEnd: -7, background: 'var(--indigo)', color: '#fff', width: 18, height: 18, borderRadius: 99, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', border: '2px solid #DCF8C6' }}>
                <Icon name="sparkles" size={10} />
              </span>
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 4 }}>
            <span style={{ fontSize: 11, color: 'var(--fg-muted)' }}>AI · {t(`يكتب بلهجة ${a.name}`, `typing in ${a.name}`)}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

/* ===================== COMPARISON ===================== */
const ComparisonSection = () => {
  const t = useT();
  const rows = [
    [t('تواصل عبر كل القنوات','Connect every channel'),                  true, false, true,  false],
    [t('موظف AI ينفذ إجراءات حقيقية','AI agent that takes real actions'), true, false, true,  false],
    [t('CRM مدمج بالكامل','Fully integrated CRM'),                       true, true,  false, false],
    [t('خصص بلهجة العميل','Reply in the customer\'s dialect'),          true, false, false, false],
    [t('دفع داخل المحادثة','Payments inside the conversation'),         true, false, false, false],
    [t('Workflow Automation مرئي','Visual workflow automation'),        true, true,  false, false],
    [t('متجر إضافات (وحدات)','Module marketplace'),                     true, false, false, false],
    [t('تحليلات ROI لكل قناة','ROI analytics per channel'),             true, true,  false, false],
    [t('عربي أولًا · RTL أصيل','Arabic-first · native RTL'),            true, false, false, false],
    [t('لا يحتاج فريق تقني للإعداد','No technical team to set up'),     true, false, true,  true],
  ];
  const cols = [
    { name: 'Sellatr',                                       highlighted: true, sub: 'AI Business OS' },
    { name: t('CRM التقليدي','Traditional CRM'),             sub: 'Salesforce · Zoho' },
    { name: t('أدوات Chatbot','Chatbot tools'),              sub: t('حلول الردود فقط','Reply-only tools') },
    { name: 'Helpdesk',                                       sub: 'Zendesk · Freshdesk' },
  ];
  return (
    <section style={{ padding: '160px 28px', background: 'var(--bg-subtle)', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ textAlign: 'center' }}>
          <Badge variant="ai" dot>{t('المقارنة','Comparison')}</Badge>
          <h2 style={{ fontSize: 'clamp(36px, 5vw, 60px)', fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.12, margin: '16px 0 14px', textWrap: 'balance' }}>
            {t('لماذا سيلاتر يتفوّق؟','Why Sellatr wins')}
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--fg-muted)', maxWidth: 580, margin: '0 auto' }}>
            {t('مقارنة صادقة مع الأدوات الشائعة. القرار لك.','An honest comparison with popular tools. You decide.')}
          </p>
        </div>

        <div style={{
          marginTop: 56, background: '#fff', border: '1px solid var(--border)',
          borderRadius: 24, overflow: 'hidden', boxShadow: 'var(--shadow-2)',
        }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr repeat(4, 1fr)', background: 'var(--bg-subtle)', borderBottom: '1px solid var(--border)' }}>
            <div style={{ padding: '20px 18px', fontSize: 11, fontWeight: 700, color: 'var(--fg-muted)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{t('الميزة','Feature')}</div>
            {cols.map(c => (
              <div key={c.name} style={{
                padding: '20px 16px', textAlign: 'center',
                background: c.highlighted ? 'linear-gradient(180deg, rgba(91,91,247,0.08), transparent)' : 'transparent',
                borderInlineStart: '1px solid var(--border)', position: 'relative',
              }}>
                {c.highlighted && <span style={{ position: 'absolute', top: 8, insetInlineEnd: 8, fontSize: 9, fontWeight: 700, padding: '2px 7px', borderRadius: 99, background: 'linear-gradient(135deg, #5B5BF7, #06B6D4)', color: '#fff', letterSpacing: '0.04em' }}>{t('الأفضل','Best')}</span>}
                <div style={{ fontSize: 15, fontWeight: 700, color: c.highlighted ? 'var(--indigo)' : 'var(--fg)' }}>{c.name}</div>
                <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 2 }}>{c.sub}</div>
              </div>
            ))}
          </div>
          {rows.map((r, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.5fr repeat(4, 1fr)', borderBottom: i === rows.length - 1 ? 'none' : '1px solid var(--border)' }}>
              <div style={{ padding: '14px 18px', fontSize: 14, fontWeight: 500 }}>{r[0]}</div>
              {[1,2,3,4].map(idx => (
                <div key={idx} style={{
                  padding: '14px 16px', display: 'flex', justifyContent: 'center',
                  background: idx === 1 ? 'rgba(91,91,247,0.03)' : 'transparent',
                  borderInlineStart: '1px solid var(--border)',
                }}>
                  {r[idx] ? (
                    <span style={{ width: 24, height: 24, borderRadius: 99, background: idx === 1 ? 'linear-gradient(135deg, #5B5BF7, #06B6D4)' : 'rgba(16,185,129,0.12)', color: idx === 1 ? '#fff' : '#047857', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <Icon name="check" size={14} strokeWidth={3} />
                    </span>
                  ) : (
                    <span style={{ width: 24, height: 24, borderRadius: 99, background: 'var(--bg-muted)', color: 'var(--fg-subtle)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <Icon name="minus" size={14} />
                    </span>
                  )}
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ===================== INTERACTIVE DEMO ===================== */
const useScenarios = () => {
  const t = useT();
  return [
    {
      id: 'clinic', name: t('حجز عيادة','Clinic booking'), icon: 'stethoscope', color: '#5B5BF7',
      customer: t('فاطمة','Fatima'), ch: 'whatsapp',
      script: [
        { from: 'them',   text: t('السلام عليكم، أبغى أحجز موعد عند د. هند','Hi, I want to book with Dr. Hind') },
        { from: 'us',     text: t('وعليكم السلام فاطمة. أهلًا بك. د. هند متاحة الإثنين ٢ أو الثلاثاء ١٠ص. أيهما يناسبك؟','Hi Fatima — Dr. Hind is open Mon 2 or Tue 10am. Which works?'), ai: true },
        { from: 'them',   text: t('الثلاثاء ١٠ص','Tuesday 10am') },
        { from: 'action', kind: 'booking', text: t('حُجز موعد · د. هند · ٢٣ مايو ١٠:٠٠ص','Appointment booked · Dr. Hind · May 23, 10:00 AM') },
        { from: 'us',     text: t('تم الحجز بنجاح. سأرسل لك تذكيرًا قبل ٢٤ ساعة. تحتاج أي شيء آخر؟',"Booked. I'll send a reminder 24h before. Anything else?"), ai: true },
        { from: 'action', kind: 'crm', text: t("CRM · حدّث ملف فاطمة · أضاف حساسية البنسلين","CRM · updated Fatima's file · added penicillin allergy") },
      ],
    },
    {
      id: 'restaurant', name: t('حجز مطعم','Restaurant reservation'), icon: 'utensils', color: '#E4405F',
      customer: t('أحمد','Ahmed'), ch: 'instagram',
      script: [
        { from: 'them',   text: t('حابب أحجز طاولة ٤ أشخاص الخميس ٨م','Want to book a table for 4 on Thursday 8pm') },
        { from: 'us',     text: t('مرحبًا أحمد. متاحة طاولة بجانب النافذة الخميس ٨م. أحجزها؟','Hi Ahmed — a window table at Thu 8pm is open. Book it?'), ai: true },
        { from: 'them',   text: t('تمام، احجزها','Yes, please') },
        { from: 'action', kind: 'booking', text: t('حُجزت الطاولة · ٤ أشخاص · الخميس ٨:٠٠م','Table reserved · 4 guests · Thu 8:00 PM') },
        { from: 'us',     text: t('تم! القائمة المرفقة، تحب تطلب من الآن؟',"Done. Here's the menu — want to pre-order?"), ai: true },
        { from: 'action', kind: 'payment', text: t('أُرسل عربون · ٥٠ ر.س','Deposit link sent · SAR 50') },
      ],
    },
    {
      id: 'realestate', name: t('استفسار عقاري','Real estate inquiry'), icon: 'home', color: '#06B6D4',
      customer: t('سلطان','Sultan'), ch: 'web',
      script: [
        { from: 'them',   text: t('أبحث عن شقة ٣ غرف في الياسمين، الميزانية ٧٠٠ ألف','Looking for a 3BR in Al Yasmin, budget 700k') },
        { from: 'us',     text: t('أهلًا سلطان. لدي ٤ شقق تطابق طلبك. أرسل لك القائمة المختصرة؟','Hi Sultan — I have 4 listings matching. Send the shortlist?'), ai: true },
        { from: 'action', kind: 'crm',     text: t('CRM · إنشاء عميل محتمل · أولوية عالية','CRM · new lead created · high priority') },
        { from: 'them',   text: t('أكيد، وأبغى أعاين الأقرب','Yes, and I want to view the nearest one') },
        { from: 'action', kind: 'booking', text: t('حُجزت معاينة · السبت ٤م · م. خالد','Viewing booked · Saturday 4pm · with Khalid') },
        { from: 'us',     text: t('تم تأكيد المعاينة مع م. خالد السبت ٤م. سأرسل لك العنوان قبل الموعد.',"Viewing confirmed with Khalid, Sat 4pm. I'll send the address before."), ai: true },
      ],
    },
  ];
};

const InteractiveDemoSection = () => {
  const t = useT();
  const SCENARIOS = useScenarios();
  const [active, setActive] = useStateAC('clinic');
  const [step, setStep] = useStateAC(0);
  const scenario = SCENARIOS.find(s => s.id === active);
  const visibleScript = scenario.script.slice(0, step + 1);

  return (
    <section style={{ padding: '160px 28px', overflow: 'hidden', position: 'relative' }}>
      <div aria-hidden style={{ position: 'absolute', insetInlineStart: '20%', top: '10%', width: 500, height: 500, 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('تجربة مباشرة','Live demo')}</Badge>
          <h2 style={{ fontSize: 'clamp(36px, 5vw, 60px)', fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.12, margin: '16px 0 14px', textWrap: 'balance' }}>
            {t('شاهد سيلاتر يعمل','See Sellatr in action')}
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--fg-muted)', maxWidth: 580, margin: '0 auto' }}>
            {t('ثلاثة سيناريوهات حقيقية من قطاعات مختلفة. اختر، شاهد، جرّب.','Three real scenarios across sectors. Pick one, step through, try it.')}
          </p>
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', gap: 10, marginTop: 40, flexWrap: 'wrap' }}>
          {SCENARIOS.map(s => (
            <button key={s.id} onClick={() => { setActive(s.id); setStep(0); }} style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '12px 18px', borderRadius: 14,
              background: active === s.id ? '#fff' : 'transparent',
              border: active === s.id ? `2px solid ${s.color}` : '2px solid var(--border)',
              boxShadow: active === s.id ? `0 6px 22px ${s.color}30` : 'none',
              cursor: 'pointer',
              transition: 'all 200ms var(--ease-out)',
            }}>
              <span style={{ width: 28, height: 28, borderRadius: 8, background: s.color, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={s.icon} size={14} />
              </span>
              <span style={{ fontSize: 14, fontWeight: 600 }}>{s.name}</span>
            </button>
          ))}
        </div>

        <div style={{ marginTop: 32, background: '#fff', border: '1px solid var(--border)', borderRadius: 28, boxShadow: 'var(--shadow-2)', overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr' }}>
            <div style={{ padding: '40px 30px', background: `linear-gradient(180deg, ${scenario.color}08, var(--bg-subtle))`, borderInlineEnd: '1px solid var(--border)', display: 'flex', justifyContent: 'center' }}>
              <PhonePreview scenario={scenario} visibleScript={visibleScript.filter(m => m.from !== 'action')} />
            </div>

            <div style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div>
                <div style={{ fontSize: 12, fontWeight: 700, color: scenario.color, letterSpacing: '0.05em', textTransform: 'uppercase' }}>{t('السيناريو الحي','Live scenario')}</div>
                <div style={{ fontSize: 22, fontWeight: 700, marginTop: 4 }}>{scenario.name}</div>
                <div style={{ fontSize: 13, color: 'var(--fg-muted)', marginTop: 2 }}>{t('عميل','Customer')} · {scenario.customer} · {t('عبر','via')} {t({ whatsapp:'واتساب', instagram:'إنستجرام', web:'الموقع' }[scenario.ch], { whatsapp:'WhatsApp', instagram:'Instagram', web:'web chat' }[scenario.ch])}</div>
              </div>

              <div style={{ flex: 1, minHeight: 280, padding: 16, background: 'var(--bg-subtle)', borderRadius: 16, border: '1px solid var(--border)', display: 'flex', flexDirection: 'column', gap: 8 }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--fg-muted)', letterSpacing: '0.05em', textTransform: 'uppercase' }}>{t('سجل إجراءات AI','AI action log')}</div>
                {visibleScript.filter(m => m.from === 'action').length === 0 && (
                  <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: 'var(--fg-subtle)' }}>{t('اضغط "التالي" لمشاهدة الإجراءات…','Press "Next" to see actions…')}</div>
                )}
                {visibleScript.filter(m => m.from === 'action').map((m, i) => (
                  <ActionLogItem key={i} kind={m.kind} text={m.text} color={scenario.color} />
                ))}
              </div>

              <div style={{ display: 'flex', gap: 10 }}>
                <Button variant="secondary" size="md" onClick={() => setStep(0)}>{t('إعادة','Restart')}</Button>
                <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 10 }}>
                  <span style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{t('الخطوة','Step')} <span className="num">{step + 1}</span> / <span className="num">{scenario.script.length}</span></span>
                  <div style={{ flex: 1, height: 5, background: 'var(--bg-muted)', borderRadius: 99, overflow: 'hidden' }}>
                    <div style={{ height: '100%', width: `${((step + 1) / scenario.script.length) * 100}%`, background: scenario.color, transition: 'width 220ms var(--ease-out)' }} />
                  </div>
                </div>
                <NextButton onClick={() => setStep(s => Math.min(s + 1, scenario.script.length - 1))} disabled={step === scenario.script.length - 1} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const NextButton = ({ onClick, disabled }) => {
  const t = useT();
  const { lang } = useLang();
  return <Button variant="primary" size="md" iconRight={lang === 'ar' ? 'arrowLeft' : 'arrowRight'} onClick={onClick} disabled={disabled}>{t('التالي','Next')}</Button>;
};

const PhonePreview = ({ scenario, visibleScript }) => {
  const t = useT();
  return (
    <div style={{ width: 290, background: '#0B0B0E', borderRadius: 34, padding: 8, boxShadow: '0 30px 60px rgba(0,0,0,0.20), 0 0 0 1px rgba(0,0,0,0.05)' }}>
      <div style={{ background: '#fff', borderRadius: 26, padding: 12, display: 'flex', flexDirection: 'column', minHeight: 480 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingBottom: 12, borderBottom: '1px solid var(--border)' }}>
          <Avatar initials={t('ل','S')} color={scenario.color} size={34} status="online" />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 700 }}>{t('سيلاتر','Sellatr')} · {scenario.name}</div>
            <div style={{ fontSize: 10, color: 'var(--fg-muted)' }}>{t('متصل عبر','online via')} {t({ whatsapp:'واتساب', instagram:'إنستجرام', web:'الموقع' }[scenario.ch], { whatsapp:'WhatsApp', instagram:'Instagram', web:'web' }[scenario.ch])}</div>
          </div>
          <span style={{ color: CHANNEL_META[scenario.ch].color }}>
            <ChannelIcon channel={scenario.ch} size={16} />
          </span>
        </div>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8, background: scenario.ch === 'whatsapp' ? '#ECE5DD' : '#fff', margin: '12px -12px -12px', padding: '14px 12px', borderBottomLeftRadius: 22, borderBottomRightRadius: 22 }}>
          {visibleScript.map((m, i) => (
            <div key={i} style={{ display: 'flex', justifyContent: m.from === 'us' ? 'flex-end' : 'flex-start' }}>
              <div dir="auto" style={{
                maxWidth: '78%', padding: '8px 12px',
                background: m.from === 'us' ? 'linear-gradient(135deg, #DCF8C6, #C5EFB0)' : '#fff',
                borderRadius: m.from === 'us' ? '14px 14px 4px 14px' : '14px 14px 14px 4px',
                fontSize: 12.5, lineHeight: 1.55, position: 'relative',
                boxShadow: '0 1px 1px rgba(0,0,0,0.06)',
              }}>
                {m.text}
                {m.ai && (
                  <span style={{ position: 'absolute', insetInlineEnd: 5, insetBlockEnd: -7, background: scenario.color, color: '#fff', width: 16, height: 16, borderRadius: 99, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', border: '2px solid #DCF8C6' }}>
                    <Icon name="sparkles" size={8} />
                  </span>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const ActionLogItem = ({ kind, text, color }) => {
  const t = useT();
  const icons = { booking: 'calendar', crm: 'users', payment: 'creditCard' };
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '10px 12px', background: '#fff', border: `1px solid ${color}30`,
      borderRadius: 12, animation: 'fadeIn 400ms var(--ease-out)',
    }}>
      <div style={{ width: 30, height: 30, borderRadius: 9, background: `${color}18`, color: color, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Icon name={icons[kind]} size={14} />
      </div>
      <div style={{ flex: 1, fontSize: 12, fontWeight: 500 }}>{text}</div>
      <span style={{ color: '#10B981', fontSize: 11, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
        <Icon name="check" size={12} strokeWidth={3} /> {t('تم','Done')}
      </span>
    </div>
  );
};

window.ArabicFirstSection = ArabicFirstSection;
window.ComparisonSection = ComparisonSection;
window.InteractiveDemoSection = InteractiveDemoSection;