// =============================================================
// Homepage — body sections (Arabic mirror)
// =============================================================

// ----------------- 1. Pillars -----------------
const HomePillars = () => {
  const pillars = [
    { num: '01', title: 'وظّف',  amp: '& انضمام',     desc: 'EOR في أكثر من 150 دولة، متعاقدون، وكيانك الخاص — مسار واحد، ممتثل من اليوم الأول.', tags: ['EOR', 'متعاقدون', 'كيان محلي', 'الانضمام'] },
    { num: '02', title: 'ادفع',  amp: '& طابِق',      desc: 'رواتب متعددة العملات، خصومات نظامية، وضرائب — تُدفع في موعدها كل دورة.',           tags: ['الرواتب', 'متعدد العملات', 'ضرائب', 'كشوف'] },
    { num: '03', title: 'أدِر',  amp: '& ادعم',       desc: 'إجازات، تتبع وقت، أصول، مصاريف، مستندات، أداء، ومكتب دعم — كله في مكان واحد.',     tags: ['الإجازات', 'الأصول', 'المصاريف', 'الدعم'] },
    { num: '04', title: 'اطمئن', amp: '& نَم بهدوء',  desc: 'الوكلاء يراقبون تغييرات قانون العمل، انتهاء العقود، وانحراف السياسات — قبل أن تصبح مشكلة.', tags: ['سجل تدقيق', 'انحراف السياسات', 'التجديدات', 'تنبيهات'] },
  ];
  return (
    <section style={{ background: '#FAFAF7', padding: 'clamp(72px, 10vw, 120px) 0' }}>
      <style>{`
        .rmh-pillars-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:56px; gap:40px; flex-wrap:wrap; }
        .rmh-pillars-h2 { font-size: clamp(34px, 5vw, 64px); line-height: 1.2; letter-spacing: -0.02em; margin:0; font-weight:500; }
        .rmh-pillars-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; }
        @media (max-width: 900px) { .rmh-pillars-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 560px) { .rmh-pillars-grid { grid-template-columns: 1fr; } }
      `}</style>
      <div style={{ maxWidth: 'var(--max-w-wide)', margin: '0 auto', padding: '0 clamp(16px, 4vw, 40px)' }}>
        <div className="rmh-pillars-head">
          <div style={{ maxWidth: 720 }}>
            <Eyebrow>ماذا يفعل REMOTE&</Eyebrow>
            <h2 className="rmh-pillars-h2">أربعة محاور. <Amp /> نظام تشغيل واحد.</h2>
          </div>
          <p style={{ fontSize: 17, color: '#4A4D45', maxWidth: 380, lineHeight: 1.7, margin: 0 }}>
            كل محور منتج كامل. مجتمعةً يحلّون محل 6+ أدوات — والوكلاء يربطونها معاً حتى لا يفلت شيء.
          </p>
        </div>
        <div className="rmh-pillars-grid">
          {pillars.map((p) => (
            <article key={p.num} style={{
              background: '#FFFFFF',
              border: '1px solid #E3E8DD',
              borderRadius: 20, padding: 28,
              display: 'flex', flexDirection: 'column', minHeight: 320,
              position: 'relative', overflow: 'hidden',
              boxShadow: '0 1px 0 rgba(46,81,25,0.04)',
            }}>
              <span style={{
                position: 'absolute', left: -10, top: -30,
                fontFamily: 'var(--font-serif)', fontStyle: 'italic',
                fontSize: 220, color: 'rgba(46,81,25,0.04)', lineHeight: 1, pointerEvents: 'none',
              }}>{p.num}</span>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#2E5119', position: 'relative', zIndex: 1, letterSpacing: '0.06em' }}>{p.num}</div>
              <h3 style={{ fontSize: 38, letterSpacing: '-0.02em', margin: '24px 0 10px', fontWeight: 500, lineHeight: 1.2, position: 'relative', zIndex: 1 }}>
                {p.title}<br/>
                <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: '#5A9233', fontWeight: 400, fontSize: 24, letterSpacing: '-0.01em' }}>{p.amp}</span>
              </h3>
              <p style={{ fontSize: 14, color: '#4A4D45', lineHeight: 1.7, margin: '8px 0 16px', position: 'relative', zIndex: 1 }}>{p.desc}</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, position: 'relative', zIndex: 1, marginTop: 'auto' }}>
                {p.tags.map(t => (
                  <span key={t} style={{ fontSize: 10.5, fontFamily: 'var(--font-mono)', padding: '4px 8px', background: '#F6F7F2', border: '1px solid #E3E8DD', borderRadius: 6, color: '#4A4D45' }}>{t}</span>
                ))}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// ----------------- 2. Agents row -----------------
const HomeAgents = () => {
  const agents = [
    { name: 'Payla', role: 'الرواتب',  desc: 'يصيغ كشوف الرواتب، يطابق السجلات، ويرصد الاستثناءات قبل الإقفال.',           mood: '#2E5119', emoji: '💸', stat: '12 كيان',  statL: 'في هذه الدورة' },
    { name: 'Hira',  role: 'التوظيف',  desc: 'يصيغ عروض عمل ممتثلة عبر الدول ويبدأ انضمام EOR.',                            mood: '#427025', emoji: '🤝', stat: '38 عرضاً', statL: 'هذا الربع' },
    { name: 'Remi',  role: 'المستندات', desc: 'يولّد العقود والشهادات والخطابات من بياناتك الأحدث — جاهزة للتوقيع.',         mood: '#2E8C7D', emoji: '📜', stat: '1,240',   statL: 'مستند منذ بداية العام' },
    { name: 'Hala',  role: 'الدعم',     desc: 'يجيب على أسئلة الموظفين ويصعّد ما يحتاج تدخّلاً بشرياً فقط.',                 mood: '#15554B', emoji: '💬', stat: '94%',     statL: 'خدمة ذاتية' },
    { name: 'Qadi',  role: 'المراقب',   desc: 'يراقب تغييرات قانون العمل، انتهاء العقود، وانحراف السياسات — وينبهك مبكراً.', mood: '#5A9233', emoji: '🛡️', stat: '0',       statL: 'مفاجآت' },
  ];
  return (
    <section style={{ background: '#F26B4A', color: '#FFF4DD', padding: 'clamp(72px, 10vw, 120px) 0', position: 'relative', overflow: 'hidden' }}>
      <style>{`
        .rmh-agents-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:56px; gap:40px; flex-wrap:wrap; }
        .rmh-agents-h2 { font-size: clamp(34px, 5vw, 64px); line-height:1.2; letter-spacing:-0.02em; margin:0; font-weight:500; color:#FFF4DD; }
        .rmh-agents-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap:14px; }
        @media (max-width: 1100px) { .rmh-agents-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 720px) { .rmh-agents-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 460px) { .rmh-agents-grid { grid-template-columns: 1fr; } }
      `}</style>
      <span style={{ position: 'absolute', right: -100, bottom: -240, fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 820, color: 'rgba(255,255,255,0.12)', lineHeight: 1, pointerEvents: 'none' }}>&amp;</span>
      <svg viewBox="0 0 400 400" style={{ position: 'absolute', left: -80, top: -80, width: 460, height: 460, opacity: 0.55, pointerEvents: 'none' }}>
        <path d="M 280 60 C 360 100 380 220 300 320 C 220 380 110 340 100 240 C 90 140 200 20 280 60 Z" fill="#FFB4A0" />
        <path d="M 320 140 C 360 180 350 260 290 290 C 240 310 200 270 220 220 C 240 170 290 110 320 140 Z" fill="#FFD86B" />
      </svg>
      <div style={{ maxWidth: 'var(--max-w-wide)', margin: '0 auto', padding: '0 clamp(16px, 4vw, 40px)', position: 'relative' }}>
        <div className="rmh-agents-head">
          <div style={{ maxWidth: 720 }}>
            <Eyebrow color="#FFF4DD">طبقة الوكلاء</Eyebrow>
            <h2 className="rmh-agents-h2">خمسة وكلاء متخصصون. <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: '#FFD86B', fontWeight: 400 }}>&amp;</span> رئيس أركان واحد.</h2>
          </div>
          <p style={{ fontSize: 17, color: '#FFF4DD', maxWidth: 380, lineHeight: 1.7, margin: 0 }}>
            الوكلاء خبراء مجال — وليسوا روبوتات محادثة. يحضّرون العمل، يُظهرون منطقهم، وينتظرون موافقتك. أنت تبقى المسؤول.
          </p>
        </div>
        <div className="rmh-agents-grid">
          {agents.map(a => (
            <article key={a.name} style={{
              background: '#FFF4DD', borderRadius: 18, padding: 22,
              display: 'flex', flexDirection: 'column', minHeight: 280, color: '#1B3210',
            }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: a.mood, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22, marginBottom: 16 }}>{a.emoji}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B83D1F', letterSpacing: '0.06em', marginBottom: 4 }}>وكيل {a.role}</div>
              <h3 style={{ fontSize: 24, fontWeight: 500, margin: '0 0 8px', letterSpacing: '-0.02em', color: '#1B3210' }}>{a.name}</h3>
              <p style={{ fontSize: 13, lineHeight: 1.7, color: '#4A4D45', margin: 0, flex: 1 }}>{a.desc}</p>
              <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid rgba(27,50,16,0.10)' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', color: '#2E5119' }}>{a.stat}</div>
                <div style={{ fontSize: 10, color: '#6B6F65', fontFamily: 'var(--font-mono)', letterSpacing: '0.04em', marginTop: 2 }}>{a.statL}</div>
              </div>
            </article>
          ))}
        </div>
        <div style={{ marginTop: 36, display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
          <a href="/ar/ai" style={{ color: '#FFF4DD', textDecoration: 'none', fontSize: 14, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 6, borderBottom: '1.5px solid #FFF4DD', paddingBottom: 6, paddingTop: 6, minHeight: 36 }}>
            ← شاهد كيف يعمل الوكلاء
          </a>
          <span style={{ fontSize: 12, color: '#FFF4DD', opacity: 0.95 }}>· كل خطوة موثّقة. كل قرار قرارك.</span>
        </div>
      </div>
    </section>
  );
};

