// Onboarding + Final CTA + Footer (bilingual).

const OnboardingSection = () => {
  const t = useT();
  const { lang } = useLang();
  const steps = [
    { n: lang === 'ar' ? '٠١' : '01', icon: 'briefcase', title: t('اختر قطاعك','Pick your sector'),     sub: t('عيادة، مطعم، عقارات، تجزئة، استشارات…','Clinic, restaurant, real estate, retail, consulting…'),    time: t('٣٠ث','30s') },
    { n: lang === 'ar' ? '٠٢' : '02', icon: 'globe',     title: t('اربط القنوات','Connect channels'),    sub: t('واتساب، إنستجرام، البريد، الموقع، APIs','WhatsApp, Instagram, email, your site, APIs'),         time: t('٤د','4m') },
    { n: lang === 'ar' ? '٠٣' : '03', icon: 'sparkles',  title: t('خصّص AI','Tune the AI'),              sub: t('الشخصية، اللهجة، الصلاحيات، Workflow','Persona, dialect, permissions, workflow'),               time: t('٦د','6m') },
    { n: lang === 'ar' ? '٠٤' : '04', icon: 'users',     title: t('أضف الفريق','Invite the team'),       sub: t('وزّع الأدوار وأنشئ مسارات التحويل','Assign roles, configure handoff paths'),                  time: t('٤د','4m') },
  ];
  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>{t('الإعداد','Onboarding')}</Badge>
          <h2 style={{ fontSize: 'clamp(36px, 5vw, 60px)', fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.12, margin: '16px 0 14px', textWrap: 'balance' }}>
            {t(<>جاهز خلال <span style={{ background: 'linear-gradient(135deg, #5B5BF7, #06B6D4)', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }} className="num">١٥</span> دقيقة</>, <>Up and running in <span style={{ background: 'linear-gradient(135deg, #5B5BF7, #06B6D4)', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }} className="num">15</span> minutes</>)}
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--fg-muted)', maxWidth: 580, margin: '0 auto' }}>
            {t('بدون اجتماعات. بدون فريق تقني. بدون انتظار. أربع خطوات وأنت تعمل.','No meetings. No technical team. No waiting. Four steps and you\'re live.')}
          </p>
        </div>

        <div style={{ marginTop: 60, position: 'relative' }}>
          <div style={{ position: 'absolute', top: 60, insetInlineStart: '8%', insetInlineEnd: '8%', height: 2, background: 'linear-gradient(90deg, transparent, var(--border-strong), transparent)', zIndex: 0 }} />

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 18, position: 'relative' }}>
            {steps.map((s, i) => (
              <div key={s.n} className="hover-lift" style={{
                background: '#fff', border: '1px solid var(--border)', borderRadius: 22,
                padding: 24, boxShadow: 'var(--shadow-1)', position: 'relative',
              }}>
                <div style={{
                  position: 'absolute', top: -20, insetInlineEnd: 24,
                  width: 44, height: 44, borderRadius: '50%',
                  background: 'linear-gradient(135deg, #0B0B0E, #27272A)', color: '#fff',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 14, fontWeight: 700,
                  boxShadow: '0 8px 20px rgba(0,0,0,0.20)', border: '3px solid var(--bg-subtle)',
                }} className="num">{s.n}</div>

                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--accent-bg)', color: 'var(--indigo)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                  <Icon name={s.icon} size={22} />
                </div>
                <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 6 }}>{s.title}</div>
                <div style={{ fontSize: 13, color: 'var(--fg-muted)', lineHeight: 1.6, marginBottom: 14 }}>{s.sub}</div>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 10px', borderRadius: 99, background: 'rgba(16,185,129,0.10)', color: '#047857', fontSize: 11, fontWeight: 700 }}>
                  <Icon name="clock" size={10} /> {s.time}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{
          marginTop: 64, padding: 24, background: '#fff',
          border: '1px solid var(--border)', borderRadius: 22, boxShadow: 'var(--shadow-1)',
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 24,
        }}>
          {[
            { icon: 'shield',      l: 'GDPR + PDPL',                       s: t('تشفير شامل','End-to-end encryption') },
            { icon: 'globe',       l: t('مراكز بيانات','Data centers'),     s: t('الرياض · دبي','Riyadh · Dubai') },
            { icon: 'headphones',  l: t('دعم عربي','Arabic support'),       s: t('٢٤/٧ مباشر','24/7 live') },
            { icon: 'checkCircle', l: t('بدون كود','No code'),               s: t('إعداد بنقرات','Click-only setup') },
          ].map(tr => (
            <div key={tr.l} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <Icon name={tr.icon} size={22} style={{ color: 'var(--indigo)' }} />
              <div>
                <div style={{ fontSize: 14, fontWeight: 700 }}>{tr.l}</div>
                <div style={{ fontSize: 12, color: 'var(--fg-muted)' }}>{tr.s}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ===================== FINAL CTA ===================== */
const FinalCTASection = () => {
  const t = useT();
  const { lang } = useLang();
  return (
    <section style={{ padding: '160px 28px 120px', position: 'relative', overflow: 'hidden', background: 'var(--black)', color: '#fff' }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: `radial-gradient(ellipse 60% 50% at 50% 30%, rgba(91,91,247,0.35), transparent 60%),
                          radial-gradient(ellipse 50% 50% at 20% 80%, rgba(6,182,212,0.25), transparent 60%),
                          radial-gradient(ellipse 50% 50% at 80% 70%, rgba(37,211,102,0.15), 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 70% 60% at center, black, transparent)',
        WebkitMaskImage: 'radial-gradient(ellipse 70% 60% at center, black, transparent)',
      }} />

      <div style={{ position: 'relative', maxWidth: 1000, margin: '0 auto', textAlign: 'center' }}>
        <Badge variant="glass" dot>{t('ابدأ اليوم','Start today')}</Badge>
        <h2 style={{
          fontSize: 'clamp(42px, 6.4vw, 88px)',
          fontWeight: 700, letterSpacing: '-0.035em', lineHeight: 1.02,
          margin: '24px 0 18px', textWrap: 'balance',
        }}>
          {t('كل محادثة يمكن أن تصبح:','Every conversation can become:')}
        </h2>
        <div style={{
          fontSize: 'clamp(28px, 4vw, 52px)',
          fontWeight: 600, lineHeight: 1.3, letterSpacing: '-0.02em',
          color: 'rgba(255,255,255,0.85)', marginBottom: 18,
        }}>
          <RotatingPhrase phrases={lang === 'ar'
            ? ['عميلًا', 'حجزًا', 'عملية بيع', 'نموًا جديدًا']
            : ['a customer', 'a booking', 'a sale', 'new growth']
          } />
        </div>

        <p style={{ fontSize: 18, lineHeight: 1.7, color: 'rgba(255,255,255,0.6)', maxWidth: 580, margin: '32px auto 36px' }}>
          {t('المنصة التي ينتظرها أعمالك. اربط أول قناة خلال دقائق وشاهد الفرق.','The platform your business has been waiting for. Connect your first channel in minutes and watch what happens.')}
        </p>

        <div style={{ display: 'inline-flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
          <Button variant="primary" size="lg" iconRight={lang === 'ar' ? 'arrowLeft' : 'arrowRight'}>{t('ابدأ مجانًا','Start free')}</Button>
          <Button variant="outline" size="lg" icon="chat">{t('تحدث معنا','Talk to us')}</Button>
        </div>

        <div style={{ marginTop: 24, display: 'inline-flex', alignItems: 'center', gap: 16, padding: '8px 18px', borderRadius: 99, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.10)', fontSize: 12 }}>
          <span style={{ color: 'rgba(255,255,255,0.7)' }}>{t('تجربة ١٤ يومًا','14-day trial')}</span>
          <span style={{ width: 3, height: 3, borderRadius: 99, background: 'rgba(255,255,255,0.3)' }} />
          <span style={{ color: 'rgba(255,255,255,0.7)' }}>{t('بدون بطاقة','No card')}</span>
          <span style={{ width: 3, height: 3, borderRadius: 99, background: 'rgba(255,255,255,0.3)' }} />
          <span style={{ color: 'rgba(255,255,255,0.7)' }}>{t('دعم عربي ٢٤/٧','24/7 Arabic support')}</span>
        </div>
      </div>
    </section>
  );
};

const { useEffect: useEffectRot, useState: useStateRot } = React;
const RotatingPhrase = ({ phrases }) => {
  const [i, setI] = useStateRot(0);
  useEffectRot(() => {
    const id = setInterval(() => setI(x => (x + 1) % phrases.length), 1800);
    return () => clearInterval(id);
  }, [phrases.length]);
  return (
    <span style={{ display: 'inline-block', minHeight: '1.3em' }}>
      <span key={`${phrases[0]}-${i}`} style={{
        display: 'inline-block',
        background: 'linear-gradient(135deg, #FFFFFF 0%, #8484FF 40%, #38D4ED 70%, #25D366 100%)',
        WebkitBackgroundClip: 'text', backgroundClip: 'text',
        WebkitTextFillColor: 'transparent', color: 'transparent',
        animation: 'fadeUp 600ms var(--ease-out)',
        fontWeight: 700,
      }}>{phrases[i]}</span>
      <style>{`@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }`}</style>
    </span>
  );
};

/* ===================== FOOTER ===================== */
const FooterSection = () => {
  const t = useT();
  const cols = [
    { h: t('المنصة','Platform'), items: ['Inbox', t('وكيل AI','AI agent'), 'CRM', 'Automation', 'Analytics'] },
    { h: t('القطاعات','Industries'), items: [t('العيادات','Clinics'), t('المطاعم','Restaurants'), t('العقارات','Real estate'), t('القانون','Legal'), t('التجزئة','Retail')] },
    { h: t('الشركة','Company'), items: [t('من نحن','About'), t('العملاء','Customers'), t('الوظائف','Careers'), t('المدوّنة','Blog'), t('تواصل معنا','Contact')] },
    { h: t('المصادر','Resources'), items: [t('الوثائق','Docs'), 'API', t('مركز المساعدة','Help center'), t('الحالة','Status'), t('سجل التغييرات','Changelog')] },
  ];
  return (
    <footer style={{ background: '#0B0B0E', color: '#fff', padding: '80px 28px 40px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr repeat(4, 1fr)', gap: 32, marginBottom: 56 }}>
          <div>
            <Logo variant="light" height={26} />
            <p style={{ fontSize: 14, lineHeight: 1.7, color: 'rgba(255,255,255,0.6)', marginTop: 18, maxWidth: 280 }}>
              {t('نظام التشغيل الذكي للأعمال العربية. منصة واحدة لتشغيل عملك بالكامل.','The intelligent OS for Arab businesses. One platform to run your whole operation.')}
            </p>
            <div style={{ marginTop: 22, display: 'flex', gap: 10 }}>
              {['whatsapp', 'instagram', 'email', 'web'].map(c => (
                <a key={c} href="#" style={{
                  width: 36, height: 36, borderRadius: 10,
                  background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.08)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: CHANNEL_META[c].color,
                }}>
                  <ChannelIcon channel={c} size={16} />
                </a>
              ))}
            </div>
          </div>
          {cols.map(col => (
            <div key={col.h}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 16 }}>{col.h}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {col.items.map(i => (
                  <a key={i} href="#" style={{ fontSize: 14, color: 'rgba(255,255,255,0.85)', transition: 'color 120ms' }}
                    onMouseEnter={e => e.currentTarget.style.color = '#fff'}
                    onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.85)'}
                  >{i}</a>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div style={{ padding: '24px 0', borderTop: '1px solid rgba(255,255,255,0.08)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>
            {t('© ٢٠٢٦ سيلاتر · صُنع بـ ❤️ في الرياض · القاهرة · دبي','© 2026 Sellatr · Made with ❤️ in Riyadh · Cairo · Dubai')}
          </div>
          <div style={{ display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', gap: 6 }}>
              {['🇸🇦', '🇦🇪', '🇪🇬', '🇰🇼', '🇧🇭', '🇶🇦'].map(f => <span key={f} style={{ fontSize: 16 }}>{f}</span>)}
            </div>
            {[t('الخصوصية','Privacy'), t('الشروط','Terms'), t('ملفات الارتباط','Cookies')].map(i => (
              <a key={i} href="#" style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>{i}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
};

window.OnboardingSection = OnboardingSection;
window.FinalCTASection = FinalCTASection;
window.FooterSection = FooterSection;