const HomeGCC = () => null;

// ----------------- 3. Three product modules -----------------
const HomeModules = () => {
  const cards = [
    {
      eyebrow: 'الرواتب', title: 'شغّل الرواتب بدقة برج المراقبة.',
      desc: 'حساب الصافي، الخصومات النظامية، الصرف بعدة عملات، والمطابقة — كله في دورة واحدة، مع سجل تدقيق لكل صف.',
      bullets: ['متعدد الكيانات والعملات', 'ضرائب نظامية وتأمينات اجتماعية', 'سجل تدقيق لكل صف ولكل دورة'],
      href: '/ar/global-workforce-management', accent: '#2E5119', visual: 'payroll',
    },
    {
      eyebrow: 'EOR', title: 'وظّف في أي مكان يوجد فيه مرشحك.',
      desc: 'EOR في أكثر من 150 دولة. عرض ممتثل، رواتب، ومزايا — بدون فتح كيان قانوني.',
      bullets: ['عروض ممتثلة في دقائق', 'مزايا محلية + نظامية', 'عقد واحد، فاتورة واحدة'],
      href: '/ar/global-workforce-management', accent: '#2E8C7D', visual: 'eor',
    },
    {
      eyebrow: 'HRMS', title: 'نظام موارد بشرية كل العمليات احتاجته.',
      desc: 'دليل الموظفين، الإجازات، تتبع الوقت، الأصول، المصاريف، المستندات، الأداء، الدعم — كل وحدة يديرها وكيل AI خاص بها.',
      bullets: ['موظفون، وقت، أصول، مستندات', 'خدمة ذاتية في كل عملية', 'وكيل AI لكل وحدة'],
      href: '/ar/hrms', accent: '#5A9233', visual: 'hrms',
    },
  ];
  return (
    <section style={{ background: '#FAFAF7', padding: 'clamp(72px, 10vw, 120px) 0' }}>
      <style>{`
        .rmh-modules-head { margin-bottom:56px; max-width:720px; }
        .rmh-modules-h2 { font-size: clamp(34px, 5vw, 64px); line-height:1.2; letter-spacing:-0.02em; margin:0; font-weight:500; }
        .rmh-modules-list { display:flex; flex-direction:column; gap:24px; }
        .rmh-module-card { background:#FFFFFF; border:1px solid #E3E8DD; border-radius:24px; overflow:hidden; display:grid; box-shadow:0 1px 0 rgba(46,81,25,0.04); }
        .rmh-module-card.left { grid-template-columns: 1fr 1.1fr; }
        .rmh-module-card.right { grid-template-columns: 1.1fr 1fr; }
        .rmh-module-copy { padding: clamp(32px, 4vw, 52px) clamp(28px, 4vw, 48px); display:flex; flex-direction:column; justify-content:center; }
        .rmh-module-visual { background:#F6F7F2; display:flex; align-items:center; justify-content:center; padding: clamp(24px, 4vw, 40px); }
        @media (max-width: 860px) {
          .rmh-module-card.left, .rmh-module-card.right { grid-template-columns: 1fr; }
          .rmh-module-visual { order: 2 !important; }
          .rmh-module-copy { order: 1 !important; }
        }
      `}</style>
      <div style={{ maxWidth: 'var(--max-w-wide)', margin: '0 auto', padding: '0 clamp(16px, 4vw, 40px)' }}>
        <div className="rmh-modules-head">
          <Eyebrow>المنتجات</Eyebrow>
          <h2 className="rmh-modules-h2">ثلاثة منتجات رئيسية. <Amp /> تتحدث جميعها معاً.</h2>
        </div>
        <div className="rmh-modules-list">
          {cards.map((c, i) => (
            <article key={c.eyebrow} className={`rmh-module-card ${i % 2 === 0 ? 'left' : 'right'}`}>
              <div className="rmh-module-copy" style={{ order: i % 2 === 0 ? 0 : 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
                  <span style={{ width: 8, height: 8, borderRadius: 999, background: c.accent }}></span>
                  <Eyebrow color={c.accent}>{c.eyebrow}</Eyebrow>
                </div>
                <h3 style={{ fontSize: 'clamp(28px, 3.8vw, 44px)', lineHeight: 1.3, letterSpacing: '-0.02em', margin: 0, fontWeight: 500, maxWidth: 520 }}>{c.title}</h3>
                <p style={{ fontSize: 17, color: '#4A4D45', lineHeight: 1.7, margin: '20px 0 24px', maxWidth: 480 }}>{c.desc}</p>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {c.bullets.map(b => (
                    <li key={b} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: '#353833' }}>
                      <i data-lucide="check" style={{ width: 14, height: 14, color: c.accent, flexShrink: 0 }}></i>{b}
                    </li>
                  ))}
                </ul>
                <a href={c.href} style={{ marginTop: 32, alignSelf: 'flex-start', color: c.accent, textDecoration: 'none', fontSize: 14, fontWeight: 500, borderBottom: `1px solid ${c.accent}`, paddingBottom: 6, paddingTop: 6, whiteSpace: 'nowrap', minHeight: 36, display: 'inline-flex', alignItems: 'center' }}>
                  ← اعرف المزيد عن {c.eyebrow}
                </a>
              </div>
              <div className="rmh-module-visual" style={{ order: i % 2 === 0 ? 1 : 0, borderRight: i % 2 === 0 ? '1px solid #E3E8DD' : 'none', borderLeft: i % 2 === 0 ? 'none' : '1px solid #E3E8DD' }}>
                <ModuleVisual kind={c.visual} accent={c.accent} />
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const ModuleVisual = ({ kind, accent }) => {
  if (kind === 'payroll') {
    return (
      <div style={{ width: '100%', maxWidth: 480, background: '#fff', border: '1px solid #E3E8DD', borderRadius: 14, padding: 22, boxShadow: '0 12px 30px rgba(46,81,25,0.10)' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#6B6F65', letterSpacing: '0.06em', marginBottom: 10 }}>دورة · أبريل 2026</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 18 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 34, fontWeight: 500, letterSpacing: '-0.02em', direction: 'ltr' }}>$1.24M</span>
          <span style={{ fontSize: 12, color: '#5A9233' }}>+8%</span>
        </div>
        <div style={{ height: 8, background: '#F6F7F2', borderRadius: 999, overflow: 'hidden', marginBottom: 8 }}>
          <div style={{ width: '92%', height: '100%', background: `linear-gradient(90deg, ${accent}, #5A9233)` }}></div>
        </div>
        <div style={{ fontSize: 11, color: '#6B6F65', marginBottom: 16 }}>11 من 12 كيان تمت مطابقتها</div>
        {[
          { l: 'FR · Acme Paris',     v: '342k', s: 'مدفوع' },
          { l: 'US · Acme New York',  v: '218k', s: 'بانتظار' },
          { l: 'BR · Acme São Paulo', v: '94k',  s: 'مدفوع' },
        ].map(r => (
          <div key={r.l} style={{ display: 'flex', justifyContent: 'space-between', padding: '7px 0', borderTop: '1px solid #F2F3F1', fontSize: 12 }}>
            <span style={{ direction: 'ltr' }}>{r.l}</span>
            <span style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <span style={{ fontFamily: 'var(--font-mono)' }}>{r.v}</span>
              <span style={{ fontSize: 10, padding: '1px 7px', borderRadius: 6, background: r.s === 'مدفوع' ? '#E2F1D2' : '#FDE9B7', color: r.s === 'مدفوع' ? '#2E5119' : '#8A5800' }}>{r.s}</span>
            </span>
          </div>
        ))}
      </div>
    );
  }
  if (kind === 'eor') {
    return (
      <div style={{ width: '100%', maxWidth: 480, background: '#fff', border: '1px solid #E3E8DD', borderRadius: 14, padding: 24, boxShadow: '0 12px 30px rgba(46,81,25,0.10)' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#6B6F65', letterSpacing: '0.06em', marginBottom: 14 }}>موظف جديد · مسودة</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
          <div style={{ width: 44, height: 44, borderRadius: 999, background: '#2E8C7D', color: '#E2F1D2', fontWeight: 600, fontSize: 14, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>LS</div>
          <div>
            <div style={{ fontWeight: 500, fontSize: 15, direction: 'ltr' }}>Liam Sullivan</div>
            <div style={{ fontSize: 12, color: '#6B6F65', whiteSpace: 'nowrap' }}>مهندس أول · 🇮🇪 دبلن · EOR</div>
          </div>
        </div>
        {[
          { l: 'الراتب',         v: 'EUR 6,200/mo' },
          { l: 'تاريخ المباشرة', v: '15 مايو 2026' },
          { l: 'العقد',          v: 'محلي أيرلندي + EOR' },
          { l: 'المزايا',        v: 'نظامية + تأمين صحي خاص' },
        ].map((r) => (
          <div key={r.l} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderTop: '1px solid #F2F3F1', fontSize: 12 }}>
            <span style={{ color: '#6B6F65' }}>{r.l}</span>
            <span style={{ fontFamily: 'var(--font-mono)' }}>{r.v}</span>
          </div>
        ))}
        <div style={{ marginTop: 16, padding: '10px 12px', background: '#E0F2EE', border: '1px solid #B6E0D7', borderRadius: 10, fontSize: 12, color: '#15554B', display: 'flex', alignItems: 'center', gap: 8 }}>
          <span>✨</span> Hira صاغ عرضاً ممتثلاً. <span style={{ marginRight: 'auto', fontWeight: 600 }}>راجع ←</span>
        </div>
      </div>
    );
  }
  return (
    <div style={{ width: '100%', maxWidth: 480, background: '#fff', border: '1px solid #E3E8DD', borderRadius: 14, padding: 22, boxShadow: '0 12px 30px rgba(46,81,25,0.10)' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#6B6F65', letterSpacing: '0.06em' }}>HRMS · اليوم</div>
        <span style={{ fontSize: 10, padding: '2px 8px', borderRadius: 999, background: '#E2F1D2', color: '#2E5119', fontFamily: 'var(--font-mono)' }}>على المسار</span>
      </div>
      {[
        { l: 'طلبات إجازة',           v: '4 للاعتماد',     s: 'وكيل الإجازات · مفحوصة مسبقاً وفق السياسة' },
        { l: 'لابتوبات للشحن',        v: '2 يوم الاثنين',  s: 'وكيل الأصول · مطلوبة ومتتبَّعة' },
        { l: 'مستندات تنتهي قريباً', v: '5 خلال 30 يوم', s: 'وكيل المستندات · تجديد تلقائي مُعدّ' },
        { l: 'تذاكر دعم مفتوحة',     v: '12 نشطة',        s: 'وكيل الدعم · 94% خدمة ذاتية' },
      ].map((r) => (
        <div key={r.l} style={{ padding: '10px 0', borderTop: '1px solid #F2F3F1' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 3 }}>
            <span>{r.l}</span>
            <span style={{ fontFamily: 'var(--font-mono)', color: '#2E5119' }}>{r.v}</span>
          </div>
          <div style={{ fontSize: 10, color: '#6B6F65' }}>{r.s}</div>
        </div>
      ))}
    </div>
  );
};

// ----------------- 4. Integrations -----------------
const HomeIntegrationsSecurity = () => {
  const integrations = [
    { name: 'Slack',            slug: 'slack' },
    { name: 'Microsoft 365',    slug: 'microsoft365' },
    { name: 'Google Workspace', slug: 'googleworkspace' },
    { name: 'NetSuite',         slug: 'oracle' },
    { name: 'QuickBooks',       slug: 'intuitquickbooks' },
    { name: 'Xero',             slug: 'xero' },
    { name: 'BambooHR',         slug: 'bamboohr' },
    { name: 'Workday',          slug: 'workday' },
    { name: 'Greenhouse',       slug: 'greenhouse' },
    { name: 'Notion',           slug: 'notion' },
    { name: 'Okta',             slug: 'okta' },
    { name: 'Linear',           slug: 'linear' },
  ];
  return (
    <section style={{ background: '#FAFAF7', padding: 'clamp(72px, 10vw, 120px) 0', borderTop: '1px solid #E3E8DD' }}>
      <style>{`
        .rmh-int-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; }
        @media (max-width: 720px) { .rmh-int-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 460px) { .rmh-int-grid { grid-template-columns: 1fr 1fr; } }
        .rmh-int-h3 { font-size: clamp(28px, 4vw, 44px); line-height:1.3; letter-spacing:-0.02em; margin: 0 0 16px; font-weight: 500; }
      `}</style>
      <div style={{ maxWidth: 'var(--max-w-wide)', margin: '0 auto', padding: '0 clamp(16px, 4vw, 40px)' }}>
        <Eyebrow>التكاملات</Eyebrow>
        <h3 className="rmh-int-h3">تتكامل بسلاسة مع الأدوات التي تستخدمها.</h3>
        <p style={{ fontSize: 16, color: '#4A4D45', lineHeight: 1.7, margin: '0 0 28px', maxWidth: 620 }}>
          مزامنة ثنائية الاتجاه مع المالية وHRIS وATS والهوية والمحادثة. بالإضافة إلى REST API نظيف لكل ما هو غير ذلك.
        </p>
        <div className="rmh-int-grid">
          {integrations.map(i => <LogoTile key={i.name} name={i.name} slug={i.slug} />)}
        </div>
      </div>
    </section>
  );
};

const HomeTestimonial = () => null;

// ----------------- 5. Pricing teaser -----------------
const HomePricingTeaser = () => {
  const tiers = [
    { name: 'متعاقد', from: '$19',        unit: 'لكل متعاقد / شهرياً', desc: 'ادفع للمتعاقدين حول العالم بأكثر من 100 عملة — مستندات ممتثلة، فواتير تلقائية، نماذج ضريبية.', tags: ['متعدد العملات', 'فواتير تلقائية', 'نماذج ضريبية'] },
    { name: 'الرواتب', from: '$29',       unit: 'لكل موظف / شهرياً',   desc: 'شغّل الرواتب داخل كياناتك الخاصة — Payla يصيغ كل دورة ويرصد الاستثناءات.',                     tags: ['متعدد الكيانات', 'الإجمالي إلى الصافي', 'مزامنة GL'] },
    { name: 'EOR',     from: '$199',      unit: 'لكل موظف / شهرياً',   desc: 'وظّف في أكثر من 150 دولة بدون كيان قانوني — عقود محلية، مزايا، ونظامية.',                       tags: ['مزايا محلية', 'نظامية', 'نقل ملكية فكرية'], featured: true, badge: 'الأكثر شيوعاً' },
    { name: 'مخصّص',   from: 'تواصل معنا', unit: 'حجم كبير ومؤسسات',   desc: 'تنفيذ متعدد الكيانات، عمليات مخصصة، نجاح عملاء مخصّص، صديق للمشتريات.',                          tags: ['SSO/SCIM', 'API', 'خدمة كاملة'] },
  ];
  return (
    <section style={{ background: '#FAFAF7', padding: '0 0 clamp(72px, 10vw, 120px)' }}>
      <style>{`
        .rmh-price-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: 16px; gap:32px; flex-wrap:wrap; }
        .rmh-price-h2 { font-size: clamp(30px, 4.6vw, 56px); line-height:1.2; letter-spacing:-0.02em; margin:0; font-weight:500; }
        .rmh-price-banner { background:#E2F1D2; border:1px solid #CDE8B0; border-radius:18px; padding: 20px 24px; margin: 24px 0 36px; font-size: clamp(14px, 1.2vw, 17px); line-height:1.7; color:#1B3210; }
        .rmh-price-banner strong { color:#2E5119; }
        .rmh-price-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
        @media (max-width: 1100px) { .rmh-price-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 560px)  { .rmh-price-grid { grid-template-columns: 1fr; } }
      `}</style>
      <div style={{ maxWidth: 'var(--max-w-wide)', margin: '0 auto', padding: '0 clamp(16px, 4vw, 40px)' }}>
        <div className="rmh-price-head">
          <div>
            <Eyebrow>الأسعار</Eyebrow>
            <h2 className="rmh-price-h2">منصة واحدة. <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: '#2E5119', fontWeight: 400 }}>ادفع فقط مقابل من توظفه.</span></h2>
          </div>
          <a href="/ar/pricing" style={{ color: '#2E5119', textDecoration: 'none', fontSize: 14, fontWeight: 500, borderBottom: '1px solid #2E5119', paddingBottom: 6, paddingTop: 6, display: 'inline-flex', alignItems: 'center', minHeight: 36 }}>
            ← اعرف الأسعار كاملة
          </a>
        </div>
        <p style={{ fontSize: 17, color: '#4A4D45', lineHeight: 1.7, margin: 0, maxWidth: 720 }}>
          أربع طرق لتوظيف الناس — متعاقدون، رواتب، EOR، أو مخصّص. كل خطة بسعر للشخص الواحد شهرياً. لا رسوم إعداد، لا حد أدنى، ووكلاء AI وHRIS مشمولون في كل خطة.
        </p>
        <div className="rmh-price-banner">
          🎁 <strong>مجاناً لأقل من 100 موظف</strong> <em style={{ fontStyle: 'italic', fontWeight: 400 }}>(عرض لفترة محدودة)</em>. خطة الموظفين المباشرين، HRIS كامل، كل وكلاء AI — بدون بطاقة.
        </div>
        <div className="rmh-price-grid">
          {tiers.map(t => (
            <article key={t.name} style={{
              position: 'relative',
              background: t.featured ? '#2E5119' : '#FFFFFF',
              color: t.featured ? '#FAFAF7' : '#111210',
              border: t.featured ? 'none' : '1px solid #E3E8DD',
              borderRadius: 18, padding: 24,
              display: 'flex', flexDirection: 'column',
              boxShadow: t.featured ? '0 18px 40px rgba(46,81,25,0.28)' : 'none',
            }}>
              {t.badge && (
                <span style={{ position: 'absolute', top: -10, right: 24, background: '#F26B4A', color: '#FFF4DD', fontFamily: 'var(--font-mono)', fontSize: 10, padding: '4px 10px', borderRadius: 999, letterSpacing: '0.06em' }}>{t.badge}</span>
              )}
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: t.featured ? '#A4CC7C' : '#2E5119', letterSpacing: '0.08em', marginBottom: 10 }}>{t.name}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                {t.from.startsWith('$') && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: t.featured ? 'rgba(255,255,255,0.75)' : '#6B6F65' }}>من</span>}
                <span style={{ fontFamily: 'var(--font-display)', fontSize: t.from.startsWith('$') ? 38 : 24, fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.2, direction: t.from.startsWith('$') ? 'ltr' : 'rtl' }}>{t.from}</span>
              </div>
              <div style={{ fontSize: 11.5, color: t.featured ? 'rgba(255,255,255,0.75)' : '#6B6F65', marginTop: 4, marginBottom: 12 }}>{t.unit}</div>
              <p style={{ fontSize: 13, lineHeight: 1.7, color: t.featured ? 'rgba(255,255,255,0.88)' : '#4A4D45', margin: '0 0 14px' }}>{t.desc}</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginTop: 'auto' }}>
                {t.tags.map(tg => (
                  <span key={tg} style={{ fontSize: 10, fontFamily: 'var(--font-mono)', padding: '3px 7px', background: t.featured ? 'rgba(255,255,255,0.14)' : '#F6F7F2', border: t.featured ? '1px solid rgba(255,255,255,0.22)' : '1px solid #E3E8DD', borderRadius: 5, color: t.featured ? '#E2F1D2' : '#4A4D45' }}>{tg}</span>
                ))}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// ----------------- Launch offer banner -----------------
const HomeLaunchOffer = () => (
  <section style={{ background: '#FAFAF7', padding: 'clamp(48px, 7vw, 88px) 0 clamp(24px, 4vw, 48px)' }}>
    <div style={{ maxWidth: 'var(--max-w-wide)', margin: '0 auto', padding: '0 clamp(16px, 4vw, 40px)' }}>
      <div style={{ position: 'relative', overflow: 'hidden', background: 'linear-gradient(120deg, #2E5119 0%, #15554B 60%, #2E8C7D 100%)', color: '#FAFAF7', borderRadius: 24, padding: 'clamp(28px, 4vw, 44px)' }}>
        <span aria-hidden="true" style={{ position: 'absolute', left: -60, bottom: -200, fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 540, color: 'rgba(255,255,255,0.06)', lineHeight: 1, pointerEvents: 'none', userSelect: 'none' }}>&amp;</span>
        <style>{`
          .rmh-launch-grid { display:grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap:32px; align-items:center; position:relative; }
          @media (max-width: 760px) { .rmh-launch-grid { grid-template-columns: 1fr !important; gap: 24px !important; } }
        `}</style>
        <div className="rmh-launch-grid">
          <div className="rmh-launch-grid-col">
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 16, flexWrap: 'wrap' }}>
              <span style={{ background: '#F26B4A', color: '#FFF4DD', fontFamily: 'var(--font-mono)', fontSize: 10, padding: '4px 10px', borderRadius: 999, letterSpacing: '0.08em', fontWeight: 600 }}>عرض إطلاق حصري</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#FFD86B', letterSpacing: '0.04em' }}>⏳ ينتهي قريباً</span>
            </div>
            <h2 style={{ fontSize: 'clamp(28px, 3.8vw, 46px)', lineHeight: 1.3, letterSpacing: '-0.02em', margin: 0, fontWeight: 500, fontFamily: 'var(--font-display)', color: '#FFFFFF' }}>
              مجاناً لأول 30 موظفاً.<br />
              <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: '#FFFFFF', fontWeight: 400 }}>HRMS كامل &amp; كل وكيل.</span>
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: '#E2F1D2', margin: '16px 0 0', maxWidth: 540 }}>
              شغّل فريقك على Remote& بدون تكلفة حتى الموظف الـ30 — HRMS كامل، جميع وكلاء AI الـ11، وكل التكاملات. تبقى مجاناً حتى تنمو. بدون بطاقة، بدون التزام.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 24, flexWrap: 'wrap' }}>
              <a href="/ar/book-a-demo" style={{ background: '#FAFAF7', color: '#2E5119', textDecoration: 'none', padding: '12px 22px', borderRadius: 14, fontWeight: 500, fontSize: 15 }}>احصل على عرض الإطلاق</a>
            </div>
          </div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              { t: '11 وحدة كاملة', d: 'موظفون، وقت، أصول، مستندات، أداء، دعم، تقارير — لا شيء مغلق.' },
              { t: '11 وكيل AI',    d: 'كل وكيل عمليات نشط من اليوم الأول.' },
              { t: 'كل تكامل',      d: 'Slack وTeams وGoogle وMicrosoft والمحاسبة — بدون رسوم إضافية.' },
              { t: 'بدون بطاقة. بدون قيود.', d: 'ادفع فقط بعد أن تتجاوز 30 موظفاً.' },
            ].map(b => (
              <li key={b.t} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.14)', borderRadius: 12, padding: '12px 14px' }}>
                <i data-lucide="check" style={{ width: 16, height: 16, color: '#FFD86B', flexShrink: 0, marginTop: 2 }}></i>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, color: '#FFFFFF', marginBottom: 2 }}>{b.t}</div>
                  <div style={{ fontSize: 12.5, lineHeight: 1.7, color: '#E2F1D2', opacity: 0.9 }}>{b.d}</div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { HomePillars, HomeAgents, HomeGCC, HomeModules, HomeTestimonial, HomeIntegrationsSecurity, HomePricingTeaser, HomeLaunchOffer });
